# Performance

> Diagnostica el rendimiento de React en tiempo de ejecución con trazas de React Doctor, marcado de renders en vivo, Long Animation Frames y evidencia de renders por componente. Se invoca como `/performance`.

Fuente: https://skillsagentes.com/skills/millionco/react-doctor/performance
Markdown: https://skillsagentes.com/skills/millionco/react-doctor/performance.md

Repositorio: https://github.com/millionco/react-doctor
Autor: millionco
Licencia: NOASSERTION
Actualizado: hace 15 días
Coste de contexto: 70 tok instalada, 1.2k tok al activarse, 1.2k tok con todos los archivos del bundle
Bundle: 1 archivo, 5 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add millionco/react-doctor --skill performance --agent claude-code
# Cursor
npx -y skills add millionco/react-doctor --skill performance --agent cursor
# Codex
npx -y skills add millionco/react-doctor --skill performance --agent codex
# Gemini CLI
npx -y skills add millionco/react-doctor --skill performance --agent gemini
# Windsurf
npx -y skills add millionco/react-doctor --skill performance --agent windsurf
# Cline
npx -y skills add millionco/react-doctor --skill performance --agent cline
```

## Qué hace

- Diagnostica el rendimiento de React en tiempo de ejecución midiendo una interacción reproducible y conectando el trabajo del navegador con los renders de React.
- Antes de grabar exige definir URL objetivo, acciones exactas, resultado esperado y si hace falta autenticación, y preferir un build de producción.
- `npx react-doctor@latest scan <url> --format json` abre un Chrome aislado y graba; para sesión autenticada, conecta por CDP con un perfil de depuración dedicado.
- Lee el informe en orden: soporte de captura, impacto en el usuario, trabajo del navegador, trabajo de React y límites de captura.
- Reporta solo conclusiones respaldadas por la traza, con una estructura fija (flujo, veredicto, evidencia, hallazgos, límites) y sin rellenar con hallazgos de lint estáticos.

## Cuándo usarla

- Se invoca como `/performance` ante una interacción lenta o renders inesperados.
- Se quiere una comparación medida de antes y después de un arreglo.

## Qué la activa

- "/performance el filtro de la tabla va lento"
- "Mide por qué se re-renderiza todo al escribir en este input"
- "Compara el rendimiento antes y después de mi cambio"

## Antes de instalar

- `react-doctor@latest scan` necesita una terminal interactiva y Chrome; para sesión autenticada, Chrome ya en marcha con depuración remota. La traza `.json.gz` se mantiene local salvo permiso explícito.
- Necesita en el PATH: npx
- makes network requests

## Archivos

- SKILL.md — 5 KB

## SKILL.md

Reproducido tal cual desde millionco/react-doctor bajo NOASSERTION. Esta sección es el documento original y está en inglés.

# Diagnose React runtime performance

Measure one reproducible interaction, connect browser work to React renders, and report only conclusions supported by the trace.

## Define the interaction

Before recording:

1. Identify the target URL
2. Write the exact actions to reproduce
3. Choose the expected result
4. Confirm whether authentication is required

Use a production build when available. Development builds add framework work that can distort render and script timings. If you must measure a development build, label that limitation in the report.

## Record the trace

Run the scan in an interactive terminal:

```bash
npx react-doctor@latest scan http://localhost:3000 --format json
```

React Doctor opens an isolated Chrome profile. Perform the planned interaction while purple outlines identify rendered components. Press Enter after the interaction settles; recordings stop automatically after five minutes.

Interactive users can omit the URL and choose a detected localhost app or enter another URL. Agents must always pass the explicit URL so automated runs never wait for input.

For an authenticated session, connect through the Chrome DevTools Protocol (CDP):

```bash
npx react-doctor@latest scan https://app.example.com \
  --cdp http://127.0.0.1:9222 \
  --format json
```

Use a dedicated debug profile for CDP because Chrome tracing is browser-wide. Sign in, close every non-blank tab, and then start the scan. React Doctor closes leftover blank tabs before tracing. Never request cookies, copy a browser profile, or close an externally managed browser.

The compressed `.json.gz` trace can contain URLs, source paths, and application behavior. Keep it local unless an upload is explicitly approved.

## Read the report

Evaluate the report in this order:

1. **Capture support**: confirm React detection, build type, React tracks, and Long Animation Frame support
2. **User impact**: inspect the worst interaction, total blocking duration, Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS)
3. **Browser work**: inspect long frames and script hotspots for event handling, JavaScript, style, layout, and paint cost
4. **React work**: inspect component render count, total self time, and maximum self time
5. **Capture limits**: read every warning, especially dropped event counts

Follow these interpretation rules:

- A high render count is evidence, not a defect. Pair it with duration and user impact
- Generated chunk names identify browser work, not the owning source component
- A slow interaction can be browser-bound even when every component render is cheap
- Repeated Event Timing records with one interaction identifier represent one interaction
- Dropped component events make hotspot totals incomplete
- Use purple labels to identify the active subtree, then use recorded timings to set severity

## Connect measurements to source

Search the repository for measured component display names and event handlers. Confirm that each candidate runs in the recorded flow before reporting it.

Open the DevTools trace when the summary cannot explain a long frame. Correlate the interaction timestamp with script tasks, style or layout work, React tracks, and paint. Do not infer causality from neighboring timestamps alone.

## Report findings

Use this structure:

```markdown
## Flow tested

tested_url, build_type, and exact_interaction

## Verdict

one_evidence_backed_paragraph

## Evidence

| Signal            |                  Measurement | Interpretation  |
| ----------------- | ---------------------------: | --------------- |
| Worst interaction |                  duration_ms | measured_cause  |
| Total blocking    |                  duration_ms | measured_scope  |
| Top component     | render_count and duration_ms | measured_impact |

## Findings

1. `path/to/component.tsx:42`: measured_problem, evidence, and smallest_fix

## Limits

capture_warnings, missing_support, or environmental_caveats
```

Do not pad the report with static lint findings. Include source findings only when runtime evidence connects them to the tested flow.

## Validate a fix

Do not edit code unless code changes are requested. After a fix:

1. Rebuild with the same mode
2. Record the same interaction at the same viewport
3. Run three before and three after samples when timing variance could change the conclusion
4. Compare medians for interaction, blocking, and component duration
5. Confirm behavior and accessibility did not regress

Reject improvements that only move work outside the recorded window or disable useful behavior.

## Dónde encaja

- Categoría: [Testing y QA](https://skillsagentes.com/categorias/testing-qa.md) — Flujos de testing unitario, de integración y end-to-end.
- Creador: [millionco](https://skillsagentes.com/creators/millionco.md) — 16 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [React Doctor](https://skillsagentes.com/skills/millionco/react-doctor/react-doctor.md): Escanea bases de código React en busca de problemas de seguridad, rendimiento, corrección y arquitectura, y da una puntuación de salud de 0 a 100. Incluye chequeo de regresión y un flujo completo de triage local con `/doctor`.
- [Run Parity](https://skillsagentes.com/skills/millionco/react-doctor/run-parity.md): Compara los diagnósticos de React Doctor de un pull request contra su base con Daytona. Se usa para correr parity, comprobar regresiones de diagnósticos en un PR o reportar diagnósticos añadidos y quitados.
- [Improve Threejs](https://skillsagentes.com/skills/millionco/react-doctor/improve-threejs.md): Audita y arregla apps de Three.js y React Three Fiber: rendimiento del frame-loop, fugas de memoria de GPU, corrección del grafo de escena y defectos visuales como z-fighting, shadow acne, espacio de color erróneo y resize roto.
- [Fuzz](https://skillsagentes.com/skills/millionco/react-doctor/fuzz.md): Somete a fuzzing las reglas de React Doctor con `@react-doctor/fuzz` para hallar crashes, lentitud, falsos positivos y diagnósticos sensibles a mutaciones. Se usa tras pasar los tests de la regla o al confirmarse un falso positivo nuevo.
- [Benchmark Fp Fn Audit](https://skillsagentes.com/skills/millionco/react-doctor/benchmark-fp-fn-audit.md): Audita React Doctor contra corpus de benchmark como ReactBench: falsos positivos y negativos confirmados, huecos de taxonomía y artefactos del verificador. Se usa al analizar logs y artefactos de trial o al pedir un segundo pase.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)