Initial commit

.claude/skills/add-animation/SKILL.md

@@ -0,0 +1,41 @@
+---
+name: add-animation
+description: Add animation to a component with proper setup and cleanup
+disable-model-invocation: true
+---
+
+# Add Animation
+
+Add animation to: $ARGUMENTS
+
+## Process
+
+1. **Choose animation library**
+   - GSAP: Complex timelines, ScrollTrigger, text splitting
+   - Framer Motion: Simple component animations, gestures, layout
+   - CSS: Basic transitions, hover states
+
+2. **For GSAP animations**
+   - Register plugins at file level
+   - Use `gsap.context()` for cleanup
+   - Return `() => ctx.revert()` from useEffect
+   - Use refs for target elements
+
+3. **For Framer Motion**
+   - Wrap conditionally rendered elements in `AnimatePresence`
+   - Add `key` prop for AnimatePresence children
+   - Use `initial`, `animate`, `exit` props
+
+4. **For scroll-triggered animations**
+   - Set appropriate `start` and `end` points
+   - Use `toggleActions` for replay behavior
+   - Consider mobile: disable or simplify
+
+5. **Performance considerations**
+   - Use transform properties (x, y, scale, rotation)
+   - Add `force3D: true` for GPU acceleration
+   - Check if animation should be disabled on mobile
+
+## Output
+
+Show the implemented animation code with proper cleanup.