Files
WaterrrForeverandClaude Opus 4.8 d0f0ec29e7 feat(skills): frame-preset library + shared audio engine (foundation) (#1632)
* feat(hyperframes-creative): add frame-preset library

Add a library of ready-made visual frame presets (claude, biennale-yellow,
blockframe, blue-professional, bold-poster, broadside, capsule, cartesian,
cobalt-grid, coral, creative-mode, daisy-days, editorial-forest, …), each with
a FRAME.md spec, a frame-showcase.html, and a per-preset caption-skin.html.
Registered in the creative design-spec so workflows can remix a preset onto
brand tokens.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(hyperframes-media): shared TTS/BGM/SFX audio engine

Add a shared audio engine under hyperframes-media (scripts/audio.mjs + lib/
tts.mjs, bgm.mjs, sfx.mjs, heygen.mjs) plus a bundled SFX pack and manifest.
Workflows resolve this engine by path (../../hyperframes-media/scripts/
audio.mjs) for text-to-speech, background music, and sound effects, so audio
is authored once and reused across skills instead of duplicated per workflow.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(skills): gate render on user review; refresh router, core, general-video

- hyperframes-cli: render is now user-gated — preview opens Studio (the timeline
  editor where the user can hand-edit anything, not just watch); never
  auto-render once checks pass, pause at preview and render only after approval.
- hyperframes (router): tighten the entry SKILL.md description + routing.
- hyperframes-core: rewrite SKILL.md and add script-format.md + storyboard-format.md
  references for the script-driven authoring architecture.
- general-video: tidy the fallback-workflow description and routing table.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* style(hyperframes-creative): reformat frame-preset showcase HTML

Run the HTML formatter over the frame-showcase.html files (indentation,
self-closing void tags, one CSS declaration per line). Formatting only — no
content or markup changes.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(hyperframes-media): correct wait-bgm field mapping and guard credential parse

Two correctness fixes from review (#1632):

- wait-bgm.mjs read audioMeta.bgm_path / audioMeta.bgm_enabled, but audio.mjs
  writes the path nested as bgm.path and the flag as bgm_pending. The detached
  generate path (Lyria/MusicGen) therefore always saw an empty path and exited
  status: disabled, silently dropping the music track even while generation was
  running. Read audioMeta.bgm?.path and gate on bgm_pending.
- heygenCredential() had an unguarded JSON.parse despite documenting that it
  never throws — a malformed ~/.heygen credentials file crashed the engine at
  startup instead of degrading to no-credential. Wrap the parse and return null.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* chore(hyperframes): add router tag to entry skill metadata

Fold the router metadata tag into the foundation rewrite of the entry SKILL.md.
This file is owned by this PR (the full router rewrite); keeping the tag tweak
here — instead of a separate edit on the pre-rewrite version in another PR —
avoids a guaranteed merge conflict between the two.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-22 22:49:10 +08:00

5.3 KiB

name, description
name description
hyperframes-creative Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

HyperFrames Creative

Brand, pacing, style, narration, and composition direction. Use after the technical contract from hyperframes-core is in place.

For motion patterns, scene blueprints, transitions, and CSS marker effects, use hyperframes-animation — this skill is intentionally non-animation.

Read these two FIRST for any non-trivial composition — they override web instincts:

  • references/house-style.md — "interpret the prompt, generate real content," the lazy-default list, and the background/foreground layer recipe. This is what turns a literal restyle into a concept.
  • references/video-composition.md — video-medium density, scale, foreground metadata (the "produced, not generated" detailing: data bars, registration marks, monospace readouts, 8-10 elements/scene).

Skipping these is the single biggest cause of generic, web-page-looking output. They are not optional rows in the routing table below — for anything beyond a one-line edit, open both before you choose colors or write HTML.

Workflow

  1. If a project has a design spec, read it first and treat its frontmatter tokens as brand truth (colors, fonts, spacing, tone, constraints). Which file to read (precedence frame.mddesign.mdDESIGN.md) and how to parse it (frontmatter = normative, prose = context) are defined once in references/design-spec.md — resolve and load per that doc.
  2. If no design spec exists and the user asks for visual direction, choose a route:
    • Ready-made frame-preset (optional) → frame-presets/ (adopt a FRAME.md as frame.md; see references/design-spec.md)
    • Named style or mood → references/visual-styles.md
    • Fast defaults → references/house-style.md
    • Interactive selection → references/design-picker.md
  3. For multi-scene work, plan beats and rhythm before writing HTML → references/beat-direction.md. For scene transitions, jump to hyperframes-animation/transitions/.
  4. For motion-heavy work, read references/motion-principles.md (high-level guardrails), then go to hyperframes-animation for atomic rules.

Routing

Topic Read
Adopt a ready-made frame-preset as frame.md (optional) frame-presets/ · references/design-spec.md
Default palettes, motion, typography, lazy defaults to question references/house-style.md
Named style presets, mood-to-style routing references/visual-styles.md
Palette-specific color tokens palettes/*.md
Composition patterns — PiP, text-behind-subject, title card, slide show references/composition-patterns.md
Stats / infographic presentation references/data-in-motion.md
Structured expansion for open-ended prompts references/prompt-expansion.md
Video-medium density, scale, color, frame composition references/video-composition.md
Per-beat direction, rhythm planning, transition timing references/beat-direction.md
Post-authoring spec verification (colors, type, corners, spacing, depth) references/design-adherence.md
High-level motion guardrails and GSAP-quality rules references/motion-principles.md
Font selection, pairings, rendered-video type guardrails references/typography.md
Script pacing, tone, openings, number pronunciation references/narration.md
Precomputed audio bands mapped to motion references/audio-reactive.md

Scripts

  • scripts/contrast-report.mjs — inspect contrast warnings from rendered frames.
  • scripts/extract-audio-data.py — pre-extract audio bands for audio-reactive compositions.
  • scripts/package-loader.mjs — support script for bundled creative tooling.

Run from the repo root with explicit paths, for example:

python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>

Animation analysis (animation-map.mjs) lives in hyperframes-animation/scripts/.

Boundaries

  • Do not override hyperframes-core technical rules.
  • Do not require a design system for a minimal technical composition.
  • Do not add extra scenes, narration, music, captions, or transitions unless the request calls for them or you first propose the expansion.
  • Keep recipe references task-specific; do not read every reference for simple edits.