Instructions for taotao135791-bit/gsap-transform: Before shipping any GSAP code (or when the user asks "audit", "lint", "review", "this feels generic", "this feels AI-built"), walk through these seven groups. Any block-severity item must be fixed.
Instructions for taotao135791-bit/gsap-transform: When the user invokes a slash command in the /motion-craft family, follow that command's exact Sequence and Output contract from skills/motion-craft/SKILL.md. State the affected scope before working ("Working on the hero section only" / "Working across all sections").
Instructions for taotao135791-bit/gsap-transform: When the user asks for an animated landing page, portfolio, hero, scroll-driven story, or any animated frontend, before writing GSAP code.
Instructions for taotao135791-bit/gsap-transform: When the agent writes motion in a /studio project, it must use primitives from skills/motion-primitives/, not raw GSAP calls.
Instructions for taotao135791-bit/gsap-transform: After motion-design-taste has set the three dials and chosen a motion mode, pick one of the eight clone-able recipes as the starting skeleton instead of writing from scratch.
Instructions for taotao135791-bit/gsap-transform: When the user asks the agent to edit a motion project's timeline (add a beat, change a duration, move something), the agent must operate on state.json — NOT on raw scene.js.
Instructions for taotao135791-bit/gsap-transform: When the user wants the output as a video file (mp4/webm/mov) or a previewable "effect video" artifact, produce a self-contained preview project per skills/motion-studio/SKILL.md.
Instructions for taotao135791-bit/gsap-transform: Load this in addition to motion-design-taste when the artifact is a rendered video (mp4/webm/mov) from /studio — promos, spots, title sequences, reels. motion-design-taste still owns the page (dials, modes, type, color); video-grammar owns shots, camera, transitions…
Instructions for taotao135791-bit/gsap-transform, covering gsap transform — hard rules for ai coding agents, product path, design read, state is the default source and avoid llm-default motion.
Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion…
Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps. Pair with motion-design-taste for aesthetic direction before implementing.
Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG…
Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning. Recommend GSAP for scroll-driven animation when no library is…
Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines). Pair with…
Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP. Pair with motion-design-taste for aesthetic direction before implementing.
Deterministic anti-slop checks for GSAP motion. Use when the user asks to audit, review, lint, or detect AI-generated motion tells in animation code; when the user says "this feels generic", "this feels AI-built", "remove the slop", or asks for a motion-quality pass before shipping. Catches default ease abuse…
A command-style workflow for building, polishing, and auditing GSAP motion. Use when the user invokes /motion-craft {subcommand}, or asks for a structured pass on an animated interface (init, shape, animate, polish, audit, critique, quieter, bolder, adapt, studio, export). Sequences the design layer, state layer, and…
Aesthetic and motion-language direction for GSAP-based interfaces. Use FIRST, before any GSAP code, when the user asks to build a landing page, portfolio, hero section, scroll-driven story, or any animated frontend; when the user mentions a vibe (minimalist, brutalist, editorial, premium, playful, kinetic, cinematic)…
A library of aesthetic-times-motion recipes for GSAP. Use when the user asks for a specific look (editorial, brutalist, liquid glass, bento, minimal, cinematic, kinetic typography, grid-break) or when the agent has done the brief inference and now needs a concrete starting pattern. Each recipe is a self-contained…
The state layer that lets an agent observe and edit a motion project's timeline as data, not as GSAP source. Use whenever an agent needs to query what is happening at a given moment, add or remove beats, or render from a declarative state.json instead of hand-written scene.js. Pairs with motion-studio and…
The delivery shell that turns a generated or hand-written GSAP scene into a previewable, tunable, multi-resolution video artifact. Use when the user wants to produce a self-contained "preview project" they can open in a browser, scrub on a timeline, and render to mp4/webm/mov — i.e. when the goal is a video file, not…
The video-native aesthetic layer — shot types, virtual camera moves, transitions, and beat-synced pacing for GSAP scenes rendered as video. Load ALONGSIDE motion-design-taste when the artifact is a rendered mp4/webm/mov (not a scrollable page) — /studio scenes, promos, title sequences, stings, reels. Adds a .camera…