interaction-designvon Seth Hobson

Interaction Design Skill.

Ein Claude Code- und Codex-Skill für UX-Research: Mikrointeraktionen, Motion, Übergänge und User-Feedback-Muster.

UX & Research

OpenDesign herunterladen Anleitung ansehen

wshobson/agents · plugins/ui-design/skills/interaction-design/SKILL.mdSKILL.md

--- name: interaction-design description: Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences. --- ## When to Use This Skill ## Core Principles ## Quick Start: Button Microinteraction ## Interaction Patterns ## CSS Animation Patterns ## Accessibility Considerations

Frontmatter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 7.572 Zeichen insgesamt

01 Was es tut

Was der interaction-design Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Dieser Skill entwirft und implementiert Mikrointeraktionen, Motion Design, Übergänge und Feedback-Muster für Nutzer, um die Usability zu verbessern und Nutzer zu erfreuen. Er liefert konkrete Timing-Richtlinien: 100-150ms für Mikro-Feedback wie Hover und Klicks, 200-300ms für kleine Übergänge wie Toggles und Dropdowns, 300-500ms für mittlere Übergänge wie Modals und Seitenwechsel sowie 500ms+ für komplexe choreografierte Animationen.

Der Skill behandelt Ladezustände mit Skeleton Screens und Fortschrittsanzeigen, gestenbasierte Interaktionen wie Swipe-to-Dismiss, Seitenübergänge und Feedback-Muster wie Ripple-Effekte. Er betont zielgerichtete Bewegung, die kommuniziert statt nur zu dekorieren, anhand von vier Prinzipien: Feedback zur Bestätigung von Aktionen, Orientierung zur Anzeige von Elementbewegungen, Fokus zur Lenkung der Aufmerksamkeit und Kontinuität zur Wahrung des Kontexts bei Übergängen.

Was er erzeugt

Button-Mikrointeraktionen mit Hover-, Tap- und Spring-Animationen
Skeleton Screens mit pulsierender Animation für Ladezustände
Toggle-Komponenten mit sanften, spring-basierten Zustandsübergängen
Seitenübergänge mit Opazität und vertikaler Bewegung mittels AnimatePresence

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Timing-Richtlinien nach Interaktionsgröße einhalten
Verwenden Sie 100-150ms für Mikro-Feedback wie Hover und Klicks, 200-300ms für kleine Übergänge wie Toggles, 300-500ms für mittlere Übergänge wie Modals und 500ms+ für komplexe Animationen.
02
Passende Easing-Funktionen auswählen
Verwenden Sie ease-out (Abbremsen) für eintretende Elemente, ease-in (Beschleunigen) für austretende Elemente, ease-in-out für Übergänge zwischen Zuständen und spring für spielerische Überschwing-Effekte.
03
Barrierefreiheits-Einstellungen respektieren
Prüfen Sie die Media Query prefers-reduced-motion und reduzieren Sie Animationsdauern auf 0,01ms, wenn Nutzer reduzierte Bewegung angefordert haben, damit Animationen kein Unbehagen verursachen.

02 Finden Sie Ihren Favoriten

Wann Sie den interaction-design Skill verwenden

Verwenden Sie die interaction-design Skill in Claude Code oder Codex, wenn die Aufgabe UX-Forschung dieser Art betrifft. Eignung und Grenzen unten stammen aus der eigenen Datei der Skill.

Gut geeignet

Hinzufügen von Mikrointeraktionen zur Verbesserung des Nutzerfeedbacks bei Buttons, Toggles und interaktiven Elementen
Implementierung fließender Seiten- und Komponentenübergänge zwischen Ansichten oder Zuständen
Gestaltung von Ladezuständen und Skeleton Screens, die das Layout während des Datenabrufs beibehalten
Erstellung gestenbasierter Interaktionen wie Swipe-to-Dismiss oder Drag-and-Drop
Aufbau von Benachrichtigungs- und Toast-Systemen mit Ein- und Ausblendanimationen

Grenzen kennen

Animieren von width-, height-, top- oder left-Eigenschaften, was zu ruckeliger Performance führt
Übermäßiger Einsatz von will-change zur Optimierung, was die Performance beeinträchtigen kann

03 Innerhalb des Skills

Regeln, die der interaction-design Skill Claude Code und Codex vorgibt

3 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md dem Agent vorgibt — der Teil der Datei, der das Ergebnis verändert.

Nur Transform und Opacity animieren
Verwenden Sie ausschließlich die Eigenschaften transform und opacity für flüssige Animationen mit 60fps. Animieren Sie niemals width, height, top oder left, da diese ruckelige Animationen verursachen.
Bewegung Muss Kommunizieren, Nicht Dekorieren
Jede Animation sollte einem Zweck dienen: das Bestätigen ausgeführter Aktionen, das Zeigen, wohin sich Elemente bewegen, das Lenken der Aufmerksamkeit auf Änderungen oder das Erhalten des Kontexts.
Konsistente Timing-Skala Verwenden
Wenden Sie die gleichen Timing-Werte und Easing-Funktionen konsistent in der gesamten Anwendung an, um ein einheitliches Gefühl zu schaffen.

04 In Betrieb nehmen

interaction-design in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

interaction-design zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/wshobson/agents --skill interaction-design

Generische skills-CLI-Form für plugins/ui-design/skills/interaction-design/SKILL.md; das Repository dokumentiert unter Umständen einen eigenen Pfad.

Geben Sie dem Skill eine erste UX-Research-Aufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Add microinteractions to the [component name] in [file path]. Implement hover and tap feedback on the submit button, add a skeleton screen for the loading state, and create a smooth toggle animation for the [setting name] switch. Make sure all animations respect prefers-reduced-motion and run at 60fps.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Testen Sie, dass Nutzer lange Animationen unterbrechen und abbrechen können

In OpenDesign importieren Sie interaction-design über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill-Datei: plugins/ui-design/skills/interaction-design/SKILL.md Content-Prüfsumme bei Verifizierung aufgezeichnet; Commit 4236bb9
License: MIT Aus LICENSE.
Repository-Sterne: 39.635 GitHub-Snapshot vom 14.09.2026 für das gesamte wshobson/agents-Repository, das 18 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für interaction-design.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Wann dieser Skill zu verwenden istListet acht Szenarien auf, darunter Mikrointeraktionen, Übergänge, Ladezustände, Gesten, Benachrichtigungen, Drag-and-Drop, Scroll-Animationen und Hover-Zustände
GrundprinzipienDefiniert zielgerichtete Bewegung mit vier Prinzipien und liefert Timing-Richtlinien und Easing-Funktionen für verschiedene Interaktionstypen
Schnellstart: Button-MikrointeraktionZeigt ein vollständiges Framer-Motion-Button-Beispiel mit Hover-, Tap- und Spring-Animation
InteraktionsmusterLiefert Codebeispiele für Ladezustände, Zustandsübergänge, Seitenübergänge, Feedback-Muster wie Ripple und Gesteninteraktionen wie Swipe-to-Dismiss
CSS-AnimationsmusterDemonstriert Keyframe-Animationen für fadeIn, pulse und spin sowie CSS-Übergänge für Hover-Effekte
Überlegungen zur BarrierefreiheitZeigt, wie Sie prefers-reduced-motion sowohl in CSS als auch in JavaScript erkennen und berücksichtigen
Best PracticesListet sieben Regeln auf, darunter Performance-First-Ansatz, Unterstützung von reduzierter Bewegung, konsistentes Timing, Spring-Animationen, Unterbrechbarkeit, progressive Verbesserung und Gerätetests
Häufige ProblemeIdentifiziert fünf Fallstricke, darunter ruckelige Animationen, Über-Animation, blockierende Interaktionen, Speicherlecks und unsachgemäße Verwendung von will-change

Die eigene Beschreibung des Skills

„Entwerfen und implementieren Sie Mikrointeraktionen, Motion-Design, Übergänge und Benutzerfeedback-Muster. Verwenden Sie dies, wenn Sie UI-Interaktionen verfeinern, Ladezustände implementieren oder angenehme Nutzererlebnisse schaffen."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 7.572 Zeichen. Die vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum interaction-design Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Welche Animationsbibliothek verwendet dieser Skill?

Der Skill nutzt vor allem Framer Motion für React-Komponenten, demonstriert in Beispielen wie AnimatePresence für Seitenübergänge und Motion-Komponenten für Gesten. Er behandelt zudem reine CSS-Animationen mit Keyframes und Transitions und zeigt, dass beide Ansätze zusammenwirken können.

Interaction Design

interaction-design für eine echte UX-Forschungsaufgabe ausführen

Laden Sie OpenDesign herunter, importieren Sie interaction-design über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen