Skills

Install RSLAB's design system as a Claude Code skill, so your agent builds animations that already match the house style.

Components are code you install once. Skills are rules your AI agent keeps,

a SKILL.md written into .claude/skills, so anything it builds afterwards

(not just RSLAB components) follows the same spacing scale, spring physics,

and haptic pairing as the rest of the library.

Skills go through the same registry as everything else, subscription

required, same add command, same lock icon in list.

Motion Design

Writes .claude/skills/rslab-motion-design/SKILL.md. It covers:

Gesture-driven vs. state-driven motion, when to map a value straight

off a pan/scroll offset, and when to reach for a spring or a timing curve

instead, so the two never fight each other.
A real spacing & radius scale, the exact gaps, paddings, control

heights and corner radii used across the library, an 8pt grid derived

from shipping components, not invented for the docs.
Spring & timing tokens, the three spring families (press, settle,

drag-follow) and the timing curves (including the "calm Apple bezier"

used for every sheet/card expansion), with the actual damping/stiffness/

duration numbers.
Haptic pairing rules, which impactAsync/notificationAsync call

goes with which trigger, and exactly when it should fire.
Platform gotchas, things like why animating opacity on a real

Liquid Glass view kills it on-device, learned the hard way while

building the components in this registry.

Once it's installed, ask Claude Code to build or review any animation in

the project, it reads the skill automatically, no extra prompting.

If you're using the MCP server, add_component installs

skills the same way as components:


add_component({ names: ["rslab-motion-design"], cwd: "/path/to/project" })