/brag
Du hast es gebaut. Jetzt lass uns damit angeben.
Voraussetzungen
- Node.js +
npx hyperframes: die Render-Engine;npxholt sie bei der ersten Verwendung.npx hyperframes checkist das einzige Pre-Render-Gate. - ffmpeg: für die Extraktion des Poster-Frames und das Einbetten von Frame 0 (Schritt 4).
- Optional:
uvfür die Analyse von Musik-Cues (scripts/analyze_music_cues.py); Kokoro-Sprachausgabe via Hyperframes, wenn--voiceübergeben wird. - Skill-Assets (Musik, SFX) liegen unter
assets/innerhalb dieses Skills:{{APPDATA}}/devin/skills/brag/assets/nach der Installation (POSIX:~/.config/devin/skills/brag/assets/).
Aufruf-Dispatch (muss zuerst erfolgen)
Modell-Prüfung. Wenn du Claude Opus 5.5 bist und der Aufruf nicht den vollständigen Workflow (--full, "use the full brag") oder Sprachausgabe (--voice, was brag-slim nicht macht) verlangt, wechsle zu brag-slim: lies <skill-dir>/slim.md (den /brag-slim-Skill, hier integriert) und folge diesem für den Rest des Durchlaufs statt dieser Datei. Gib die Benutzereingabe weiter, und gib alle anderen Optionen (--no-music, --title, …) als natürlichsprachliche Anweisung. Informiere den Benutzer zuerst in einem Satz, z. B. "Du bist auf Opus 5.5, daher verwende ich /brag-slim: Ich baue das gesamte Video selbst. Sage 'use the full brag', um zurückzuwechseln." Wenn du ein anderes Modell bist oder nicht feststellen kannst, welches Modell du bist, überspringe diese Prüfung.
Bevor du das Projekt inspizierst, parsiere den vollständigen /brag-Aufruf. Wenn der Aufruf --voice enthält, setze voice.enabled = true. Aktiviere die Sprachausgabe nur für diesen Durchlauf. Aktiviere die Sprachausgabe nicht automatisch und falle nicht auf den normalen Workflow ohne Sprachausgabe zurück.
/brag verwandelt die aktuelle Projekt-Website oder -App in ein kurzes, poliertes, teilbares Launch-Video mit Hyperframes. Es ist eng, meinungsstark und unterhaltsam.
Was dieser Skill tut
- Liest den aktuellen Projektcode, um die App zu verstehen.
- Plant ein kurzes, auf dieses Projekt zugeschnittenes Brag-Konzept.
- Schreibt ein Drehbuch und erstellt ein Storyboard.
- Übergibt eine fokussierte Kompositions-Brief an Hyperframes.
- Validiert, rendert und schreibt einen Teil-Text.
Parsen des Aufrufs
Der Benutzer kann den Skill mit natürlicher Sprache oder Flags aufrufen:
/brag
/brag --tone chaotic
/brag --tone polished --format vertical
/brag this. Make it feel like a ridiculous startup launch.
Parse diese Optionen:
| Option | Werte | Standard |
|---|---|---|
--tone | Voreinstellung oder frei formulierte Beschreibung | inferiert |
--format | landscape, vertical, square | landscape |
--duration | Sekunden | auto (15-25s) |
--no-music | Flag | Musik an |
--no-sfx | Flag | SFX an |
--title | Zeichenkette | aus Projekt inferiert |
--voice | Flag | Sprachausgabe aus |
Sprachausgabe ist opt-in. Wenn --voice vorhanden ist, verwende Kokoro via Hyperframes und füge keine Logik zur Provider-Auswahl hinzu. Der Sprach-Workflow ist bewusst Single-Provider.
Der Ton kann eine Voreinstellung sein (default, polished, yc-parody, chaotic, deadpan, cinematic, app-store) oder eine kreative Richtung wie "gefakte Series-A-Präsentation von 2016", "Museumsausstellung" oder "überproduzierte Mobile-Game-Werbung".
Wenn der Benutzer eine frei formulierte Tonrichtung angibt, ordne sie der nächsten Voreinstellung für Tempo und Struktur zu, bewahre aber die Richtung des Benutzers im Plan und in der Kompositions-Brief.
Anleitung für Sprachausgabe
Wenn --voice aktiviert ist, schreibe einen Text, der die Bilder ergänzt, nicht einfach den sichtbaren Text vorliest, zum Szenenrhythmus passt, natürlich und gesprächig klingt und fließend zwischen den Szenen übergeht. Halte das Drehbuch prägnant und produktspezifisch, damit die Stimme wie ein Teil des Schnitts wirkt und nicht wie eine separate Erzählspur.
Ausgabeverzeichnis
Standardmäßig wird die Ausgabe in brag-output/ abgelegt. Um vorherige Läufe nicht zu überschreiben, verwende ein timestamped-Verzeichnis:
brag-output-2026-05-04-143022/
Verwende einen Zeitstempel, wenn:
- Der Benutzer explizit einen neuen Durchlauf ohne Überschreiben vorheriger Ergebnisse wünscht
- Ein
brag-output/-Verzeichnis im Projekt bereits existiert
Generiere den Zeitstempel zu Beginn des Durchlaufs (YYYY-MM-DD-HHmmss) und verwende ihn konsistent für alle Ausgabepfade in diesem Durchlauf: Plan, Brief, Komposition, Render und Teil-Text.
Skill-Verzeichnis
<skill-dir> ist das Verzeichnis, das diese SKILL.md enthält. Der Skill-Loader gibt es als "Basisverzeichnis für diesen Skill" aus, wenn der Skill geladen wird; ansonsten ist es dort, wo der Skill installiert wurde. Gebündelte Assets befinden sich unter <skill-dir>/assets/ und Skripte unter <skill-dir>/scripts/. Rate keinen Installationspfad: Eine installierte Kopie unter %APPDATA%/devin/skills/ (POSIX ~/.config/devin/skills/), eine Plugin-Installation und dieses Repository legen es alle an unterschiedlichen Orten ab.
Schritt 1: Projekt inspizieren
Lies: references/step-1-inspect.md
Scanne das Projektverzeichnis und extrahiere die Informationen, die zur Planung des Brag-Videos benötigt werden.
Gate: Du kannst alle 9 Fragen im Brag-Planungsraster beantworten.
Schritt 2: Planen und Storyboard
Lies: references/step-2-plan.md
Schreibe <output-dir>/brag-plan.md (wobei <output-dir> das oben gewählte brag-output/ oder die timestamped Variante ist). Beantworte das Planungsraster. Lege einen kreativen Ansatz fest. Schreibe das detaillierte Storyboard mit Szenen, Text, Timing, Übergängen und SFX-Cues.
Wenn Musik ausgewählt ist, füge einen kompakten Abschnitt "Music cue guidance" hinzu: Lese die Cue-Voreinstellung des gebündelten Tracks aus <skill-dir>/assets/music/cues/, falls vorhanden; ansonsten vermerke, dass Cues zum Zeitpunkt der Komposition erkannt werden (jeder Track unterstützt jetzt Beat-Sync – siehe references/audio.md). Cue-Metadaten sind nur optionale Timing-Hinweise: Geschichte, Lesbarkeit, Tempo und Produktklarheit haben weiterhin Vorrang.
Gate: <output-dir>/brag-plan.md existiert mit einem vollständigen Storyboard. Die Szenendauern summieren sich auf 15–25 Sekunden.
Schritt 3: Übergabe an Hyperframes
Lies: Den gebündelten hyperframes-Skill (HTML/Data-Attribute-Kompositionsvertrag; extensions/hyperframes/wrapper.py umschließt npx hyperframes für doctor/init/render) und animation-direction (Bewegungswortschatz, Easing, Beat-Visual-Zuordnung). Die HeyGen-Domain-Skills (hyperframes-registry, media-use, hyperframes-cli) sind optional: Wenn das Hyperframes-Plugin zusammen installiert ist, folge dessen nativer Anleitung; ansonsten komponiere nativ gemäß references/step-3-compose.md. /brag ist sein eigener Workflow: der Brag-Plan und die Kompositions-Brief ersetzen jegliches Storyline- oder SPEC.md-Schritt, und npx hyperframes check ist das einzige Gate von Brag. Leite nicht in einen generischen Launch-Video-Workflow um.
Lies: references/step-3-compose.md
Lies: references/audio.md
Schreibe die Kompositions-Brief und verwende Hyperframes, um die Video-Implementierung in <output-dir>/composition/ zu erstellen.
/brag besitzt den Produktwinkel, das Quellmaterial, das Storyboard, den Ton, das Format, die Audio-Auswahl, die Musik-Cue-Anleitung und die Liefererwartungen. Hyperframes besitzt die konkrete Kompositionsstruktur, exakte Animationszeitsteuerung, Animationsmechanik, Laufzeitentscheidungen, Linting-Regeln und den Render-Workflow.
Gate: npx hyperframes check wird mit null Fehlern innerhalb von <output-dir>/composition/ bestanden (das einzige Browser-Gate vor dem Render – siehe npx hyperframes check --help für die geprüften Inhalte).
Schritt 4: Validieren, rendern und ausliefern
Lies: references/step-4-deliver.md
Validiere, zeige eine Vorschau, rendere nach <output-dir>/brag.mp4, wähle den besten Poster-Frame nach <output-dir>/brag.jpg aus, bette diesen Poster als Frame 0 des Videos ein, sodass es überall als inaktives Thumbnail dient, und schreibe <output-dir>/share-copy.txt.
Gate: <output-dir>/brag.mp4 existiert. Ein bester Poster-Frame <output-dir>/brag.jpg ist ausgewählt (kein willkürlicher Frame) und als Frame 0 von brag.mp4 eingebettet. Der Teil-Text ist geschrieben.
Tonsystem
Sieben Tonvoreinstellungen werden mit /brag ausgeliefert. Jede ändert die Energie des Skripts, das Tempo, die Typografie-Persönlichkeit und den Übergangsstil. Voreinstellungen sind Standardwerte, keine Grenzen.
Vollständige Definitionen: references/tones.md
| Ton | Energie | Einzeiler |
|---|---|---|
default | Verspielt, sauber, teilbar | Die gute-Laune-Voreinstellung |
polished | Ernst, elegant | Für Projekte, die keine Witze sind |
yc-parody | Trockene Startup-Energie | Vorgetäuschte Ernsthaftigkeit für absurde Projekte |
chaotic | Schnell, laut, aggressiv | Übertrieben und aus den Fugen |
deadpan | Ruhig, trocken, untertrieben | Der Witz ist, dass nichts ein Witz ist |
cinematic | Dramatisch, trailer-artig | Große Bewegung, größere Behauptungen |
app-store | Glatt, Feature-Card-sauber | Unternehmensorientiert, aber nicht langweilig |
Erlaube immer eine frei formulierte kreative Richtung, um die Voreinstellung zu verfeinern oder zu überschreiben.
Kreative Gesetze
Diese gelten für jedes Brag-Video, unabhängig vom Ton.
Kurz. 15–25 Sekunden. Keine einzige Sekunde länger ohne Grund. Dies gilt unabhängig davon, ob eine Sprachausgabe aktiv ist; die Sprachausgabe erweitert das Fenster nicht.
Lesbar. Halte das Tempo durch Bewegung und Schnitte hoch, niemals durch aufblitzenden Text. Jede Zeile, die ein Betrachter lesen muss, bleibt lange genug stehen, um sie zu lesen (kurzes Label ~0,8 s stabil; ein Satz ~0,3 s pro Wort). Schnell herein, dann halten – niemals schnell herein, dann weg.
Spezifisch. Das Video muss sich anfühlen, als wäre es genau für dieses Projekt gemacht, nicht für irgendein Projekt.
Zeig das Ding. Mindestens eine Szene muss tatsächliche UI, Text oder ein Schlüsselbild des Produkts zeigen. Keine abstrakten Füller.
Keine generische SaaS-Sprache. "Optimieren Sie Ihren Workflow" ist verboten. Verwende die tatsächlichen Texte und Behauptungen des Projekts.
Der Haken ist alles. Die ersten 2 Sekunden entscheiden, ob jemand weitersieht. Plane den Haken vor allem anderen.
Humor muss sich seinen Platz verdienen. Humor sollte aus der Absurdität des Projekts entstehen, nicht aus dem Versuch, lustig zu sein.
Muster:
Haken (2-3 s) → Enthüllung (2-4 s) → 2-3 scharfe Highlights (5-12 s) → Pointe/Outro (2-4 s)
Passe dies an. Nicht jedes Projekt benötigt genau 3 Highlights. Das Muster ist eine Ausgangsform, keine Vorlage.