From hyperframes
Create and edit HyperFrames video compositions for brand reels, montages, static loops, title cards, and freeform builds.
How this skill is triggered — by the user, by Claude, or both
Slash command
/hyperframes:general-videoThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Before relying on this workflow, run:
Before relying on this workflow, run:
npx hyperframes skills update general-video
A successful no-op means the skill is current. Surface an update failure instead of continuing from memory.
/media-use and follow its adoption, resolution, provider, provenance, and reuse contracts. Before the first authenticated provider action, run npx hyperframes auth status and relay its output verbatim. If signed out, apply the gate in ../hyperframes-core/references/brief-contract.md: collaborative waits for sign-in or an explicit offline choice; autonomous states the status and continues through an available offline provider. Surface a blocker when no offline provider can satisfy a required capability. Local adoption alone does not require an auth gate.figma.com URL, run /figma first. Build from its exported assets, tokens, components, or storyboard frames. Do not use raw Figma MCP calls because they skip SVG sanitization, media provenance, and brand-token binding.These adapters do not change the workflow selected by /hyperframes.
Apply the first matching row; do not evaluate lower state rows:
| State | Action |
|---|---|
| Specific edit | Make the edit, preserve existing project decisions, then rerun affected checks. Do not reopen discovery. |
BRIEF.md exists | Read it. If workflow names another workflow and flow is not companion, hand off. Ask no brief questions. |
No brief, but hyperframes.json or STORYBOARD.md exists | Resume from files and recorded preferences. Backfill BRIEF.md only from known facts. |
| Fresh creation | Run /hyperframes and its intent layer. Return here only for workflow: general-video or flow: companion. |
For a new project, choose a kebab-case directory name from the brief and scaffold before writing the brief:
npx hyperframes init "videos/<project>" --non-interactive --example=blank
Then write BRIEF.md at the project root using ../hyperframes-core/references/brief-format.md. In an existing project, the root is the directory containing hyperframes.json. Record only the confirmed preference-backed fields named by the brief format, using node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes <PROJECT_ROOT>; never record inferred defaults. Here <MEDIA_DIR> is the installed /media-use skill directory and <PROJECT_ROOT> is the directory containing hyperframes.json. If the intent layer adopted a recipe, apply it now with node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes <PROJECT_ROOT> --name <name> and do not ask again.
Use only the canonical terms from ../hyperframes-core/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. |
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.
flow: automation, choose the route and state it in one line in the first progress update.When flow: companion:
BRIEF.md and reconcile accepted ## Assets and ## Customizations with project artifacts. Complete accepted work that is still pending; leave completed work alone; do not offer an accepted capability again as if it were new.../hyperframes/references/capability-menu.md works two ways. As the trigger list: offer a relevant capability when the user mentions its input or the build reaches its need. As each pass's upgrade channel: a plan, sketch, or build checkpoint may carry one or two traced offers pointed at material the user is looking at ("scene 3's stat wants the count-up treatment"). Read it before offering; never dump the full catalog.BRIEF.md body section immediately. Rewrite a frontmatter field and record the confirmed preference only when the user explicitly changes it.These reads are mandatory when their condition matches:
| Condition | Read before acting |
|---|---|
| Any composition HTML or scene layout | /hyperframes-core; use references/determinism-rules.md for its layout contract |
| Any non-trivial creation or visual treatment | /hyperframes-creative → references/house-style.md and references/video-composition.md |
| Any motion, animation, or scene transition | /hyperframes-animation; follow its routing to the matching rules, adapters, blueprints, or transition references |
storyboard: yes | ../hyperframes-core/references/storyboard-format.md and ../hyperframes-core/references/review-loop.md |
| Any media asset or operation, including narration, BGM, SFX, captions, grading, or transforms | /media-use; for framework playback and placement also read /hyperframes-core → references/variables-and-media.md |
| Multi-scene assembly | ../hyperframes-core/references/production-loop.md |
flow: companion, before the first plan | /hyperframes-creative → references/story-spine.md and references/house-style.md; the nearest genre lens and the full ../hyperframes/references/capability-menu.md — the ceiling treatment is designed from these, not recalled |
| A companion capability offer, capture, beat grid, generative video, map, publishing, or cross-workflow capability | ../hyperframes/references/capability-menu.md |
| A design spec exists, before final approval | /hyperframes-creative → references/design-adherence.md |
Do not replace these reads with recollection. Progressive disclosure saves context only when the matching reference is actually loaded.
Use this dependency order. Skip a stage only when its input is absent.
/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.storyboard: yes, write one ## Frame N per scene with status: outline and a declared src, then run the shared review loop. For storyboard: no, continue without opening the board./hyperframes-core for the layout contract./hyperframes-animation → blueprints/<id>.md, rules/<id>.md) before writing its motion, and keep to it. Use /hyperframes-animation for runtime adapters and scene transitions. Keep animation details in that owning skill rather than re-defining them here.npx hyperframes lint for fast feedback after the first HTML pass and structural changes. For the final gate, run npx hyperframes check; it reruns lint internally, so do not run a redundant standalone lint immediately before it. For sub-compositions, inspect midpoint snapshots. For multi-scene work, review the animation map.Build what the user asked for. A title card is not a title card plus three scenes, music, and captions. Offer additions before adding them.
Resolve the design source in this order: frame.md → design.md → DESIGN.md. Treat the first file found as brand truth.
When no design spec exists, complete all four items before writing composition HTML:
house-style.md and video-composition.md./hyperframes-creative → references/typography.md; do not assume an unbundled display font exists in cloud rendering.Match density to the requested format and message. Density examples are guidance for produced frames, not permission to invent claims, scenes, or a fixed number of elements.
For a named style or mood, read /hyperframes-creative → references/visual-styles.md. When the user needs to choose visually and no shipped preset fits, read /hyperframes-creative → references/design-picker.md and run the interactive design selection there.
Timed elements use class="clip"; the root and relevant ancestors are sized; each composition registers one paused, seek-safe timeline on window.__timelines; rendering is deterministic. Do not use render-time network fetches, clocks, or unseeded randomness.
When the piece resembles a shipped workflow, borrow its genre references as examples. First run npx hyperframes skills update <workflow-name>. Borrow its story shape and taste, not its private scripts, pipeline state, or directory contract. The generic build remains owned by this skill.
A run is complete only when:
flow: companion, the treatment is delivered, not just the scope: every scene's cited blueprint or rules realized, the audio identity present (or the silence chosen and said), the open and close designed rather than defaulted;npx hyperframes check passes, including its built-in lint stage;/hyperframes-creative → references/design-adherence.md when a design spec exists;hyperframes-animation/scripts/animation-map.mjs is reviewed for multi-scene work;After final approval, offer once to freeze the run as a recipe, following ../hyperframes-core/references/review-loop.md § 4.
npx claudepluginhub wizardoftryout/hyperframesAuthor or edit custom HyperFrames video compositions, including brand reels, montages, title cards, and footage remixes. Use for longer or multi-scene pieces.
Creates video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML.
Directs premium product launch video creation with Hyperframes: brand DNA extraction, art direction, Apple-style motion design, and sound sync. Use alongside official Hyperframes and GSAP skills.