ag-otimizar-codigo

ag-otimizar-codigo — Otimizar Codigo

Spawn the ag-otimizar-codigo agent to optimize code performance with before/after measurements.

Invocation

Use the Agent tool with:

• subagent_type: ag-otimizar-codigo
• mode: bypassPermissions
• run_in_background: true
• prompt: Compose from template below + $ARGUMENTS

Prompt Template

Projeto: [CWD or user-provided path]
Area: [module or area to optimize from $ARGUMENTS]
Benchmark: [specific metric if provided, otherwise "auto-detect"]


## Output
- Metricas antes/depois: bundle size, render time, API latency, Lighthouse scores
- Relatorio de delta com melhorias documentadas
- Codigo otimizado com commits por otimizacao

Regra de ouro: "Otimizar sem medir e adivinhar."
1. Medir ANTES (bundle size, render time, API latency, Lighthouse, etc.)
2. Identificar gargalo
3. Otimizar
4. Medir DEPOIS
5. Comparar e reportar delta

Prioridade: executar medicoes via CLI (lighthouse, bundle-analyzer, curl).
Worktree isolation ativo.

Checklist explicito de otimizacao React/Next.js

Para projetos com React/Next, o agente DEVE verificar TODOS estes pontos antes de declarar otimizacao completa:

Re-renders desnecessarios

• Componentes que rerenderizam frequentemente sem mudanca de props → candidato a React.memo
• Funcoes inline em props (onClick={() => ...}) → candidato a useCallback
• Objetos/arrays inline em props (style={{...}}, data={[...]}) → candidato a useMemo ou constante
• Calculos custosos no render body → candidato a useMemo

Listas e dados grandes

• Listas com > 200 itens sem virtualizacao → adicionar react-window ou @tanstack/react-virtual
• Tabelas grandes sem pagination + virtualization → considerar @tanstack/react-table + virtual
• .map() aninhado em arrays grandes (O(n*m)) → indexar via Map/Object lookup
• Filtros/sorts no render (nao memoizados) → mover para useMemo

Imagens e media

• <img> nativo em projeto Next.js → migrar para next/image (auto lazy + responsive + format)
• Imagens sem width/height explicitos → CLS (layout shift)
• Imagens > 200KB sem compressao → otimizar via sharp ou Next.js Image Optimization
• Imagens above-the-fold sem priority → LCP ruim
• Background images sem lazy → carregar tarde
• SVGs grandes nao otimizados → SVGO + considerar React component inline