agentleFS
Sign inStart free
harvatechsharvatechs/inthon/.agents/skills/hyperframes-creative/SKILL.md

hyperframes-creative

Skill2 starsChanged 4 months 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`.

26 other projects use a version of this, 25 of them edited.

Adopted by

Most recently taken up by

Used with

Projects with it also use hyperframes-studio, talking-head-recut and 7 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • eyaprakSkill

    hyperframes-studio

    HyperFrames ile bir açılış hook'u (yatay 16:9 intro), dikey 9:16 Shorts ya da 16:9 animasyonlu slidedeck üretmek için hepsi bir arada studio. Ham konuşma klibini ve transcript'i (ya da bir konu/slide içeriğini) alır; koyu tema, tek marka rengi, self-hosted Manrope + JetBrains Mono fontlar ile bitmiş, oynatılabilir bir kompozisyon çıkarır (hook/shorts ayrıca 1080p/60fps MP4'e render edilir). Paket içinde tak-çalıştır starter template'ler gelir. ŞU DURUMLARDA MUTLAKA KULLAN, HyperFrames adı geçmese bile TETİKLE: hook oluştur, intro yap, video başına giriş, insanları hookta tutsun; shorts oluştur, dikey video, bu klibi shorts yap, reels; slidedeck oluştur, sunum yap, bu içeriği slide'la, yeni bir deck; ya da kullanıcı bir "-hook", "-shorts" veya "-slidedeck" klasörü açıp içine ham klip, transcript veya içerik koyduğunda. Başta AskUserQuestion ile hangi mod ve marka rengi sorulur, gerisi paketteki hazır starter'dan kurulur. Yalnızca bu üç HyperFrames video türü için kullan.

    Also in 8 projects that use this

  • jaron-goh-centrSkill

    talking-head-recut

    Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on "graphic overlays", "on-screen graphics", "package / dress up my video". Not plain subtitles (/embedded-captions). Unclear → /hyperframes.

    Also in 10 projects that use this

  • LinHao-citySkill

    bfl-api

    BFL FLUX API integration guide covering endpoints, async polling patterns, rate limiting, error handling, webhooks, and regional endpoints with Python and TypeScript code examples.

    Also in 3 projects that use this

  • LinHao-citySkill

    flux-best-practices

    Comprehensive guide for BFL FLUX image generation models. Covers prompting, T2I, I2I, structured JSON, hex colors, typography, multi-reference editing, and model-specific best practices for FLUX.2 and FLUX.1 families.

    Also in 3 projects that use this

  • +5 more from LinHao-city

The file

We split this skill into the rules it gives an agent

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

  • 5

    Common

    Most of the 24 edited versions we read keep these.

  • 0

    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. Common:

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

    line 22
  2. Common:

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

    line 53
  3. Very specific:

    Do not override hyperframes-core technical rules.

    line 63
  4. Common:

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

    line 64
  5. Common:

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

    line 65
  6. Common:

    Keep recipe references task-specific.

    line 66

“Common” is measured: kept by at least 6 in 10 of the 24 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 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 — precedence frame.md → design.md → DESIGN.md. frame.md is the preferred spec for video/hyperframes projects and wins if more than one exists (same format as design.md); it is always lowercase, no FRAME.md variant, while design.md and DESIGN.md are different files on Linux. Treat it as brand truth: colors, fonts, spacing, tone, and constraints.
  2. If no design spec exists and the user asks for visual direction, choose a route:
    • 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
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
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.

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.

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