ali-abassi

Framer Motion Skill — AI skill for Claude Code

AI community

Framer Motion skill context for Claude Code and AI coding agents - design principles, patterns, and 101 working demos.

How to install Framer Motion Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open ali-abassi/framer-motion-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Framer Motion Skill does

Framer Motion skill context for Claude Code and AI coding agents - design principles, patterns, and 101 working demos.

Alternatives in AI

Context Engineering Agent Skills — Context engineering patterns for agent skills 13.9k ★
Gsap Skills — Official AI skills for GSAP 1.7k ★
Claude Code Design Guide — From Early Internet Design Patterns to AI Agent Implementation — A Deep Dive into Claude Code for Developers 762 ★

README

Framer Motion Showcase

Complete interactive showcase with 213 Framer Motion examples across 24 categories.

Features

213 Interactive Components - All with live demos and copy-to-clipboard code
30 Workflow Automation Components - Schedulers, debuggers, node canvas, data mappers
Premium Effects - Meteors, aurora, particles, morphing shapes, DNA helix
Practical UI Patterns - Accordions, tabs, carousels, modals, forms, charts
24 Categories - Layout, Scroll, Text, 3D, Heroes, Analytics, Stock Market, and more
Next.js 14 App Router - Modern React with static export

Live Demo

View live at: [aliabassi.com/framer-motion-showcase](https://www.aliabassi.com/framer-motion-showcase/)

Local Development

# Install dependencies
npm install

# Run dev server
npm run dev

# Open http://localhost:3000

Build

# Build static site
npm run build

# Output in ./out directory

Structure

framer-motion-showcase/
├── app/
│   ├── page.jsx              # Main showcase app
│   ├── layout.tsx            # Root layout
│   └── globals.css           # Global styles
├── components/
│   └── demos/                # All 213 demo components
│       ├── WorkflowBuilderDemo.jsx
│       ├── NodeCanvasDemo.jsx
│       └── ... 211 more
├── lib/
│   ├── categories.js         # Category definitions
│   ├── demoNames.js          # Component display names
│   └── demoRegistry.js       # Component registry
└── next.config.js            # Next.js config with basePath