Motion.dev Animations Skill MCP — Anwendungsfälle, Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

Wird bei Animation/Motion.dev-Eingabeaufforderungen automatisch aktiviert
Eingangs-, Scroll-, Gesten-, Mikro- und Layout-Animationsmuster
Honors bevorzugt standardmäßig reduzierte Bewegung
Zielt auf 60 fps+, <50 KB-Bundle, keine Layoutverschiebung
GPU-beschleunigte Transformationen; Kein Ruckeln durch Layout-Requisiten

Live-Demo

In der Praxis

motion-dev-animations-skill.replay ▶ bereit

0/0

Installieren

Wählen Sie Ihren Client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "motion-dev-animations-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ]
    }
  ]
}

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json

{
  "context_servers": {
    "motion-dev-animations-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
          "~/.claude/skills/motion-dev-animations"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

claude mcp add motion-dev-animations-skill -- git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: Motion.dev Animations Skill

Fügen Sie einen Helden-Einblend-Eingang mit Staffelung hinzu

👤 Frontend-Entwickler optimieren Landingpages ⏱ ~15 min beginner

Wann einsetzen: Ihr Held fühlt sich statisch an und Sie möchten eine ausgefeilte Ladeanimation.

Voraussetzungen

React + Motion.dev — npm ich Bewegung
Fertigkeit installiert — Git-Klon in ~/.claude/skills/

Ablauf

Beschreiben Sie den Effekt

Fügen Sie dem H1, der Unterüberschrift und dem CTA des Helden einen gestaffelten Einblend-Eingang hinzu. 60 ms Staffelung.✓ Kopiert

→ Motion.dev-Code mit motion.div, Übergangsfeder, Verzögerung über Staffelung
Fallback mit reduzierter Bewegung

Stellen Sie sicher, dass Preferred-Reduced-Motion die Animation sauber überspringt.✓ Kopiert

→ useReducedMotion-Hook oder CSS-Medienabfrage angewendet

Ergebnis: Ein Held, der sich lebendig anfühlt, ohne auf Zugänglichkeit zu verzichten.

Fallstricke

Animierende Eigenschaften, die das Layout auslösen (Breite, oben) — Verwenden Sie stattdessen transform (übersetzen/skalieren) – GPU-beschleunigt, kein CLS

Kombinieren mit: magic-ui-mcp

Erstellen Sie durch Scrollen ausgelöste Enthüllungen und Parallaxe

👤 Designorientierte Frontend-Entwickler ⏱ ~25 min intermediate

Wann einsetzen: Ihre lange Zielseite benötigt Abschnitte, die sich beim Scrollen entfalten.

Ablauf

Auf der Schriftrolle enthüllen

Animieren Sie jeden Abschnitt, wenn er in das Ansichtsfenster eintritt (einmal, 30 %-Schwellenwert).✓ Kopiert

→ useInView mit einmal + Betrag
Parallaxe im Vordergrund

Fügen Sie einen subtilen Parallaxenversatz für die dekorative Vordergrund-SVG hinzu.✓ Kopiert

→ useScroll + useTransform ordnen scrollYProgress zu y zu

Ergebnis: Scroll-Erlebnis, das ohne Ablenkung Tiefe verleiht.

Fallstricke

Parallaxe, die Reisekrankheit verursacht — Halten Sie die Versätze klein und überspringen Sie sie vollständig unter „Preferred-Reduced-Motion“.

Bauen Sie eine ziehbare Magnetkarte mit Schwebelift

👤 Interaktionsdesigner / Frontend-Entwickler ⏱ ~20 min intermediate

Wann einsetzen: Die Produktkarte benötigt Mikrointeraktionspolitur.

Ablauf

Schwebelift

Beim Schweben: 4 Pixel anheben, subtile Schattenskala; Zurück in den Urlaub.✓ Kopiert

→ whileHover mit Frühling; GPU-freundliche Transformationen
Magnetischer Widerstand

Machen Sie es mit elastischen Grenzen ziehbar, DragElastic 0,15.✓ Kopiert

→ Drag + DragConstraints + DragElastic richtig eingestellt

Ergebnis: Eine entzückende Karteninteraktion ohne die Perf-Kosten.

Animieren Sie die Neuordnung der Liste mit dem Layout

👤 Frontend-Entwickler erstellen Taskboards/Galerien ⏱ ~25 min intermediate

Wann einsetzen: Die Neuordnung Ihrer Liste wirkt irritierend. Sie wollen reibungslose Übergänge.

Ablauf

Aktivieren Sie das Layout für Elemente

Fügen Sie den Listenelementen Layoutanimationen hinzu. animieren Sie auch den Ein-/Ausstieg.✓ Kopiert

→ <motion.li-Layout> + AnimatePresence
Reduzierte Bewegung

Deaktivieren Sie Layout-Animationen unter Preferred-Reduced-Motion.✓ Kopiert

→ Bedingt angewendet; sofortige Nachbestellung für Benutzer, die danach gefragt haben

Ergebnis: Nachbestellungen, die sich körperlich anfühlen, aber die Vorlieben der Benutzer respektieren.

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

motion-dev-animations-skill + magic-ui-mcp

Magic UI für vorgefertigte Komponenten, motion.dev für die benutzerdefinierten Teile

Benutzen Sie das Laufschriftfeld von Magic UI für Logos; motion.dev für eine benutzerdefinierte Scroll-Parallaxe unten.✓ Kopiert

motion-dev-animations-skill + claude-design-auditor-skill

Prüfen Sie den Antrag auf Unterstützung bei reduzierter Bewegung

Führen Sie nach dem Hinzufügen von Animationen eine Prüfung mit „scope=motion“ durch, um Regressionen mit reduzierter Bewegung zu erkennen.✓ Kopiert

motion-dev-animations-skill + claude-code-design-skills

Figma-to-Code + Animationen in einem Fluss

Konvertieren Sie den Figma-Rahmen. Fügen Sie dann die angegebenen Hover- und Eintrittsanimationen hinzu.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen	Kosten
motion-dev (SKILL)	describe the animation (element + intent + constraints)	Wann immer Sie Animationscode benötigen, insb. mit Zugänglichkeits- und Leistungseinschränkungen	0

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: Keiner
Tokens pro Aufruf: Klein für Code; groß nur, wenn Sie komplexe Komponenten entsorgen
Kosten in €: Frei
Tipp: Beschreiben Sie die Animationsabsicht genau – „Einblenden mit 60 ms Staffelung, 200 ms Dauer“ anstelle von „schön machen“.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: Keiner

Datenabfluss: Keine aus der Fertigkeit; Netzwerk nicht beteiligt

Der generierte Animationscode ist nur so sicher wie Ihre Rezension – prüfen Sie vor dem Versand die Optionen für reduzierte Bewegung und Layout-Requisiten.

Fehlerbehebung

Häufige Fehler und Lösungen

Jank an der Schriftrolle

Überprüfen Sie, ob Sie Transformationen und keine Layout-Requisiten (Breite/Oben) animieren. Verwenden Sie Will-Change sparsam.

Prüfen: Chrome DevTools → Performance → layout shift count

Animation wird bei reduzierter Bewegung ignoriert

Mit useReducedMotion umschließen und die Animationsvarianten kurzschließen.

Prüfen: System → Motion preferences → reduce motion; reload

Großes Bündel nach dem Hinzufügen von Bewegung

Importieren Sie nur das, was Sie aus „Bewegung/Reaktion“ benötigen; Vermeiden Sie es, alles erneut zu exportieren.

Prüfen: Bundle analyzer on the chunks

Alternativen

Motion.dev Animations Skill vs. andere

Alternative	Wann stattdessen	Kompromiss
magic-ui-mcp	Sie möchten vorgefertigte animierte Komponenten, keine benutzerdefinierten Bewegungen	Weniger kundenspezifisch, schneller umsetzbar
cc-frontend-skill	Sie möchten eine allgemeine Frontend-Anleitung, nicht speziell Motion.dev	Nicht auf Animation ausgerichtet
excalidraw-skill	Sie möchten Diagramme, keine Webanimationen	Anderes Problem

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen