FigmaコンテンツをHyperFramesコンポジションにインポートします。レンダリングされたアセット、ブランドトークン、コンポーネント、ストーリーボードセクションからモーションを再構築（フレームをスライドではなく状態として解釈）します（REST/CLI）。コネクタが利用可能な場合はそれを活用し、シェーダーをコネクタまたはネイティブエクスポートから取得します。ユーザーがfigma.comのリンクを貼り付けた際や、Figmaのデザイン、フレーム、ロゴ、ブランド、アニメーションを動画/コンポジションに取り込むよう依頼された場合に使用します。
このスキルは、Figmaのデザイン要素をHyperFramesコンポジションに直接インポートするためのツールです。Figmaのアセット、ブランドトークン、コンポーネント、ストーリーボードセクションが自動的にモーションとして再構築され、フレームはスライドではなく状態として扱われます。REST APIとCLIをサポートし、利用可能な場合はコネクタを介したモーション生成も可能です。また、シェーダーはコネクタまたはネイティブエクスポートを通じて取り込むことができます。ユーザーがfigma.comのリンクを貼り付けるか、Figmaのデザインを動画やコンポジションに取り込むよう依頼した場合に自動的にトリガーされるため、デザインからモーショングラフィックスへの移行がシームレスになります。
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/product-launch-videoFigmaコンテンツをHyperFramesコンポジションにインポートします。レンダリングされたアセット、ブランドトークン、コンポーネント、ストーリーボードセクションからモーションを再構築（フレームをスライドではなく状態として解釈）します（REST/CLI）。コネクタが利用可能な場合はそれを活用し、シェーダーをコネクタまたはネイティブエクスポートから取得します。ユーザーがfigma.comのリンクを貼り付けた際や、Figmaのデザイン、フレーム、ロゴ、ブランド、アニメーションを動画/コンポジションに取り込むよう依頼された場合に使用します。
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=
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`.
>
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).
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.