framer-motion
Framer Motion
Platform: Web only. For mobile animations, see the react-native-reanimated skill.
Overview
Animation patterns for React using Framer Motion 12.x. Provides declarative animations, gesture handling, layout transitions, and page animations with performance and accessibility built-in.
Install: pnpm add framer-motion
Workflows
Adding animations:
- Import motion component:
import { motion } from 'framer-motion' - Replace element with motion variant:
<div>→<motion.div> - Add animation props: initial, animate, transition
- Test with reduced motion enabled
- Verify 60fps performance in DevTools
More from nguyenhuuca/assessment
compliance
Ensure regulatory compliance. Use when implementing GDPR, HIPAA, PCI-DSS, or SOC2 requirements. Covers compliance frameworks and controls.
19requirements-analysis
Analyze and refine product requirements. Use when clarifying scope, identifying gaps, or validating requirements. Covers requirement types and analysis techniques.
16identity-access
Implement identity and access management. Use when designing authentication, authorization, or user management. Covers OAuth2, OIDC, and RBAC.
13security-review
Conduct security code reviews. Use when reviewing code for vulnerabilities, assessing security posture, or auditing applications. Covers security review checklist.
13execution-roadmaps
Create execution roadmaps for projects. Use when planning multi-phase projects or feature rollouts. Covers phased delivery and milestone planning.
12cloud-native-patterns
Apply cloud-native architecture patterns. Use when designing for scalability, resilience, or cloud deployment. Covers microservices, containers, and distributed systems.
12