/brag
あなたが作りました。さあ、自慢しましょう。
必要条件
- Node.js +
npx hyperframes: レンダリングエンジン。初回使用時にnpxがフェッチします。npx hyperframes checkが唯一のプリレンダリングゲートです。 - ffmpeg: ポスターフレームの抽出とフレーム 0 の焼き込み（ステップ 4）に使用。
- オプション:
uvはカスタムトラックのキュー解析用です（scripts/analyze_music_cues.py）。--voiceが指定された場合、Hyperframes 経由で Kokoro によるナレーションが有効になります。 - スキルのアセット（音楽、効果音）は、このスキル内の
assets/にあります。インストール時は{{APPDATA}}/devin/skills/brag/assets/（POSIX:~/.config/devin/skills/brag/assets/）です。
呼び出しディスパッチ（最初に実行必須）
モデルチェック。 あなたが Claude Opus 5.5 であり、かつ呼び出しが完全なワークフロー（--full、「フルブレイグを使って」）やボイスオーバー（--voice、ブレイグスリムは非対応）を要求していない場合は、brag-slim に切り替えてください。<skill-dir>/slim.md（ここにバンドルされている /brag-slim スキル）を読み、このファイルの代わりにそれに従って残りを実行してください。ユーザーの入力を渡し、他のオプション（--no-music、--title など）はプレーンな指示として渡してください。最初の1行でユーザーに伝えてください。例：「Opus 5.5 をお使いのため、/brag-slim を使用します：私自身がビデオ全体を構築します。「フルブレイグを使って」と言えば切り替えられます。」他のモデルである場合、または自分がどのモデルか判断できない場合は、このチェックをスキップしてください。
プロジェクトを検査する前に、完全な /brag 呼び出しを解析してください。呼び出しに --voice が含まれている場合は、voice.enabled = true に設定してください。その実行でのみナレーションを有効にします。ナレーションを自動的に有効にしたり、通常の音声なしワークフローにフォールバックしたりしないでください。
/brag は、現在のプロジェクトのウェブサイトまたはアプリを、Hyperframes を使用して短く洗練された共有可能なランチビデオに変換します。これは狭く、独断的で、楽しいものです。
このスキルの機能
- 現在のプロジェクトコードを読み取り、アプリを理解します。
- このプロジェクトに固有の短いブレイグコンセプトを計画します。
- ビデオのスクリプトとストーリーボードを作成します。
- 焦点を絞った構成概要を Hyperframes に渡します。
- 検証、レンダリング、共有コピーの作成を行います。
呼び出しの解析
ユーザーは自然言語またはフラグで呼び出すことができます：
/brag
/brag --tone chaotic
/brag --tone polished --format vertical
/brag this. Make it feel like a ridiculous startup launch.
これらのオプションを解析します：
| オプション | 値 | デフォルト |
|---|---|---|
--tone | プリセットまたは自由形式の説明 | 推測 |
--format | landscape, vertical, square | landscape |
--duration | 秒 | 自動（15-25秒） |
--no-music | フラグ | 音楽オン |
--no-sfx | フラグ | 効果音オン |
--title | 文字列 | プロジェクトから推測 |
--voice | フラグ | ナレーションオフ |
音声はオプトインです。--voice が存在する場合は、Hyperframes 経由で Kokoro を使用し、プロバイダー選択ロジックを追加しないでください。音声ワークフローは意図的に単一プロバイダーです。
トーンはプリセット（default, polished, yc-parody, chaotic, deadpan, cinematic, app-store）または「2016年の偽シリーズAローンチ」、「博物館展示」、「過剰演出のモバイルゲーム広告」のようなクリエイティブな方向性を指定できます。
ユーザーが自由形式のトーン指示を与えた場合、ペースと構造については最も近いプリセットにマッピングしますが、計画と構成概要ではユーザーの指示を保持します。
ナレーションガイダンス
--voice が有効になっている場合、ビジュアルを補完し、表示されているテキストを単に読み上げず、シーンのペースに合い、自然で会話的に聞こえ、シーン間をスムーズに移行するナレーションを書いてください。スクリプトは簡潔で製品固有のものにし、声が独立したナレーショントラックではなく編集の一部であるように感じさせてください。
出力ディレクトリ
デフォルトでは、出力は brag-output/ に格納されます。以前の実行を上書きしないようにするには、タイムスタンプ付きのディレクトリを使用します：
brag-output-2026-05-04-143022/
次の場合にタイムスタンプを使用します：
- ユーザーが以前の結果を上書きせずに新しい実行を明示的に要求した場合
- プロジェクトに
brag-output/ディレクトリが既に存在する場合
実行の開始時にタイムスタンプ（YYYY-MM-DD-HHmmss）を生成し、その実行のすべての出力パス（計画、概要、構成、レンダリング、共有コピー）で一貫して使用します。
スキルディレクトリ
<skill-dir> は、この SKILL.md を含むディレクトリです。スキルローダーは、スキルが読み込まれるときに「このスキルのベースディレクトリ」として出力します。それ以外の場合は、スキルがインストールされた場所です。バンドルされたアセットは <skill-dir>/assets/ に、スクリプトは <skill-dir>/scripts/ にあります。インストールパスを推測しないでください。 %APPDATA%/devin/skills/（POSIX ~/.config/devin/skills/）のインストールコピー、プラグインインストール、およびこのリポジトリはすべて異なる場所に配置されます。
ステップ 1: プロジェクトを検査
参照: references/step-1-inspect.md
プロジェクトディレクトリをスキャンし、ブレイグビデオを計画するために必要な情報を抽出します。
ゲート: ブレイグ計画ルーブリックの9つの質問すべてに回答できること。
ステップ 2: 計画とストーリーボード
<output-dir>/brag-plan.md を書き込みます（<output-dir> は上記で選択した brag-output/ またはタイムスタンプ付きのバリアントです）。計画ルーブリックに回答します。クリエイティブな角度を決定します。シーン、テキスト、タイミング、トランジション、効果音キューを含むビートごとのストーリーボードを作成します。
音楽が選択されている場合、コンパクトな「音楽キューのガイダンス」セクションを含めます。<skill-dir>/assets/music/cues/ にバンドルされたトラックのキュープリセットが存在する場合はそれを読み、存在しない場合は構成時にキューが検出されることに注意してください（すべてのトラックがビート同期をサポートするようになりました。references/audio.md を参照）。キューメタデータはオプションのタイミングガイダンスに過ぎません。ストーリー、読みやすさ、ペース、製品の明確さを優先します。
ゲート: <output-dir>/brag-plan.md が完全なストーリーボードとともに存在すること。シーン時間の合計が15～25秒であること。
ステップ 3: Hyperframes に引き継ぐ
参照: バンドルの hyperframes スキル（HTML/データ属性構成契約。extensions/hyperframes/wrapper.py は doctor/init/render のために npx hyperframes をラップします）および animation-direction（モーションボキャブラリ、イージング、ビートからビジュアルへのマッピング）。HeyGen ドメインスキル（hyperframes-registry、media-use、hyperframes-cli）はオプションです：Hyperframes プラグインが一緒にインストールされている場合はそのネイティブガイダンスに従い、そうでない場合は references/step-3-compose.md に従ってネイティブに構成します。/brag は独自のワークフローであり、ブレイグ計画と構成概要はストーリーラインや SPEC.md ステップを置き換え、npx hyperframes check はブレイグの唯一のゲートです。一般的なランチビデオワークフローにルーティングしないでください。
参照: references/step-3-compose.md
参照: references/audio.md
構成概要を作成し、Hyperframes を使用して <output-dir>/composition/ にビデオ実装を作成します。
/brag は、製品のアングル、ソースマテリアル、ストーリーボード、トーン、フォーマット、オーディオ選択、音楽キューのガイダンス、および配信期待値を所有します。Hyperframes は、具体的な構成構造、正確なアニメーションタイミング、アニメーションメカニクス、ランタイムの選択、リンティングルール、およびレンダリングワークフローを所有します。
ゲート: npx hyperframes check が <output-dir>/composition/ 内でエラーゼロで合格すること（レンダリング前の唯一のブラウザゲート。監査内容については npx hyperframes check --help を参照）。
ステップ 4: 検証、レンダリング、配信
参照: references/step-4-deliver.md
検証、プレビュー、<output-dir>/brag.mp4 へのレンダリング、最適なポスターフレームを <output-dir>/brag.jpg として選択、そのポスターをビデオのフレーム 0 として焼き付けてどこでもアイドルサムネイルにし、<output-dir>/share-copy.txt を作成します。
ゲート: <output-dir>/brag.mp4 が存在すること。最適フレームのポスター <output-dir>/brag.jpg が選択され（任意のフレームではない）、brag.mp4 のフレーム 0 として焼き付けられていること。共有コピーが作成されていること。
トーンシステム
/brag には7つのトーンプリセットが付属しています。それぞれがスクリプトのエネルギー、ペース、タイポグラフィの個性、トランジションスタイルを変更します。プリセットはデフォルトであり、制限ではありません。
完全な定義: references/tones.md
| トーン | エネルギー | 一言 |
|---|---|---|
default | 遊び心があり、クリーン、投稿可能 | 良い雰囲気のデフォルト |
polished | シリアス、エレガント | ジョークではないプロジェクト向け |
yc-parody | 無表情なスタートアップエネルギー | 不条理なプロジェクトに適用される偽の真剣さ |
chaotic | 速く、うるさく、攻撃的 | 過激で手に負えない |
deadpan | 落ち着いていて、ドライで、控えめ | 何もジョークではないというジョーク |
cinematic | 劇的、トレーラースケール | 大きな動き、より大きな主張 |
app-store | スムーズ、機能カードのようにクリーン | 企業的だが退屈ではない |
プリセットを洗練またはオーバーライドするために、自由形式のクリエイティブな方向性を常に許可します。
クリエイティブの法則
これらは、トーンに関係なくすべてのブレイグビデオに適用されます。
短く。 15〜25秒。理由なく1秒たりとも超えないこと。これはナレーションの有無にかかわらず適用されます。ナレーションによって時間枠が延長されることはありません。
読みやすく。 モーションとカットを通じてペースを高く保ち、テキストをフラッシュ表示させることは決してしないでください。視聴者が読まなければならないすべての行は、読むのに十分な時間保持されます（短いラベルは約0.8秒間静止。文は1単語あたり約0.3秒）。素早くイン、そしてホールド。決して素早くイン、そのまま消える、ではありません。
具体的に。 ビデオは、あらゆるプロジェクトではなく、この特定のプロジェクトのために作られたように感じられなければなりません。
モノを見せる。 少なくとも1つのシーンでは、製品の実際のUI、コピー、または主要なビジュアルを表示する必要があります。抽象的なフィラーは禁止です。
一般的なSaaS用語は禁止。 「ワークフローを効率化」は禁止です。プロジェクトの実際のコピーと主張を使用してください。
フックがすべて。 最初の2秒で、誰かが見続けるかどうかが決まります。他の何よりも先にフックを計画してください。
面白さはその価値を得る。 ユーモアは、面白くしようとするのではなく、プロジェクトの不条理さから生まれるべきです。
パターン:
フック（2-3秒）→ 披露（2-4秒）→ 2-3の鋭いハイライト（5-12秒）→ オチ/アウトロ（2-4秒）
これを適応させてください。すべてのプロジェクトに正確に3つのハイライトが必要なわけではありません。パターンは開始形状であり、テンプレートではありません。