ai-design-vault: Skill for Claude Code

The motion layer

This kit's premise: one motion vocabulary, identical across frameworks. The primitives below have the same names, the same props and the same behaviour whether they are built on @react-spring/web, svelte/motion, motion-v or plain motion. A page written against them reads the same in any stack — which is the entire point of building it as a contract rather than shipping a library.

Read obsidian/frontend/motion-system.md (the contract) and obsidian/frontend/motion-bindings.md (per-framework mapping) before building.

0. Before you install anything

Check what already exists:

cat .claude/stack.json                                  # bindings.motion
grep -rlE "spring|animate|gsap|motion" --include='*.json' package.json

• A binding already installed wins, even if it is not the kit's default. Two animation libraries is a hard-rule violation; personal preference is not a reason to add one.
• No binding installed → propose one from motion-bindings.md, say what it costs (bundle size, peer deps) and ask before installing.
• Record the answer in stack.json → bindings.motion / textMotion.

1. The shared render loop — build this first

Every per-frame subscriber goes through one requestAnimationFrame loop. A page with 20 scroll-driven elements runs one rAF, not 20.

Contract:

subscribe(callback, options?) -> unsubscribe
  callback({ time, delta, frame })
  options: { framerate?: number }   // per-subscriber throttle

• Reference-counted: starts on the first subscriber, stops when the last unsubscribes. An idle page costs nothing.
• Pauses on document.visibilitychange (hidden tab renders nothing).
• One debounced resize listener shared the same way — never one per component.
• If a smooth-scroll library is in use (bindings.smoothScroll), it drives the loop rather than running its own: call its raf(time) from the ticker.

Put it at <source>/lib/animation/ticker.*. This file is the supported extension point — it is not protected code.