ElvinEga/skills

Transitions.dev

Zwölf portable CSS-Übergänge, jeder unter t-*-Selektoren mit semantischen CSS-Custom-Properties. Einfach einfügen: Snippet kopieren, die dokumentierten HTML-Hooks verdrahten, fertig. Keine Framework-Abhängigkeiten, kein demo-spezifisches Markup, und jedes Snippet enthält einen prefers-reduced-motion-Guard.

Kurzübersicht

Übergang	Wann verwenden	Referenz
Card Resize	Die Breite oder Höhe eines Containers animieren, wenn sich sein Layout-Status ändert.	01-card-resize.md
Number Pop-In	Jede Ziffer bei einer Zahlenänderung mit einem verschwommenen Slide neu einblenden.	02-number-pop-in.md
Notification Badge	Ein kleines Badge auf einen Auslöser schieben und den Punkt einpoppen lassen.	03-notification-badge.md
Text States Swap	Text an Ort und Stelle mit einer verschwommenen Auf-und-Ab-Transition austauschen.	04-text-states-swap.md
Menu Dropdown	Ein ursprungsbewusstes Dropdown öffnen, das von seinem Auslöser aus wächst.	05-menu-dropdown.md
Modal Open / Close	Modal-Dialog mit einem sanften Skalieren hinein und einem weicheren Skalieren heraus.	06-modal.md
Panel Reveal	Ein Panel mit einer Kreuzunschärfe in einen Bereich schieben.	07-panel-reveal.md
Page Side-by-Side	Zwischen zwei nebeneinanderliegenden Seiten wechseln (Liste ↔ Detail, Schritt 1 ↔ Schritt 2).	08-page-side-by-side.md
Icon Swap	Zwei Icons im selben Slot mit Blur und Skalierung überblenden.	09-icon-swap.md
Success Check	Fade + Rotieren + Y-Bob + Pfad-Strichzeichnung kombinieren, um eine abgeschlossene Aktion zu feiern.	10-success-check.md
Avatar Group Hover	Distanzabhängiges Anheben einer Elementreihe mit einem federnden Springen beim Zurückkehren.	11-avatar-group-hover.md
Error State Shake	Segmentweises kubisches Bezier-Schütteln mit automatisch zurückgesetztem Rand und Nachricht.	12-error-state-shake.md

Entscheidungsregeln

Wenn der Benutzer nach einem Übergang fragt, zuerst das sichtbare UI-Element und dann das Verb abgleichen:

• Auslöser + kleiner schwebender Punkt oben → Notification Badge.
• Auslöser + Oberfläche, die daraus wächst → Dropdown (verankert, ursprungsbewusst) oder Modal (zentriert, ohne Anker).
• Oberfläche, die in einen Bereich der Seite hineingleitet → Panel Reveal.
• Zwei Bildschirme, Liste ↔ Detail oder Schritt 1 ↔ Schritt 2 → Page Side-by-Side.
• Element ändert Breite oder Höhe → Card Resize.
• Textinhalt eines Elements ändert sich an Ort und Stelle → Text States Swap.
• Zwei Icons im selben Slot → Icon Swap.
• Eine Zahl ändert sich → Number Pop-In.
• Bestätigungs-/Erfolgs-/„Fertig“-Moment (Häkchen, Zahlung verarbeitet, Datei hochgeladen) → Success Check.
• Hovern eines Elements in einem horizontalen Stapel (Avatare, Chips, segmentierte Buttons, Tag-Pillen) → Avatar Group Hover.
• Formularvalidierungsfehler / „Das ist falsch“-Rückmeldung (ungültiges Feld, falsche PIN, doppelter Name) → Error State Shake.
• Keine klare Übereinstimmung → auf transitions reveal zurückgreifen und den Benutzer wählen lassen. Nicht raten.

Wenn zwei Übergänge passen könnten, den mit geringerem Aufwand bevorzugen (Card Resize vor Panel Reveal, Dropdown vor Modal, Success Check vor einer vollständigen Modalfeier), es sei denn, das Design erfordert eindeutig die schwerere Oberfläche. Der Success Check ist rein animiert – wenn auch ein Wechsel von einem Spinner zum Häkchen nötig ist, ihn mit Icon Swap kombinieren.

Befehle

Die Fähigkeit verfügt über drei namensraumgesteuerte Verben, die der Agent zusätzlich zu direkten Übergangsanfragen erkennen sollte. Jeder Befehl beginnt mit transitions, damit die Aufrufe nicht mit Verben anderer im selben Projekt installierter Fähigkeiten kollidieren.

transitions reveal — alle Übergänge auflisten

Auslösephrasen: transitions reveal, „Übergänge anzeigen“, „alle Übergänge auflisten“, „welche Übergänge gibt es?", „Show the transitions catalog".

Verhalten: Die zwölf Übergänge als nummerierte Klartext-Liste ausgeben – Name, einzeilige Zusammenfassung und der passende Referenzdateiname. Die Zeilen aus ## Kurzübersicht oben wiederverwenden; keine neuen Texte erfinden. Kein Projektzugriff.

transitions review — Projekt auf Eignung prüfen

Auslösephrasen: transitions review, „Projekt überprüfen", „Animationen auditieren", „wo würde transitions.dev helfen", „Orte finden, um diese Fähigkeit zu nutzen".

Verhalten:

1. Das Workspace nach Indikatoren durchsuchen: transition:-Deklarationen, @keyframes, hartcodierte ms- / s-Dauern in Stildateien, Komponenten, die den elf Entscheidungsregel-Mustern entsprechen (Modale, Dropdowns, Badges, …).
2. Für jeden Treffer mit den Entscheidungsregeln abgleichen und den einzigen am besten passenden Übergang auswählen.
3. Eine nummerierte, nach Datei gruppierte Liste ausgeben:
   • path/to/Component.tsx:42 – sieht aus wie ein Dropdown-Öffnen, menu-dropdown vorschlagen (05-menu-dropdown.md).
   • Ad-hoc-Übergänge überspringen, die bereits eine t-*-Klasse verwenden.
4. Nichts bearbeiten. Mit „Run transitions apply on any line to install the suggested transition." enden.

transitions apply — den am besten passenden Übergang installieren

Auslösephrasen: transitions apply, „hier einen Übergang anwenden", „den richtigen Übergang hinzufügen", „transitions-dev hier installieren", „die Animation an diesem Element korrigieren".

Verhalten:

1. Kontext lesen: die aktuell geöffnete Datei, das Element nahe dem Cursor, umgebendes CSS / JSX. Wenn der Benutzer explizit einen Übergang genannt hat (z. B. transitions apply menu-dropdown), diesen verwenden.
2. Die Entscheidungsregeln aus ## Entscheidungsregeln auf diesen Kontext anwenden und einen Übergang auswählen. Wenn zwei passen könnten, den mit geringerem Aufwand bevorzugen (gleicher Tie-Breaker wie die bestehenden Regeln).
3. Einen einzeiligen Vorschlag präsentieren: „I'd apply menu-dropdown here because the element opens from a trigger and is anchored. Confirm to install?"
4. Nach Bestätigung die bestehende fünfstufige Prozedur aus ## Ausgabeformat wörtlich befolgen (Root-Block, Snippet, Hooks, Reduced-Motion-Guard, JS-Orchestrierung falls nötig).
5. Wenn der Agent keinen einzelnen Übergang mit Sicherheit auswählen kann, auf transitions reveal zurückgreifen und den Benutzer bitten, zu wählen.

Universelle Installation

Diesen :root-Block einmal in dein Projekt einfügen. Jedes Übergangs-Snippet liest aus diesen semantischen Namen; es gibt keine pro-Komponente-Werte, die später nachverfolgt werden müssten.

/* transitions-dev — kopiere diesen :root-Block einmal in dein Projekt.
   Jedes Übergangs-Snippet liest aus diesen semantischen Namen. */
:root {
  /* Card Resize */
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Number Pop-In */
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  /* Notification Badge */
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Text States Swap */
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  /* Menu Dropdown */
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Modal Open / Close */
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Panel Reveal */
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Page Side-by-Side */
  --page-slide-dur: 200ms;
  --page-fade-dur: 200ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Icon Swap */
  --icon-swap-dur: 200ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  /* Success Check */
  --check-opacity-dur: 550ms;
  --check-rotate-dur: 550ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 450ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 550ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  /* Avatar Group Hover */
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
  /* Error State Shake */
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
}

Die --pX-*-Quell-Token, die von der Live-Demo auf transitions.dev verwendet werden, werden hier bewusst nicht exportiert. Abstimmbare Werte werden in semantische Namen umbenannt (--badge-*, --dropdown-*, --modal-*, …), sodass der Benutzer die Design-Vokabeln besitzt.

Ausgabeformat

Wenn ein Übergang in das Projekt des Benutzers eingefügt wird:

1. Den obigen :root-Block zum globalen Stylesheet des Benutzers hinzufügen, aber nur, wenn er nicht bereits vorhanden ist. Wenn der Benutzer den universellen Installationsblock bereits einmal importiert hat, nicht duplizieren.
2. Das CSS des ausgewählten Übergangs wörtlich aus der entsprechenden Referenzdatei einfügen. Selektoren nicht umschreiben, die Transition nicht in die Kurzform zusammenziehen, will-change nicht entfernen. Die Snippets sind abgestimmt und getestet.
3. Die dokumentierten HTML-Hooks verdrahten – Klassennamen (.t-dropdown, .t-modal, .t-success-check, .t-avatar, .t-input, …) und Zustandsattribute (data-open, data-state, data-page, .is-open, .is-closing, .is-exit, .is-enter-start, .is-animating, .is-error, .is-shaking).
4. Den @media (prefers-reduced-motion: reduce)-Block erhalten. Jedes Snippet enthält einen. Das Entfernen würde die Komponente bei Barrierefreiheitsprüfungen durchfallen lassen.
5. Für Übergänge, die JS benötigen (Dropdown, Modal, Text Swap, Number Pop-In, Page Slide, Success Check, Avatar Group Hover, Error State Shake), das kleine Orchestrierungs-Snippet aus der Referenzdatei kopieren und die Selektoren an das DOM des Benutzers anpassen. Die Timing-Lesevorgänge (getComputedStyle(...).getPropertyValue("--…")) beibehalten, damit die Dauern mit den :root-Werten synchron bleiben.

Das Diff klein halten: nur die Dateien bearbeiten, die zur Einführung des Übergangs benötigt werden. Bestehende Variablen des Benutzers nicht umbenennen, nicht zusammenhängendes CSS nicht umformatieren, keine Motion-Bibliothek einbinden.

Häufige zu vermeidende Fehler

• Das Bereinigen der Close-State-Klasse bei Dropdown/Modal weglassen – ohne das setTimeout, das .is-closing entfernt, startet das nächste Öffnen von der Closing-Skala statt der ruhenden Pre-Open-Skala.
• Das Reflow beim Text Swap, Number Pop-In, Success Check Replay und Error State Shake vergessen – void el.offsetWidth (oder offsetHeight) zwischen Entfernen und erneutem Hinzufügen der Klasse/des Attributs ist das, was das erneute Abspielen der Animation garantiert.
• Einen einzelnen Container animieren anstatt der inneren Teile – bei Badge den Punkt animieren, nicht den Auslöser; bei Page Slide die Seitenabschnitte animieren, nicht den Container.
• transition: … durch transition: all ersetzen – jedes Snippet zählt die genauen Eigenschaften absichtlich auf, damit nicht zusammenhängende Stiländerungen nicht kostenlos mitlaufen.
• Das stroke-dasharray des Success Checks fest codieren – das Snippet enthält 20 als Platzhalter. Ersetze es durch path.getTotalLength() aufgerundet um 1 für deinen Pfad, sonst wird der Strich vorzeitig sichtbar oder überzeichnet.
• transition-timing-function in CSS für den Avatar Group Hover setzen – sie muss inline in JS vor den --shift- / --scale-active-Zuweisungen gesetzt werden, damit das federnde Ease-Out nur bei mouseleave angewendet wird.
• .is-error und .is-shaking in eine Klasse zusammenführen für den Error State Shake – sie orthogonal zu halten ermöglicht es, dass der Shake wiederholt werden kann (entfernen → reflow → erneut hinzufügen), ohne die gesamte Fehlerbehandlung flackern zu lassen.

Referenzdateien

• 01-card-resize.md — Card Resize
• 02-number-pop-in.md — Number Pop-In
• 03-notification-badge.md — Notification Badge
• 04-text-states-swap.md — Text States Swap
• 05-menu-dropdown.md — Menu Dropdown
• 06-modal.md — Modal Open / Close
• 07-panel-reveal.md — Panel Reveal
• 08-page-side-by-side.md — Page Side-by-Side
• 09-icon-swap.md — Icon Swap
• 10-success-check.md — Success Check
• 11-avatar-group-hover.md — Avatar Group Hover
• 12-error-state-shake.md — Error State Shake
• _root.css — der universelle Installationsblock als eigenständige Datei, bereit zum direkten Import.