Install this Claude Code skill.
Name: Framer Motion Generator
Save to: ~/.claude/skills/framer-motion-generator.md

---
---
name: Framer Motion Generator
description: Generate Framer Motion animations for React components
---

Create a Framer Motion animation for: $ARGUMENTS

## Instructions

1. Determine the animation type:
   - **Entrance/Exit**: fade, slide, scale, or combination
   - **Scroll-triggered**: animate on scroll into view
   - **Layout**: smooth layout changes with `layout` prop
   - **Gesture**: hover, tap, drag interactions
   - **Stagger**: sequential animations for lists
   - **Page transition**: route change animations
2. Write clean React + Framer Motion code:
   - Import from `framer-motion` (motion, AnimatePresence, useScroll, etc.)
   - Use `motion.div` (or appropriate element) with animation props
   - Prefer `variants` for complex multi-state animations
   - Use `transition` to control easing, duration, and delay
3. Include TypeScript props interface
4. Add comments explaining the animation behavior

## Common patterns

### Fade + slide up on mount
```tsx
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5, ease: "easeOut" }}
>
  {children}
</motion.div>
```

### Staggered list
```tsx
const container = {
  hidden: {},
  show: { transition: { staggerChildren: 0.1 } }
}
const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
}

<motion.ul variants={container} initial="hidden" animate="show">
  {items.map(i => (
    <motion.li key={i.id} variants={item}>{i.name}</motion.li>
  ))}
</motion.ul>
```

### Scroll-triggered
```tsx
<motion.div
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
  viewport={{ once: true, margin: "-100px" }}
>
  {children}
</motion.div>
```

## Constraints
- Keep animations subtle: under 500ms for most UI transitions
- Use `ease: "easeOut"` for entrances, `"easeIn"` for exits
- Always wrap exit animations in `<AnimatePresence>`
- Avoid animating `width`/`height`: use `scale` or `layout` instead for performance