Repolode
Enviar
Liamrjohnston

Liamrjohnston/remotion-motion-graphics-skill

Un conjunto de cuatro Agent Skills que enseñan a los agentes de programación con IA a crear gráficos animados de estilo televisivo con Remotion.

Ver en GitHub
Estrellas
119
Forks
9
Issues abiertos
0
Último commit
hace 3 meses

¿Qué es?

Este repositorio reúne cuatro Agent Skills para agentes de programación con IA, como Claude Code, Codex y Cursor. Las skills guían al agente para crear clips terminados de gráficos animados con Remotion, desde texto cinético y diagramas de flujos de trabajo hasta movimientos de cámara, demostraciones en terminal y tarjetas editoriales con frases destacadas. Antes de escribir código, el agente confirma el formato de salida (4:3 o 9:16) y el estilo del fondo; después, investiga los productos mencionados y sus logotipos.

Las skills abarcan cuatro áreas: una skill de control para investigar, comprobar recursos y revisar la entrega; una skill de cámara cinematográfica que guía una cámara con fotogramas clave a través de una única escena continua; una skill de inserciones de terminal para crear demostraciones CLI auténticas; y una skill de destacados de artículos para crear tarjetas de estilo informativo con trazos de resaltador. La skill de control incluye scripts que validan las fuentes, calculan hashes de los recursos y exigen una revisión independiente antes de marcar un clip como listo para entregar. El repositorio también impone una política visual estricta que prohíbe el neón, los brillos y los degradados con forma de esfera.

Las skills están escritas en Markdown sin formato, siguen el formato Agent Skills y se instalan con un único comando npx. Están pensadas para usarse junto con la skill oficial de Remotion, que se encarga de la corrección de la API.

Funciones clave

  • 01Cuatro Agent Skills que abarcan gráficos animados, movimientos de cámara, demostraciones en terminal y destacados editoriales.
  • 02Pregunta el formato de salida (4:3 o 9:16) y el estilo del fondo antes de empezar a crear.
  • 03Investiga los productos mencionados y utiliza logotipos y elementos visuales auténticos de los productos.
  • 04Incluye scripts que validan las fuentes, calculan hashes de los recursos y controlan la entrega.
  • 05Impone una política visual sin neón ni brillos.

Casos de uso

  • Crear clips verticales breves para Reels o TikTok a partir de una línea de guion con un agente de IA.
  • Crear demostraciones auténticas en terminal de herramientas CLI o agentes de programación para videos de producto.
  • Crear tarjetas editoriales de estilo informativo con frases resaltadas para anuncios de lanzamientos.
  • Añadir movimientos de cámara coherentes a proyectos de Remotion creados con un asistente de IA.

Inicio rápido

  1. 1

    Crea un proyecto de Remotion e instala las skills

    npx create-video@latest my-graphics
  2. 2

    Entra en la carpeta del proyecto

    cd my-graphics
  3. 3

    Instala en el proyecto las skills de este repositorio

    npx skills add liamrjohnston/remotion-motion-graphics-skill -y
  4. 4

    Previsualiza los gráficos en Remotion Studio

    npx remotion studio

Antes de usarlo

  • Las skills son instrucciones para agentes de programación con IA, así que necesitas un agente como Claude Code o Codex y un proyecto de Remotion para usarlas.
  • Antes de cada compilación, hay que responder preguntas sobre el formato y el contexto, lo que añade un paso a cada solicitud.

Temas

#remotion#motion-graphics#agent-skills#video#claude-code#react#video-generation

Preguntas frecuentes

¿Qué es remotion-motion-graphics-skill?
Un conjunto de cuatro Agent Skills que enseñan a los agentes de programación con IA a crear gráficos animados de estilo televisivo con Remotion. Este repositorio reúne cuatro Agent Skills para agentes de programación con IA, como Claude Code, Codex y Cursor. Las skills guían al agente para crear clips terminados de gráficos animados con Remotion, desde texto cinético y diagramas de flujos de trabajo hasta movimientos de cámara, demostraciones en terminal y tarjetas editoriales con frases destacadas. Antes de escribir código, el agente confirma el formato de salida (4:3 o 9:16) y el estilo del fondo; después, investiga los productos mencionados y sus logotipos.
¿remotion-motion-graphics-skill es gratuito? ¿Qué licencia tiene?
remotion-motion-graphics-skill es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿remotion-motion-graphics-skill sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de remotion-motion-graphics-skill fue el 24 jul 2026.
¿Para qué puedo usar remotion-motion-graphics-skill?
Crear clips verticales breves para Reels o TikTok a partir de una línea de guion con un agente de IA. Crear demostraciones auténticas en terminal de herramientas CLI o agentes de programación para videos de producto. Crear tarjetas editoriales de estilo informativo con frases resaltadas para anuncios de lanzamientos. Añadir movimientos de cámara coherentes a proyectos de Remotion creados con un asistente de IA.
¿Cómo se instala remotion-motion-graphics-skill?
Crea un proyecto de Remotion e instala las skills: npx create-video@latest my-graphics Entra en la carpeta del proyecto: cd my-graphics Instala en el proyecto las skills de este repositorio: npx skills add liamrjohnston/remotion-motion-graphics-skill -y Previsualiza los gráficos en Remotion Studio: npx remotion studio
¿Dónde consigo remotion-motion-graphics-skill?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/Liamrjohnston/remotion-motion-graphics-skill

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados