brag

Files (200)

• SKILL.md
• README.md · assets/music/
• happy-beats-business-moves-vol-1-by-ende-dot-app.music-cues.json · assets/music/cues/
• happy-beats-business-moves-vol-1-by-ende-dot-app.music-cues.md · assets/music/cues/
• happy-beats-business-moves-vol-10-by-ende-dot-app.music-cues.json · assets/music/cues/
• happy-beats-business-moves-vol-10-by-ende-dot-app.music-cues.md · assets/music/cues/
• happy-beats-business-moves-vol-11-by-ende-dot-app.music-cues.json · assets/music/cues/
• happy-beats-business-moves-vol-11-by-ende-dot-app.music-cues.md · assets/music/cues/
• happy-beats-business-moves-vol-12-by-ende-dot-app.music-cues.json · assets/music/cues/
• happy-beats-business-moves-vol-12-by-ende-dot-app.music-cues.md · assets/music/cues/
• happy-beats-business-moves-vol-9-by-ende-dot-app.music-cues.json · assets/music/cues/
• happy-beats-business-moves-vol-9-by-ende-dot-app.music-cues.md · assets/music/cues/
• happy-beats-business-moves-vol-1-by-ende-dot-app.mp3 · assets/music/
• happy-beats-business-moves-vol-10-by-ende-dot-app.mp3 · assets/music/
• happy-beats-business-moves-vol-11-by-ende-dot-app.mp3 · assets/music/
• happy-beats-business-moves-vol-12-by-ende-dot-app.mp3 · assets/music/
• happy-beats-business-moves-vol-9-by-ende-dot-app.mp3 · assets/music/
• card-fan-1.ogg · assets/sfx/casino/
• card-fan-2.ogg · assets/sfx/casino/
• card-place-1.ogg · assets/sfx/casino/
• card-place-2.ogg · assets/sfx/casino/
• card-place-3.ogg · assets/sfx/casino/
• card-place-4.ogg · assets/sfx/casino/
• card-shove-1.ogg · assets/sfx/casino/
• card-shove-2.ogg · assets/sfx/casino/
• card-shove-3.ogg · assets/sfx/casino/
• card-shove-4.ogg · assets/sfx/casino/
• card-shuffle.ogg · assets/sfx/casino/
• card-slide-1.ogg · assets/sfx/casino/
• card-slide-2.ogg · assets/sfx/casino/
• card-slide-3.ogg · assets/sfx/casino/
• card-slide-4.ogg · assets/sfx/casino/
• card-slide-5.ogg · assets/sfx/casino/
• card-slide-6.ogg · assets/sfx/casino/
• card-slide-7.ogg · assets/sfx/casino/
• card-slide-8.ogg · assets/sfx/casino/
• cards-pack-open-1.ogg · assets/sfx/casino/
• cards-pack-open-2.ogg · assets/sfx/casino/
• chip-lay-1.ogg · assets/sfx/casino/
• chip-lay-2.ogg · assets/sfx/casino/
• chip-lay-3.ogg · assets/sfx/casino/
• chips-collide-1.ogg · assets/sfx/casino/
• chips-collide-2.ogg · assets/sfx/casino/
• chips-collide-3.ogg · assets/sfx/casino/
• chips-collide-4.ogg · assets/sfx/casino/
• chips-handle-1.ogg · assets/sfx/casino/
• chips-handle-2.ogg · assets/sfx/casino/
• chips-handle-3.ogg · assets/sfx/casino/
• chips-handle-4.ogg · assets/sfx/casino/
• chips-handle-6.ogg · assets/sfx/casino/
• chips-stack-1.ogg · assets/sfx/casino/
• chips-stack-2.ogg · assets/sfx/casino/
• chips-stack-3.ogg · assets/sfx/casino/
• chips-stack-4.ogg · assets/sfx/casino/
• chips-stack-5.ogg · assets/sfx/casino/
• chips-stack-6.ogg · assets/sfx/casino/
• dice-grab-1.ogg · assets/sfx/casino/
• dice-grab-2.ogg · assets/sfx/casino/
• dice-shake-1.ogg · assets/sfx/casino/
• dice-shake-2.ogg · assets/sfx/casino/
• …and 140 more

SKILL.md (first lines)

# /brag

You built it. Now let's brag about it.

## Skill directory

本技能目录是 `skills/brag/`（相对项目根）。文中所有 `skills/brag/...` 形式的路径都从项目根解析；跨技能引用 `../hyperframes-animation/...` 实际是 `skills/hyperframes-animation/...`。读取本技能的子文档时，把 `references/...`、`assets/...`、`scripts/...` 前缀补成 `skills/brag/`，不要假设它们相对当前工作目录。

## 渲染后端

完整流程依赖本机已安装的 Hyperframes CLI（`npx hyperframes ...`）。它装在项目根的 `node_modules` 里，因此在任意子目录（包括 `brag-output/composition/`）都能直接调用，不要加 `-y` 也不要让它去远程拉包。若 `npx hyperframes` 报错、缺失或渲染持续失败，不要卡住：改读 `skills/brag/slim.md`，那条路线不依赖 Hyperframes，由你自己写页面并用 ffmpeg 合成，然后如实告诉用户走了降级路线。

## Invocation dispatch (must happen first)

Before inspecting the project, parse the complete `/brag` invocation. If the
invocation contains `--voice`, set `voice.enabled = true`. Enable narration
only for that run. Do not enable narration automatically and do not fall back
to the normal no-voice workflow.

`/brag` turns the current project website or app into a short, polished, shareable launch video using Hyperframes. It is narrow, opinionated, and fun.

## What this skill does

1. Reads the current project code to understand the app.
2. Plans a short brag concept specific to this project.
3. Scripts and storyboards the video.
4. Hands a focused composition brief to Hyperframes.
5. Validates, renders, and writes share copy.

## Parsing the invocation

The user may invoke with natural language or flags:

```
/brag
/brag --tone chaotic
/brag --tone polished --format vertical
/brag this. Make it feel like a ridiculous startup launch.
```

Parse these options:

| Option | Values | Default |
|---|---|---|
| `--tone` | preset or freeform description | inferred |
| `--format` | `landscape`, `vertical`, `square` | `landscape` |
| `--duration` | seconds | auto (15-25s) |
| `--no-music` | flag | music on |
| `--no-sfx` | flag | sfx on |
| `--title` | string | inferred from project |
| `--voice` | flag | narration off |

Voice is opt-in. If `--voice` is present, use Kokoro via Hyperframes and do
not add any provider-selection logic. The voice workflow is intentionally
single-provider.

Tone can be a preset (`default`, `polished`, `yc-parody`, `chaotic`, `deadpan`, `cinematic`, `app-store`) or a creative direction such as "fake Series A launch from 2016", "museum exhibit", or "overproduced mobile game ad".

When the user gives freeform tone direction, map it to the nearest preset for pacing and structure, but preserve the user's direction in the plan and composition brief.

## Narration guidance

When `--voice` is enabled, write narration that complements the visuals, does
not simply read visible text, matches scene pacing, sounds natural and
conversational, and moves smoothly between scenes. Keep the script concise and
specific to the product so the voice feels like part of the edit rather than a
separate narration track.

---

## Output directory

By default, output goes to `brag-output/`. To avoid overwriting previous runs, use a timestamped directory:

```
brag-output-2026-05-04-143022/
```

Use a timestamp when:
- The user explicitly asks for a new run without overriding previous results
- A `brag-output/` directory already exists in the project

Generate the timestamp at the start of the run (`YYYY-MM-DD-HHmmss`) and use it consistently for all output paths in that run: plan, brief, composition, render, and share copy.


## Step 1: Inspect the project

**Read:** [references/step-1-inspect.md](skills/brag/references/step-1-inspect.md)

Scan the project directory and extract the information needed to plan the brag video.

**Gate:** You can answer all 9 questions in the brag planning rubric.

---

## Step 2: Plan and storyboard

**Read:** [references/step-2-plan.md](skills/brag/references/step-2-plan.md)

Write `<output-dir>/brag-plan.md` (where `<output-dir>` is `brag-output/` or the timestamped variant chosen above). Answer the planning rubric. Commit to a creative angle. Write the beat-by-beat storyboard including scenes, text, timing, transitions, and SFX cues.

When music is selected, include a compact `Music cue guidance` section: read the bundled track's cue preset from `skills/brag/assets/music/cues/` if present, otherwise note cues will be detected at composition time (any track now supports beat sync — see `references/audio.md`). Cue metadata is optional timing guidance only: story, readability, pacing, and product clarity stay primary.

**Gate:** `<output-dir>/brag-plan.md` exists with a full storyboard. Scene durations sum to 15–25 seconds.

---

## Step 3: Hand off to Hyperframes

**Read:** The Hyperframes domain skills — `hyperframes-core`, `hyperframes-animation`, `hyperframes-creative`, `hyperframes-keyframes`, `hyperframes-cli`. /brag is its own workflow: do not enter the `hyperframes` entry-point intent interview or route into its generic promo / launch-video workflow.
**Read:** [references/step-3-compose.md](skills/brag/references/step-3-compose.md)
**Read:** [references/audio.md](skills/brag/references/audio.md)

Write the composition brief and use Hyperframes to create the video implementation in `<output-dir>/composition/`.

`/brag` owns the product angle, source material, storyboard, tone, format, audio selection, music cue guidance, and delivery expectations. Hyperframes owns the concrete composition structure, exact animation timing, animation mechanics, runtime choices, linting rules, and render workflow.

**Gate:** `npx hyperframes check` passes with zero errors inside `<output-dir>/composition/` (the single browser gate before render — see hyperframes-cli for what it audits).

From 5235aa-web/pebbleagent, AGPL-3.0.

More from 5235aa-web/pebbleagent