mcpField
F
framer-motion-skills

framer-motion-skills

github.com/podoDesign & UI29221 installsUpdated 1d ago
Repository

About framer-motion-skills

framer-motion-skills is a package of five skills covering separate areas of Framer Motion for React and Next.js developers. Topics include integration, variants, scroll effects, gestures, and layout transitions.

Key features

  1. 01React and Next.js integration
  2. 02Animation variants and orchestration
  3. 03Scroll-linked and triggered effects
  4. 04Gesture-driven interactions
  5. 05Layout and shared-element transitions

Use cases

  1. 01Add gesture interactions to a React interface
  2. 02Build scroll-linked animations
  3. 03Create shared-element layout transitions

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill framer-motion-skills

After installing, type/framer-motion-skillsin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

framer-motion-skills

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

Decision tree

  1. Is the full skill already installed? This package installs 5 skills (framer-motion-gestures, framer-motion-layout, framer-motion-react, framer-motion-scroll, framer-motion-variants); checking the first.

    • Global: f=~/.agents/skills/framer-motion-gestures/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/framer-motion-gestures/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as framer-motion-gestures, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

    [ -e ~/.agents/skills/framer-motion-skills ] && echo "global" || echo "project"

    Global:

    npx skills add C-Jeril/framer-motion-skills --skill framer-motion-gestures framer-motion-layout framer-motion-react framer-motion-scroll framer-motion-variants -g -y

    Project:

    npx skills add C-Jeril/framer-motion-skills --skill framer-motion-gestures framer-motion-layout framer-motion-react framer-motion-scroll framer-motion-variants -y

    Claude Code: send a command as a chat message starting with ! to run it without leaving the conversation.

Heads-up

  • License: MIT

Invoke after install

Each skill installs under its own name; the agent picks the right one from the request.

  • framer-motion-react — "AnimatePresence", "Framer Motion with Next.js", "SSR"
  • framer-motion-variants — "variants", "stagger", "orchestrated animation"
  • framer-motion-scroll — "useScroll", "parallax", "scroll-linked animation"
  • framer-motion-gestures — "drag", "tap", "hover gesture"
  • framer-motion-layout — "layoutId", "shared element transition", "reorderable list"

What it does

Separate Framer Motion skills, each covering one slice of the library: React and Next.js integration (AnimatePresence, useAnimation, SSR), variants and animation orchestration (state machines, stagger, sequencing), scroll-linked and scroll-triggered animation (useScroll, useTransform, parallax), gesture-driven interaction (drag, pan, tap, hover, focus), and layout animations with shared element transitions (layoutId).

The upstream repo also lists a sixth skill for the core API (framer-motion-core), but its SKILL.md has a YAML error, so the skills CLI cannot install it today and this pointer leaves it out. For the animation library maintained by the Motion team itself, see the motion pointer.

When NOT to use

  • The official Motion skill (docs search, CSS springs, performance audits, upgrade guides) → use motion
  • GSAP-specific projects or complex timeline orchestration → use gsap-skills
  • Vanilla CSS animation without a React framework → use animate-css-skill

Comments

Markdown supported