C✳CODEZ.WIN
🌐 Deutsch

Lokalisierter Leseleitfaden

web-animation-designZweck, Verwendung und Quelle

Entwerfen und implementieren Sie Webanimationen, die sich natürlich und zielgerichtet anfühlen. Nutzen Sie diese Fähigkeit proaktiv, wenn Nutzer Fragen zu Animationen, Bewegungen, Übergängen, Timing, Dauer, Federeffekten, Übergängen oder der Performance von Animationen haben. Dies umfasst Fragen zur Animation bestimmter UI-Elemente, zur Wahl des passenden Übergangsmodus, zu Best Practices für Animationen oder zu Aspekten der Barrierefreiheit bei Bewegungen. Trigger für: Übergänge, Ease-Out, Ease-In, Ease-In-Out, Cubic-Bezier, Bounce, Federphysik, Keyframes, Transformation, Deckkraft, Fade, Slide, Skalierung, Hover-Effekte, Mikrointeraktionen, Framer Motion, React Spring, GSAP, CSS-Übergänge.entrance/exitAnimationen, Seitenübergänge, gestaffelte Animationen, sich ändernde Animationen, GPU-Beschleunigung, bevorzugte reduzierte Bewegungsdarstellungmodal/dropdown/tooltip/popover/drawerAnimationen, Gestenanimationen, Drag-Interaktionen, Tastendruckgefühl – fühlt sich ruckelig an, macht es flüssiger.

Quelle abgerufen:

Quell-Repository
vercel-labs/open-agents
SKILL.md
.agents/skills/web-animation-design/SKILL.md
Repository-Sterne
5,871
Repository zuletzt aktualisiert
2026-08-29
Fähigkeitskategorien
Agenten-Workflow
Letzte Datenerfassung

Lizenz: MIT

Original SKILL.md

Die Workflow-Auszüge dienen als Lesehilfe und sind keine ausführbaren Anweisungen von Codez. Für die Erstellung dieser Seite wurde keine Drittanbieter-Skill verwendet.

Die folgenden Abschnitte zu Zweck und Arbeitsablauf sind vorgelagertes Material, das zur besseren Lesbarkeit aufbereitet und übersetzt wurde. Sie unterscheiden sich von der separat gekennzeichneten redaktionellen Analyse von Codez.

Was diese Fähigkeit bewirkt

Entwerfen und implementieren Sie Webanimationen, die sich natürlich und zielgerichtet anfühlen. Nutzen Sie diese Fähigkeit proaktiv, wenn Nutzer Fragen zu Animationen, Bewegungen, Übergängen, Timing, Dauer, Federeffekten, Übergängen oder der Performance von Animationen haben. Dies umfasst Fragen zur Animation bestimmter UI-Elemente, zur Wahl des passenden Übergangsmodus, zu Best Practices für Animationen oder zu Aspekten der Barrierefreiheit bei Bewegungen. Trigger für: Übergänge, Ease-Out, Ease-In, Ease-In-Out, Cubic-Bezier, Bounce, Federphysik, Keyframes, Transformation, Deckkraft, Fade, Slide, Skalierung, Hover-Effekte, Mikrointeraktionen, Framer Motion, React Spring, GSAP, CSS-Übergänge.entrance/exitAnimationen, Seitenübergänge, gestaffelte Animationen, sich ändernde Animationen, GPU-Beschleunigung, bevorzugte reduzierte Bewegungsdarstellungmodal/dropdown/tooltip/popover/drawerAnimationen, Gestenanimationen, Drag-Interaktionen, Tastendruckgefühl – fühlt sich ruckelig an, macht es flüssiger.

Wie der vorgelagerte Workflow funktioniert

Schnellstart

Jede Animationsentscheidung beginnt mit diesen Fragen: Tritt dieses Element ein oder aus? → Verwendenease-outBewegt sich ein Element auf dem Bildschirm? → Verwendenease-in-outIst das einhover/colorÜbergang? → Verwendenease

Aufwärtspassage · L42 ↗

Wann animieren?

Enter/exitÜbergänge für räumliche Konsistenz; Zustandsänderungen, die von visueller Kontinuität profitieren; Reaktionen auf Benutzeraktionen (Feedback); Selten genutzte Interaktionen, bei denen ein positives Erlebnis einen Mehrwert bietet.

Aufwärtspassage · L144 ↗

Wann man Federn verwendet

Drag-Interaktionen mit Schwung; Elemente, die sich „lebendig“ anfühlen sollen (Dynamische Insel); Gesten, die mitten in der Animation unterbrochen werden können; Organische, spielerische Benutzeroberflächen

Aufwärtspassage · L169 ↗
Aufwärtspassage · ↗
Before: transform: scale(0)
After: transform: scale(0.95)
────────────────────────────
Before: 400ms duration
After: 200ms

Anforderungen und Einrichtung

Aus dieser Datei wurde kein Abschnitt mit kurzen Anforderungen ausgewählt. Dies bedeutet nicht, dass die Fertigkeit keine Abhängigkeiten hat. Überprüfen Sie die Anweisungen zur Repository-Einrichtung und die referenzierten Dateien.

Grenzwerte und Qualitätskontrollen

Einarbeitung (Fast nie)

Für UI-Animationen vermeiden. Die Benutzeroberfläche wirkt dadurch träge, da der langsame Start die visuelle Rückmeldung verzögert.

Aufwärtspassage · L100 ↗

Beginnen Sie mit einem sicheren Testlauf

  1. Prüfen Sie den unterstützten Host und die Installationsanweisungen für das Repository. Halten Sie das Skill-Verzeichnis und die darin enthaltenen Skripte, Assets und Dokumentationen zusammen;SKILL.mdEine Einzelperson kann Abhängigkeiten außer Acht lassen.
  2. Geben Sie dem Agenten Ihre tatsächlichen Eingaben, die gewünschten Ausgaben und die Akzeptanzkriterien an. Aufrufsyntax und verfügbare Tools hängen vom Hostsystem ab; diese Website geht nicht von einem universellen Installationsbefehl aus.
  3. Testen Sie den Quellworkflow in einem temporären Projekt oder auf einer Kopie. Überprüfen Sie Vorgänge, die Dateien, Remote-Dienste oder abrechnungsfähige Ressourcen ändern, bevor Sie diese zulassen.
  4. Überprüfen Sie die Ausgabe anhand der Quellqualitätsprüfungen und Ihrer eigenen Anforderungen. Ein erfolgreicher Trigger oder eine hohe Anzahl von Sternen im Repository garantiert kein korrektes Ergebnis.

Spezifikation des Kompetenzformats und des Verzeichnisses ↗

Lesen Sie mehr dazu in der Quelle.

Übersetzung und Umfang

Dieser Leseleitfaden wählt Passagen aus dem markierten stromaufwärts gelegenen Abschnitt aus.SKILL.mdDie Übersetzung wurde unterstützt. Es handelt sich weder um ein vollständiges Handbuch noch um eine Garantie für geprüfte Kompatibilität. Lesen Sie vor der Verwendung das Original und die darin referenzierten Dateien.

Diese Einleitung bezieht sich auf die unten angepinnte Version; die aktuelle Repository-Aktivität und der Erfassungszeitpunkt werden separat angezeigt.

Angeheftete Quelle
Lesen Sie das Original ↗
Quelle abgerufen
Source-Commit
cf865e94de7729751c747171785b6ce57e7b178c
Quelle SHA-256
dfcfd66edc4b09e22416c8be59160fd15259965e5f6f1cfa098858d7b23d4332
Zurück zum vollständigen Kompetenzkatalog