Video & Animation

Build a video in the Cream Caret Type look (style card cream-caret-type) — Arabic words typed with a coloured caret on a flat two-colour page (night and paper that swap on hard cuts), select-highlight → delete → retype, a flat profile silhouette, one coloured dot that match-cuts into a flat vector eye, a zoom-through the iris, a fixed noun with a bold verb swapping every 16 frames, a pixel-art icon on the sign-off and a monogram end card — one sound per event, silence between. Use when the director picked this card, or the owner says "the typing intro", "caret type", "cream caret", "زي فيديو الكتابة", "الكلام اللي بيتكتب", "intro بالكتابة", or the video is a channel / "who am I" intro, a course or service intro hook, a short opener before a talking head, a word-play promise line or a bumper. 9:16 only, Arabic-first. Not for talking heads the whole time, screen-recording proof, data-heavy explainers or full spoken subtitles. DRAFT — untested.

Build a video in the Hatch Cosmos look (style card hatch-cosmos) — a hand-drawn pencil-hatched world on one canvas, a block mascot (or a pair) that walks, looks, blinks and does ^ ^ eyes, a dive through its eye into a hatched galaxy of nebula blobs, tilted rings and needle stars. Use when the director picked this card, or the owner says "hatched", "hatch cosmos", "pencil cosmos", "the galaxy video style", "the mascot dive", "زي فيديو المجرة", "الستايل المرسوم بالقلم", "الكائن اللي بيدخل في عينه", or the video is a music-led show-off/teaser, a concept intro with a mascot, a "journey inside" beat or a channel bumper. 9:16 and 16:9 both built. Not for talking heads, real screen-recording proof, data-heavy explainers or photographic looks.

Search, install, and wire registry blocks and components into HyperFrames compositions. Use BEFORE hand-building any named visual — whenever a brief, a user, or a storyboard names a look, effect, treatment, or transition such as CRT scanlines, glitch, chromatic aberration, film grain, a shimmer sweep, a chart, a code or terminal window, a map, or a confetti burst — because roughly 400 hosted items already cover many of them and the search ranks all of them with nothing installed, no project, and no account. Also 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).

Use when working with a person on a HyperFrames project in Studio: first, whether their message asks for a change at all (questions, loose ideas and "don't change anything" get an answer and a plan, not an edit); for a new film, the plan, storyboard and build order that the HyperFrames launch films follow; and how the timeline should be laid out so it reads well (one caption track, one element kind per track, every scene a sub-composition) and where captions and key content may sit (safe zones). Don't use for how to perform an individual edit (split, trim, retime, volume, copy, swap): that is `creator-editing-recipes.md` in `/hyperframes-core`.

Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or music. It resumes project state, captures intent when applicable, selects and installs the owning workflow, and routes domain capabilities. HyperFrames is the default output framework unless the user explicitly chooses another framework for the deliverable or asks only to record a browser session.

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, timeline, history, clean, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.

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

Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.

Use when audio already placed in a HyperFrames composition needs to be mixed: fade-in/fade-out, crossfade, track gain or volume, volume automation, ducking, a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), automation envelopes drawn on a track's volume or any effect parameter, or one submix bus carrying a chain, a fader and an automation clock for several tracks at once (`<hf-audio-group>`). Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.

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's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated motion-first unit, including an animated title. Route fresh creation through hyperframes before using this skill.

把一段中文口播文案做成「简笔画手写风」竖屏解说视频（米白点阵纸、黑色手写字、黄色荧光笔、红色 ✓✗？、线条图标逐笔画出，MiniMax 或豆包按原文配音再逐字对齐，底部手写字幕，1080×1920 MP4）。只要用户说“简笔画视频/手绘风视频/白板动画/笔记风口播视频/把这段口播做成视频/按上次兔宝宝那种风格做视频/批量把脚本做成视频”，或给出口播稿+想要知识科普类竖屏短视频（抖音/视频号/小红书），都用这个 skill，即使没提“简笔画”三个字。配音必须用使用者自己的 MiniMax 或豆包 API Key。两家都没绑定就先停下来，引导对方绑定其中一家，不要索要 Key。支持换音色与多条批量并行。不用于：剪辑真人拍摄素材、数字人口播、PPT。

Run the conversation -> research -> script -> voice -> video pipeline in the explainers repo (~/claude/explainers) - interview the owner to find what a video should argue, research it into a sourced fact sheet, write a script whose every beat is labelled fact / estimate / view / opinion / speculation / line, check it, narrate it with the local voice, draw the scenes in Skia (manim for charts), render and write the description. Use when the user wants to talk through ideas for a video, wants an explainer video made or changed, a script drafted or fact-checked, or mentions the explainers pipeline or Footnote the host.

Turn a topic into a finished, rendered explainer video — not a plan or a moodboard. Use when the user wants an animated explainer, a motion-design video, a "studio" that writes the script, storyboards, animates, scores, captions, and renders an MP4 from deterministic HTML. Covers 16:9 master plus 9:16 and 1:1 recomposition.

Finds what is wrong in one section of a product demo recording -- bugs, feature gaps, wrong-model choices -- separate from the screen-mapping pass.

Use when the user wants a video that explains a pull request (a PR explainer, a review video, "make a video for <PR URL>"). Covers the whole workflow in this repo - fetching the PR, writing the narration, the voice, choosing and filling the diagrams, checks, rendering, the pr-director sign-off and delivery.

Create research-grounded animated explainer videos from a topic and visual direction, from evidence research and story design through motion graphics, audio, rendering, and quality review.

Use when the user asks to make, script or produce a 60-second vertical animated explainer video about finance, investing or history in this repo ("make a video about X", "/make-explainer <topic>"). Runs research, sourced facts, a validated storyboard, a human review gate and the final narrated render.

Turns a demo video into a structured, timestamped map of screens and flows for AutoTester's ingest stage.

为商品宣传提供自然 UGC／KOC 与实拍感概念展示的创作方法、导演提示词和案例 few-shot。适用于人物开箱、试用分享与产品展示，帮助 Agent 按商品和需求组织创意与生成。

对比品牌在TikTok社媒上的内容表现、互动数据和讨论趋势，可结合历史数据进行分析，输出差异、证据与可执行机会，用于竞品分析、品牌对比、阶段性变化判断、品牌传播复盘和品牌策略优化。提供3个能力①关键词搜索（可按点赞/相关度排序、发布时间筛选）②博主作品获取，按主页链接或用户名批量获取公开作品列表，支持最新/最热排序 ③视频评论抓取，按视频链接或作品 ID 获取评论内容、评论者与互动数据，输出结构化 JSON（含作者、互动数据、标签、链接）。

Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, @supabase/ssr) in Next.js, React, SvelteKit, Astro, Remix; auth issues (login, logout, sessions, JWT, cookies, getSession, getUser, getClaims, RLS); Supabase CLI or MCP server; schema changes, migrations, declarative schemas, security audits, Postgres extensions (pg_graphql, pg_cron, pg_vector); debugging and troubleshooting errors or unexpected behavior on Supabase projects (HTTP errors, Postgres errors, RLS surprises, permission denied, schema cache issues, timeouts, Edge Function crashes, Realtime drops, Storage failures) and reading or querying logs (Logs Explorer, ClickHouse).

Use when the user wants a launch video, product demo video, announcement clip, "launch trailer", or a short (15–45s) video showing what their app/tool does — for X/Twitter, Product Hunt, a landing page hero, or a README. Also use to plan, script, storyboard, critique, or render such a video, or to study why a reference launch video is so engaging.