/brag
Vous l'avez construit. Maintenant, vantez-vous-en.
Prérequis
- Node.js +
npx hyperframes: le moteur de rendu ;npxle récupère au premier lancement.npx hyperframes checkest la seule porte de pré-rendu. - ffmpeg : extraction du poster et intégration de l'image 0 (étape 4).
- Optionnel :
uvpour l'analyse des pistes de repères sonores (scripts/analyze_music_cues.py) ; narration via Kokoro avec Hyperframes lorsque--voiceest passé. - Les ressources de la compétence (musique, effets sonores) se trouvent dans
assets/au sein de cette compétence :{{APPDATA}}/devin/skills/brag/assets/lorsqu'elle est installée (POSIX :~/.config/devin/skills/brag/assets/).
Répartition de l'invocation (doit être faite en premier)
Vérification du modèle. Si vous êtes Claude Opus 5.5 et que l'invocation ne demande pas le workflow complet (--full, "utilise le brag complet") ni la narration (--voice, que brag-slim ne fait pas), passez à brag-slim : lisez <skill-dir>/slim.md (la compétence /brag-slim, incluse ici) et suivez-la pour la suite de cette exécution au lieu de ce fichier. Transmettez l'entrée de l'utilisateur, et passez toute autre option (--no-music, --title, …) comme des instructions en langage naturel. Informez d'abord l'utilisateur en une ligne, par exemple : "Vous êtes sur Opus 5.5, donc j'utilise /brag-slim : je construis la vidéo moi-même. Dites 'utilise le brag complet' pour revenir en arrière." Si vous êtes un autre modèle, ou si vous ne pouvez pas déterminer votre modèle, ignorez cette vérification.
Avant d'inspecter le projet, analysez l'invocation /brag complète. Si l'invocation contient --voice, définissez voice.enabled = true. Activez la narration uniquement pour cette exécution. N'activez pas la narration automatiquement et ne revenez pas au workflow normal sans voix.
/brag transforme le site web ou l'application du projet actuel en une courte vidéo de lancement soignée et partageable en utilisant Hyperframes. C'est étroit, déterminé et amusant.
Ce que fait cette compétence
- Lit le code du projet actuel pour comprendre l'application.
- Planifie un concept de brag court et spécifique au projet.
- Écrit le script et le storyboard de la vidéo.
- Confie un brief de composition ciblé à Hyperframes.
- Valide, rend et écrit le texte de partage.
Analyse de l'invocation
L'utilisateur peut invoquer avec un langage naturel ou des indicateurs :
/brag
/brag --tone chaotic
/brag --tone polished --format vertical
/brag ceci. Fais-le ressembler à un lancement de startup ridicule.
Analysez ces options :
| Option | Valeurs | Défaut |
|---|---|---|
--tone | préréglé ou description libre | déduit |
--format | landscape, vertical, square | landscape |
--duration | secondes | auto (15-25s) |
--no-music | indicateur | musique activée |
--no-sfx | indicateur | effets sonores activés |
--title | chaîne | déduit du projet |
--voice | indicateur | narration désactivée |
La narration est optionnelle. Si --voice est présent, utilisez Kokoro via Hyperframes et n'ajoutez aucune logique de sélection de fournisseur. Le workflow vocal est intentionnellement mono-fournisseur.
Le ton peut être un préréglage (default, polished, yc-parody, chaotic, deadpan, cinematic, app-store) ou une direction créative comme "faux lancement Series A de 2016", "exposition de musée" ou "pub de jeu mobile surproduite".
Lorsque l'utilisateur donne une direction de ton libre, associez-la au préréglage le plus proche pour le rythme et la structure, mais conservez la direction de l'utilisateur dans le plan et le brief de composition.
Consignes pour la narration
Lorsque --voice est activé, rédigez une narration qui complète les visuels, ne se contente pas de lire le texte visible, correspond au rythme des scènes, semble naturelle et conversationnelle, et se déroule en douceur entre les scènes. Gardez le script concis et spécifique au produit afin que la voix fasse partie du montage plutôt qu'une piste de narration distincte.
Répertoire de sortie
Par défaut, la sortie va dans brag-output/. Pour éviter d'écraser les exécutions précédentes, utilisez un répertoire horodaté :
brag-output-2026-05-04-143022/
Utilisez un horodatage lorsque :
- L'utilisateur demande explicitement une nouvelle exécution sans remplacer les résultats précédents
- Un répertoire
brag-output/existe déjà dans le projet
Générez l'horodatage au début de l'exécution (YYYY-MM-DD-HHmmss) et utilisez-le de manière cohérente pour tous les chemins de sortie de cette exécution : plan, brief, composition, rendu et texte de partage.
Répertoire de la compétence
<skill-dir> est le répertoire contenant ce SKILL.md. Le chargeur de compétence affiche "Répertoire de base pour cette compétence" lorsque la compétence se charge ; sinon, il s'agit de l'endroit où la compétence a été installée. Les ressources incluses se trouvent sous <skill-dir>/assets/ et les scripts sous <skill-dir>/scripts/. Ne devinez pas un chemin d'installation : une copie installée sous %APPDATA%/devin/skills/ (POSIX ~/.config/devin/skills/), une installation de plugin, et ce dépôt les placent tous à des endroits différents.
Étape 1 : Inspecter le projet
Lire : references/step-1-inspect.md
Analysez le répertoire du projet et extrayez les informations nécessaires pour planifier la vidéo de brag.
Porte : Vous pouvez répondre aux 9 questions du cadre de planification du brag.
Étape 2 : Planifier et storyboard
Lire : references/step-2-plan.md
Écrivez <output-dir>/brag-plan.md (où <output-dir> est brag-output/ ou la variante horodatée choisie ci-dessus). Répondez au cadre de planification. Engagez-vous sur un angle créatif. Écrivez le storyboard mesure par mesure, y compris les scènes, le texte, le timing, les transitions et les repères sonores.
Lorsque la musique est sélectionnée, incluez une section concise Guidage des repères musicaux : lisez le préréglage de repère du morceau inclus depuis <skill-dir>/assets/music/cues/ s'il est présent, sinon notez que les repères seront détectés au moment de la composition (n'importe quelle piste supporte désormais la synchronisation sur le temps fort — voir references/audio.md). Les métadonnées des repères sont uniquement des indications de timing optionnelles : l'histoire, la lisibilité, le rythme et la clarté du produit restent primordiaux.
Porte : <output-dir>/brag-plan.md existe avec un storyboard complet. La somme des durées des scènes est comprise entre 15 et 25 secondes.
Étape 3 : Passer le relais à Hyperframes
Lire : La compétence hyperframes du bundle (contrat de composition HTML/attribut de données ; extensions/hyperframes/wrapper.py encapsule npx hyperframes pour doctor/init/render) et animation-direction (vocabulaire de mouvement, courbes d'accélération, mappage temps fort-à-visuel). Les compétences de domaine HeyGen (hyperframes-registry, media-use, hyperframes-cli) sont optionnelles : si le plugin Hyperframes est installé parallèlement, suivez ses instructions natives ; sinon, composez nativement selon references/step-3-compose.md. /brag est son propre workflow : le plan de brag et le brief de composition remplacent toute étape d'histoire ou de SPEC.md, et npx hyperframes check est la seule porte de brag. Ne vous dirigez pas vers un workflow générique de vidéo de lancement.
Lire : references/step-3-compose.md
Lire : references/audio.md
Écrivez le brief de composition et utilisez Hyperframes pour créer l'implémentation vidéo dans <output-dir>/composition/.
/brag possède l'angle produit, le matériau source, le storyboard, le ton, le format, la sélection audio, le guidage des repères musicaux et les attentes de livraison. Hyperframes possède la structure de composition concrète, le timing exact de l'animation, les mécanismes d'animation, les choix d'exécution, les règles de linting et le workflow de rendu.
Porte : npx hyperframes check passe sans aucune erreur à l'intérieur de <output-dir>/composition/ (la seule porte navigateur avant le rendu — voir npx hyperframes check --help pour ce qu'elle audite).
Étape 4 : Valider, rendre et livrer
Lire : references/step-4-deliver.md
Validez, prévisualisez, rendez dans <output-dir>/brag.mp4, choisissez la meilleure image poster dans <output-dir>/brag.jpg, intégrez ce poster comme image 0 de la vidéo pour qu'il soit la vignette au repos partout, et écrivez <output-dir>/share-copy.txt.
Porte : <output-dir>/brag.mp4 existe. Un poster <output-dir>/brag.jpg de la meilleure image est choisi (pas une image arbitraire) et intégré comme image 0 de brag.mp4. Le texte de partage est écrit.
Système de tons
Sept préréglages de tons sont fournis avec /brag. Chacun modifie l'énergie du script, le rythme, la personnalité typographique et le style de transition. Les préréglages sont des valeurs par défaut, pas des limites.
Définitions complètes : references/tones.md
| Ton | Énergie | Phrase d'accroche |
|---|---|---|
default | Ludique, propre, publiable | Le bon ton par défaut |
polished | Sérieux, élégant | Pour les projets qui ne sont pas des plaisanteries |
yc-parody | Énergie de startup impassible | Sérieux factice appliqué à des projets absurdes |
chaotic | Rapide, fort, agressif | Excessif et déchaîné |
deadpan | Calme, sec, discret | La blague est que rien n'est une blague |
cinematic | Dramatique, à l'échelle d'une bande-annonce | Grands mouvements, plus grandes déclarations |
app-store | Fluide, propre comme une fiche produit | Corporatif mais pas ennuyeux |
Autorisez toujours une direction créative libre pour affiner ou remplacer le préréglage.
Lois créatives
Ces règles s'appliquent à chaque vidéo de brag, quel que soit le ton.
Courte. 15 à 25 secondes. Pas une seconde de plus sans raison. Cela tient même si la narration est activée ; la narration n'étend pas la fenêtre.
Lisible. Maintenez un rythme élevé grâce au mouvement et aux coupes, jamais en faisant défiler le texte. Chaque ligne qu'un spectateur doit lire reste assez longtemps pour être lue (étiquette courte ~0,8s stable ; une phrase ~0,3s par mot). Entrez rapidement, puis maintenez — jamais entrer rapidement, puis disparaître.
Spécifique. La vidéo doit donner l'impression d'avoir été faite pour ce projet exact, pas pour n'importe quel projet.
Montrer la chose. Au moins une scène doit afficher une UI réelle, une copie ou un visuel clé du produit. Pas de remplissage abstrait.
Pas de langage SaaS générique. "Optimisez votre workflow" est interdit. Utilisez la copie réelle et les affirmations du projet.
L'accroche est tout. Les 2 premières secondes déterminent si quelqu'un continue à regarder. Planifiez l'accroche avant toute autre chose.
L'humour gagne sa place. L'humour doit provenir de l'absurdité du projet, pas d'une tentative d'être drôle.
Motif :
Accroche (2-3s) → Révélation (2-4s) → 2-3 points forts nets (5-12s) → Chute/Outro (2-4s)
Adaptez-le. Tous les projets n'ont pas besoin exactement de 3 points forts. Le motif est une forme de départ, pas un modèle.