machbuilds/interactive-html

¿Qué hace interactive-html?

Comenta páginas HTML locales — resalta, pregunta o anota; un agente de IA aplica el cambio y la página se recarga con un recorrido. Usa tus propias páginas o haz que la habilidad genere una para comentar. Funciona con Claude Code, Cursor o cualquier CLI de agente.

¿Cómo funciona?

1. El agente (Claude Code, Cursor, etc.) inicia un servidor local que sirve la página HTML.
2. El usuario abre la página en el navegador y activa el modo de comentarios.
3. El usuario selecciona un elemento o área, escribe un comentario o pregunta.
4. El agente recibe el comentario, aplica el cambio (modifica el HTML, CSS o JS) y recarga la página.
5. La página ahora incluye un recorrido visual que destaca los cambios realizados.

Requisitos

• Node.js (v14 o superior)
• Un agente de IA compatible (Claude Code, Cursor, o cualquier CLI de agente)

Instalación

npx machbuilds/interactive-html

Uso básico

Con una página existente

# En el directorio de tu proyecto
npx interactive-html --serve ./mi-pagina.html

Generar una página de ejemplo

npx interactive-html --new

Comandos de agente

Cuando estés en el agente (ej. Claude Code), usa:

/interactive-html

O bien, invoca directamente:

node interact.js

Variables de entorno

• PORT: Puerto para el servidor local (por defecto 3000)
• HTML_FILE: Ruta al archivo HTML a servir

Ejemplo de flujo

1. Inicia el servidor:

   npx interactive-html --serve ejemplo.html
   

2. Abre http://localhost:3000 en el navegador.
3. En el agente, escribe: "Cambia el color de fondo del encabezado a azul y añade un borde."
4. El agente modifica el HTML, recarga la página y muestra un recorrido.

Personalización

Puedes modificar el estilo del recorrido editando el archivo style.css generado en el directorio del proyecto.

Solución de problemas

• Si la página no se recarga automáticamente, verifica que el agente tenga permisos de escritura en el directorio.
• Asegúrate de que el puerto 3000 esté libre o cambia usando PORT=3001.

Licencia

MIT