Communitygithub.com

ahmadrashad1/video

Produce un video de grabación de pantalla narrado al estilo Loom (MP4, 1080p, con la voz clonada del usuario mediante Fish Audio, subtítulos, sin cámara web) que demuestre un sitio web o aplicación web. Úsalo cuando el usuario ejecute /loom:video o pida grabar, demostrar o hacer un video tutorial o walkthrough de una aplicación.

¿Qué es video?

Esta habilidad para agentes de IA (como Claude Code, Cursor o Codex) permite crear videos de demostración narrados de sitios web o aplicaciones web, similares a Loom, en formato MP4 1080p. Utiliza la voz clonada del propio usuario mediante Fish Audio, e incluye subtítulos integrados. El agente planifica y ejecuta todo el flujo de trabajo: inspecciona la aplicación real para obtener selectores precisos, escribe un plan detallado de escenas (4 a 10), lo narra con la voz clonada, graba la pantalla, renderiza el video y verifica que cada escena sea correcta. Es útil para desarrolladores que necesitan crear tutoriales, demos o walkthroughs rápidos y profesionales sin editar manualmente. El agente sigue reglas estrictas de seguridad: no graba planes no aprobados, no permite acciones destructivas sin confirmación explícita, oculta secretos y datos sensibles, y nunca genera contenido falso. El video final se guarda en ~/Videos/loom/<slug>/ y puede reproducirse con cualquier reproductor de video estándar.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ahmadrashad1/loom-skill/tree/HEAD/skills/video

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Video de demostración narrado

Tú planificas y diriges la demostración. El comando loom (en tu PATH mientras este plugin esté habilitado) maneja la narración, grabación, renderizado y verificación. Ejecútalo como loom … desde cualquier directorio. Los videos se guardan en la carpeta de grabaciones que muestra loom status (por defecto ~/Videos/loom/<slug>/). A continuación, <rec> se refiere a esa carpeta.

Solicitud: $ARGUMENTS

Si la solicitud es el slug de una grabación existente (loom status las lista), reanúdala desde su primer paso incompleto. Un plan no aprobado aún necesita aprobación.

Reglas no negociables

  1. Nunca grabes un plan no aprobado. Escribe el plan con "approved": false, muéstralo al usuario y establécelo como true solo después de que lo apruebe (o que haya dicho explícitamente que continúes sin revisión).
  2. Las acciones destructivas o irreversibles (eliminar, comprar, desplegar, enviar, pagar, cambiar configuraciones de producción) deben marcarse con "destructive": true y necesitan la aprobación explícita del usuario para este video antes de pasar --allow-destructive.
  3. No hay secretos en plan.json ni en la narración. Las contraseñas/tokens escritos usan "secret_env": "VAR"; las claves, correos, tokens, números de cuenta que aparecen en pantalla van en "redact" (selectores CSS, difuminados durante todo el video). Nunca imprimas el contenido de ~/.config/loom/*.env.
  4. No hay metraje fabricado. Cada escena debe ser interpretada en tiempo real por el grabador. Si una escena falla, corrige el plan y vuelve a grabar. Nunca falsifiques un resultado ni presentes un video cuya verificación con loom verify haya fallado como terminado.
  5. Sin cámara web, solo voz propia. La narración usa el modelo de voz de Fish Audio del propio usuario. Nunca uses ni sugieras la voz de otra persona sin su permiso.

Flujo de trabajo

0. Configuración de voz (primera ejecución)

Ejecuta loom status. Si dice VOZ NO CONFIGURADA, configura la voz antes de cualquier otra cosa; sigue la habilidad /loom:setup (${CLAUDE_PLUGIN_ROOT}/skills/setup/SKILL.md). Pide al usuario su propio ID de modelo de voz de Fish Audio; nunca inventes ni reutilices uno. Si no quiere configurarlo ahora, puedes continuar con --provider espeak como voz robótica de vista previa, dejando claro que no es su voz.

A. Comprender

Determina: qué app/URL, el resultado que el espectador debe lograr, la audiencia y si se requiere inicio de sesión. Si algo no está claro, haz una pregunta concisa; de lo contrario, procede con suposiciones sensatas y menciónalas.

B. Inspeccionar la aplicación real

loom inspect <url> --out <rec>/<slug>/inspect

Lee la captura de pantalla (<rec>/<slug>/inspect/page.png) y usa los selectores impresos. Inspecciona cada página que visitará la demo (sigue el flujo) para que los selectores sean reales, no adivinados. Prefiere #id, [data-testid=…], luego role=button[name="…"], luego text=…. Los archivos locales funcionan con URLs file:///….

C. Escribir el plan

Crea <rec>/<slug>/plan.json siguiendo ${CLAUDE_PLUGIN_ROOT}/skills/video/reference/plan-schema.md. Pautas:

  • 4–10 escenas; abre con una escena de título, termina con una escena de resumen breve.
  • Narración: en primera persona, conversacional, como un colega grabando un Loom. 1–3 oraciones por escena (≈ 6–20 s). Describe lo que el espectador ve mientras sucede; no leas selectores ni URLs carácter por carácter.
  • Las acciones se ejecutan mientras se reproduce la narración de esa escena; deben ser lo suficientemente cortas para caber (≈ 2.6 palabras por segundo de voz). Divide flujos largos en más escenas.
  • Añade expect en cada escena que cambie de estado, para detectar fallos.
  • loom validate <slug> hasta que pase.

Presenta el plan al usuario como una tabla (escena · qué sucede en pantalla · narración) más cualquier acción destructiva, secretos necesarios y la duración estimada. Detente y espera la aprobación. Tras la aprobación, establece "approved": true.

D. Narrar

loom voice <slug>: un WAV por escena con la voz clonada (en caché; solo se regeneran las escenas cambiadas). Verifica que las duraciones tengan sentido.

E. Grabar

loom record <slug> (añade --allow-destructive solo según la regla 2). Si falla, lee el error y <rec>/<slug>/raw/failure-<scene>.png, corrige selectores/esperas en el plan y vuelve a ejecutar. Vuelve a inspeccionar páginas si es necesario.

F. Producir

loom render <slug> (--captions burn si el usuario quiere subtítulos incrustados; por defecto es una pista de subtítulos incrustada más subtitles/captions.srt).

G. Verificar (siempre)

loom verify <slug>, luego mira cada miniatura en <rec>/<slug>/scenes/*.jpg con la herramienta de Lectura: ¿se ve el estado de pantalla esperado? ¿hay algo sensible sin difuminar? ¿hay páginas de error o banners de cookies cubriendo contenido? Si un aviso dice que las acciones superaron la narración, considera dividir esa escena. Corrige y rehaz los pasos necesarios hasta que pase.

H. Informar

Proporciona la ruta a <rec>/<slug>/final_video.mp4, su duración, la lista de escenas y cualquier advertencia (por ejemplo, voz de vista previa utilizada). Menciona que la vista previa integrada de VS Code reproduce MP4 sin sonido; usa un reproductor de video normal. Atajo para los pasos D–G una vez que el plan está aprobado: loom run <slug>.

Solución de problemas

  • loom: command not found → el bin/ del plugin no está en PATH; ejecuta ${CLAUDE_PLUGIN_ROOT}/bin/loom.
  • loom needs uv → dile al usuario que instale uv (el comando se muestra).
  • Elemento no encontrado → vuelve a ejecutar loom inspect en esa página; añade wait_for.
  • Banner de cookies/consentimiento → añade un click en su botón de aceptar en la primera escena.
  • Inicio de sesión → type con secret_env; pide al usuario que exporte la variable.
  • Fish Audio 401 → clave API incorrecta. 402 → no hay crédito API para ese modelo; sugiere añadir crédito o cambiar la configuración del modelo del plugin a s2.1-pro-free.
  • Demos de escritorio (no navegador) → --recorder obs (OBS debe estar ejecutándose con WebSocket habilitado y una escena de captura de pantalla). Esta ruta es experimental.

Skills relacionados