Motion Foundations
affaan-m/eccMotion foundations is the base layer for building smooth and safe animations in React and Next.js apps. It defines all the values, rules, and limits that other animation skills depend on. This layer makes sure every animation is fast, accessible, and works with server rendering.
Use this skill when starting a new animated component from scratch. It provides a shared set of timing tokens, spring presets, and a accessibility gate that respects user preferences. It also prevents common problems like layout jumps and hydration mistakes.
This skill is useful for developers who want consistent animations across their whole project. It enforces simple rules like never using hardcoded durations and always matching server output. It also helps decide when an animation should not run at all.
Add Motion Foundations skill to your workflow
Global
mkdir -p ~/.claude/skills/motion-foundationsProject
mkdir -p .claude/skills/motion-foundationsSource Repository
More Frontend Development Claude Code Skills
Frontend Designanthropics/skills
Create striking frontend interfaces with bold design and polished code every time
Vercel React Best Practicesvercel-labs/agent-skills
Optimize React and Next.js apps using proven Vercel performance guidelines
Vercel Composition Patternsvercel-labs/agent-skills
Clean React components with composition instead of boolean props
Shadcnshadcn/ui
Manage shadcn UI components easily with CLI commands and clear styling rules
Design Taste Frontendleonxlnx/taste-skill
Enforce premium frontend design with metric-based rules and smart component architecture
Impeccablepbakaus/impeccable
Polish your frontend interfaces with expert design critique and code
Minimalist Uileonxlnx/taste-skill
Build warm minimal web interfaces with editorial typography and flat bento grids
Industrial Brutalist Uileonxlnx/taste-skill
Raw mechanical UIs fusing Swiss print with military terminal aesthetics and high data density