Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/prompting/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -120,10 +120,10 @@ Either shape starts a short interview before anything is built. This isn't the a

| Question | Your options |
| --- | --- |
| **Storyboard?** | `yes` — review the plan, wireframe sketches, and the build pass by pass on a live board (recommended past a couple of scenes) · `no` — one finished video from the confirmed brief |
| **Storyboard?** | `yes` — review the plan in chat, wireframe sketches on a `storyboard.html` page you open in a browser, and the build pass by pass (recommended past a couple of scenes) · `no` — one finished video from the confirmed brief |
| **Automation or companion?** | `automation` — the matched workflow's pipeline executes the brief end to end · `companion` — build it together in `/general-video` with every HyperFrames capability on the table |

The two are independent — all four combinations are valid, and a companion run reviews on the live board too when you said yes to the storyboard. Four routes skip both questions because neither has anything to add: `/motion-graphics` (the piece is seconds long), `/slideshow` (the deliverable is a navigable deck, not a rendered video), and `/embedded-captions` and `/talking-head-recut` (the footage is untouched, so there's no storyboard to review).
The two are independent — all four combinations are valid, and a companion run goes through the same review passes when you said yes to the storyboard. Four routes skip both questions because neither has anything to add: `/motion-graphics` (the piece is seconds long), `/slideshow` (the deliverable is a navigable deck, not a rendered video), and `/embedded-captions` and `/talking-head-recut` (the footage is untouched, so there's no storyboard to review).

In a hurry, skip the whole conversation by saying so:

Expand Down
2 changes: 1 addition & 1 deletion docs/prompting/storyboards.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Prompt the **plan** once instead — the throughline, the job each frame does, t
This narrative vocabulary is a writing discipline, not extra `STORYBOARD.md` schema. The workflow translates your plan into the smaller machine-readable shape the build consumes.

<Note>
"Storyboard" is also a question the agent asks in the [opening interview](/prompting/overview#the-interview-what-the-agent-asks-first). Say yes there and the plan, the sketches, and the build all get reviewed with you pass by pass on a live board. That answer changes the review process, not the route. Either way, the plan this page teaches is what the build works from.
"Storyboard" is also a question the agent asks in the [opening interview](/prompting/overview#the-interview-what-the-agent-asks-first). Say yes there and the plan (in chat), the sketches (a `storyboard.html` page you open in a browser), and the build all get reviewed with you pass by pass. That answer changes the review process, not the route. Either way, the plan this page teaches is what the build works from.
</Note>

## Prompt the plan, not the scenes
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/storyboard/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const SCRIPT_FILENAME = "SCRIPT.md";

/**
* Lifecycle of a single frame. The agent advances each frame
* `outline → built → animated`; the Studio renders progress from this.
* `outline → built → animated`; scripts and the agent read progress from this.
*/
export type FrameStatus = "outline" | "built" | "animated";

Expand Down
18 changes: 9 additions & 9 deletions skills-manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,19 @@
"files": 142
},
"faceless-explainer": {
"hash": "b5a85c762928ba92",
"hash": "39e1e4d42e9a5ebe",
"files": 24
},
"figma": {
"hash": "642cce1b5e211182",
"files": 2
},
"general-video": {
"hash": "ab15530f09bec21c",
"hash": "079d3479295e27b4",
"files": 4
},
"hyperframes": {
"hash": "30397aa94f47ecc8",
"hash": "5b055fe7a020fcc5",
"files": 26
},
"hyperframes-animation": {
Expand All @@ -30,16 +30,16 @@
"files": 7
},
"hyperframes-cli": {
"hash": "656d872004d9e2e8",
"hash": "13f4e5fda3baf7c8",
"files": 11
},
"hyperframes-core": {
"hash": "054fe5577b064927",
"files": 11
},
"hyperframes-creative": {
"hash": "7b6b7a78102da71b",
"files": 78
"hash": "0803c90800fda4ce",
"files": 79
},
"hyperframes-keyframes": {
"hash": "6bc62531ecea9a52",
Expand All @@ -62,15 +62,15 @@
"files": 23
},
"music-to-video": {
"hash": "e69f4646ef354be9",
"hash": "190e9885dab9b11d",
"files": 169
},
"pr-to-video": {
"hash": "4b550901e129c709",
"hash": "da3a68c5a2a86f77",
"files": 30
},
"product-launch-video": {
"hash": "3ab59cd235681ee9",
"hash": "ced501f76c52716b",
"files": 30
},
"remotion-to-hyperframes": {
Expand Down
10 changes: 5 additions & 5 deletions skills/faceless-explainer/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ Read `../hyperframes-creative/references/story-spine.md` (hook language, value-b

Use `story-design.md` for the explainer structure (concept / how-to / listicle / story), hook strategy, clarity techniques, emotional beats, the type-enum mapping, and `VO_MODE`. The video's sequence comes from **narrative design, not the input text's paragraph order** — reorder, merge, omit, compress. As a **soft guide**, consult the role→blueprint menu in `../hyperframes-animation/blueprints-index.md`: for each beat, write the voiceover in the shape its candidate blueprint implies and tag that candidate `blueprint:` id when one fits. Teaching truth still decides which beats exist — never force a beat to fit a blueprint, and never invent a beat just because a proven shape is available. Faceless visuals are invented downstream, so frames do **not** carry an asset inventory: leave `asset_candidates` empty unless the user supplied a real `public/<basename>` image. Use the exact required fields from the storyboard and script references.

After drafting, run the review loop's plan pass — `../hyperframes/references/review-loop.md` § 1: present the plan as a proposal, and ask the two questions — approve or change, and **sketches first** (recommended) or skip. Feedback loops through chat or the board's comments file until approved. This is a **checkpoint gate** (brief contract § 1): in autonomous mode there is no board and nothing to ask — post the same summary as a heads-up and proceed; sketches collapse into the build, and the one preview question comes at Step 6.
After drafting, run the review loop's plan pass — `../hyperframes/references/review-loop.md` § 1: present the plan as a proposal, and ask the two questions — approve or change, and **sketches first** (recommended) or skip. Feedback arrives as a chat reply; loop until approved. This is a **checkpoint gate** (brief contract § 1): in autonomous mode there is nothing to ask — post the same summary as a heads-up and proceed; sketches collapse into the build, and the one preview question comes at Step 6.

**Gate:** `STORYBOARD.md` exists, every frame has the required narrative fields, `SCRIPT.md` exists when narration is needed, and the user approved the frame-by-frame plan (autonomous: the summary was posted as a heads-up).

Expand Down Expand Up @@ -117,7 +117,7 @@ If there is no narration and no `SCRIPT.md`, skip voice generation. BGM may stil

Goal: Add the visual direction, layout intent, and motion choices to each storyboard frame.

**Sketch the board first (collaborative only).** The moment the plan is approved, run the sketch pass — `../hyperframes/references/review-loop.md` § 2 (don't wait on Step 3.1; sketches don't use timings): wireframe every frame yourself, mark each `built`, pause for the one layout question when the board is full, and revise only the sketches named until the board is confirmed. Only then write the visual design below onto the confirmed layouts. In autonomous mode, or when the user chose to skip sketches at Step 3, skip this pass — frames go straight from `outline` to `animated` at Step 5.
**Sketch the storyboard sheet first (collaborative only).** The moment the plan is approved, run the sketch pass — `../hyperframes/references/review-loop.md` § 2 (don't wait on Step 3.1; sketches don't use timings): wireframe every frame yourself as a cell of `storyboard.html` (`../hyperframes-creative/references/storyboard-recipe.md` § 3), mark each `built`, pause for the one layout question when every frame is `built`, and revise only the sketches named until the sheet is confirmed. Only then write the visual design below onto the confirmed layouts. In autonomous mode, or when the user chose to skip sketches at Step 3, skip this pass — frames go straight from `outline` to `animated` at Step 5.

Edit `STORYBOARD.md` in place. Do not create another storyboard. Use `frame.md` as source of truth for color, type, layout feel, and style.

Expand All @@ -129,7 +129,7 @@ For every frame, write a **time-coded shot sequence** into `STORYBOARD.md` per `

Do not change story, script, `transition_in`, or the source text. Do not write HTML in this step. There is **no asset-staging step** — faceless visuals are built by the workers in Step 5. If the user supplied a real `public/<basename>` image, reference it by path in the relevant frame's `focal`/`roles`; otherwise nothing to stage.

**Gate:** every frame has a time-coded shot sequence whose reveals are paced to the voiceover (no front-loading); each frame names its invented `focal` and/or `roles`; `## Video direction` exists. Collaborative: the sketch board was confirmed.
**Gate:** every frame has a time-coded shot sequence whose reveals are paced to the voiceover (no front-loading); each frame names its invented `focal` and/or `roles`; `## Video direction` exists. Collaborative: the sketch sheet was confirmed.

---

Expand Down Expand Up @@ -165,7 +165,7 @@ After audio timings exist, build captions in the background and assemble the ind

`captions.mjs` uses the project's `.hyperframes/caption-skin.html` (copied in Step 2) as the caption look, injecting brand tokens from `frame.md`; with no skin present it renders the built-in default pill. `captions: skipped (<reason>)` is valid. Continue without captions when explicitly skipped.

**Gate:** every frame is marked `animated` (collaborative: the sketch board was confirmed at Step 4), `index.html` exists, and captions are built or explicitly skipped.
**Gate:** every frame is marked `animated` (collaborative: the sketch sheet was confirmed at Step 4), `index.html` exists, and captions are built or explicitly skipped.

---

Expand All @@ -191,7 +191,7 @@ If a command fails, surface stderr and stop — don't pile on recovery commands.

**Known false-positive — do not chase it.** `check` may report a handful of `text_box_overflow` findings of ~1–4px on the **caption** highlight words (selector `#caption-word-*` / `.caption-line`). The caption pill uses a deliberately snug `line-height` (set once in `scripts/captions.mjs`) and has **no `overflow:hidden`**, so a heavy display glyph's ink spills a few px into the pill's own padding — nothing is actually clipped. Treat these as expected and proceed. Do **not** inflate the caption `line-height` (it balloons the pill, which is worse). Only act on a `text_box_overflow` when it names a **frame** element (`#el-NN-*`), not a caption word.

After checks pass, pause for user review — the review loop's final look (`../hyperframes/references/review-loop.md` § 4): one question, on the Studio that has been open since Step 3 — render now, or what changes? (Autonomous: the one kept question, preview first or render.) Then deliver the MP4 with the contact sheet and the frame ids so revisions can target a single frame.
After checks pass, pause for user review — the review loop's final look (`../hyperframes/references/review-loop.md` § 4): one question, on the final Studio preview — render now, or what changes? (Autonomous: the one kept question, preview first or render.) Then deliver the MP4 with the contact sheet and the frame ids so revisions can target a single frame.

Preview: `npx hyperframes preview --background`

Expand Down
6 changes: 3 additions & 3 deletions skills/general-video/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Use only the canonical terms from `../hyperframes/references/brief-contract.md`:
| Field | Meaning | Effect |
| -------------- | ------------------------------------- | ----------------------------------------------------------------------------------- |
| `flow` | Who drives | `automation`: choose and execute the route. `companion`: co-create in conversation. |
| `storyboard` | Whether the board is a review surface | `yes`: run plan and sketch review. `no`: build without the board. |
| `storyboard` | Plan, sketch, and review before build | `yes`: run plan and sketch review (`storyboard.html`). `no`: build without it. |
| derived `mode` | How checkpoint gates behave | Follow the brief contract. Never ask the user to name a mode. |

Do not invent synonyms for these states. An ongoing “just build it” signal is handled by the intent layer and arrives as `flow: automation`, `storyboard: no`.
Expand Down Expand Up @@ -101,8 +101,8 @@ Do not replace these reads with recollection. Progressive disclosure saves conte

Use this dependency order. Skip a stage only when its input is absent.

1. **Plan.** State the viewer arc, structure, rhythm, and duration driver. Use one file for a short single scene; use sub-compositions for three or more hard scene cuts or any reused scene. Read `/hyperframes-creative` → `references/story-spine.md` for narrated arcs, `references/beat-direction.md` for rhythm, and `/hyperframes-core` → `references/composition-patterns.md` for structure. For an open-ended multi-scene brief, expand the prompt through `/hyperframes-creative` → `references/prompt-expansion.md`. A multi-scene plan cites each scene's shape: a blueprint id from `/hyperframes-animation` → `blueprints-index.md` when one fits, or the named rules it composes from `rules-index.md` when none does — motion names come from those indexes, never invented. Story truth decides which scenes exist; the citation dresses them. **Search the live catalog before you plan to build any named look yourself**: for every look, effect, treatment or transition the brief names — "CRT scanlines", "glitch", "film grain", "shimmer sweep", "confetti burst" — run `npx hyperframes catalog --query "<the look, in plain English>" --json` and read the top results before the plan names how that look gets built. The search needs **nothing installed**: no project, no prior `add`, no account. It ranks the whole hosted registry (~400 blocks and components) from any directory, so it also applies to a look the user asks for mid-build. Blocks the plan names are installed at stage 3; hand-author a look only after a search for it came back with nothing that fits. A multi-scene plan is also recorded as the dispatch artifact: one `## Frame N` block per scene in `STORYBOARD.md` — `status: outline`, a declared `src:`, the blueprint/rules citation, and the beat text — **even when `storyboard: no`**. The block is the dispatch unit; the board is only the review surface.
2. **Review the plan when requested.** For `storyboard: yes`, run the shared review loop over those blocks. For `storyboard: no`, continue without opening the board. When a plan pause happens anyway, fold the sub-agent delegation grant (needed by codex for step 4's dispatch) into that pause rather than stopping again later.
1. **Plan.** State the viewer arc, structure, rhythm, and duration driver. Use one file for a short single scene; use sub-compositions for three or more hard scene cuts or any reused scene. Read `/hyperframes-creative` → `references/story-spine.md` for narrated arcs, `references/beat-direction.md` for rhythm, and `/hyperframes-core` → `references/composition-patterns.md` for structure. For an open-ended multi-scene brief, expand the prompt through `/hyperframes-creative` → `references/prompt-expansion.md`. A multi-scene plan cites each scene's shape: a blueprint id from `/hyperframes-animation` → `blueprints-index.md` when one fits, or the named rules it composes from `rules-index.md` when none does — motion names come from those indexes, never invented. Story truth decides which scenes exist; the citation dresses them. **Search the live catalog before you plan to build any named look yourself**: for every look, effect, treatment or transition the brief names — "CRT scanlines", "glitch", "film grain", "shimmer sweep", "confetti burst" — run `npx hyperframes catalog --query "<the look, in plain English>" --json` and read the top results before the plan names how that look gets built. The search needs **nothing installed**: no project, no prior `add`, no account. It ranks the whole hosted registry (~400 blocks and components) from any directory, so it also applies to a look the user asks for mid-build. Blocks the plan names are installed at stage 3; hand-author a look only after a search for it came back with nothing that fits. A multi-scene plan is also recorded as the dispatch artifact: one `## Frame N` block per scene in `STORYBOARD.md` — `status: outline`, a declared `src:`, the blueprint/rules citation, and the beat text — **even when `storyboard: no`**. The block is the dispatch unit; the storyboard sheet is only the review surface.
2. **Review the plan when requested.** For `storyboard: yes`, run the shared review loop over those blocks. For `storyboard: no`, continue without a plan pause or sketch sheet. When a plan pause happens anyway, fold the sub-agent delegation grant (needed by codex for step 4's dispatch) into that pause rather than stopping again later.
3. **Resolve dependencies.** Install registry blocks before parallel work. Stage user assets, adopt existing media, and resolve only what the brief requires. Start audio early when its timings drive duration.
4. **Build scenes.** For a short single-scene piece, implement the scene at its most visible moment before adding motion (the confirmed wireframe, when present, is that end state and must not be redrawn), then animate from its cited blueprint or rules — read the full recipe body (`/hyperframes-animation` → `blueprints/<id>.md`, `rules/<id>.md`) before writing motion.

Expand Down
10 changes: 2 additions & 8 deletions skills/hyperframes-cli/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,15 +53,9 @@ ffprobe -v error -show_format -show_streams out.mp4

`check` runs lint first, then uses one browser session and one seek pass to audit runtime errors, failed requests, layout, `*.motion.json` assertions, and WCAG contrast. Persistent findings gate the exit code; transient entrance or exit findings are informational. Use `--strict` to gate warnings. `validate`, `inspect`, and `layout` remain aliases for compatibility but must not appear in new instructions or scripts.

## Two different preview surfaces
## Preview before render

Do not confuse these states:

| Surface | When it may open | Purpose |
| ------------------------- | -------------------- | -------------------------------------------------------------------- |
| Final composition preview | After `check` passes | Review the assembled timeline before render. Open `#project/<name>`. |

The early board is not approval of the final video. Rendering always requires the final approval defined by `hyperframes/references/review-loop.md`.
Open the final composition preview (`#project/<name>`) only after `check` passes, to review the assembled timeline. The plan in chat and the `storyboard.html` sketch sheet are not approval of the final video. Rendering always requires the final approval defined by `hyperframes/references/review-loop.md`.

## Sub-composition smoke test

Expand Down
2 changes: 2 additions & 0 deletions skills/hyperframes-creative/references/story-spine.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ When Step 3 presents the plan (a checkpoint gate — `hyperframes/references/bri

- Recommendations keep their receipts (brief-contract § 3): the archetype choice, the beat count, and any beat the user might question each state their basis.

How to write the storyboard itself, and the `storyboard.html` page it is reviewed on, is `storyboard-recipe.md`.

The proposal shape — echo line → frame table → style / duration footer → "approve or adjust" — is the cheapest place to iterate: a frame change here costs 30 seconds; the same change after build costs minutes.

## 4. Visuals point back to the source
Expand Down
Loading
Loading