animation
description (verbatim frontmatter)
Produce the "Animation" project shape (one of claude.ai/design's 5 canonical shapes — Prototype/Slides/Document/Wireframe/Animation) using Motion (motion.dev, npm package "motion", CDN-loadable with zero build step — https://cdn.jsdelivr.net/npm/motion@12.42.2/+esm), not hand-rolled CSS keyframes. Covers Motion's real capabilities: independent transforms (x/y/rotate/scale via animate()), scroll-linked animation (scroll()+ScrollTimeline), native gestures (whileHover/whileTap/drag), layout animation, spring physics (type:"spring"), exit animation (keep-in-DOM-until-exit pattern), timeline sequences (variants+stagger), and motion values (live-derived state). Two output modes: (1) frontend Workers animation — real Motion-driven CSS/JS running live in a Cloudflare Worker-served page; (2) rendered-video-loop content — a sequence of still images (e.g. higgsfield-generated frames) played back as a looping filmstrip, for cases where the content itself is pre-rendered art rather than DOM elements. Visual language for both modes is this family's own real entity-graph / node-link "galaxy" style (glowing cyan/green nodes, thin connecting edges on black — see plugins/cwc-design/generated/ and the real deck.ts hero-band/close-band illustrations), not invented per-project. Use when the user wants a real animation/motion artifact, references Motion/motion.dev, wants a claude.ai/design-style Animation output, or wants the Global Workspace storyboard turned into actual running motion. Do NOT use for static Prototype/Wireframe mockups (sibling skills) or the fleet's own baseline `@view-transition`/reduced-motion CSS rules (fleet-design-system's "Do's and Don'ts") — though every animation this skill produces MUST still respect `prefers-reduced-motion`.
summary
Produce the "Animation" project shape (one of claude.ai/design's 5 canonical shapes — Prototype/Slides/Document/Wireframe/Animation) using Motion (motion.dev, npm package "motion", CDN-loadable with zero build step — https://cdn.jsdelivr.net/npm/motion@12.42.2/+esm), not hand-rolled CSS keyframes.
source
plugins/cwc-design/skills/animation/SKILL.md
provenance
created 2026-07-10 18:13:13 · JSON