199-biotechnologies

Motion Dev Animations Skill — Development skill for Claude Code

Development community

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

How to install Motion Dev Animations Skill

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

What Motion Dev Animations Skill does

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

Alternatives in Development

HTML Ppt Skill — HTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20+ animations for building professional HTML present 8.1k ★
Agent Of Empires — Manage multiple Claude Code, OpenCode agents from either TUI or Web for easy access on mobile 3.1k ★
Claudekit Web Dev Tools — Web development tools collection 1.9k ★

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

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