Sites e telas (frontend)48 mil · #3967

react-patterns

Ajuda seu agente a aplicar os melhores padrões em projetos React. Ele usa Hooks, composição e TypeScript para criar código eficiente e de fácil manutenção.

O que ela faz

Este é um guia sobre as melhores práticas e padrões modernos para construir aplicações com React. Ele ensina como organizar seu código, gerenciar dados e otimizar o desempenho.

Quando usar

✓Ao iniciar um novo projeto React.
✓Ao refatorar um código React existente.
✓Ao aprender sobre como escrever código React mais eficiente.

Exemplo do que pedir para a IA

“Me ensine sobre os padrões de componentes no React.”

Quer saber mais? Abra as seções abaixo.

Como usar

O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.

Link da skill

https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/react-patterns/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/react-patterns/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.

Ver no GitHub ↗Arquivo bruto

Como funciona

A IA consulta um guia de padrões do React, explicando conceitos como tipos de componentes, regras de design, uso de 'hooks' e gerenciamento de estado.

Instalação

Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.

No terminal (Claude Code, Codex, Cursor), na pasta do projeto:

npx skills add sickn33/agentic-awesome-skills --skill react-patterns

Ou baixe só o arquivo:

curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/react-patterns/SKILL.md -o SKILL.md

Conteúdo técnico (SKILL.md)

Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.

Padrões do React

Princípios para construir aplicações React prontas para produção.

1. Princípios de Design de Componentes

Tipos de Componentes

Tipo	Uso	Estado
Servidor	Busca de dados, estático	Nenhum
Cliente	Interatividade	useState, effects
Apresentacional	Exibição da UI	Apenas Props
Container	Lógica/estado	Estado pesado

Regras de Design

Uma responsabilidade por componente
Props para baixo, eventos para cima
Composição sobre herança
Prefira componentes pequenos e focados

2. Padrões de Hooks

Quando Extrair Hooks

Padrão	Extrair Quando
useLocalStorage	Mesma lógica de armazenamento necessária
useDebounce	Múltiplos valores com debounce
useFetch	Padrões de fetch repetidos
useForm	Estado de formulário complexo

Regras de Hooks

Hooks apenas no nível superior
Mesma ordem a cada renderização
Hooks customizados começam com "use"
Limpar effects ao desmontar

3. Seleção de Gerenciamento de Estado

Complexidade	Solução
Simples	useState, useReducer
Local compartilhado	Context
Estado do servidor	React Query, SWR
Global complexo	Zustand, Redux Toolkit

Posicionamento do Estado

Escopo	Onde
Componente único	useState
Pai-filho	Elevar estado
Subárvore	Context
Aplicativo inteiro	Store global

4. Padrões do React 19

Novos Hooks

Hook	Propósito
useActionState	Estado de submissão de formulário
useOptimistic	Atualizações de UI otimistas
use	Ler recursos em renderização

Benefícios do Compilador

Memoização automática
Menos useMemo/useCallback manual
Foco em componentes puros

5. Padrões de Composição

Componentes Compostos

Pai fornece contexto
Filhos consomem contexto
Composição flexível baseada em slots
Exemplo: Tabs, Accordion, Dropdown

Render Props vs Hooks

Caso de Uso	Preferir
Lógica reutilizável	Hook customizado
Flexibilidade de renderização	Render props
Cruzado	Componente de ordem superior

6. Princípios de Performance

Quando Otimizar

Sinal	Ação
Renderizações lentas	Perfile primeiro
Listas grandes	Virtualize
Cálculos caros	useMemo
Callbacks estáveis	useCallback

Ordem de Otimização

Verifique se está realmente lento
Perfile com DevTools
Identifique o gargalo
Aplique correção direcionada

7. Tratamento de Erros

Uso de Error Boundary

Escopo	Posicionamento
Aplicativo inteiro	Nível raiz
Funcionalidade	Nível de rota/funcionalidade
Componente	Ao redor do componente arriscado

Recuperação de Erros

Mostrar UI de fallback
Registrar erro
Oferecer opção de tentar novamente
Preservar dados do usuário

8. Padrões de TypeScript

Tipagem de Props

Padrão	Uso
Interface	Props de componentes
Type	Uniões, complexos
Genérico	Componentes reutilizáveis

Tipos Comuns

Necessidade	Tipo
Children	ReactNode
Manipulador de evento	MouseEventHandler
Ref	RefObject<Element>

9. Princípios de Teste

Nível	Foco
Unitário	Funções puras, hooks
Integração	Comportamento do componente
E2E	Fluxos do usuário

Prioridades de Teste

Comportamento visível ao usuário
Casos extremos
Estados de erro
Acessibilidade

10. Anti-Padrões

❌ Não fazer	✅ Fazer
Prop drilling profundo	Usar context
Componentes gigantes	Dividir em menores
useEffect para tudo	Componentes de servidor
Otimização prematura	Perfile primeiro
Índice como chave	ID único estável

11. Estrutura de Arquivos

Use esta imagem como referência para uma melhor estrutura de arquivos do projeto

Lembre-se: React é sobre composição. Construa pequeno, combine com atenção.

Quando Usar

Esta habilidade é aplicável para executar o fluxo de trabalho ou as ações descritas na visão geral.

Exemplo

Solicitação do usuário:

Use @react-patterns para esta tarefa: Padrões e princípios modernos do React.

Limitações

Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
Não trate a saída como substituta para validação específica do ambiente, testes ou revisão de especialistas.
Pare e peça esclarecimentos se as entradas necessárias, permissões, limites de segurança ou critérios de sucesso estiverem ausentes.

Perguntas frequentes

O que são 'hooks' no React?

'Hooks' são funções especiais que permitem usar recursos do React, como estado e ciclo de vida, em componentes funcionais.

O que significa 'composição sobre herança'?

Significa que é melhor construir componentes combinando outros componentes menores do que criar componentes que herdam de outros.

Como posso melhorar o desempenho do meu React?

O guia sugere otimizar apenas quando necessário, usar ferramentas de perfilamento e aplicar correções específicas para gargalos identificados.

Detalhes

Descrição original do autor

Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.

repo: sickn33/agentic-awesome-skills

Popularidade

Estrelas no GitHub: 48 mil
Posição no ranking: #3967
Licença: MIT
Atualizada em: 15/10/2026

Essa skill é útil?

Entre para votar.

Comentários

Mais skills deste repositório

Agentes48 mil

00-andruia-consultant

Ajuda seu agente a iniciar ou melhorar projetos de IA. Ele analisa código, sugere ferramentas e cria planos de ação em espanhol.

sickn33/agentic-awesome-skills

Diversos48 mil

007

Faz seu agente realizar auditorias de segurança e modelagem de ameaças. É útil para proteger projetos contra ataques e vulnerabilidades.

sickn33/agentic-awesome-skills

Agentes48 mil

10-andruia-skill-smith

Ajuda seu agente a criar ou melhorar ferramentas de IA. Ele define como as ferramentas funcionam, escreve a documentação e valida a estrutura.

sickn33/agentic-awesome-skills

Diversos48 mil

20-andruia-niche-intelligence

Faz seu agente criar um resumo sobre um setor específico. É útil para entender o contexto, regras, padrões de uso e riscos de um projeto, usando fontes confiáveis.

sickn33/agentic-awesome-skills

Skills parecidas

Sites e telas (frontend)280 mil

angular-developer

Ajuda seu agente a criar código Angular e a dar conselhos sobre a estrutura do projeto. É útil para iniciar novos projetos, criar partes do código ou melhorar a performance e acessibilidade.

affaan-m/ECC

Sites e telas (frontend)280 mil

frontend-a11y

Ajuda seu agente a tornar interfaces web acessíveis para todos. Ele garante que sites e apps funcionem bem com leitores de tela e navegação por teclado.

affaan-m/ECC

Sites e telas (frontend)280 mil

frontend-patterns

Faz seu agente aplicar padrões modernos no desenvolvimento frontend. Ele otimiza performance, gerencia estado e segue boas práticas em React e Next.js.

affaan-m/ECC