Hyperframes video
Practical design judgment for AI coding agents: 78 installable skills for craft, research, generation, Figma, and Memoire.
npx -y skills add sarveshsea/design-skills --skill hyperframes-videoAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Current Hyperframes pack for HTML-first motion videos, lintable frames, previews, and render command prep.
SKILL.md
1.3 KB, 276 tokens by cl100k_base, as published. Nobody here has run it
Hyperframes Video
Use this Note when the video can be expressed as a deterministic HTML scene. Hyperframes is the lighter path for product cards, marketing loops, website captures, and simple composited explainers.
Current Workflow
- Generate
index.htmlandhyperframes.jsonin.memoire/videos/<id>. - Preview with
npx hyperframes preview .from the project folder, or pass the folder explicitly from Studio. - Lint with
npx hyperframes lint .before rendering when the command is available. - Render with
npx hyperframes render . --output dist/<id>.mp4.
Scaffold Rules
- Keep all external assets local to the project folder or explicit URLs.
- Prefer CSS keyframes and deterministic layout over runtime mutation.
- Store render outputs in
dist/and keephyperframes.jsonas the command contract Studio can inspect. - Use
@hyperframes/coreor@hyperframes/producerfor programmatic validation and rendering once the sidecar grows beyond command preparation.
Quality Bar
- Use fixed dimensions, fps, and duration in config.
- Avoid layout shifts between preview and render.
- Keep colors/tokens aligned with the source product rather than inventing a separate video theme.