agentleFS
Sign inStart free
LangChainKnown publisherlangchain-ai/design-agent/skills/hyperframes-creative/SKILL.md

hyperframes-creative

Skill2 starsChanged 14 days agoApache-2.0View on GitHub

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`.

We split this skill into the rules it gives an agent

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

  • 5

    Common

    Most of the 18 edited versions we read keep these.

  • 1

    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:

    Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin.

    line 6
  2. Common:

    If no design spec exists and the user asks for visual direction, choose a route:

    line 24
  3. Common:

    Run with explicit paths, for example:

    line 60
  4. Very specific:

    Do not override hyperframes-core technical rules.

    line 70
  5. Common:

    Do not require a design system for a minimal technical composition.

    line 71
  6. Common:

    Do not add extra scenes, narration, music, captions, or transitions unless the request calls for them or you first propose the expansion.

    line 72
  7. Common:

    Keep recipe references task-specific.

    line 73

“Common” is measured: kept by at least 6 in 10 of the 18 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

Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.

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.

Routing

TopicRead
Adopt a ready-made frame-preset as frame.md (optional)frame-presets/ · references/design-spec.md
Default palettes, motion, typography, lazy defaults to questionreferences/house-style.md
Named style presets, mood-to-style routingreferences/visual-styles.md
Palette-specific color tokenspalettes/*.md
Composition patterns — PiP, text-behind-subject, title card, slide showreferences/composition-patterns.md
Stats / infographic presentationreferences/data-in-motion.md
Structured expansion for open-ended promptsreferences/prompt-expansion.md
Video-medium density, scale, color, frame compositionreferences/video-composition.md
Per-beat direction, rhythm planning, transition timingreferences/beat-direction.md
Post-authoring spec verification (colors, type, corners, spacing, depth)references/design-adherence.md
High-level motion guardrails and GSAP-quality rulesreferences/motion-principles.md
Font selection, pairings, rendered-video type guardrailsreferences/typography.md
Story doctrine — hook language, value-before-evidence, storyboard-as-proposal, source-traceable visualsreferences/story-spine.md
Script pacing, tone, openings, number pronunciationreferences/narration.md
Precomputed audio bands mapped to motionreferences/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.

contrast-report.mjs resolves helper packages from the current project first, then can bootstrap the bundled HyperFrames package version. Set HYPERFRAMES_SKILL_PKG_VERSION=<version> only when running the skill outside the bundled CLI/skill install and you need to pin that bootstrap version explicitly.

Run with explicit paths, for example:

python <SKILL_DIR>/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.

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