design-system
Installation
SKILL.md
Design System
O design system é o contrato visual e de interação do produto. Tokens e componentes vencem one-offs de tela. Código e Figma (se houver) devem contar a mesma história.
Consumo visual em apps: better-web-interface. Identidade e anti-genérico: frontend-design. API de componentes React: react-component-engineering. Documentação viva: storybook-docs. Mobile nativo: better-mobile-interface.
Camadas
Foundations (tokens) → Primitives → Components → Patterns → Product screens
| Camada | Exemplos | Regra |
|---|---|---|
| Foundations | cor, tipo, espaço, raio, sombra, z-index, motion | Sem UI; só tokens |
| Primitives | Button, Input, Checkbox, Icon | API mínima, altamente reutilizável |
| Components | Field, Modal, DataTable | Compõem primitives |
| Patterns | LoginForm, PageHeader, EmptyState | Receitas de produto, ainda reutilizáveis |