Reframe

Use when asked to test, audit, stress, or regression-check the reframe Platform UI end-to-end — "test the UI", "run QA on Platform", "pretend you're a senior designer using the app", "find bugs in the dashboard". Drives Chromium via the reframe_ui MCP tool. DEFAULT mode is to ASK what to probe or propose 2-3 non-obvious tests — never auto-walk the canonical sweep unless the user explicitly asks for "full / canonical / Level 1 / прогон по всему". The platform map inside is orientation, not a checklist. NOT for designing scenes — that's reframe-design.

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, and registry discovery.

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.

Use when the user mentions a brand name (Stripe, Linear, Airbnb, Vercel, Ferrari, Notion, Apple, GitHub, etc.), says "apply brand" / "rebrand" / "use X's style" / "make it feel like Y", OR the active scene has no DESIGN.md yet and you're about to write HTML. This skill carries brand-translation knowledge — how brand intent (vibe, not palette) becomes scene tokens, where brand fidelity usually drops, and the smells that mean "swapped colors, forgot everything else".

Use when the user asks for an opinion on an already-compiled scene — "how does this look?" / "is this good?" / "review this" / "make it better" / "any feedback?" / "polish" — OR automatically as the last step of reframe-design before declaring done. Not for mid-iteration tweaks. Not for uncompiled intent. Translates engine-computed numbers (37-rule audit + 8 aesthetic metrics + brandFidelity) into designer language and adds ONE layer the engine can't measure — taste.

Use when the user asks to design / build / make / redo a scene — a page, landing, section, hero, dashboard, form, nav, footer, card, component, feature panel, 404, or any visual surface inside a reframe session. Not for rebranding alone (→ reframe-brand), not for multi-page sites (→ reframe-site-loop), not for vague one-liners without any specificity (→ reframe-enhance first). This skill carries taste knowledge the 37-rule audit cannot encode — anti-slop patterns, tension cues, and the smell table of "this compiles clean but reads fake".

Use when the user's ask for ANY specialist skill is vague, mood-only, or under-specified ("make a landing page", "test the UI", "review this", "ship as React", "apply Stripe brand"). This skill INTERVIEWS the user briefly, then rewrites raw intent into a **structured brief shape'd for the downstream specialist** — design, QA, critic, to-react, brand, or site-loop. Input = natural language. Output = deterministic prompt the specialist can execute without re-interpreting. Also required before writing `.reframe/next-prompt.md` in reframe-site-loop — the baton MUST carry a structured brief, never raw user words.

Use when the user asks for animation, motion, transitions, video, "make it move", "add fade-in", "slide up", "stagger cards", shader transitions between scenes, TTS voiceover, captions synced to audio, audio-reactive visuals, promo clip, onboarding animation, or asks to export a scene as video. NOT for static scene design (→ reframe-design), not for brand rules about motion defaults (→ reframe-brand — this skill consumes what reframe-brand produced). This skill is the decision layer between reframe's INode animations (simple, CSS/GSAP-over-iframe) and raw hyperframes compositions (complex, shader/TTS/multi-scene/video). The goal is ONE thing — never expose the seam to the designer.

Use when the user asks for multiple pages, a full site, a sitemap, a group like "home + pricing + about + 404", or resumes a partial site (baton on disk). Not for single-scene work. Runs a one-page-per-turn baton pattern via `.reframe/next-prompt.md` + `.reframe/SITE.md`, freezes brand on turn 1, and wires cross-page nav with real slugs.

Use when the user wants to ship a compiled reframe scene as React code — "export to React", "give me the code", "make this a component library", "refactor into sections", "TSX please". You orchestrate the stack choice (inline / css-modules / tailwind / styled-components) and hand off to the deterministic engine exporter. You never hand-rewrite the emitted JSX — that would break byte-determinism, which is reframe's moat.