Una skill de agente para Claude Code y Codex que convierte el movimiento generado por IA en animaciones web controladas por scroll, mouse, arrastre, toque u orientación del dispositivo.
2,6 mil197PythonMITActualizado hace 16 días
musoyangrigor/scroll-video-website-skill
Una skill para agentes que convierte videos en secuencias de fotogramas WebP optimizadas y crea sitios web con un canvas controlado mediante el desplazamiento.
- Estrellas
- 57
- Forks
- 5
- Issues abiertos
- 0
- Último commit
- hace 2 meses
¿Qué es?
Scroll Video Website es una skill portable para agentes de IA que convierte un video en una página a pantalla completa, donde desplazarse hacia adelante o hacia atrás permite recorrer sus fotogramas. Se invoca con la ruta del video; el agente lo convierte en fotogramas WebP optimizados y genera una página adaptable controlada mediante el desplazamiento.
La página generada usa un renderizador canvas que mezcla fotogramas adyacentes y los carga progresivamente para que la reproducción avance con fluidez en ambas direcciones. Mantiene la stack existente del proyecto y respeta las preferencias de movimiento reducido. De forma predeterminada, el resultado es una experiencia minimalista que solo incluye un canvas, pero se puede añadir una indicación visual, como un estilo, después de la ruta.
La skill también incluye el comando interactivo optimize para secuencias de fotogramas existentes. Analiza los recursos reales, codifica fotogramas de muestra para probar opciones y muestra el impacto estimado en el tamaño según el formato, la cantidad de fotogramas y la calidad, antes de reescribir archivos. Sigue el formato SKILL.md y se instala con npx skills add.
Funciones clave
- 01Convierte un video en una secuencia de fotogramas WebP optimizados.
- 02Permite recorrer los fotogramas con fluidez en ambas direcciones y los carga progresivamente.
- 03Renderiza un canvas adaptable a pantalla completa que mezcla fotogramas adyacentes.
- 04Respeta las preferencias de movimiento reducido y mantiene la stack existente del proyecto.
- 05Ofrece un comando interactivo optimize con estimaciones del tamaño específicas para cada archivo.
Casos de uso
- Crear una página de presentación de producto controlada por un video de demostración corto.
- Crear páginas de narración basadas en el desplazamiento a partir de una película o un clip de animación.
- Prototipar secciones de video controladas mediante el desplazamiento en un proyecto frontend existente.
- Reducir el tamaño de secuencias de fotogramas ya generadas para un sitio con desplazamiento.
Inicio rápido
- 1
Instala la skill
npx skills add musoyangrigor/scroll-video-website-skill --skill scroll-video-website - 2
Ejecuta la skill en tu agente indicando la ruta del vídeo
$scroll-video-website ./media/product-film.mp4
Antes de usarlo
- El README no especifica qué herramientas o dependencias necesita la skill para convertir el vídeo en fotogramas WebP.
- Para ejecutarla se necesita un agente compatible con Agent Skills; no es una aplicación independiente.
Temas
Preguntas frecuentes
- ¿Qué es scroll-video-website-skill?
- Una skill para agentes que convierte videos en secuencias de fotogramas WebP optimizadas y crea sitios web con un canvas controlado mediante el desplazamiento. Scroll Video Website es una skill portable para agentes de IA que convierte un video en una página a pantalla completa, donde desplazarse hacia adelante o hacia atrás permite recorrer sus fotogramas. Se invoca con la ruta del video; el agente lo convierte en fotogramas WebP optimizados y genera una página adaptable controlada mediante el desplazamiento.
- ¿scroll-video-website-skill es gratuito? ¿Qué licencia tiene?
- scroll-video-website-skill es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
- ¿scroll-video-website-skill sigue mantenido?
- Actualizado en los últimos 6 meses. El último commit de scroll-video-website-skill fue el 4 sept 2026.
- ¿Para qué puedo usar scroll-video-website-skill?
- Crear una página de presentación de producto controlada por un video de demostración corto. Crear páginas de narración basadas en el desplazamiento a partir de una película o un clip de animación. Prototipar secciones de video controladas mediante el desplazamiento en un proyecto frontend existente. Reducir el tamaño de secuencias de fotogramas ya generadas para un sitio con desplazamiento.
- ¿Cómo se instala scroll-video-website-skill?
- Instala la skill: npx skills add musoyangrigor/scroll-video-website-skill --skill scroll-video-website Ejecuta la skill en tu agente indicando la ruta del vídeo: $scroll-video-website ./media/product-film.mp4
- ¿Dónde consigo scroll-video-website-skill?
- El código fuente y las instrucciones de instalación están en GitHub: https://github.com/musoyangrigor/scroll-video-website-skill
Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.
Proyectos relacionados
Agent Skills para que los agentes de programación diseñen interfaces distintivas, con dirección de arte, fotos reales y una revisión en el navegador, en lugar de páginas genéricas de IA.
99,1 mil6,7 milJavaScriptMITActualizado ayer
Directorio seleccionado de más de 1000 Claude Skills y plugins para Claude Code, Claude.ai y agentes de programación como Codex, Cursor y Gemini CLI.
77,5 mil9,2 milPythonSin licenciaActualizado el mes pasado
Reglas de diseño y plantillas para que los agentes de IA exporten documentos a PDF, PNG y PowerPoint editable.
12 mil557HTMLMITActualizado anteayer
Una skill de diseño de interfaces para agentes de IA que explora distintas propuestas, las compara en paralelo y las refina a partir de capturas de pantalla reales.
1,8 mil98PythonMITActualizado anteayer
Un plugin de Obsidian para explorar, crear y editar skills, comandos y agentes de IA de 17 herramientas de programación, como Claude Code y Cursor.
85476TypeScriptMITActualizado hace 2 meses