framer-motion-skills

name	framer-motion-skills
description	Six dedicated Framer Motion skills: core animation, React/Next.js integration, variants and orchestration, scroll animations, gestures (drag/tap/hover), and layout/shared transitions.
triggers	["Framer Motion","framer animation","layout animation","shared transitions","motion variants"]
das	{"type":"package","category":"motion-animation","upstream":"https://github.com/C-Jeril/framer-motion-skills","version":"latest","install":false}

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)