Aplicar direção de arte, UX writing e padrões de código

A skill frontend-design evita cinco padrões genéricos porque trabalha em duas passadas, o plano antes do código. O primeiro deles, o fundo creme perto de #F4F1EA com acento terracota perto de #D97757, é a cor de interface do próprio Claude. Numa tela sua, ela denuncia a origem do agente.

Ela ancora cada tela no assunto do negócio, corta o texto de preenchimento e devolve, no fim, o processo inteiro documentado, do plano de tokens à autocrítica.

O primeiro movimento da skill é ancorar no assunto. Quando o briefing não diz o que o produto é, o agente propõe um assunto concreto, o público e o trabalho principal da tela. Depois confirma com você antes de desenhar.

As escolhas visuais nascem da indústria, dos materiais e do vocabulário do negócio. Um brinquedo para meninas de oito a onze anos e um painel para analistas financeiros não podem sair parecidos. Todo o conteúdo da tela usa o material real do briefing, em vez de texto de preenchimento.

O hero (a primeira dobra da página, vista antes de rolar) abre com a coisa mais característica do mundo do assunto: manchete, imagem ou demonstração ao vivo. O número grande com rótulo pequeno, estatísticas de apoio e um acento em gradiente é o tratamento default, e só entra se for mesmo a melhor opção.

A tipografia carrega a personalidade da página. Uma família ou duas e, se duas, claramente distintas; escala definida de propósito; linha abaixo de 80 caracteres. A serifa aceita linha um pouco mais longa e pede mais entrelinha que a sem serifa.

Três tiques tipográficos denunciam página gerada: uma só palavra da manchete em itálico, negrito ou outra cor; rótulos em caixa alta; etiquetas acima de conteúdo que dispensava etiqueta.

Estrutura visual é informação. Borda, numeração, eyebrow (a etiqueta pequena acima do título), divisória e rótulo entram para codificar algo sobre o conteúdo. A numeração 01, 02, 03 só cabe quando o conteúdo é mesmo uma sequência, como um processo em etapas ou uma linha do tempo.

Movimento que ninguém pediu entra num único momento orquestrado, como a sequência de carregamento. Entrada com fade em toda seção e transição em todo cartão é o default e se lê como gerado. Movimento que responde a uma ação da pessoa é bem-vindo, porque mostra o que mudou. O texto da tela é conteúdo de design, assunto da aula seguinte.

A skill lista cinco padrões em que a tela gerada se agrupa hoje. O primeiro é o creme perto de #F4F1EA com serifa de display e terracota perto de #D97757. Esse laranja é o acento da própria interface do Claude e, num projeto seu, denuncia a origem. O segundo é o quase-preto com um único acento verde-ácido ou vermelhão.

O terceiro é o jornal de folha larga, com fios capilares, raio zero e colunas densas. O quarto é o kit de cartões SaaS: tudo em cartão igual, um raio para tudo, a mesma sombra rgba(0,0,0,.1) sob cada um e gradiente como decoração.

O quinto é o template chrome, que aparece seja qual for o assunto. Ele reúne eyebrow em caixa alta e espaçada, metadados unidos por ponto médio e o rótulo na forma PALAVRA seguida de travessão e fragmento. Completam o kit o quase-preto tingido #0B0B0B ou #111, a monoespaçada em rótulo de dado e a seta no fim do botão.

Todos os cinco são legítimos para algum briefing. A regra da skill é que o briefing vence: quando ele fixa uma direção, o agente segue ao pé da letra, inclusive se pedir um desses cinco. Quando deixa um eixo livre, essa liberdade não se gasta num default. O trabalho vem em duas passadas.

Na primeira, o agente escreve um plano compacto de tokens (os valores de design guardados com nome, como etiquetas na lata de tinta). Ele traz a cor em quatro a seis hex nomeados e a tipografia com os papéis. Traz o layout em uma frase, com wireframe em texto e alinhamento, e os princípios que tornam a página única.

A segunda passada é a revisão do plano contra o briefing. O agente pergunta se um briefing parecido daria o mesmo resultado, corrige o que parecer default e diz o que mudou e por quê. Só então escreve o código, cuidando da especificidade de seletores que se cancelam, como o da seção contra o do botão.

A autocrítica fecha o processo. A ousadia vai num lugar só, e o resto fica quieto e disciplinado. O piso de qualidade entra sem anúncio: responsivo até o celular, foco visível no teclado, movimento reduzido respeitado, contraste acessível e paleta harmônica.

O agente tira um print da tela, revisa a própria entrega e tira um elemento antes de fechar. E anota o que já tentou, para a passada seguinte começar de outro lugar.

O custo da geração é o mesmo nos dois caminhos. Num ateliê de cerâmica que vende turmas de torno, o pedido sem a skill devolve o cartão genérico. Com o plano revisado, a manchete vira aprender a centrar o barro e o botão diz o que acontece.

Peça a primeira passada só com o plano de tokens: cor em quatro a seis hex nomeados, tipografia com o papel de cada família, layout em uma frase. Revise o plano contra o briefing antes de pedir código.

Só aprove a tela depois de conferir os cinco defaults contra o resultado pronto; qualquer um que aparecer volta para o agente pelo nome.

UX writing e a regra da marca como skill com guarda

A regra de marca só passa a valer quando uma guarda automática a trava antes do registro da alteração. Escrita no CLAUDE.md e em mais nada, ela convive com o botão Submeter e o aviso Erro 500 na tela entregue.

Escrita uma vez numa skill do projeto e travada por essa guarda, a mesma regra vale para toda tela seguinte, sem depender de alguém lembrar.

A memória do projeto é o arquivo CLAUDE.md na raiz do repositório, que o agente relê antes de cada tarefa. Nele entram a stack real, os comandos que já existem e as regras que você não quer repetir.

A regra precisa descrever um estado conferível no arquivo pronto. "Escreva bom código" não muda nada na saída. "Texto secundário usa o tom seiscentos, nunca o quatrocentos" muda cada geração seguinte, porque descreve algo que você confere olhando o resultado.

A política de CSS entra na mesma memória, em três níveis. O agente aprendeu com código de dois anos atrás e não sugere recurso novo por conta própria.

O amplamente disponível entra livre: a consulta de contêiner por tamanho desde agosto de 2025 e a caixa de diálogo nativa desde setembro de 2024. O seletor :has() entrou nesse grupo em junho de 2026.

O recém-disponível entra atrás de uma verificação de suporte, com plano B que continue servindo, como a consulta de contêiner por estilo, de maio de 2026. O que fica fora do Baseline (o rótulo público de disponibilidade da plataforma) só entra quando você pede pelo nome. Entra como melhoria que degrada em silêncio onde não existe.

As palavras aparecem na tela por um motivo só: tornar a tela mais fácil de entender e usar. Elas recebem a mesma intenção e o mesmo corte que o espaçamento e a cor. A skill frontend-design manda escrever do ponto de vista de quem usa: a pessoa gerencia notificações, e configurar webhook é linguagem do sistema.

Descreva o que a coisa é ou faz, em vez de vender; voz ativa por padrão. O botão diz exatamente o que acontece, Salvar alterações em vez de Enviar, e a ação mantém o nome no fluxo inteiro, então Publicar gera o aviso Publicado.

Erro e tela vazia são momentos de direção. O erro explica o que houve e como resolver, na voz da interface, sem pedir desculpa e sem vagueza; a tela vazia convida a agir. O tom é conversado, em sentence case (só a primeira letra da frase em maiúscula), sem enchimento, e cada elemento escrito faz um trabalho só.

A forma durável dessa regra é uma skill do projeto, em .claude/skills/marca-do-negocio/SKILL.md. O cabeçalho traz name e uma description insistente, para disparar em toda tela, componente ou texto do negócio. O corpo traz os tokens, a tipografia, as proibições e as regras de copy, tudo conferível.

Escrever resolve metade, porque o agente esquece no meio de uma sessão longa. A outra metade é a guarda automática (o hook, a verificação amarrada a um evento fixo). Ela formata ao salvar e, antes de registrar a alteração, roda tipo, estilo e build, mais o script que reprova rótulo em caixa alta e seta no botão.

A skill-creator do catálogo anthropics/skills ensina a testar a skill com pedidos reais e a reescrever a descrição quando ela deixa de disparar.

Peça ao agente o retrato real do projeto, sem regra que ele não segue. Escreva a skill de marca em .claude/skills/marca-do-negocio/SKILL.md, com tokens, proibições e regras de copy conferíveis.

Ligue o hook que roda o verificador e o script da marca antes de cada registro. Force um erro de propósito, como um botão com seta no fim; se o portão deixar passar, o hook ainda não está no evento certo.

Os cinco padrões de componente e onde cada dado mora na tela

Um componente cheio de useMemo e useCallback hoje é sinal de código de dois anos atrás: o React Compiler 1.0, estável desde outubro de 2025, memoriza sozinho. Toda versão do React de 19.0.0 a 19.2.2 carrega o CVE-2025-55182, e a versão instalada é a primeira linha de qualquer revisão de componente.

A estável em 8 de setembro de 2026 é a 19.2.8, de julho de 2026, e a documentação comunica a linha pública como React 19.2.

Quase todo componente que o agente devolve segue um de cinco padrões, e quase todo dado da tela mora em um de cinco lugares. Reconhecer os dois encurta a revisão de código React pronto para aprovar ou devolver com motivo.

Um componente é a peça reutilizável da tela, como um cartão ou um campo. O primeiro padrão é o componente com props: ele recebe entradas e decide a aparência a partir delas. O segundo é a composição por children, em que o invólucro cuida de borda e espaçamento e o conteúdo entra de fora.

O terceiro é o estado local com useState, atualizado sempre a partir do valor anterior. O quarto é a lista com map, cuja key vem do identificador, nunca do índice, e que trata o caso vazio. O quinto é o campo controlado, com value vindo do estado e onChange atualizando esse estado, o que permite validar enquanto a pessoa digita.

O compilador (o passo que reescreve o código antes de ele rodar) muda o que reprovar na revisão. Junto com Activity, useEffectEvent e cacheSignal, ele entrou na versão 19.2.

Adote o eslint-plugin-react-compiler, porque ele acusa a violação de regra antes de o compilador pular o componente em silêncio.

Todo dado novo pertence a um de cinco lugares. O local mora no componente. O derivado se calcula na renderização e nunca se guarda, porque guardar cria duas versões do mesmo número. O compartilhado atravessa telas sem vir do servidor, e o de servidor vive no sistema, com a tela guardando uma cópia temporária.

Filtro, aba, ordenação e página têm o quinto lugar, o endereço da tela: com a nuqs o parâmetro se comporta como estado e o link fica compartilhável. A tabela abaixo diz qual biblioteca atende cada caso e inclui os signals (valores reativos que atualizam só quem os lê, sem redesenhar o componente inteiro).

Três peças do manual de setembro de 2026 completam a bancada. React Aria Components entra como opção direta de componente acessível sem estilo, e não só como base do shadcn/ui. Vale quando teclado e leitor de tela precisam vir prontos.

A resposta de um modelo de linguagem chega em pedaços, e a tela precisa dos padrões de streaming de interface. Renderize o texto conforme chega, mantenha o estado "gerando" visível e ofereça o botão de parar. O MSW (o interceptador de rede que devolve respostas falsas no teste) permite testar esse componente assíncrono sem a API real.

Tela com IA precisa de cinco componentes, pelos cinco padrões de Agent UX do manual. São o plano visível antes da execução, o uso de ferramentas exposto, a memória exibida, o acompanhamento multietapa e a rota clara de recuperação de erro. Cada um vira uma peça com props e estado, revisada pela mesma tabela.

Para um protótipo que precisa viajar num arquivo só, a skill web-artifacts-builder do catálogo anthropics/skills empacota React 18, Vite, Tailwind CSS 3.4.1 e shadcn/ui num único HTML. A stack é datada frente ao React 19 e ao Tailwind 4 deste curso. A própria skill avisa para evitar layout centralizado em excesso, gradiente roxo, cantos arredondados uniformes e a fonte Inter.

Numa loja de bicicletas com painel de ordens de serviço, o cartão que troca de cor pelo status é o padrão de props. A lista vem do servidor pelo TanStack Query, e o filtro por mecânico mora no endereço. Se o agente devolver seis useState sincronizados por useEffect, devolva citando a linha da tabela.

Trocar o modelo não conserta a segurança do que ele escreve. Na comparação de dois anos da Veracode, publicada em julho de 2025, modelos mais novos e maiores melhoraram sintaxe e taxa de compilação sem melhorar segurança. No mesmo relatório, o cross-site scripting foi a classe com pior desempenho, e é ela que aparece em interface que injeta conteúdo dinâmico.

Confira a versão do React no package.json e aplique o patch do CVE-2025-55182 antes de revisar qualquer componente; ligue o eslint-plugin-react-compiler no mesmo passo.

Classifique cada peça de estado pela tabela, mande o derivado para o cálculo e o filtro para a nuqs. Teste todo componente assíncrono com MSW simulando resposta lenta, erro e lista vazia, e revise à mão o trecho que injeta conteúdo na tela.