15 skills · sorted by relevance
Framer Motion React animation library skill — declarative animations, gestures, layout transitions, scroll-triggered animations, variants, AnimatePresence, and performance optimization.
The English summary is being prepared. Showing the original description.
Build a shared animation foundation for React and Next.js with motion/react. Define reusable timing and spring settings, respect reduced-motion preferences, adapt to device performance, and align initial animation states with server-rendered content.
Build and review React or Next.js interfaces using practical patterns for reusable components, state management, data fetching, forms, and rendering performance. Includes keyboard navigation and focus management to support accessible interactions.
Implement animation in React with Framer Motion examples based on Disney's 12 animation principles. Add squash and stretch, preparatory movements, smooth acceleration, overlapping motion, and hover or tap responses with defined timing.
Design and implement interface responses such as button feedback, loading indicators, page transitions, and swipe gestures. Use motion to communicate actions and state changes, with guidance on timing, performance, and support for people who prefer reduced animation.
Refine interface details such as rounded corners, shadows, typography, icon alignment, and animations. Use concrete implementation rules to improve visual consistency and interaction feedback, with changes documented in before-and-after tables.
Guides React and Next.js interface development with examples for reusable components, shared state, forms, and error handling. It also covers loading performance, animations, and keyboard access to help build maintainable, responsive interfaces.
Framer Motion / Motion sub-skill - AnimatePresence, layout animations, gestures, motion values.
The English summary is being prepared. Showing the original description.
Animate React with Framer Motion (Motion): gestures, layout animations, variants, scroll-linked motion, and exit transitions. Use when adding production-grade UI animation.
The English summary is being prepared. Showing the original description.
Craft UI animations with Framer Motion: page transitions, micro-interactions, scroll reveals, and shared layouts for polished interfaces. Use for interface animation beyond basics.
The English summary is being prepared. Showing the original description.
Motion (formerly Framer Motion) patterns - motion components, variants, AnimatePresence, gestures, layout animations, scroll-linked motion, reduced-motion handling
The English summary is being prepared. Showing the original description.
Design performant animation systems with Framer Motion, GSAP, View Transitions API, and spring physics. Activate on: page transitions, micro-interactions, scroll animations, layout animations, spring physics. NOT for: CSS-only hover effects (use css-in-js-architect), video/canvas rendering (use creative-coding-expert).
The English summary is being prepared. Showing the original description.
Build Motion (Framer Motion) React animations — declarative motion components, variants, AnimatePresence, layout transitions, scroll effects, and inline SVG pathLength. Load when the user asks to animate with Motion, Framer Motion, motion.div, AnimatePresence, layout animation, whileInView, or React enter/exit transitions. Also triggers on "framer-motion", "motion/react", "useReducedMotion", or "React animation library". React/Next only — not README embeds or non-React.
The English summary is being prepared. Showing the original description.
Design performant animation systems with Framer Motion, GSAP, View Transitions API, and spring physics. Activate on: page transitions, micro-interactions, scroll animations, layout animations, spring physics. NOT for: CSS-only hover effects (use css-in-js-architect), video/canvas rendering (use creative-coding-expert).
The English summary is being prepared. Showing the original description.
Creates smooth animations and micro-interactions using Framer Motion including page transitions, gestures, scroll-based animations, and orchestrated sequences. Use when users request "add animation", "framer motion", "page transition", "animate component", or "micro-interactions".
The English summary is being prepared. Showing the original description.