ShawhinT·ShawhinT/non-coding-skills/animation-builder/SKILL.md

animation-builder

Skill40 starsChanged 13 days agoNo licenceView on GitHub

Build short motion-graphic animations (1–6 seconds) as B-roll overlays for talking-head YouTube videos — icon morphs, label fade-ins, diagrams that draw themselves, side-by-side comparisons, simple flow charts. Use this skill whenever the user asks to create, design, or render an animation, motion graphic, B-roll clip, explainer overlay, or any short visual that needs to be exported as an MP4. Triggers include "make an animation for X", "build a motion graphic", "I need B-roll for this script", "animate the [icon/label/curve/flow]", "render this as a video", "create a short clip that shows X morphing into Y", or any reference to producing a video file from a designed animation. Also fire when the user pastes a video script that contains `[ANIMATION]` callouts and asks to build them, and for multi-scene product demo videos that mock up the Claude app (claude.ai, Cowork, Customize/Connectors, skills): "make a demo video of Cowork", "mock up the Claude UI", "product video showing Claude doing X", "storyboard a Claude walkthrough", and for a clickable version of such a mock ("make it interactive", "an HTML file that looks like the app I can click through"). Each animation is authored as a self-contained HTML file (CSS/SVG animations) and rendered to MP4 via a Playwright + ffmpeg pipeline included with this skill. Defaults to Heroicons outline icons. If the animation is for a specific brand, reference the relevant brand-system skill (e.g. aba-brand-system) for colors/type/voice — this skill itself is brand-agnostic.