Communitygithub.com

jakubantalik/transitions-dev

Produktionsreife CSS-Übergänge für Web-Apps. Verwenden Sie dies für Benachrichtigungs-Badges, Dropdowns, Modale, Einblendungen, Seitenübergänge, Kartengrößenänderungen, Zahlen-Pop-Ins, Textwechsel, Icon-Wechsel, Erfolgsanimationen, Hover-Effekte bei Avatargruppen, Fehlerschütteln, Such-/Eingabe löschen, Skeleton-Loader, Schimmer-Text, gleitende Tabs, Tooltips oder gestaffelte Text-Enthüllungen.

Was ist transitions-dev?

Dieses Skill bietet eine umfassende Bibliothek produktionsreifer CSS-Übergänge und Animationen für moderne Web-Apps. Es deckt eine breite Palette von UI-Interaktionen ab, darunter Benachrichtigungs-Badges, Dropdowns, Modale, Panel-Enthüllungen, Seitenübergänge, Kartengrößenänderungen, Zahlen-Pop-Ins, Text- und Icon-Wechsel, Erfolgshaken, Hover-Effekte bei Avatargruppen, Fehlerschütteln, Skeleton-Loader, Schimmer-Text, gleitende Tabs, Tooltips und gestaffelte Text-Enthüllungen. Entwickler können es auslösen, indem sie natürliche Sprachbegriffe wie „Übergang hinzufügen“, „Dropdown animieren“, „Modal öffnen“, „Icon tauschen“, „Seite schieben“, „Staffel-Animation“ oder „Tooltip anzeigen“ verwenden. Es ist für die Integration in KI-gestützte Entwicklungsumgebungen wie Claude Code, Cursor und Codex konzipiert und ermöglicht die schnelle Implementierung flüssiger, barrierefreier Übergänge ohne manuelle CSS-Anpassung. Das Skill erkennt Kontext aus Aufgaben wie „Übergänge anwenden“, „Übergänge überprüfen“ oder „Übergänge verfeinern“ und generiert automatisch sauberes, performantes CSS.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jakubantalik/transitions.dev/tree/main/skills/transitions-dev

In Ihrer bevorzugten KI fragen

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

Dokumentation

Was macht transitions-dev?

Produktionsreife CSS-Übergänge für Web-Apps. Verwenden Sie dies bei der Implementierung von Benachrichtigungs-Badges, Dropdowns, Modalen, Enthüllungen von Panels, Seitenübergängen, Kartengrößenänderungen, Zahlen-Pop-Ins, Textwechseln, Icon-Wechseln, Erfolgsprüfungen, Hover-Effekten bei Avatargruppen, Fehlerschütteln, Löschen der Suche/Eingabe, Skeleton-Ladern, Schimmer-Text, gleitenden Tabs, Tooltips oder gestaffelten Text-Enthüllungen. Auslöser bei „Übergang hinzufügen“, „Dropdown animieren“, „Modal sanft öffnen“, „Icon tauschen“, „Seite schieben“, „Staffel-Animation“, „Öffnen-/Schließen-Übergang“, „animieren lassen“, „zwischen ein-/ausblenden“, „Erfolgsanimation“, „Formularfehler“, „bei Ungültigkeit schütteln“, „Hover-Lift“, „Hover bei Avatar-Stapel“, „Suche löschen“, „Skeleton-Lader“, „Lade-Schimmer“, „Schimmer-Text“, „gleitende Tabs“, „Segmentierte Steuerung“, „Tooltip“, „Text enthüllen“. Auch Übergänge enthüllen, Übergänge überprüfen, Übergänge anwenden, Übergänge verfeinern.

Verwandte Skills