# Specsfy Specialist React

> Projetar, implementar e revisar interfaces React com composição, estado, efeitos, concorrência, acessibilidade, performance e testes. Use quando a tarefa envolve componentes React, hooks, context, forms ou renderização cliente; use a skill Next.js quando o framework definir fronteiras server/client.

- Skill: `promovaweb/specsfy-specialist-react-2` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add promovaweb/specsfy-specialist-react-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/promovaweb/specsfy-specialist-react-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: promovaweb (https://skillmd.com/u/promovaweb)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/promovaweb/specsfy-specialist-react-2

---


# React

## Fluxo

1. Confirmar versão, renderer, framework, convenções e estratégia de testes.
2. Modelar estados visíveis, eventos, dados remotos e ownership.
3. Projetar uma árvore de componentes com responsabilidades e props pequenas.
4. Manter estado no owner mais próximo e derivar valores durante render.
5. Usar effects apenas para sincronização com sistemas externos.
6. Implementar semântica e teclado antes do acabamento visual.
7. Testar comportamento observável e medir performance quando houver evidência.

## Padrões

- Preferir composição a componentes com dezenas de flags.
- Não copiar props para state nem usar effect para computação derivável.
- Tornar loading, empty, error, stale, optimistic e success explícitos.
- Preservar identidade com keys estáveis; nunca índice quando a ordem muda.
- Isolar context por frequência e responsabilidade para evitar acoplamento global.
- Evitar memoização sem medição e callbacks estáveis sem consumidor sensível.
- Testar pela experiência do usuário, não por detalhes de hooks.

## Validação

- Interações por teclado e leitor de tela na superfície alterada.
- Testes de estados, erros, concorrência e recuperação.
- Verificação de warnings, hydration quando aplicável e cleanup.
- Profiling ou bundle analysis somente quando a hipótese exigir.

Leia [references/standards.md](references/standards.md) para estado, effects,
composição, acessibilidade, testes e performance.