agentleFS
Sign inStart free
memi-designmemi-design/design-skills/skills/hyperframes-video/SKILL.md

hyperframes-video

Skill7 starsChanged 4 months agoMITView on GitHub

Current Hyperframes pack for HTML-first motion videos, lintable frames, previews, and render command prep.

7 other projects use a version of this.

Adopted by

Most recently taken up by

The file

We split this skill into the rules it gives an agent

7 rules. 0 are common, 6 are distinctive, and 1 is very specific to this project.

  • 0

    Common

    Most of the 5 edited versions we read keep these.

  • 6

    Distinctive

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use this Note when the video can be expressed as a deterministic HTML scene.

    line 8
  2. Distinctive:

    Keep all external assets local to the project folder or explicit URLs.

    line 23
  3. Distinctive:

    Prefer CSS keyframes and deterministic layout over runtime mutation.

    line 24
  4. Very specific:

    Use @hyperframes/core or @hyperframes/producer for programmatic validation and rendering once the sidecar grows beyond command preparation.

    line 27
  5. Distinctive:

    Use fixed dimensions, fps, and duration in config.

    line 32
  6. Distinctive:

    Avoid layout shifts between preview and render.

    line 33
  7. Distinctive:

    Keep colors/tokens aligned with the source product rather than inventing a separate video theme.

    line 34

“Common” is measured: kept by at least 6 in 10 of the 5 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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

  1. Generate index.html and hyperframes.json in .memoire/videos/<id>.
  2. Preview with npx hyperframes preview . from the project folder, or pass the folder explicitly from Studio.
  3. Lint with npx hyperframes lint . before rendering when the command is available.
  4. 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 keep hyperframes.json as the command contract Studio can inspect.
  • Use @hyperframes/core or @hyperframes/producer for 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.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free