Agent skill · design visual · aiskillstore
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`.
Why this skill is useful
Provides specific design patterns and workflows for video composition that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 scale, depth, and foreground detail. It explains how to avoid empty web-page layouts without imposing a universal element count. 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.md → design.md → DESIGN.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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/hyperframes-creative