🎯

motion

🎯Skill

from jezweb/claude-skills

What it does

Skill for building React animations with Motion (formerly Framer Motion), covering gestures, scroll effects, spring physics, layout animations, and SVG with bundle sizes from 2.3KB to 34KB

Overview

The Motion skill provides comprehensive guidance for building React animations with Motion (formerly Framer Motion), the industry-standard React animation library with 30,200+ GitHub stars. It covers gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG path morphing, and exit animations with AnimatePresence, along with bundle optimization strategies ranging from 2.3 KB to 34 KB.

Key Features

Gesture Support - Complete guidance for implementing drag-and-drop, hover states, tap feedback, and pan gestures with cross-device support
Scroll-Based Animations - Instructions for viewport-triggered reveals, scroll-linked progress bars, parallax layers, and sticky header transforms
Layout Transitions - FLIP-technique animations for shared element transitions, expand/collapse, grid/list switching, and tab navigation
Bundle Optimization - Strategies for reducing bundle size from 34 KB to 2.3 KB using useAnimate mini or 4.6 KB with LazyMotion
Framework Compatibility - Production-tested with React 19.2, Next.js 16.1, Vite 7.3, and Tailwind v4, including guidance on when to use Motion vs lighter alternatives like auto-animate

Who is this for?

This skill is for React developers who need to implement sophisticated animations including drag-and-drop interfaces, scroll-triggered effects, shared element transitions, or SVG animations. It helps developers choose the right animation approach and provides clear guidance on when Motion is the appropriate tool versus simpler alternatives.

📦

Same repository

jezweb/claude-skills(197 items)

motion

Installation

Vibe Index InstallInstalls to .claude/skills/

npx vibeindex add jezweb/claude-skills --skill motion

skills.sh Install⚠ Installs to .agents/skills/

npx skills add jezweb/claude-skills --skill motion

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/motion/SKILL.md

SKILL.md

787Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

More from this repository10

🎯

shadcn-ui🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

tailwind-v4-shadcn🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

tanstack-query🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

tailwind-theme-builder🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

color-palette🎯Skill

Skill for generating complete, accessible color palettes from a single brand hex, creating 11-shade scales, semantic tokens, dark mode variants, and WCAG contrast checking for Tailwind v4

🎯

fastapi🎯Skill

Provides FastAPI development patterns including async endpoints, dependency injection, Pydantic models, authentication, and API documentation best practices

🎯

image-processing🎯Skill

Image processing skill for Claude Code providing guided workflows for image manipulation, resizing, format conversion, and optimization.

🎯

ux-audit🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

favicon-gen🎯Skill

Generates favicon files in multiple sizes and formats for web projects, from a collection of 87 production-ready skills for Cloudflare, React, and AI integrations.

🎯

wordpress-elementor🎯Skill

A WordPress Elementor skill from a Claude Code skills collection that guides Claude through recipes for building and managing WordPress sites with the Elementor page builder.