Nicht-animatorische kreative Leitung für HyperFrames-Videos. Verwendung für Design-Spezifikationen (frame.md / design.md), Paletten, Typografie, Erzählung, Beat-Planung, audio-reaktive Visuals, Kompositionsmuster sowie Marken- und Stilentscheidungen. Für atomare Bewegungsmuster und Szenen-Blaupausen `hyperframes-animation` verwenden.
Diese Skill-Richtlinie definiert die kreative Leitung für HyperFrames-Videos mit Fokus auf Branding, Bildsprache, Rhythmus und Erzählung – ohne Animation. Sie wird nach der technischen Festlegung durch `hyperframes-core` eingesetzt und verweist für Bewegungsmuster, Szenenübergänge und CSS-Effekte explizit an den Schwester-Skill `hyperframes-animation`. Der Skill zielt darauf ab, generische Webseiten-Layouts zu vermeiden, indem er auf zwei zentrale Referenzdokumente (`house-style.md` und `video-composition.md`) aufbaut, die vor jeder nennenswerten Komposition gelesen werden müssen. Er bietet eine vollständige Routing-Tabelle für Themen wie Paletten, visuelle Stile, Kompositionsmuster, Beat-Planung, Typografie, Audio-Reaktivität, Datenvisualisierung und Design-Prüfung. Außerdem enthält er Skripte für Kontrastberichte, Audio-Extraktion und Tool-Unterstützung. Der Skill unterstützt Plattformen wie Claude Code, Cursor und Codex und wird über eine SKILL.md-Datei konfiguriert. Er definiert klare Grenzen: keine Überschreibung der technischen Regeln von `hyperframes-core`, kein erzwungenes Designsystem für minimale Kompositionen, und keine ungefragten Erweiterungen um Szenen, Erzählung oder Musik. Stattdessen ermöglicht er eine strukturierte, referenzgesteuerte kreative Entscheidungsfindung für hochwertige, konzeptionelle Videoausgaben.
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/hyperframes-creativeMarke, Rhythmus, Stil, Erzählung und Kompositionsrichtung. Nachdem der technische Vertrag von hyperframes-core besteht.
Für Bewegungsmuster, Szenen-Blaupausen, Übergänge und CSS-Markereffekte hyperframes-animation verwenden – dieser Skill ist bewusst nicht-animatorisch.
Diese beiden ZUERST lesen für jede nicht-triviale Komposition – sie überschreiben Web-Instinkte:
references/house-style.md— „den Prompt interpretieren, echten Inhalt generieren
This repo contains 19 individual skills — each has its own dedicated page.
>
Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.
Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.
>
>
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition
>
>
The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=
>
Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).
Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.
Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.
>
Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.
Turn a GitHub pull request (a PR URL, owner/repo#N, or
Port an existing Remotion (React) composition
>
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
Extract frames or short clips from videos using ffmpeg.
Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.
Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.
Obra superpowers agent skills.
See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...
End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.