Communitygithub.com

kylezantos/design-motion-principles

Experte für Bewegungs- und Interaktionsdesign basierend auf den Techniken von Emil Kowalski, Jakub Krehel und Jhey Tompkins. Zwei Modi – interaktive Komponenten mit zielgerichtetem Motion-Design erstellen oder bestehende Animationen prüfen, um „KI-Schrott“-Bewegungsmuster zu erkennen (Audit erstellt einen gebrandeten HTML-Bericht mit sich wiederholenden Demos).

Was ist design-motion-principles?

Diese Skill-Bibliothek befähigt KI-Agenten, professionelle Motion-Design-Entscheidungen auf Basis der Stile dreier bekannter Designer zu treffen. Sie bietet zwei Betriebsmodi: einen **Build-Modus** zum Erstellen neuer interaktiver Komponenten mit flüssigen, zielgerichteten Animationen und einen **Audit-Modus**, der bestehende UI-Bewegungen auf „AI-Slop“ (unsinnige oder übermäßige, ablenkende Animationen) analysiert und einen detaillierten, gebrandeten HTML-Bericht mit eingebetteten Demos ausgibt. Der Skill berücksichtigt automatisch die Perspektive des jeweils ausgewählten Designers (Kowalski, Krehel oder Tompkins) und gewichtet seine Empfehlungen kontextabhängig. Er ist für die Arbeit mit React, Framer Motion, CSS und HTML optimiert und deckt alle gängigen Bewegungsaspekte ab: Übergänge, Hover-Zustände, Mikrointeraktionen sowie Ein- und Ausgangsanimationen. Entwickler können somit in Werkzeugen wie Cursor, Claude Code oder ähnlichen KI-Coding-Assistenten konsistent hochwertiges Motion-Design sicherstellen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kylezantos/design-motion-principles/tree/main/skills/design-motion-principles
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 design-motion-principles?

Experte für Bewegungs- und Interaktionsdesign basierend auf den Techniken von Emil Kowalski, Jakub Krehel und Jhey Tompkins. Zwei Modi – interaktive Komponenten mit zielgerichtetem Motion-Design erstellen oder bestehende Animationen prüfen, um „KI-Schrott“-Bewegungsmuster zu erkennen (Audit erstellt einen gebrandeten HTML-Bericht mit sich wiederholenden Demos). Verwenden Sie diesen Skill beim Erstellen, Hinzufügen, Animieren oder Überprüfen von UI-Bewegungen: Übergänge, Hover-Zustände, Mikrointeraktionen, Ein-/Ausgangsanimationen oder jede Motion-Design-Arbeit in React, Framer Motion, CSS oder HTML. Bietet designperspektivische Ansätze mit kontextabhängiger Gewichtung.

Verwandte Skills

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community