vercel-composition-patterns

Visão geral da skill vercel-composition-patterns

vercel-composition-patterns é uma skill de arquitetura React para escolher composição em vez de APIs de componente carregadas de props. Ela é ideal para engenheiros de frontend, autores de design systems e tarefas de refatoração assistida por IA em que o trabalho real é reduzir a proliferação de props booleanas, esclarecer limites entre componentes e tornar APIs reutilizáveis mais fáceis de expandir sem quebrar quem já as consome.

O principal valor da skill vercel-composition-patterns é apoiar a decisão: ela ajuda você a decidir quando usar compound components, estado levantado, variants explícitas, composição via children ou APIs específicas do React 19, em vez de forçar tudo por meio de um único componente altamente configurável.

Melhor encaixe para design de componentes de frontend

Use vercel-composition-patterns for Frontend Development quando você estiver:

• refatorando um componente com booleans demais ou flags de modo demais
• construindo um UI kit reutilizável ou uma biblioteca de componentes de produto
• revisando se a API de um componente está rígida demais ou “mágica” demais
• movendo estado compartilhado de UI para um provider ou para uma estrutura de contexto
• atualizando código para mudanças do React 19, como evitar forwardRef

O que a torna útil na prática

Essa skill é opinativa de um jeito útil para agentes: ela prioriza primeiro as regras de arquitetura, depois o estado e, por fim, os padrões de implementação. Essa ordem importa quando você precisa de uma solução que escale, e não apenas de um remendo local.

Quando vale a pena instalar

Instale vercel-composition-patterns se você quer uma orientação mais próxima de uma rubrica de arquitetura do que de um prompt genérico de React. Pule essa skill se você só precisa de um snippet isolado de componente, sem preocupação com design de API, reutilização ou manutenção de longo prazo.

Como usar a skill vercel-composition-patterns

Instale a skill e confirme o conjunto de regras

Use o fluxo vercel-composition-patterns install do gerenciador de skills padrão do diretório e depois verifique se o caminho do repositório é skills/composition-patterns. Essa skill não tem script de instalação; o valor está nos arquivos de regra e na ordem deles, não em código gerado.

Comece pela regra de decisão, não pela implementação

O uso mais eficaz de vercel-composition-patterns usage é apresentar ao modelo primeiro o problema do componente, e não a forma de código desejada. Exemplo de entrada:

• “Refatore este componente Composer com isThread, isDMThread e isEditing para uma API baseada em composição.”
• “Crie uma API de compound component para um painel de configurações que compartilha estado de seleção entre subcomponentes.”
• “Revise este componente de biblioteca de UI e sugira se ele deve virar variants explícitos ou compound components.”

Leia os arquivos que controlam a qualidade da saída

Para um bom vercel-composition-patterns guide, inspecione estes arquivos primeiro:

• SKILL.md para entender a intenção geral e as orientações de quando aplicar
• AGENTS.md para ver a hierarquia compilada de regras e os padrões preferidos
• rules/_sections.md para entender a prioridade das categorias
• rules/architecture-avoid-boolean-props.md
• rules/architecture-compound-components.md
• rules/react19-no-forwardref.md

Dê contexto que muda a escolha de arquitetura

Boas entradas incluem:

• formato atual de props e estado
• se consumidores precisam de customização ou apenas de alguns modos fixos
• quais subpartes precisam compartilhar estado
• se React 19 está no escopo
• se compatibilidade retroativa importa

Entrada fraca: “Melhore este componente.”
Entrada mais forte: “Este componente tem 6 props booleanas, 3 modos e um estado de submit compartilhado. Proponha uma API de compound component que mantenha o uso público simples e mova as ramificações internas para contexto.”

FAQ da skill vercel-composition-patterns

vercel-composition-patterns é só para codebases grandes?

Não. Ela é mais valiosa em sistemas de componentes maiores ou reutilizáveis, mas também ajuda em componentes menores quando a API já começa a ficar difícil de entender. O sinal não é só o tamanho; é se o componente está começando a codificar comportamento por meio de props, e não por estrutura.

Em que isso é diferente de um prompt normal de React?

Um prompt comum pode gerar um componente plausível. vercel-composition-patterns leva o modelo a justificar o formato da API, priorizar regras de arquitetura e evitar regressões comuns, como a proliferação de props booleanas ou o uso excessivo de render props.

É adequada para iniciantes?

Sim, se o objetivo é aprender bons limites entre componentes. Ela é menos amigável para iniciantes se você quer uma solução rápida para copiar e colar, sem explicação de tradeoffs. A skill funciona melhor quando você está disposto a comparar designs antes de codar.

Quando não devo usá-la?

Não use vercel-composition-patterns para tarefas rápidas de estilo, componentes triviais de uso único ou casos em que a API já está fechada e não pode mudar. Ela é mais forte quando o risco principal é uma abstração ruim, não quando a necessidade principal é só velocidade de implementação.

Como melhorar a skill vercel-composition-patterns

Forneça a forma atual da API

O maior salto de qualidade vem de mostrar a assinatura atual do componente, especialmente booleans, props de variant, callbacks e estado compartilhado. A skill só consegue recomendar uma composição melhor se puder ver o que está sendo superconfigurado.

Declare a experiência desejada para quem consome

Diga ao modelo como você quer que o componente seja sentido de fora:

• “Quem consome deve montar a UI a partir de subcomponentes.”
• “Só três variants devem ser públicos.”
• “O estado interno deve ficar escondido atrás de um provider.”

Isso melhora vercel-composition-patterns usage porque o melhor padrão depende da API pública pretendida, e não só da refatoração interna.

Peça recomendação de padrão antes do código

Um fluxo forte é: peça a escolha de arquitetura e, depois, a implementação. Por exemplo:

1. “Isso deve ser compound components, variants explícitos ou composição via children?”
2. “Agora reescreva usando o padrão escolhido.”

Essa abordagem em duas etapas reduz geração precoce de código e torna a vercel-composition-patterns skill mais confiável.

Fique atento aos modos de falha comuns

Os principais modos de falha são:

• trocar booleans por props mágicas igualmente opacas
• transformar todo componente em compound component mesmo quando uma API por variants é mais simples
• mover estado para contexto sem esclarecer a interface de state/actions/meta
• usar forwardRef em código sensível ao React 19

Se a primeira saída parecer abstrata demais, restrinja o pedido com limitações: versão alvo do React, limites de compatibilidade e se a API pública precisa permanecer estável.