One system behind every Layers surface
One set of tokens, one component vocabulary, and one set of rules: the product app, the marketing site, the docs, and the UI Elle generates. Elle builds with Strata; the agent composes from the same vocabulary developers do.
Get started with an LLM
Agents are the primary consumers of this system. Working in the repo, one instruction is the whole onboarding:
/strataTell Claude to use the strata skill for any UI work. It loads the entry protocol: the read order, the composition rules, and the install policy.
Agents outside the repo start at /llms.txt, which indexes every doc as raw markdown.
Ways to use the /strata skill
The three laws
- 01One token source
All colors, radii, and type come from the shared theme files in packages/ui. Semantic tokens only; never a local palette, never a raw color utility.
- 02One component vocabulary
Every surface composes from @layers/ui and shadcn primitives. A new layout need is a new shared component, never bespoke one-off DOM.
- 03One authority for structure
Stock component structure follows the shadcn website. Extend through variants, never through custom spacing inside compounds or parallel components.
Explore
The live palette in light and dark, the radius ramp, and the 14px type scale.
ComponentsThe @layers/ui vocabulary rendered stock: buttons, forms, overlays, chat.
Elle catalogThe closed vocabulary Elle composes generated sheets from.
DocsThe doc spine: tokens, components, rules, layouts, generative UI, brand.