agentsclimarketplace
Sign in

Motion

Skill Syo-M/fable-frontend-skills/plugin/skills/motion

Animation and motion conventions — CSS transitions/keyframes, View Transitions, scroll-driven effects, animation libraries, exit animations, performance. Use when adding, changing, or debugging any animation, transition, or page-transition effect. 日本語の依頼例:「アニメーション付けて」「動きを付けて」「トランジション」「ページ遷移アニメ」「スクロール演出」「ふわっと表示」。From its SKILL.md

Install
npx -y skills add Syo-M/fable-frontend-skills --skill motion

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

4.1 KB, 816 tokens by cl100k_base, as published. Nobody here has run it

Motion

Base invariants live in css-modules (animate transform/opacity only; duration/easing as tokens; respect prefers-reduced-motion). This skill covers when and how.

Escalation ladder — use the cheapest tier that works

  1. CSS transition — state changes (hover, open/close, theme). Default answer.
  2. CSS keyframes — multi-step or looping effects.
  3. Web Animations API — dynamic values or playback control from JS, still zero deps.
  4. Animation library (Motion — formerly Framer Motion) — only for springs, gestures, layout/shared-element animation, or orchestrated sequences. It's a real dependency: the CLAUDE.md ask-first rule applies; never add it for a fade.

Page & element transitions

  • View Transitions API for page transitions (Astro: native cross-document view transitions, or <ClientRouter /> for SPA-mode extras; Next.js/SPA: progressive enhancement behind a document.startViewTransition feature check). It must be enhancement — navigation works identically without it.
  • Verify page transitions with the browser Back button AND your E2E runner before shipping — two failure modes seen in practice: Astro <ClientRouter /> can drop page-scoped <style> on history back-navigation (the page reverts to an unstyled/full-width layout), and native @view-transition { navigation: auto } makes headless Playwright treat every link as never-"stable" so click() hangs. If a transition doesn't survive both, ship without it — the page must work identically anyway. Add a back-navigation smoke assertion to E2E (testing-playwright).
  • Scroll-driven effects: CSS scroll-driven animations or IntersectionObserver. Never scroll event listeners doing style work — and if E2E must click elements inside a scroll-driven animation, prefer IntersectionObserver + a one-shot transition: scroll-linked animations count as permanently "running", which defeats Playwright's stability check.

Behavior rules

  • Animations are interruptible: a second click mid-animation must not break state. CSS transitions handle this free; JS sequences must handle cancellation.
  • Never gate interaction or content behind an entrance animation — the page is usable at frame 0, and LCP content is never delayed by animation. Hero/above-the-fold entrances: animate transform from a visible state, or animate secondary elements — never start the LCP element at opacity: 0 (the browser re-times LCP to when it becomes visible).
  • Exit animations in React: the element must stay mounted until the animation ends — <AnimatePresence> with the library, or a two-phase state (closing → unmount on transitionend/animationend) by hand. Setting display: none in the same tick kills the animation.
  • Durations from tokens; UI feedback stays fast (~100–250 ms); anything over ~400 ms needs a reason.

Reduced motion

  • @media (prefers-reduced-motion: reduce): large/parallax/auto-playing motion is removed; motion that conveys state (a panel opening) is reduced to a quick fade or instant change — not deleted, the state change must still be perceivable. JS animations check matchMedia('(prefers-reduced-motion: reduce)').

Performance

  • will-change only on elements about to animate, removed after — it's a per-element memory cost, not a go-faster switch.
  • Animating layout properties (width/height/top/left) is banned per css-modules; for size transitions use transform: scale or FLIP, and interpolate-size/calc-size() where supported for height-auto transitions.
  • Verify on a throttled CPU (DevTools 4x/6x) — animations are written on fast machines and janky on real ones.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 2 of the 12 instructions most css styling skills give in 816 tokens

Counted across 512 of the 512 authors here whose files we hold, read 2026-09-06

  • Animate only transform and opacityhere, and in 32 of 512, across 30 files
  • Respect prefers-reduced-motionhere, and in 21 of 512
  • Support reduced motion preferencesin 16 of 512, across 6 files
  • Use Tailwind CSS for stylingin 14 of 512, across 13 files
  • Specify AnimatePresence mode explicitlyin 12 of 512, across 2 files
  • Set initial states explicitlyin 12 of 512, across 2 files
  • Use semantic HTML elementsin 11 of 512, across 10 files
  • Use oklch for color valuesin 11 of 512, across 10 files
  • Honor prefers-reduced-motion in animationsin 10 of 512
  • Provide a reduced-motion fallback for animationsin 10 of 512, across 9 files
  • Use property names in camelCasein 9 of 512, across 4 files
  • Ensure UI animations stay under 300msin 9 of 512, across 6 files

Said here and by no other author read

  • Keep durations between 100 and 250 ms
  • Ensure animations are fully interruptible
  • Keep page usable at frame zero
  • Check for reduced motion in JavaScript
  • Verify page transitions with browser Back button

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.