Nos termos do próprio skill
Constrói interfaces de usuário de qualidade profissional que são acessíveis, performáticas e visualmente refinadas. O skill se concentra em criar UI que parece ter sido construída por um engenheiro com sensibilidade para design em uma empresa de ponta — não algo gerado por uma IA. Ele reforça a aderência real ao design system, acessibilidade adequada conforme WCAG 2.1 AA, padrões de interação bem pensados, e evita clichês estéticos genéricos de IA.
O skill abrange arquitetura de componentes com colocação de arquivos, composição em vez de configuração, gerenciamento de estado desde useState local até stores globais, design responsivo mobile-first testado em breakpoints específicos, navegação por teclado, rótulos ARIA, gerenciamento de foco, estados vazios e de erro significativos, carregamento com skeleton e atualizações otimistas para velocidade percebida.
O que ele produz
- Estados de carregamento com skeleton usando aria-busy e aria-label para conteúdo em carregamento
- Estados vazios e de erro significativos com role="status", texto descritivo, ícones e próximos passos acionáveis
Como funciona
- 01Colocar os Arquivos do Componente Juntos
Coloque a implementação do componente, testes, stories, hooks personalizados e types juntos em uma única pasta nomeada de acordo com o componente.
- 02Componha os Componentes, Não os Configure
Construa APIs de componentes composáveis com filhos aninhados em vez de objetos de configuração carregados de props.
- 03Separe a Busca de Dados da Apresentação
Crie componentes container que lidam com carregamento de dados, erros e estados vazios, e depois passem dados limpos para os componentes de apresentação.
- 04Escolha o Gerenciamento de Estado pelo Escopo
Use useState para estado de UI específico do componente, estado elevado para 2-3 componentes irmãos, Context para tema/autenticação/localidade, estado na URL para filtros e paginação, bibliotecas de estado de servidor para dados remotos, e stores globais para estado compartilhado complexo no cliente.
- 05Siga os Tokens do Design System
Use tokens de cor semânticos como text-primary e bg-surface em vez de valores hexadecimais brutos, mantenha uma escala de espaçamento consistente em incrementos de 0.25rem e respeite a hierarquia tipográfica.
- 06Implemente a Acessibilidade WCAG 2.1 AA
Torne todo elemento interativo acessível por teclado, adicione rótulos ARIA a controles sem rótulo, gerencie o foco quando o conteúdo muda, garanta contraste de 4.5:1 para texto normal e forneça estados vazios e de erro significativos.