---
name: frontend-design
description: Implementar interfaces frontend com qualidade visual alta e aderência ao brief, IA, tokens e componentes existentes. Use quando construir telas, componentes, páginas, estados, responsivo, dark mode, motion, design system ou quando a feature de UI sair de Tasks/Execution.
---

# Frontend Design SDD

## Objetivo

Construir UI real, não mock decorativo. A implementação deve respeitar stack, componentes e tokens existentes, além de validar mobile, acessibilidade, estados e dark mode quando aplicável.

Esta skill é provider-neutral: se o provider atual não tiver tool calling ou edição direta, produza o plano de alteração, patches esperados, comandos e critérios de validação para o harness aplicar. Não dependa de modelo, browser ou MCP específicos.

## Antes de codar

1. Leia PRD, Tech Spec, design brief, IA, tasks e tokens.
2. Inspecione:
   - Componentes e props/API existentes.
   - Tokens CSS/Tailwind/theme.
   - Layouts, rotas, breakpoints e padrões de estado.
   - Dependências de UI, ícones e motion.
   - Testes e Storybook.
3. Escolha ou confirme direção estética. Declare por que ela serve ao contexto.
4. Reutilize ou componha componentes existentes antes de criar novos.

## Direções estéticas

- Functionalist: restrito, preciso, cor como informação, pouca decoração.
- Swiss: grid forte, alto contraste, tipografia objetiva, flat.
- Japanese minimalism: espaço negativo, ritmo quieto, poucos elementos.
- Brutalist: estrutura visível, contraste cru, sem polimento falso.
- Scandinavian: calor contido, legível, amigável, acessível.
- Editorial: conteúdo lidera, hierarquia tipográfica e composição.
- Playful/expressive: use só quando o produto pede energia e tolera densidade visual.

Escolha uma direção por superfície. Não misture famílias estéticas sem motivo de produto.

## Build rules

- Mobile first: comece em 375px e escale com `min-width`.
- Touch targets: mínimo 44x44px.
- Texto: corpo mínimo 16px em mobile; linha confortável; sem overflow.
- Tokens: use variáveis semânticas; não hardcode tema em componentes.
- Dark mode: se existir, preserve; se criar tokens, suporte `prefers-color-scheme` e `[data-theme]`.
- Motion: animação serve a feedback, transição ou orientação; inclua reduced motion.
- Estados: implemente loading, vazio, erro, sucesso, disabled, hover/focus e dados longos.
- Acessibilidade: contraste AA, labels, foco visível, navegação por teclado.

## Validação

- Testes ou build relevantes do projeto.
- Screenshot desktop/tablet/mobile quando houver app renderizável.
- `visual-review` antes de checkpoint/merge para superfície visual relevante.

## Regras

- Não crie componente duplicado quando um existente resolve.
- Não introduza biblioteca de UI, fonte, ícone ou motion sem evidência da stack ou aprovação.
- Não use hero/landing page para ferramenta operacional quando o usuário pediu fluxo de trabalho.
- Não aceite aparência genérica: cada escolha visual precisa responder ao domínio, usuário ou restrição.
