¿Qué hace esta skill?

La Grabador de Demos UI Skill automatiza la grabación de vídeos de demostración de aplicaciones web mediante Playwright, inyectando un cursor SVG visible, una barra de subtítulos y aplicando un ritmo natural con pausas lógicas para crear tutoriales y presentaciones profesionales. El proceso se divide en tres fases obligatorias: descubrimiento de elementos interactivos, ensayo de selectores y grabación final con interacciones humanas simuladas.

Descubrimiento de UI
Navega por las páginas objetivo y extrae elementos interactivos reales (input, select, button) usando page.evaluate sin asumir el tipo de campo.
Ensayo de Selectores
Ejecuta el script con el flag --rehearse y verifica que todos los selectores resuelven correctamente con la función ensureVisible.
Grabación con Cursor y Subtítulos
Inyecta un cursor SVG que se mueve de forma natural y una barra de subtítulos semitransparente que explica cada paso del flujo.
Material para Onboarding
Genera contenido audiovisual reproducible para documentación, onboarding de usuarios y presentaciones a stakeholders.

Ejemplos de uso

🎬 Demo de login y dashboard
Graba un vídeo de demostración del flujo de login y dashboard de mi app en localhost:3000.
📚 Tutorial de registro
Crea un tutorial automático mostrando cómo registrar un nuevo usuario en la aplicación paso a paso.
📊 Presentación a stakeholders
Genera una grabación de pantalla del panel de administración para una presentación a stakeholders.
🎭 Ensayo previo
Ensaya los selectores de la página de registro con --rehearse antes de grabar el vídeo final.

Características

Inyección de cursor SVG Cursor de flecha visible que se mueve de forma natural sin teletransportes, con sombra y transiciones suaves.
Subtítulos automáticos Barra semitransparente en la parte inferior que explica cada paso del flujo con transición de opacidad.
Descubrimiento de elementos Extrae selectores reales de la UI con page.evaluate en lugar de asumir el tipo de campo de cada elemento.
Simulación humana Funciones moveAndClick y typeSlowly reproducen clics visibles y escritura carácter a carácter con pausas lógicas.
Salida en .webm 1280x720 Vídeo en formato .webm con resolución 1280x720 guardado en una ruta predecible para fácil localización.

Preguntas frecuentes

Sí. La skill usa Playwright con Chromium para la grabación. Instálalo con npm install playwright y npx playwright install chromium.
En formato .webm con resolución 1280x720. El archivo se copia a una ruta establecida con un nombre predecible para fácil localización.
Sí. Edita el script principal para adaptar el flujo, los selectores y los subtítulos a tu aplicación concreta.
Sí, siempre que sea accesible desde el navegador y los selectores resuelvan correctamente. Usa la fase de ensayo con --rehearse para verificar antes de grabar.

Skills relacionadas

Mas skills de la misma categoria:

Grabador de Demos UI — Vídeos de Demostración con Claude AI

¿Prefieres escuchar el contenido? Genera la narración de audio con un clic.