Communitygithub.com

sukirman1901/motion

Zielgerichtete UI-Bewegung nach Familie/Muster – Shell-Standards (Fade, Drawer, Press) plus Marketing-Vokabular (Reveal, Scroll, Text, Carousel, Hero, …). Eigenständige CSS/Motion/GSAP-Animationen aus benannten Mustern. Verwenden für Animationsanfragen, Landeseiten, Laufbänder, Parallaxe, Text-Enthüllungen und leichte Standard-Animationen auf /ui-Shells – keine reinen Token-Anpassungen.

Was ist motion?

Dieses Skill definiert einen strukturierten Ansatz für UI-Bewegungen in AI-Agenten-Umgebungen wie Claude Code, Cursor oder Codex. Es unterteilt Animationen in Familien und Muster – von Mikro-Interaktionen über Hover-Effekte bis hin zu Heldenabschnitten – und stellt sicher, dass Bewegungen gezielt und nicht dekorativ eingesetzt werden. Das Skill unterscheidet zwischen Produkt-Shell- (leicht, standardisiert) und Marketing- (expressiv, sparsam) Einsätzen und schreibt vor, Animationen aus Namensmustern selbst zu erstellen (Hand-Roll) anstatt auf externe Registry-Installationen zurückzugreifen. Der Workflow führt von der Spurwahl über die Familienauswahl bis hin zur Implementierung mit Budget- und Barrierefreiheitsprüfungen. Referenzen wie `motion-families.md` und `motion.md` liefern ein vollständiges Vokabular und konkrete Rezepte. Das Skill unterstützt reduzierte Bewegung (`prefers-reduced-motion`) und stellt sicher, dass Zustandsänderungen auch ohne Bewegung sichtbar bleiben. Es ist ideal für Entwickler, die konsistente, absichtsvolle UI-Bewegungen in Agenten-Workflows umsetzen möchten.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/sukirman1901/frontend-expert/tree/HEAD/skills/motion
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht motion?

Übersicht

Motion verdeutlicht Hierarchie und Feedback – sie schmückt nicht aus. Wähle Familien/Muster nach Namen, dann erstelle sie selbst (CSS / Motion / GSAP). Nicht standardmäßig auf Drittanbieter-Registry-Installationen zurückgreifen.

Vollständiger Katalog: references/motion-families.md (12 Familien · 144 Muster).

Wann verwenden

  • Mikro-Interaktionen (Hover, Fokus, Drücken)
  • Ein-/Ausgangs- oder Layout-Übergänge (Abschnittswechsel, Drawer, Modale)
  • Scroll-basierte, Text-, Karussell-, Helden- oder andere benannte Muster
  • Standard (leicht): App-Shell / Dashboard / mehrteiliges /ui – Abschnitt-Einblendung + Drawer-Folie + sanftes Scrollen (es sei denn, der Benutzer verbietet es)

Wann überspringen

  • Statische Token-/Farb-Anpassungen
  • Benutzer wünscht keine Animation / „tanpa animasi“
  • Untersuchung / Erklärung vorhandener Motion → motion-inspection

Benutzer mit reduzierter Bewegung benötigen weiterhin Zustandsänderungen und nutzbare sofortige/Opazitäts-Fallbacks; räumliche/dekorative Effekte überspringen, nicht den Interaktionsvertrag.

Spuren

SpurVerwendungStandardwerte
Produkt / ShellApp-Chrome, Einstellungen, Dashboardsfade-up / page-crossfade, drawer-slide, press-scale, lift-hover
Marketing / expressivLandingpages, KampagnenWähle 1–2 Familien + 1–2 Muster aus dem Katalog – Budget: 2–3 Bewegungen / Viewport

Familienverwendung (Kurzübersicht)

FamilieVerwende fürNicht für
Mikro-InteraktionToggle, Toast, Like, FortschrittHeld / Scroll-Story
Hover & InteraktionAnheben, Drücken, Magnetisch, NeigenSeiten-Eingang
Scroll-basiertSticky, Horizontal, Scroll-ZoomNur Button-Mikro
Enthüllung & WischenEingangs-Einblendungen, Split, Maske, DrawerEndlose Schleifen als einzige Bewegung
Text-BewegungWort-Enthüllung, Schreibmaschine, Laufband-TypFormulare / dichte Einstellungen
Karussell & DauerflussLaufband, Filmstreifen, SnapEinzel-CTA-Fokusseiten
RasterbewegungBento, Flip-Raster, NachfließenEin-Knopf-Chrome
Spotlight & FokusZentrierte Bühne, Geschwister abdunkelnGanze-Seite-Rauschen
Stapel & StreuenDeck, Fächer, WischdeckAdmin-Tabellen
Heldenabschnitt BewegungParallaxe / Schwebegerät / AuroraApp-Shell (max. 1 Signatureffekt)
Morph & TransformationGeteiltes Element, FAB-MorphJede Navigation
3D & PerspektiveOrbit, CoverflowStandard-Produkt-UI

Arbeitsablauf

  1. Spur – Produkt-Shell vs. Marketing
  2. Familie – passend zur Verwendung (max. 2 Familien)
  3. Muster – 1–2 aus motion-families.md benennen; Definition + Hinweis zur Eigenimplementierung lesen
  4. Vertrag + Implementierung – Auslöser/Zustandsidentität, Eigenschaften, Unterbrechung, Eingabealternativen und reduzierten Bewegungs-Endpunkt (motion.md) festhalten. transform/opacity bevorzugen; begrenzte gemessene Größe/Layout verwenden, wenn Offenlegung oder Morph es erfordert.
  5. Budget – ≤2–3 bewusste Bewegungen pro Viewport
  6. Barrierefreiheit – prefers-reduced-motion: reduce (Opazitäts-/Sofort-Fallbacks); niemals Bedeutung durch Bewegung allein
  7. Bericht – Konventionen: Motion: light shell | families: Hover+Reveal | patterns: lift-hover, fade-up; Unterscheidung von Quell-/Zustandsprüfungen von tatsächlicher Zielwiedergabe und Leistungsmessungen.

Shell-Standards (Produkt)

  • Abschnitts-Eingang: fade-up ~250–300ms
  • Mobil-Drawer: drawer-slide + Hintergrund-Einblendung
  • Steuerelemente: press-scale (0.96)
  • scroll-behavior: smooth (bei reduzierter Bewegung deaktiviert)

Sanftes Scrollen ist keine Erlaubnis zum automatischen Scrollen eingehender Daten. Produktzustandsrezepte in references/motion.md regeln Diagrammaktualisierungen, Offenlegung und Stream-Folgen; ein Leser, der nach oben scrollt, behält die Kontrolle.

Harte Regeln

  • Eigenimplementierung aus Musternamen – Registry-Installation ist nicht der Paketstandard
  • Nicht Held + 3D + Text + Spotlight + Karussell in einem Viewport stapeln
  • Marketing: max. ein Held-Signatureffektmuster

Checkliste

  • Spur gewählt (Produkt vs. Marketing)
  • Familienverwendung passt zur Anfrage (≤2 Familien)
  • Benannte Muster aufgelistet (≤2–3 Bewegungen im Viewport)
  • Eigenimplementiert aus Definition (nicht Registry-als-Antwort)
  • prefers-reduced-motion behandelt
  • Schnelle Umkehrung, verschachtelte Bewegung, Fokus-/Tastatur- und Gestenabbrüche wo relevant geprüft; endgültige Daten/Zustände bleiben wahrheitsgemäß
  • Kein Layout-Thrashing / dekorativer Spam
  • Konventionen: Motion-Zeile ausgefüllt

Tiefe

  • Vokabular: references/motion-families.md
  • Rezepte: references/motion.md
  • Mikro-Handwerksüberschneidung: polish
  • Demo-Shell: lokale test/-Sandbox (optional; wird nicht ausgeliefert)

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

sukirman1901/polish

Polish micro-details that make UI feel better — optical alignment, tabular nums, text-wrap, interruptible transitions, press feedback, hit areas, no transition:all. Use when building/reviewing UI polish, "feels off", "rapihin detail", hover/press feedback, or after anti-slop-design. Structural layout, radius language, and WCAG conformance belong to other owners.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community