Motion Design System
When to use: Establishing consistent motion across a product — defining durations, easing curves, and orchestration rules so animations feel like they belong to one design system.
npx skills add motion-design-systemgit clone https://github.com/skillhub-community/motion-design-system.gitDescription
A motion design-system toolkit that codifies animation rules as tokens and presets. Provides a curated token set: durations (fast 100ms / base 200ms / slow 400ms / deliberate 700ms), easing curves (standard decelerate, accelerate, emphasize cubic-beziers; spring physics presets), and spacing-scale-derived distances for translate/scale animations. Includes preset 'motion modes' (Fade, Slide-up, Scale-in, Swap) defined as config objects reusable across Framer Motion, GSAP, or CSS transitions.
Ships with the MotionProvider that injects these tokens into context, the useMotionTokens() hook for component authors, and a MotionPreview playground page where designers can tweak duration/easing live and copy the resulting config. Covers choreography principles: stagger children 40-60ms apart, avoid animating more than 2 properties per element, never use same-duration+toggle for in/out (out is faster), and always respect prefers-reduced-motion via a global switch. Includes a motion-audit checklist for reviewing existing screens.
AI Hub
Need a model endpoint?
AI Hub is an OpenAI-compatible endpoint for Cursor, Claude Code, and Agent workflows.
Open AI Hub