What problem does it solve? Choosing and configuring frontend animation libraries (GSAP, Lenis, Theatre.js, Rive, Motion One, Framer Motion) for a page or feature is time-consuming and inconsistent across a team. This Skill turns a written design brief into a validated motion.json specification covering library picks, scroll-trigger configuration, smooth-scroll settings, key animations, and performance budgets. ## Core Features & Use Cases - Motion language selection: Picks the right animation stack (GSAP + ScrollTrigger, Lenis smooth scroll, Theatre.js timelines, Rive state animation, Motion One, Framer Motion, or CSS-only) based on the brief's energy level and target device. - Structured motion.json output: Produces a schema-validated JSON spec with library install instructions, scroll-trigger config, key animation specs, and a performance budget including prefers-reduced-motion fallbacks. - License awareness: Flags commercial-license tiers (e.g., GSAP Club plugins) and can route through a compliance gate before customer sharing. - Use Case: Given a brief like "feature page for a hardware product with kinetic scroll choreography", the Skill returns a motion.json specifying GSAP + Lenis, scrub-tied hero reveals, parallax sections, and npm install instructions. ## Quick Start Ask the agent to generate a motion specification for your page by providing a brief, for example: create a motion plan for a hardware product landing page with kinetic scroll-driven animation targeting both desktop and mobile.
