PR Custody

add motion-design-playbook — production-grade animation system for React/Next.js

@Homosapien9checks n/achecks…master → master1 files · +576 −0updated 1mo ago

▸Description

What's this?

Adds motion-design-playbook — a structured, opinionated motion system for React and Next.js. Not a component library. A decision framework.

Why it exists

Animation in React codebases tends to be inconsistent — different durations, mixed imports, no reduced motion support, and patterns copy-pasted from random blog posts.

This playbook standardises all of it.

What's included

Motion tokens — duration, easing, distance as a single source of truth
Device adaptation — low-end detection via memory + CPU heuristics
Accessibility — useReducedMotion patterns + CSS media query templates
AnimatePresence mode guide — wait / sync / popLayout with when-to-use
Full modal system — focus trap, scroll lock, Escape key, ARIA out of the box
QA checklist — ships with no CLS, no hydration warnings, no animation leaks
Anti-patterns — documented mistakes so they don't get repeated
7 copy-paste examples — button, fade, list, modal, skeleton, parallax, shared layout

What changed

File	Change
`skills/motion-design-playbook/SKILL.md`	New — full motion system v4.2

loading diff…