SeConectai_Web/Conhecimento/skills/design-system.md

Skill — Design System

Use esta skill quando precisar criar, organizar ou ampliar padrões visuais.

Método

1. Inventarie tokens existentes.
2. Inventarie componentes compartilhados.
3. Identifique duplicações.
4. Normalize primeiro os padrões mais repetidos.
5. Preserve API de componentes sempre que possível.
6. Documente novas variantes e estados.

Tokens semânticos

Prefira nomes como surface, foreground, primary, danger, border-muted a nomes puramente visuais como blue500 quando o projeto já usa semântica.

Estados obrigatórios de componentes interativos

• default;
• hover quando aplicável;
• focus-visible;
• active;
• disabled;
• loading quando aplicável;
• error/invalid quando aplicável.