Opus 5.5 skills for animated explanatory schemes

Dedicated Claude Code Skills for Explanatory Schemes

• /anatomy Skill: Converts abstract technical concepts into interactive, isometric mechanical apparatuses instead of generic boxes and arrows [L11]. Generates framework-free TypeScript, animated SVG, WebGL shaders, or React components driven by real mathematical models [L11]. Key trigger words include:
  • interactive: Adds keyboard/pointer interaction [L11].
  • WebGL: Introduces fluid or particle shaders [L11].
  • 3D: Generates rotating depth geometry [L11].
  • make a printable A4 PDF of it: Outputs matching multi-page schematic handouts and drawings alongside the live machine [2].
• /anatomy-reveal Skill: An extension that turns Claude into an exploded-view motion studio [L4]. It generates real-size 3D models and motion-blurred reveal films or disassembled views of systems and hardware [L4].
• lemo-opuscar Skill: A Claude Code skill providing 51 preset visual styles to programmatically generate code-based video clips and motion graphics without manual front-end development [L1][L2]✓.
• /rossark-motion-skill (with Pluy): Animates layered vector SVG assets at 60 fps [L8]. It exposes properties like position, rotation, pivot, and scale across individual illustration layers (limbs, elements, nodes) via natural language prompts [L8].
• animated-diagrams-skill / animated-svg: CLI-level Claude Code skills designed to choreograph sequence diagrams, architecture flows, and state node transitions into SVG, GIF, or MP4 formats [W7]W.

---

Core Repositories & Starter Kits

• awesome-opus5-5-videos: Curates over 700 prompts and hundreds of live code-based video remakes across motion graphics, explainers, 3D scenes, and interactive demos [L1][L2]✓.
• ClaudeAnimationBase: A starter kit designed for hand-drawn cartoon animations and character-driven technical walkthroughs, featuring 31 pre-built expressions [L1][L2]✓.
• mg-styles-15: Provides turnkey source code, video outputs, and prompt structures across 15 motion graphic animation styles [L2].
• opus-sound-layer: Generates procedural, frame-accurate audio cues synced to visual transitions and physics landings rather than synthetic beeps [L9].

---

Prompt Frameworks for Explanatory Animations

1. The 7-Scene Narrative Explainer Framework

Avoids generic centered text and gradients by enforcing tactile textures (paper, gouache, crayon) and a strict 7-scene narrative structure [L5]:

• Structure: 75–90 seconds structured across Hook, Familiar World, Disruption, Mechanism, Discovery, Consequence, and Recap [L5].
• Seamless Morphing: Bans hard cuts; every transition requires a visible object to physically morph into the next scene's elements (e.g., rays become diagrams, particles regroup into machines) [L5].
• Pacing Rules: Voiceover scripts must be timed to 125–145 words per minute without duplicating spoken narration directly onto on-screen text labels [L5].

2. "The Object Is the Explanation" Isometric Pipeline

Used by the Anatomy framework for technical diagrams [L11]:

• Truth-First Modeling: Writes the underlying mathematical/state model before drawing any geometry so data readouts and physical motion cannot contradict each other [L11].
• Part Budgeting: Assembles recognizable physical machines built out of 40 to 150+ distinct moving mechanical components rather than flat flowchart cards [L11].
• Visual Standards: Fixed 30° isometric corner camera, 4-tone directional lighting, HTML-projected text labels (never canvas-embedded text), and exactly one lit accent subject [L3][L11].

---

Execution Harness & Rendering Workflow

• Code-Only Output: Claude Opus 5.5 does not natively render video files (MP4/WebM); it writes executable web code (SVG, HTML5 Canvas, Three.js, GSAP, or React) [L4][W1]W[W2]W✓.
• Deterministic seek(t) Rendering: To bypass real-time timer stutter and non-deterministic frame drops, Opus writes animations driven strictly by a seek(t) function or timeline time [L3][L4][L9]✓.
• Capture Pipeline:
  1. Opus generates standalone code (or Remotion / HyperFrames project files) [L4][L6][L9]✓.
  2. A headless browser (such as Playwright) steps through the timeline frame by frame [L4].
  3. FFmpeg stitches the static screenshots into high-framerate 4K60 video [L1][L4].
• In-Chat Previews: For quick visual verification without local CLI harnesses, code can be rendered directly inside Claude Artifacts using SVG/CSS/JS or interactive React components [W2]W[W3]W[W4]W.
• Iterative Scaffolding: Prompts attempting to generate monolithic, complex animation scripts in a single pass frequently hit output token boundaries or produce coordinate clipping; prompt Opus to lay out the static mechanical architecture first before scripting motion sequences [L11][W8]W[W9]W.