PhuongDeveloper/landingpage

Padrões de composição React que escalam. Use ao refatorar componentes com proliferação de props booleanas, construir bibliotecas de componentes flexíveis ou projetar APIs reutilizáveis. Dispara em tarefas envolvendo componentes compostos, render props, provedores de contexto ou arquitetura de componentes. Inclui mudanças na API do React 19.

O que é landingpage?

Este skill, 'React Composition Patterns', fornece um guia abrangente de padrões de composição para React, visando criar componentes flexíveis e de fácil manutenção. Ele aborda a proliferação de props booleanas, incentivando o uso de componentes compostos, elevação de estado e composição interna. As regras são organizadas por prioridade e categoria, abrangendo desde arquitetura de componentes e gerenciamento de estado até padrões de implementação e as novas APIs do React 19. O skill é acionado ao refatorar componentes com muitas props booleanas, construir bibliotecas reutilizáveis, projetar APIs flexíveis ou revisar arquiteturas que envolvem componentes compostos e provedores de contexto. Ele suporta ambientes que utilizam React 18 ou 19, com seções específicas para as novidades da versão 19, como `use()` em vez de `useContext()`. Cada regra é detalhada em arquivos individuais com exemplos de código incorreto e correto, facilitando a aplicação prática dos padrões.

Funciona com~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/PhuongDeveloper/landingpage/tree/HEAD/.agents/skills/vercel-composition-patterns

Documentação

Padrões de Composição React

Padrões de composição para construir componentes React flexíveis e de fácil manutenção. Evite a proliferação de props booleanas usando componentes compostos, elevação de estado e composição interna. Esses padrões tornam as bases de código mais fáceis de trabalhar, tanto para humanos quanto para agentes de IA, à medida que escalam.

Quando Aplicar

Consulte estas diretrizes quando:

Refatorar componentes com muitas props booleanas
Construir bibliotecas de componentes reutilizáveis
Projetar APIs de componentes flexíveis
Revisar arquitetura de componentes
Trabalhar com componentes compostos ou provedores de contexto

Categorias de Regras por Prioridade

Prioridade	Categoria	Impacto	Prefixo
1	Arquitetura de Componentes	ALTO	`architecture-`
2	Gerenciamento de Estado	MÉDIO	`state-`
3	Padrões de Implementação	MÉDIO	`patterns-`
4	APIs React 19	MÉDIO	`react19-`

Referência Rápida

1. Arquitetura de Componentes (ALTO)

architecture-avoid-boolean-props - Não adicione props booleanas para personalizar comportamento; use composição
architecture-compound-components - Estruture componentes complexos com contexto compartilhado

2. Gerenciamento de Estado (MÉDIO)

state-decouple-implementation - O Provider é o único lugar que sabe como o estado é gerenciado
state-context-interface - Defina interface genérica com estado, ações, metadados para injeção de dependência
state-lift-state - Mova o estado para componentes provider para acesso entre irmãos

3. Padrões de Implementação (MÉDIO)

patterns-explicit-variants - Crie componentes de variantes explícitas em vez de modos booleanos
patterns-children-over-render-props - Use children para composição em vez de props renderX

4. APIs React 19 (MÉDIO)

⚠️ Apenas React 19+. Pule esta seção se estiver usando React 18 ou anterior.

react19-no-forwardref - Não use forwardRef; use use() em vez de useContext()

Como Usar

Leia arquivos de regras individuais para explicações detalhadas e exemplos de código:

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

Cada arquivo de regra contém:

Breve explicação de por que é importante
Exemplo de código incorreto com explicação
Exemplo de código correto com explicação
Contexto adicional e referências

Documento Compilado Completo

Para o guia completo com todas as regras expandidas: AGENTS.md