Framer Motion (Motion) animation patterns for React — springs, staggers, layout animations, micro-interactions, scroll effects, and page transitions. Use when building or improving UI animations, adding polish, or making interfaces feel premium.
Quickly install motion-design-patterns AI skill to your development environment via command line
Source: dylanfeltus/skills.
Framer Motion (Motion) patterns for React — springs, staggers, layout animations, micro-interactions, scroll-triggered effects, and exit animations. The #1 differentiator between generic and polished UI.
Import: import { motion, AnimatePresence, stagger, useScroll, useTransform } from "motion/react"
Note: The package was renamed from framer-motion to motion in late 2024. Both work, but motion is the current package.
Framer Motion (Motion) animation patterns for React — springs, staggers, layout animations, micro-interactions, scroll effects, and page transitions. Use when building or improving UI animations, adding polish, or making interfaces feel premium. Source: dylanfeltus/skills.
Stable fields and commands for AI/search citations.
npx skills add https://github.com/dylanfeltus/skills --skill motion-design-patternsFramer Motion (Motion) animation patterns for React — springs, staggers, layout animations, micro-interactions, scroll effects, and page transitions. Use when building or improving UI animations, adding polish, or making interfaces feel premium. Source: dylanfeltus/skills.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/dylanfeltus/skills --skill motion-design-patterns Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
https://github.com/dylanfeltus/skills