#601

Globales Ranking · von 601 Skills

motion AI Agent Skill

Quellcode ansehen: oakoss/agent-skills

Safe

Installation

npx skills add oakoss/agent-skills --skill motion

40

Installationen

Motion

Overview

Motion (package: motion, formerly framer-motion) is the standard React animation library. Import from motion/react. Provides declarative props for gestures, scroll-linked animations, layout transitions, SVG path drawing, and spring physics. Uses a hybrid animation engine (WAAPI for transforms/opacity, ScrollTimeline for scroll-linked effects). Bundle ranges from 2.3 KB (useAnimate mini) to 34 KB (full), optimizable to 4.6 KB with LazyMotion. Compatible with React 18.2+, React 19, Next.js App Router, and Vite.

Do NOT use Motion for simple list add/remove animations (use AutoAnimate instead at 3.28 KB). Do NOT use for 3D (use Three.js / React Three Fiber).

Quick Reference

Pattern API / Props
Fade in on mount initial, animate, transition
Exit animations AnimatePresence + exit prop (unique key required)
Staggered list variants with staggerChildren
Hover / tap / focus whileHover, whileTap, whileFocus
Drag drag, dragConstraints, dragElastic
Scroll-triggered whileInView, viewport={{ once: true }}
Scroll-linked/parallax useScroll + useTransform
Progress indicator scrollYProgress + scaleX
Layout animation layout prop (FLIP technique)
Shared element layoutId (same ID across views)
Layout group LayoutGroup wrapping sibling lists
Page transition AnimatePresence + key={pathname}
SVG path drawing pathLength on motion.path
Animated counter useSpring + useTransform
Imperative control useAnimate hook returns [scope, animate]
Custom components motion.create(Component) wraps any component
Bundle optimization LazyMotion + domAnimation + m component (4.6 KB)
Reduced motion MotionConfig reducedMotion="user"

Common Mistakes

Mistake Correct Pattern
AnimatePresence inside a conditional Keep AnimatePresence mounted; place conditional content inside it
Missing unique key on AnimatePresence children Add unique key to each direct child for exit animations
Tailwind transition-* classes with Motion animate props Remove Tailwind transition classes to avoid stuttering
Importing from framer-motion Use import { motion } from "motion/react" (renamed late 2024)
Animating 50+ items without virtualization Use react-window or @tanstack/react-virtual for large lists
Full 34 KB bundle for simple animations Use LazyMotion + domAnimation (4.6 KB) or useAnimate (2.3 KB)
Missing "use client" in Next.js App Router Add directive or use motion/react-client import
Animating width/height directly Use layout prop or transform: scale for GPU acceleration
No prefers-reduced-motion handling Wrap app in MotionConfig reducedMotion="user"

Delegation

  • Audit animation performance and bundle size: Use Explore agent to find heavy imports, missing LazyMotion, and reflow-triggering properties
  • Build complex multi-step animations: Use Task agent for scroll-linked parallax, shared layout transitions, and staggered sequences
  • Plan animation architecture for a new project: Use Plan agent to evaluate Motion vs AutoAnimate vs CSS-only based on requirements

If the design-system skill is available, delegate animation token definitions and motion design guidelines to it.

References

  • Core Patterns -- Animation patterns: fade, exit, stagger, gestures, modal, accordion, tabs, scroll, layout, drag, SVG, loading
  • Scroll Animations -- useScroll, useTransform, scroll-triggered, parallax, progress indicators, offset configuration
  • Performance -- LazyMotion, useAnimate, hardware acceleration, virtualization, production checklist
  • Next.js Integration -- App Router patterns, motion/react-client, Pages Router, known issues
  • Accessibility & CSS -- prefers-reduced-motion, MotionConfig, useReducedMotion, CSS keyframes, Tailwind animations
  • Library Selection Guide -- Motion vs AutoAnimate decision guide with feature comparison and use-case recommendations
  • Troubleshooting -- AnimatePresence bugs, Tailwind conflicts, layout glitches, React 19 issues, naming migration

Installationen

Installationen 40
Globales Ranking #601 von 601

Sicherheitsprüfung

ath Safe
socket Safe
Warnungen: 0 Bewertung: 90
snyk Low
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

So verwenden Sie diesen Skill

1

Install motion by running npx skills add oakoss/agent-skills --skill motion in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.

2

Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.

3

Der Skill verbessert das Verständnis Ihres Agenten für motion, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.

Was Sie erhalten

Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.

Kompatibilität

Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Kundensupport