Figma 콘텐츠를 HyperFrames 컴포지션으로 가져옵니다 — 렌더링된 에셋, 브랜드 토큰, 컴포넌트, 스토리보드 섹션 → 재구성된 모션 (프레임을 슬라이드가 아닌 상태로 읽음) (REST/CLI), 커넥터 지원 모션, 그리고 커넥터 또는 네이티브 내보내기의 셰이더. 사용자가 figma.com 링크를 붙여넣거나 Figma 디자인, 프레임, 로고, 브랜드, 애니메이션을 비디오/컴포지션으로 가져오라고 요청할 때 사용하세요.
이 스킬은 Figma 디자인 파일을 HyperFrames 컴포지션으로 가져오는 기능을 제공합니다. 사용자가 figma.com 링크를 붙여넣거나 Figma의 특정 디자인 요소(프레임, 로고, 브랜드, 애니메이션)를 비디오나 컴포지션으로 가져오라고 요청할 때 활성화됩니다. 주요 기능으로는 렌더링된 에셋, 브랜드 토큰, 컴포넌트, 스토리보드 섹션을 가져오고, 이를 HyperFrames의 모션 시스템에 통합합니다. 특히 Figma의 프레임을 슬라이드가 아닌 상태(state)로 읽어 들여 자연스러운 모션 재구성을 지원하며, REST API와 CLI 두 가지 인터페이스를 모두 제공합니다. 또한 커넥터(connector)를 통해 모션 데이터를 가져올 수 있고, 셰이더 지원은 커넥터나 네이티브 내보내기 방식으로 가능합니다. 이 스킬은 디자이너와 개발자가 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.