/brag
Lo construiste. Ahora alardea de ello.
Requisitos
- Node.js +
npx hyperframes: el motor de renderizado;npxlo descarga en el primer uso.npx hyperframes checkes la única compuerta previa al renderizado. - ffmpeg: extracción de fotogramas clave y fijación del fotograma 0 (paso 4).
- Opcional:
uvpara análisis de señales musicales personalizadas (scripts/analyze_music_cues.py); narración Kokoro a través de Hyperframes cuando se pasa--voice. - Los recursos de la habilidad (música, efectos de sonido) se encuentran en
assets/dentro de esta habilidad:{{APPDATA}}/devin/skills/brag/assets/cuando está instalada (POSIX:~/.config/devin/skills/brag/assets/).
Despacho de invocación (debe ocurrir primero)
Verificación del modelo. Si eres Claude Opus 5.5 y la invocación no solicita el flujo de trabajo completo (--full, "usa el brag completo") o voz en off (--voice, que brag-slim no hace), cambia a brag-slim: lee <skill-dir>/slim.md (la habilidad /brag-slim, incluida aquí) y síguela para el resto de esta ejecución en lugar de este archivo. Transmite la entrada del usuario y pasa cualquier otra opción (--no-music, --title, …) como indicación en lenguaje natural. Informa al usuario en una línea primero, por ejemplo: "Estás en Opus 5.5, así que estoy usando /brag-slim: construyo el video yo mismo. Di 'usa el brag completo' para volver." Si eres cualquier otro modelo, o no puedes determinar qué modelo eres, omite esta verificación.
Antes de inspeccionar el proyecto, analiza la invocación completa de /brag. Si la invocación contiene --voice, establece voice.enabled = true. Habilita la narración solo para esa ejecución. No habilites la narración automáticamente y no recurras al flujo de trabajo normal sin voz.
/brag convierte el sitio web o la aplicación del proyecto actual en un breve video de lanzamiento pulido y compartible usando Hyperframes. Es específico, de opinión firme y divertido.
Qué hace esta habilidad
- Lee el código del proyecto actual para entender la aplicación.
- Planifica un concepto breve de alarde específico para este proyecto.
- Redacta un guion y un storyboard para el video.
- Entrega un resumen de composición enfocado a Hyperframes.
- Valida, renderiza y escribe el texto para compartir.
Analizando la invocación
El usuario puede invocar con lenguaje natural o banderas:
/brag
/brag --tone chaotic
/brag --tone polished --format vertical
/brag this. Make it feel like a ridiculous startup launch.
Analiza estas opciones:
| Opción | Valores | Predeterminado |
|---|---|---|
--tone | preset o descripción libre | inferido |
--format | landscape, vertical, square | landscape |
--duration | segundos | auto (15-25s) |
--no-music | bandera | música activada |
--no-sfx | bandera | efectos activados |
--title | cadena | inferido del proyecto |
--voice | bandera | narración desactivada |
La voz es opcional. Si --voice está presente, usa Kokoro a través de Hyperframes y no agregues ninguna lógica de selección de proveedor. El flujo de trabajo de voz es intencionalmente de un solo proveedor.
El tono puede ser un preset (default, polished, yc-parody, chaotic, deadpan, cinematic, app-store) o una dirección creativa como "falso lanzamiento Serie A de 2016", "exhibición de museo" o "anuncio sobreproducido de juego móvil".
Cuando el usuario da una dirección de tono libre, asígnala al preset más cercano para ritmo y estructura, pero conserva la dirección del usuario en el plan y el resumen de composición.
Guía de narración
Cuando --voice está habilitado, escribe una narración que complemente los visuales, no se limite a leer el texto visible, coincida con el ritmo de la escena, suene natural y conversacional, y se mueva suavemente entre escenas. Mantén el guion conciso y específico del producto para que la voz se sienta como parte de la edición en lugar de una pista de narración separada.
Directorio de salida
Por defecto, la salida va a brag-output/. Para evitar sobrescribir ejecuciones anteriores, usa un directorio con marca de tiempo:
brag-output-2026-05-04-143022/
Usa una marca de tiempo cuando:
- El usuario solicita explícitamente una nueva ejecución sin sobrescribir resultados anteriores
- Un directorio
brag-output/ya existe en el proyecto
Genera la marca de tiempo al inicio de la ejecución (YYYY-MM-DD-HHmmss) y úsala de manera consistente para todas las rutas de salida en esa ejecución: plan, resumen, composición, renderizado y texto para compartir.
Directorio de la habilidad
<skill-dir> es el directorio que contiene este SKILL.md. El cargador de habilidades lo imprime como "Directorio base para esta habilidad" cuando la habilidad se carga; de lo contrario, está donde se instaló la habilidad. Los recursos empaquetados están en <skill-dir>/assets/ y los scripts en <skill-dir>/scripts/. No adivines una ruta de instalación: una copia instalada en %APPDATA%/devin/skills/ (POSIX ~/.config/devin/skills/), una instalación de complemento y este repositorio lo colocan en lugares diferentes.
Paso 1: Inspeccionar el proyecto
Leer: references/step-1-inspect.md
Escanea el directorio del proyecto y extrae la información necesaria para planificar el video de alarde.
Compuerta: Puedes responder las 9 preguntas en la rúbrica de planificación de brag.
Paso 2: Planificar y hacer storyboard
Leer: references/step-2-plan.md
Escribe <output-dir>/brag-plan.md (donde <output-dir> es brag-output/ o la variante con marca de tiempo elegida anteriormente). Responde la rúbrica de planificación. Comprométete con un ángulo creativo. Escribe el storyboard compás por compás, incluyendo escenas, texto, tiempo, transiciones y señales de efectos de sonido.
Cuando se selecciona música, incluye una sección compacta de Guía de señales musicales: lee el preset de señales de la pista incluida desde <skill-dir>/assets/music/cues/ si está presente; de lo contrario, indica que las señales se detectarán en el momento de la composición (cualquier pista ahora admite sincronización de ritmo — consulta references/audio.md). Los metadatos de señales son solo una guía de tiempo opcional: la historia, la legibilidad, el ritmo y la claridad del producto siguen siendo lo principal.
Compuerta: <output-dir>/brag-plan.md existe con un storyboard completo. Las duraciones de las escenas suman entre 15 y 25 segundos.
Paso 3: Entregar a Hyperframes
Leer: La habilidad hyperframes del paquete (contrato de composición HTML/atributo de datos; extensions/hyperframes/wrapper.py envuelve npx hyperframes para doctor/init/render) y animation-direction (vocabulario de movimiento, easing, mapeo de ritmo a visual). Las habilidades del dominio HeyGen (hyperframes-registry, media-use, hyperframes-cli) son opcionales: si el complemento Hyperframes está instalado junto con él, sigue su guía nativa; de lo contrario, compón de forma nativa según references/step-3-compose.md. /brag es su propio flujo de trabajo: el plan de brag y el resumen de composición reemplazan cualquier historia o paso SPEC.md, y npx hyperframes check es la única compuerta de brag. No te dirijas a un flujo de trabajo de video de lanzamiento genérico.
Leer: references/step-3-compose.md
Leer: references/audio.md
Escribe el resumen de composición y usa Hyperframes para crear la implementación del video en <output-dir>/composition/.
/brag posee el ángulo del producto, el material fuente, el storyboard, el tono, el formato, la selección de audio, la guía de señales musicales y las expectativas de entrega. Hyperframes posee la estructura de composición concreta, la sincronización exacta de animación, la mecánica de animación, las decisiones de tiempo de ejecución, las reglas de linting y el flujo de trabajo de renderizado.
Compuerta: npx hyperframes check pasa con cero errores dentro de <output-dir>/composition/ (la única compuerta de navegador antes del renderizado — consulta npx hyperframes check --help para ver qué audita).
Paso 4: Validar, renderizar y entregar
Leer: references/step-4-deliver.md
Valida, previsualiza, renderiza en <output-dir>/brag.mp4, elige el mejor fotograma clave en <output-dir>/brag.jpg, fija ese fotograma como el fotograma 0 del video para que sea la miniatura inactiva en todas partes, y escribe <output-dir>/share-copy.txt.
Compuerta: <output-dir>/brag.mp4 existe. Se elige un fotograma clave <output-dir>/brag.jpg (no un fotograma arbitrario) y se fija como fotograma 0 de brag.mp4. El texto para compartir está escrito.
Sistema de tonos
Siete presets de tono vienen con /brag. Cada uno cambia la energía del guion, el ritmo, la personalidad de la tipografía y el estilo de transición. Los presets son valores predeterminados, no límites.
Definiciones completas: references/tones.md
| Tono | Energía | Frase resumen |
|---|---|---|
default | Juguetón, limpio, publicable | El predeterminado de buenas vibras |
polished | Serio, elegante | Para proyectos que no son bromas |
yc-parody | Energía de startup muerta de risa | Seriedad falsa aplicada a proyectos absurdos |
chaotic | Rápido, ruidoso, agresivo | Exagerado y desquiciado |
deadpan | Tranquilo, seco, discreto | El chiste es que nada es un chiste |
cinematic | Dramático, a escala de tráiler | Gran movimiento, afirmaciones más grandes |
app-store | Suave, limpio como una tarjeta de funciones | Corporativo pero no aburrido |
Siempre permite una dirección creativa libre para refinar o anular el preset.
Leyes creativas
Estas se aplican a cada video de brag, independientemente del tono.
Corto. 15–25 segundos. Ni un segundo más sin una razón. Esto se cumple independientemente de si la narración está activada o no; la narración no extiende la ventana.
Legible. Mantén el ritmo alto a través del movimiento y los cortes, nunca mostrando texto fugazmente. Cada línea que un espectador debe leer permanece el tiempo suficiente para leerla (etiqueta corta ~0,8s fijo; una oración ~0,3s por palabra). Entrada rápida, luego fijo — nunca entrada rápida, luego desaparece.
Específico. El video debe sentirse como hecho para este proyecto exacto, no para cualquier proyecto.
Muestra la cosa. Al menos una escena debe mostrar la interfaz de usuario real, el texto o un visual clave del producto. Sin relleno abstracto.
Sin lenguaje SaaS genérico. "Optimiza tu flujo de trabajo" está prohibido. Usa el texto y las afirmaciones reales del proyecto.
El gancho lo es todo. Los primeros 2 segundos determinan si alguien sigue viendo. Planifica el gancho antes que cualquier otra cosa.
La gracia se gana su lugar. El humor debe venir de lo absurdo del proyecto, no de intentar ser gracioso.
Patrón:
Gancho (2-3s) → Revelación (2-4s) → 2-3 aspectos destacados nítidos (5-12s) → Remate/final (2-4s)
Adáptalo. No todos los proyectos necesitan exactamente 3 aspectos destacados. El patrón es una forma inicial, no una plantilla.