{
  "skill": {
    "id": "skl_animation",
    "name": "animation",
    "plugin": "cwc-design",
    "description": "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.",
    "gated": 0,
    "source_path": "plugins/cwc-design/skills/animation/SKILL.md",
    "created_at": "2026-07-10 18:13:13",
    "cite_as": "https://subagentskills.com/api/skills/skl_animation"
  }
}