skills.rest
jangtrinh
jangtrinhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

motionwind

Convert Tailwind-like animate-* classNames into Motion props at build time.

Updated Mar 27, 2026
Search Tags:#react#animation#tailwind#jsx#motionwind#babel-plugin
One-click install
npx skills add https://github.com/jangtrinh/EaseUI-Agent --skill motionwind
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motionwind
Source: https://github.com/jangtrinh/EaseUI-Agent/tree/main/.claude/skills/motionwind
Command: npx skills add https://github.com/jangtrinh/EaseUI-Agent --skill motionwind

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

MotionWind provides a build-time Babel plugin that converts Tailwind-like animate-* classNames into Motion component props, eliminating boilerplate and runtime overhead.

Core Features & Use Cases

  • Scans JSX for static className strings with animate-* tokens and parses them into Motion props.
  • Rewrites <div> to <motion.div> with the corresponding props and auto-injects the necessary imports.
  • Works with Next.js and Vite setups, enabling zero-runtime transforms and seamless integration.
  • Enforces static classNames and lowercase HTML elements for reliable transforms.

Quick Start

Install motionwind and replace your animate-* classNames with static, Tailwind-like tokens in JSX to enable build-time transformation.

Frequently Asked Questions about motionwind

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Tailwind animate-* classNames into Motion props?▼

You can convert Tailwind animate-* classNames into Motion props by applying a build-time Babel plugin that parses static className strings and rewrites standard HTML elements into motion components with corresponding props automatically.

Does MotionWind work with Next.js and Vite?▼

Yes, the build-time Babel plugin supports both Next.js and Vite setups, automatically transforming static JSX classNames into Motion props for zero runtime overhead and seamless integration.

How does build-time animation transform reduce runtime overhead?▼

Build-time animation transforms parse static animate-* tokens during compilation, rewriting standard JSX elements into motion components and injecting necessary imports directly, bypassing the need for runtime class parsing.

What are the limitations of converting animate-* classes at build time?▼

Build-time conversion enforces static className strings and strictly lowercase HTML elements to ensure reliable transforms, meaning dynamic classes, conflicting props, or non-standard tags will not be processed.

Do I need to manually import motion components for Tailwind animations?▼

Manual imports are unnecessary because the Babel plugin automatically injects use client declarations and motion imports when it rewrites standard JSX elements into motion components.

Related Skills

Explore More Software Engineering Skills→
sanghee01sanghee01

devup-ui

Compile JSX styles into static CSS for React components.

Community
Intermediate
calesthiocalesthio
123

gsap-animation-composition

Build deterministic GSAP animation timelines driven by explicit video frames.

Community
Advanced
logeshv586-codelogeshv586-code

tailwindcss-animations

Provide animation and transition utilities for Tailwind CSS components.

Community
Intermediate
ehtbantonehtbanton

babel-config-builder

Generate Babel configuration files for JavaScript and TypeScript transpilation.

Community
Basic