Hyperframes Starter

What it does

Your first composition in one prompt.

Your agent loads it when the user wants a video built from HTML. It carries 3 rules and reads a profile.md with your details before it starts, so the output matches your brand and project.

SKILL.md, first 40 lines

---
name: hyperframes-starter
description: "Use when the user wants to make a video from HTML with HyperFrames, asks for \"a launch video\", \"a short promo\" or \"my first composition\", or needs a scene plan for one. Plans three to six scenes sized and timed to the chosen format and length, writes the composition, previews it, then renders. Reads profile.md for brand, format, length and colours."
---

# Hyperframes Starter

HyperFrames builds video from HTML: each composition is a web page with timing attributes, rendered to video by its command line. A good first composition is mostly a planning problem. Decide the scenes, their durations and the reading time before writing any markup.

## Before you start

Read `profile.md` in this folder:

| profile.md line | Use |
|---|---|
| **Brand** | Name, and the wording on the opening and closing scenes. |
| **Format** | Canvas size and layout: 16:9 is 1920x1080, 9:16 is 1080x1920, 1:1 is 1080x1080, 4:5 is 1080x1350. |
| **Length** | Total running time, which sets the scene count. |
| **Colours** | The only colours used: background, text, accent. |

If a line says "not set", ask the user once, write the answer into profile.md, then continue.

For exact HyperFrames syntax (attribute names, how clips and tracks nest, how to start a preview and render), follow the installed HyperFrames skill or its docs. Do not guess an attribute from memory; read the docs first and match them.

## Workflow

1. Get the single message. One sentence: what the viewer should know or do at the end. If the user cannot state it, ask for it before planning.
2. Choose scene count from Length: 15s gives 3 scenes, 30s gives 4 or 5, 60s gives 5 or 6. One idea per scene.
3. Write the plan as a table before any code: scene, seconds, on-screen text, visual, motion.
4. Time each scene by reading time. Allow 0.3 seconds per word plus 1 second of hold, and never fewer than 2 seconds. A seven-word line therefore needs 3.1 seconds, so round up to 3.5.
5. Lock the structure: scene 1 is the hook and states the promise in 8 words or fewer, the middle scenes prove it, the last scene is one call to action with the brand name.
6. Apply the Colours: dark or light background, text at 4.5:1 contrast, the accent used for one element per scene.
7. Write the composition following the installed HyperFrames docs for timing and structure. Keep scene durations as named values at the top so retiming is a one-line change.
8. Render a preview first, check it frame by frame at each scene change, fix, and only then ask before the final render. Rendering can be slow, so do not start it unasked.

## Rules and thresholds

- Text on screen: at most 12 words per scene and one line of motion at a time.
- Minimum text size: 48px on 1080-wide canvases, 40px on 16:9.
- Keep text inside the safe area: for 9:16 leave the bottom fifth and top tenth clear of text, since platform buttons cover them.

Install

One command, in your project folder. It detects your agent; add --agent all for every agent.

npx proskills-cli add hyperframes-starter

Or copy the skill folder (the one holding SKILL.md) into the directory your agent reads, then restart it or start a new session.

More from Motion & Video

• Remotion Scenes$12Reusable scenes and transitions.
• GSAP Timelines$9Choreography without the jank.
• Launch Film$12Storyboard, motion and render in one prompt.