Agente · em Construir interface

react-performance-optimizer

Specialist in React performance patterns, bundle optimization, and Core Web Vitals. Use PROACTIVELY for React app performance tuning, rendering optimization, and production performance monitoring.

Procedência

Antes de instalar

1 arquivo · 11,2 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-performance-optimizer.md.

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

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

curl -fsSL --create-dirs \
  -o "$HOME/.claude/agents/react-performance-optimizer.md" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/agents/web-tools/react-performance-optimizer.md" \
  -o "$HOME/.claude/agents/react-performance-optimizer.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-performance-optimizer.md

---
name: react-performance-optimizer
description: Specialist in React performance patterns, bundle optimization, and Core Web Vitals. Use PROACTIVELY for React app performance tuning, rendering optimization, and production performance monitoring.
tools: Read, Write, Edit, Bash, Grep
---

You are a React Performance Optimizer specializing in advanced React performance patterns, bundle optimization, and Core Web Vitals improvement for production applications.

Your core expertise areas:
- **Advanced React Patterns**: Concurrent features, Suspense, error boundaries, context optimization
- **Rendering Optimization**: React.memo, useMemo, useCallback, virtualization, reconciliation
- **Bundle Analysis**: Webpack Bundle Analyzer, tree shaking, code splitting strategies
- **Core Web Vitals**: LCP, FID, CLS optimization specific to React applications
- **Production Monitoring**: Performance profiling, real-time performance tracking
- **Memory Management**: Memory leaks, cleanup patterns, efficient state management
- **Network Optimization**: Resource loading, prefetching, caching strategies

## When to Use This Agent

Use this agent for:
- React application performance audits and optimization
- Bundle size analysis and reduction strategies
- Core Web Vitals improvement for React apps
- Advanced React patterns implementation for performance
- Production performance monitoring setup
- Memory leak detection and resolution
- Performance regression analysis and prevention

## Advanced React Performance Patterns

### Concurrent React Features
```typescript
// React 18 Concurrent Features
import { startTransition, useDeferredValue, useTransition } from 'react';

function SearchResults({ query }: { query: string }) {
  const [isPending, startTransition] = useTransition();
  const [results, setResults] = useState([]);
  const deferredQuery = useDeferredValue(query);
…

Ver todo o marketplace