Motion Dev Animations Skill banner
199-biotechnologies 199-biotechnologies

Motion Dev Animations Skill

Development community

Description

Claude Code skill for Motion.dev -- 120fps web animations, spring physics, scroll effects, gesture interactions

Installation

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

README

Motion.dev Animations Skill

**Production-grade web animations for Claude Code, powered by Motion.dev.**

[![Star this repo](https://img.shields.io/github/stars/199-biotechnologies/motion-dev-animations-skill?style=for-the-badge&logo=github&label=%E2%AD%90%20Star%20this%20repo&color=yellow)](https://github.com/199-biotechnologies/motion-dev-animations-skill/stargazers) [![Follow @longevityboris](https://img.shields.io/badge/Follow_%40longevityboris-000000?style=for-the-badge&logo=x&logoColor=white)](https://x.com/longevityboris)

[![Claude Code](https://img.shields.io/badge/Claude_Code-Skill-6C47FF?style=for-the-badge&logo=anthropic&logoColor=white)](https://docs.anthropic.com/en/docs/claude-code) [![Motion.dev](https://img.shields.io/badge/Motion.dev-v11-FF0055?style=for-the-badge&logo=framer&logoColor=white)](https://motion.dev) [![License: MIT](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)](LICENSE) [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)

A Claude Code skill that generates 120fps GPU-accelerated animations using Motion.dev (the successor to Framer Motion). Say "add a hero animation" or "create scroll effects" and get production-ready TypeScript code with accessibility and performance baked in.


[Why This Exists](#why-this-exists) | [Install](#install) | [Quick Start](#quick-start) | [How It Works](#how-it-works) | [Animation Types](#animation-types) | [What's Inside](#whats-inside) | [Contributing](#contributing) | [License](#license)


Why This Exists

Motion.dev has 10M+ downloads per month. It is the standard for web animations in React, Next.js, Svelte, and Astro. But writing good animations is hard. You need spring physics, GPU-accelerated properties, `prefers-reduced-motion` support, and 60fps+ performance targets.

This skill gives Claude Code deep knowledge of Motion.dev patte