# 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.