Saltar al contenido principal

PARA DISEÑADORES Y DESARROLLADORES

Anota una UI — /kit-annotate

Describir qué botón, qué trocito de espaciado, qué tono de azul es tedioso. /kit-annotate te deja señalar en lugar de describir. Haz clic en un elemento de tu app React en ejecución, déjale una nota justo encima, y Claude recoge un registro estructurado y arregla el código.

Es opcional y solo para desarrollo — vive en tu app de desarrollo, nunca en producción.

Cómo se siente​

Estás ejecutando tu app en local. Enciendes la barra de anotaciones, y ahora cada elemento es clicable. Haces clic en un encabezado y escribes:

"Demasiado pegado a la imagen — dale algo de aire."

Claude recibe más que tus palabras. Recibe un registro estructurado: qué componente clicaste, dónde se ubica en el árbol de componentes, el archivo fuente del que proviene y tu comentario. A partir de ahí encuentra el código y hace el cambio — sin búsquedas, sin "¿en qué archivo está eso?".

Los modos​

/kit-annotate tiene unos cuantos modos:

  • setup — conecta la barra de anotaciones a tu app React (una sola vez).
  • watch — manos libres: Claude recoge las notas a medida que las añades, en tiempo real.
  • review — repasa las notas que has dejado.
  • status — muestra qué está conectado y qué queda pendiente.
/kit-annotate setup     # first time
/kit-annotate watch     # then just point and comment

Límites honestos​

Para que sepas qué esperar:

  • Solo desarrollo. Corre en tu app de desarrollo, nunca en producción.
  • Sin valores en vivo. Captura el componente y su fuente, no los valores de prop o de estado en vivo en ese momento.
  • Los React Server Components degradan con elegancia. Para un RSC, recurre a un selector simple en lugar de a un registro completo de componente.

Dentro de esos límites, convierte "revisar escribiendo párrafos" en "revisar señalando".

Cómo funciona por dentro
  • El motor de captura. /kit-annotate adopta el paquete de código disponible agentation como motor de captura — instalado como dependencia de desarrollo propia de tu proyecto (no incrustada). scripts/annotate-setup.sh lo instala, registra el servidor MCP agentation-mcp para Claude, escribe la regla react-annotate y anota .annotate en kit.config.json. --dry-run muestra una vista previa.
  • Detección de framework. scripts/lib/react-detect.sh detecta tu framework en orden de especificidad — Next.js → React Router v7 (modo framework) → Vite → React genérico — porque una comprobación plana del tipo "¿está Vite presente?" no es fiable (las apps de Next/RR a menudo arrastran Vite para los tests). Esta cobertura supera de hecho la propia configuración de Agentation, que solo cubre Next.
  • El bucle. La regla react-annotate le enseña al equipo el bucle anotar → localizar → arreglar → resolver, incluido el camino manos libres agentation_watch_annotations, los límites honestos de arriba y un resumen opcional en MemPalace al cerrar.
  • Snippet del provider. La configuración imprime el snippet del provider solo para desarrollo, destinado al punto de entrada de tu app, en lugar de editar la fuente a ciegas; /kit-annotate aplica esa edición con tu confirmación. Si no se detecta ninguna app React, sale limpiamente.

A dónde ir después​