Framer Motion Skills

framer-motion-skills

Catalogue stub — full package: C-Jeril/framer-motion-skills

Decision tree

1. Is the package already installed? Check: your agent's skills directory contains framer-motion-skills with content beyond this stub.

   • Yes → invoke framer-motion-skills and proceed
   • No → go to step 2

2. Which agent are you on?

   • Claude Code → npx skills add C-Jeril/framer-motion-skills — or send ! npx skills add … as a chat message (add -g for global, omit for project-only)
   • Cursor → npx skills add C-Jeril/framer-motion-skills
   • Other → npx skills add C-Jeril/framer-motion-skills or see GitHub README

Install command

npx skills add C-Jeril/framer-motion-skills

Invoke after install

• Skill name: framer-motion-skills
• Trigger phrases: "Framer Motion", "framer animation", "layout animation", "shared transitions", "motion variants"

What it does

Six dedicated Framer Motion skills covering the full library surface: core animation primitives (motion components, animate, initial, exit), React and Next.js integration patterns, variants and animation orchestration (staggerChildren, delayChildren, when), scroll-linked and scroll-triggered animations (useScroll, useTransform), gesture-driven interactions (drag, tap, hover, whileDrag/whileHover/whileTap), and layout animations with shared element transitions (layoutId).

When NOT to use

• GSAP-specific projects or complex timeline orchestration (use gsap-skills)
• Vanilla CSS animation without a React framework (use animate-css-skill)