You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: skills/website-to-hyperframes/SKILL.md
+55-48Lines changed: 55 additions & 48 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,79 +14,80 @@ Users say things like:
14
14
- "Turn this website into a 15-second social ad for Instagram"
15
15
- "Create a 30-second product tour from https://..."
16
16
17
-
The workflow has 7 steps. Each produces an artifact that gates the next.
17
+
The workflow has 7 steps. Each produces an artifact that gates the next. By default it's collaborative — gates marked 💬 stop and ask the user. If the user signals autonomous mode ("decide for me", "surprise me"), every 💬 gate is skipped; see step-2-brief.md for how that propagates.
Run the capture, read the extracted data, and build a working summary using the write-down-and-forget method.
25
+
Capture the site, then read the extracted data to understand the **brand and product** — what it does, who it's for, what voice it speaks in, what mood it lives in. The captured assets are a brand toolkit for later, not the building blocks the video is made from.
26
26
27
-
**Gate:**Print your site summary (name, top colors, fonts, key assets, one-sentence vibe).
27
+
**Gate:**Site summary printed — strategy-first (what the product does, who it's for, brand voice) before the asset / color / font inventory.
Write a simple brand reference for the captured website. 6 sections, ~90 lines. This is a cheat sheet, not the creative plan — that comes in Step 4.
35
+
Write DESIGN.md — a brand cheat sheet covering the visual identity: colors, typography, component styles, layout principles. Use `design-styles.json` for exact computed values.
36
36
37
-
**Gate:**`DESIGN.md` exists in the project directory.
37
+
**Speed option:** For fast-pacing videos (billboard-per-beat), DESIGN.md can be a 50-line summary of colors + fonts + do's/don'ts — not a 300-line document. The sub-agent prompt in Step 5 pastes brand values directly, so DESIGN.md depth only matters for complex compositions.
38
+
39
+
**Gate:**`DESIGN.md` exists (any length) with at minimum: color palette, font choices, and do's/don'ts.
**Read:**[references/step-2-brief.md](references/step-2-brief.md), [references/capabilities.md](references/capabilities.md) (scan the Table of Contents — deep-dive sections only as needed)
44
46
45
-
Write the narration script. The story backbone. Scene durations come from the narration, not from guessing.
47
+
Align with the user on **what the video must communicate** before talking visuals or assets. Parse the user's prompt — they probably already gave you the video type and style. Ask only what's missing: the ONE thing this video must say, the narrative arc, and the audience.
46
48
47
-
**Gate:**`SCRIPT.md` exists in the project directory.
49
+
**Gate:**Video type, duration, format, and — critically — the message and narrative arc are locked. Without those, Step 3 can't write a concept-first storyboard.
Write per-beat creative direction: mood, camera, animations, transitions, assets, depth layers, SFX. This is the creative north star — the document the engineer follows to build each composition.
57
+
Write the storyboard concept-first: message → narrative arc → beats that serve the arc → techniques per beat → brand accents pass at the end. Then write the narration script to match. Present both to the user with a beat-by-beat summary. Iterate until they approve.
56
58
57
-
**Gate:**`STORYBOARD.md`exists with beat-by-beat direction and an asset audit table.
59
+
**Gate:**`STORYBOARD.md`+ `SCRIPT.md` exist AND the user has approved the plan.
Generate TTS audio, transcribe for word-level timestamps, and map timestamps to beats. Update STORYBOARD.md with real durations.
67
+
If Step 2 said no narration — ask about background music, then skip to Step 5. Otherwise: ask the user which TTS provider (HeyGen TTS, ElevenLabs, or Kokoro), generate audio, transcribe, map timestamps to beats. Then ask about captions.
**Gate:**Either (a) no narration was requested and storyboard has manual beat timings, or (b) `narration.wav`+ `transcript.json` exist and beat timings updated with real durations.
68
70
69
71
---
70
72
71
-
## Step 6: Build Compositions
73
+
## Step 5: Build Compositions
72
74
73
75
**Read:** The `hyperframes` skill (load it — every rule matters)
Build each composition following the storyboard. After each one: self-review for layout, asset placement, and animation quality.
78
+
Build index.html and compositions following the architecture and pacing chosen in the storyboard (Step 3). Sub-agents run `hyperframes lint` and `hyperframes snapshot` on each beat before reporting back.
77
79
78
-
**Gate:** Every composition has been self-reviewed. No overlapping elements, no misplaced assets, no static images without motion.
80
+
**Gate:** Every `compositions/beat-N.html` has been read top-to-bottom by the main agent against DESIGN.md and STORYBOARD.md. The per-beat checklist lives in [step-5-build.md](references/step-5-build.md).
Lint, validate, take snapshots scaled to video length (formula: `max(beats × 3, ceil(duration_seconds / 2))`), and review each one. Fix issues before delivering. Deliver the localhost Studio project URL — only render to MP4 on explicit user request.
85
89
86
-
Lint, validate, snapshot, preview. Deliver the localhost Studio project URL
87
-
(`http://localhost:<port>/#project/<project-name>`) to the user first — only
88
-
render to MP4 on explicit request. Do not treat `index.html` as the project
89
-
handoff link; it is source-code context only.
90
+
**Deliver something you're proud of.** Before handing off, ask yourself: would I post this on social media with my name on it? If not, fix what's wrong.
90
91
91
92
**Gate:**`npx hyperframes lint` and `npx hyperframes validate` pass with zero errors, and the final response includes the active Studio project URL.
92
93
@@ -96,13 +97,17 @@ handoff link; it is source-code context only.
| Launch teaser | 10-20s | 2-4 | Minimal, high energy |
100
+
Typical constraints by video type — use as a starting point, not a formula. Beat count should follow from the content and the narration, not from a target range.
Beat count is not in this table intentionally — it should come from the storyboard, not from "social ad = 3-4 beats." A social ad for a complex product might need 5 well-timed beats. A brand reel with one strong visual thesis might need 3.
106
111
107
112
### Format
108
113
@@ -112,13 +117,15 @@ handoff link; it is source-code context only.
|[step-2-brief.md](references/step-2-brief.md)| Step 2 — align on message, narrative arc, audience with user |
125
+
|[capabilities.md](references/capabilities.md)| Steps 2 & 5 — full inventory of what HyperFrames can do (24 sections). Scan the TOC during the brief, deep-dive specific sections during build |
126
+
|[step-3-storyboard.md](references/step-3-storyboard.md)| Step 3 — storyboard + script (combined) with user review gate |
All sound effects in this directory are sourced from [Pixabay](https://pixabay.com/sound-effects/) and used under the [Pixabay Content License](https://pixabay.com/service/license-summary/).
4
+
5
+
The Pixabay license allows free use for commercial and non-commercial purposes without attribution, but attribution is appreciated and given here for transparency.
6
+
7
+
## Files
8
+
9
+
The following `.mp3` files are bundled with this skill:
0 commit comments