Vercel Composition Patterns skill

O que ela faz

É um guia da Vercel com 8 regras de composição em React, que o Claude consulta ao criar ou refatorar componentes. A principal: não acrescentar prop booleana, como isThread ou isEditing, pra mudar o comportamento, porque cada uma dobra os estados possíveis. No lugar, ele cria variantes explícitas, como ChannelComposer e ThreadComposer.

As outras regras tratam de componentes compostos que dividem um contexto (Composer.Header, Composer.Input), estado guardado num provider que só ele sabe como funciona, contexto com estado, ações e metadados, e children no lugar de props renderX. No React 19, dispensa o forwardRef e usa use() no lugar de useContext().

Cada regra tem um arquivo com o porquê, um exemplo de código errado e um certo. O AGENTS.md junta todas num documento só.

Nas palavras de quem fez

Quando usar

• Um componente tem tantas props true/false que ninguém sabe o que combina com o quê
• Montar uma biblioteca de componentes reaproveitáveis pro seu app
• Revisar a arquitetura dos componentes antes de o projeto crescer
• Tirar o forwardRef dos componentes num projeto que já está no React 19

Depois de instalar, é só pedir assim

• Refatora esse componente Composer que tem cinco props booleanas usando os padrões de composição
• Revisa a pasta components e me diz onde dá pra trocar prop booleana por variante explícita
• Transforma esse modal em componente composto, com Modal.Header, Modal.Body e Modal.Footer

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

• Gen Agent Trust HubPassou
• SocketPassou
• SnykPassou

Perguntas