taufiquebuilds/readmereel

¿Qué hace readmereel?

Convierte el repositorio en el que te encuentras en un breve video de lanzamiento. Tú escribes las palabras; un script renderiza el video. Nunca escribas código de animación: las escenas son plantillas fijas.

1. Leer el repositorio

Lee primero el README, luego el manifiesto del paquete (package.json, pyproject.toml, Cargo.toml, go.mod), la carpeta docs y los archivos de imagen del repositorio. Busca:

• cómo se llama y qué hace en una línea
• el problema que resuelve, en palabras del usuario
• tres cosas que hace por el usuario
• el comando que el usuario ejecuta primero (instalación o inicio rápido)
• capturas de pantalla o diagramas reales (docs/, assets/, .github/, images/, screenshots/, enlaces a imágenes en el README que apunten a archivos del repositorio)
• un logotipo (PNG o SVG) y un color de marca (del logotipo, las insignias del README o el CSS)
• la URL de GitHub (de git remote get-url origin) y, si gh funciona, el número de estrellas: gh repo view --json stargazerCount -q .stargazerCount

2. Escribir launch-video/story.json

Crea la carpeta launch-video/ en la raíz del repositorio y escribe launch-video/story.json. Las rutas son relativas a la raíz del repositorio. Campos, con límites estrictos que el script aplica:

Campo	Límite	Escríbelo como
name	24 caracteres	El nombre del producto exactamente como lo escribe el README
problem	70 caracteres	El dolor del usuario, no el producto: "Cada presentación de IA se ve igual". Apunta a unas 6-9 palabras para que los espectadores puedan leerlo
promise	60 caracteres	El resultado que obtiene el usuario: "Diapositivas que parecen diseñadas por una persona". Aproximadamente 6-9 palabras
features	exactamente 3	Cada uno { "title", "detail", "image" }
feature title	40 caracteres	Un resultado, no un nombre de componente: "Nunca envía dos veces el mismo mes"
feature detail	80 caracteres	Una oración simple sobre cómo o por qué, aproximadamente 12 palabras
feature image	opcional	Ruta a una captura de pantalla real en el repositorio que muestre esta característica: PNG, JPG, WebP o SVG. Un GIF animado se muestra como un solo fotograma y no se aceptan archivos de video. Prefiere imágenes cuyo texto sea lo suficientemente grande para leer a tamaño pequeño; omite las que estén mayormente vacías o sean ilegibles. Omítelo si no hay ninguna. Nunca crees ni obtengas una.
install	48 caracteres	Un comando, una línea, exactamente como lo da el README; si es más largo, usa el primer comando real más corto. Nunca uses un marcador de posición como <tu-usuario>: usa un valor de ejemplo real que el propio README use, p.ej. repoheat dashboard --user ratatui
url	60 caracteres	github.com/usuario/repo: sin https://, sin .git. Convierte la salida de git remote como [email protected]:o/r.git o https://github.com/o/r.git en github.com/o/r
stars		El número de estrellas, o null. Se muestra solo cuando es 10 o más
logo	opcional	Ruta a un logotipo PNG o SVG
accent		Color hexadecimal como #0f766e; el color de marca, de lo contrario omítelo
music	opcional	Solo si el usuario te da un archivo de audio (mp3, m4a, wav u ogg)
endCard		Omítelo (true). Establécelo en false solo si el usuario solicita que no aparezca la línea "hecho con readmereel"

Ejemplo:

{
  "name": "agencyrecap",
  "problem": "Informes mensuales de clientes, creados y enviados a mano",
  "promise": "Informes mensuales de clientes que se envían solos",
  "features": [
    { "title": "PDF personalizado cada mes", "detail": "Tu logotipo y color, enviados por correo a cada cliente el día que elijas", "image": "docs/images/report-page-2.png" },
    { "title": "Un solo panel", "detail": "Ve qué informes se enviaron y reenvíalos con un clic", "image": "docs/images/dashboard.png" },
    { "title": "Nunca envía dos veces", "detail": "Retiene y reintenta cuando Google o el correo falla, y luego te lo notifica" }
  ],
  "install": "docker compose up -d",
  "url": "github.com/taufiquebuilds/agencyrecap",
  "stars": null,
  "accent": "#0f766e"
}

Cualquier campo que no esté en esta tabla es rechazado, por lo que un error tipográfico se detecta. Reglas de copia: palabras cortas, sin exageraciones ("revolucionario", "potencia", "sin fisuras", "desbloquea"), sin emojis, sin signos de exclamación, mayúscula inicial, números como dígitos. Cada afirmación debe ser algo que el repositorio muestre.

3. Mostrar al usuario las escenas y esperar

Antes de renderizar, muestra las seis escenas como una lista numerada y pide "ok" o cambios:

1. Gancho (3 s): problem
2. Título (3 s): name, promise
3. Característica 1 (4 s): título, detalle, archivo de imagen o "tarjeta de texto"
4. Característica 2 (4 s): igual
5. Característica 3 (4 s): igual
6. Instalación + estrella (7 s): install, "Star en GitHub", url

4. Renderizar

scripts/render.mjs se encuentra en la carpeta que contiene este SKILL.md. Calcula su ruta absoluta y ejecútalo desde la raíz del repositorio:

node <ruta-absoluta-a-la-carpeta-de-este-skill>/scripts/render.mjs launch-video/story.json

Requiere Node 22+ y ffmpeg, e indica cómo instalar cualquiera de ellos si faltan. Necesita acceso a internet en cada ejecución: npm (HyperFrames), una descarga única de Chrome, Google Fonts y el CDN de GSAP. El renderizado toma de 3 a 10 minutos, así que ejecuta el comando con un tiempo de espera de al menos 15 minutos, o en segundo plano y espera a que termine. Si el sandbox bloquea la red, pide al usuario que la permita, o dale el comando exacto anterior y pídele que lo ejecute él mismo.

Añade --draft para un renderizado más rápido y de menor calidad cuando el usuario solo quiera un vistazo rápido.

Si imprime problemas de la historia o problemas de diseño, corrige story.json (acorta el texto nombrado) y ejecútalo de nuevo. Si falla un renderizado, lee el final de launch-video/render.log.

5. Entregar

Informa al usuario de lo que se ha creado:

• launch-video/video-16x9.mp4: README, Product Hunt, Show HN, YouTube
• launch-video/video-9x16.mp4: X, LinkedIn, Instagram Reels, TikTok
• launch-video/video.gif: pégalo en la parte superior del README con ![<nombre> video de lanzamiento](launch-video/video.gif)
• launch-video/wide/ y launch-video/tall/: proyectos editables de HyperFrames. Se reconstruyen en cada ejecución, así que copia uno a otro lugar antes de editarlo en HyperFrames Studio (cd launch-video/wide && npx --yes [email protected] preview)

Dale al usuario el comando absoluto exacto que ejecutaste (con su ruta launch-video/story.json) para que pueda volver a renderizar sin un agente. Para cambiar palabras más tarde, edita story.json y ejecuta el mismo comando de nuevo. Sugiere añadir launch-video/wide/, launch-video/tall/ y launch-video/render.log a .gitignore. Si ninguna característica tenía una imagen real, dile que agregar una captura de pantalla al repositorio hace que el video sea más impactante.