Agent WranglersStyles and components
Keep every colour, size and control in one place. Design tokens hold the values, a component library holds the controls, and a catalogue shows every state.
- Required 2
- Recommended 3
Required
Take every style value from design tokens
RequiredTake every colour, space, font size, radius, shadow, duration and layer order from a named design token. Never write a raw value in a component.
Build each control once
RequiredBuild each control once in a shared component library, and use it on every screen. Never style a raw button, input, select or table on a page.
Recommended
Name tokens by purpose
RecommendedGive components tokens named by purpose, such as
color-dangerorspace-section, which point to a base palette. Components never use the base palette directly.Change components through variants
RecommendedChange how a component looks only through its own options, such as
variant="danger"orsize="small". Never override its classes from the outside.Show every component state in a catalogue
RecommendedGive every shared component a catalogue entry for each state it can show, such as default, loading, empty, error and disabled.
For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/styles-and-components.