Motion Kit

6 skills inclus

• 01

  Motion Vocabulary

  Fait retrouver à l'agent le nom exact d'un effet d'animation décrit vaguement, avec les termes proches comparés en une ligne.+

  sf-motion-vocabulary/SKILL.md, de emilkowalski/skills, licence MIT.

  1---

  2name: sf-motion-vocabulary

  3description: "Reverse-lookup glossary that turns a vague description of a web animation or motion effect into…

  4---

  5

  6# Motion Vocabulary

  7

  8Turn a loose description of a motion effect into the precise term, so the user knows what to ask for.

  9

  10## When to use

  11

  12- "What's it called when...", "the thing where...", "that effect on Apple's site where...".

  13- Someone needs the right word for a brief, a ticket or a prompt.

  14

  15Not for designing or implementing motion: use `sf-design-engineering` or `sf-animation-polish` for that, and…

  16
• 02

  Animation Review

  Fait relire le code d'animation par l'agent selon 10 standards stricts, avec tableau avant/après, verdict par niveau d'impact et décision bloquer ou approuver.+

  sf-animation-review/SKILL.md, de emilkowalski/skills, licence MIT.

  1---

  2name: sf-animation-review

  3description: "Reviews animation and motion code (CSS transitions, keyframes, Motion/Framer Motion, WAAPI, spr…

  4disable-model-invocation: true

  5---

  6

  7# Animation Review

  8

  9Review motion code and nothing else. This skill does not write features, fix unrelated bugs, or review non-mo…

  10

  11## When to use

  12

  13- A diff, component or page with transitions, keyframes, Motion or WAAPI code to judge.

  14- "Does this animation feel right?", "review the motion in this PR".

  15

  16## Process
• 03

  Animation Polish

  Fait auditer toutes les animations d'un projet par l'agent, classer les correctifs par levier et écrire des plans autonomes qu'un autre agent exécutera.+

  sf-animation-polish/SKILL.md, de emilkowalski/skills, licence MIT.

  1---

  2name: sf-animation-polish

  3description: "Surveys a codebase's animation and motion code as a senior motion advisor, then produces a prio…

  4---

  5

  6# Animation Polish

  7

  8Find the motion work with the most leverage in a codebase and turn each item into a plan so precise that an e…

  9

  10## When to use

  11

  12- "Improve the animations", "audit the motion", "why does the app feel sluggish", across a codebase or app ar…

  13

  14Not for a single diff (use `sf-animation-review`) or for naming an effect (use `sf-motion-vocabulary`). This…

  15

  16## Operating Posture
• 04

  Animation Performance

  Fait diagnostiquer par l'agent une animation qui saccade : propriétés composites, thread principal occupé, rendus React par frame, variables CSS, will-change.+

  sf-animation-perf/SKILL.md, de emilkowalski/skills, licence MIT.

  1---

  2name: sf-animation-perf

  3description: "Keeps web animations inside the frame budget: composite-only properties, motion off the main th…

  4---

  5

  6# Animation Performance

  7

  8Make motion land every frame. The question here is never "does it look right?" but "does each frame finish in…

  9

  10Performance is not a polish pass after the motion is good: the same easing and durations at 30fps feel broken…

  11

  12## When to use

  13

  14- An animation stutters, especially on phones or during navigation.

  15- Choosing which property to animate, or CSS vs JS on performance grounds.

  16- Tempted to add `will-change` or force GPU layers.
• 05

  GSAP Performance

  Fait optimiser à l'agent des animations GSAP : transforms, stagger, quickTo, réglages ScrollTrigger et nettoyage de ce qui tourne hors écran.+

  sf-gsap-perf/SKILL.md, de greensock/gsap-skills, licence MIT.

  1---

  2name: sf-gsap-perf

  3description: Optimizes GSAP animations for smooth frames by preferring transforms and opacity, avoiding layou…

  4---

  5

  6# GSAP Performance

  7

  8Keep GSAP animations inside the frame budget: compositor-friendly properties, as few tweens as possible, no l…

  9

  10## When to use

  11

  12- GSAP or ScrollTrigger animation that stutters, especially on phones.

  13- Many animated elements, mouse followers, long scroll stories.

  14

  15For framework-agnostic diagnosis (CSS, WAAPI, Motion, React re-renders), use `sf-animation-perf`. For GSAP se…

  16
• 06

  GSAP with React

  Fait brancher GSAP dans React et Next.js par l'agent avec useGSAP, sélecteurs limités au composant, contextSafe, nettoyage automatique et rien côté serveur.+

  sf-gsap-react/SKILL.md, de greensock/gsap-skills, licence MIT.

  1---

  2name: sf-gsap-react

  3description: Sets up GSAP animations in React and Next.js correctly with the useGSAP hook, scoped selectors,…

  4---

  5

  6# GSAP with React

  7

  8Run GSAP inside React's lifecycle: scoped to the component, cleaned up on unmount and re-sync, and never exec…

  9

  10## When to use

  11

  12- The project uses GSAP, or the user chose it, and animations live in React or Next.js components.

  13- Animations that double-fire in Strict Mode, leak after navigation, or affect elements outside the component.

  14

  15If no animation library is chosen yet, pick by need: CSS for simple transitions, Motion for React-centric spr…

  16

Extraits. Les dossiers complets sont livrés après le paiement.

Installation