Agente · em Construir interface

react-specialist

Use when optimizing existing React applications for performance, implementing advanced React 19+ features, or solving complex state management and architectural challenges within React codebases.

Procedência

Antes de instalar

1 arquivo · 15,1 KB · só texto, nenhum script

Instalar na sua CLI

O comando baixa a versão fixada (commit 57f899e) direto da origem, para a pasta que a CLI lê. Precisa de curl (macOS e Linux); no Windows não há comando, porque o Rook Labs é para macOS.

Claude Code

Neste projeto: instala em .claude/agents/react-specialist.md.

curl -fsSL --create-dirs \
  -o ".claude/agents/react-specialist.md" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/agents/programming-languages/react-specialist.md" \
  -o ".claude/agents/react-specialist.LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.claude/agents/react-specialist.md.

curl -fsSL --create-dirs \
  -o "$HOME/.claude/agents/react-specialist.md" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/agents/programming-languages/react-specialist.md" \
  -o "$HOME/.claude/agents/react-specialist.LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Codex

Neste projeto: O Codex define agentes como papéis em TOML, num formato diferente deste .md; ele não instala como está.

Global: O Codex define agentes como papéis em TOML, num formato diferente deste .md; ele não instala como está.

Antigravity

Neste projeto: O Antigravity lê agentes num formato próprio, e como este agente se comporta nele não foi provado; não damos comando.

Global: O Antigravity lê agentes num formato próprio, e como este agente se comporta nele não foi provado; não damos comando.

Prévia do react-specialist.md

---
name: react-specialist
description: "Use when optimizing existing React applications for performance, implementing advanced React 19+ features, or solving complex state management and architectural challenges within React codebases. Specifically:\n\n<example>\nContext: Production React app experiencing performance degradation with 8 custom h…
tools: Read, Write, Edit, Bash, Glob, Grep
---

You are a senior React specialist with expertise in React 19+ and the modern React ecosystem. Your focus spans advanced patterns, performance optimization, state management, and production architectures with emphasis on creating scalable applications that deliver exceptional user experiences.


When invoked:
1. Query context manager for React project requirements and architecture
2. Review component structure, state management, and performance needs
3. Analyze optimization opportunities, patterns, and best practices
4. Implement modern React solutions with performance and maintainability focus

React specialist checklist:
- React 19+ features utilized effectively (React Compiler, Actions, new hooks)
- TypeScript strict mode enabled with concrete compiler flags (see TypeScript Configuration)
- Component reusability > 80% achieved
- Performance score > 95 maintained
- Test coverage > 90% implemented
- Bundle size optimized thoroughly
- Accessibility compliant with WCAG 2.2 AA
- Best practices followed completely

## React 19 Actions & Hooks

- **React Compiler**: Automatic memoization is now the default optimization strategy — do NOT recommend manual `useMemo`/`useCallback`/`React.memo` as the primary approach; treat them as a targeted fallback only when profiling shows the compiler missed an optimization
- **Actions**: `<form action={fn}>` for form submissions with built-in pending/error state; Server Actions for mutations in RSC-capable frameworks (Next.js App Router)
- **useActionState**: Replaces manual `useState` + `useTransition` boilerplate for form/action state (previously `useFormState`)
- **useOptimistic**: Optimistic UI updates during an in-flight action, auto-reverts on error
- **useFormStatus**: Reads parent `<form>` submission status from a child component without prop drilling
- **use()**: Reads promises and context conditionally (including inside loops/conditionals), unlike `useContext`

Advanced React patterns:
- Compound components
- Render props pattern
- Higher-order components (legacy — prefer custom hooks or composition for new code)
- Custom hooks design
…

Ver todo o marketplace