AI Loading UX
Eine Musterbibliothek für KI-Denk-/Fortschritts-/Streaming-Indikatoren, mit einem echten Entscheidungsrahmen, nicht nur einem Moodboard.
Getestet · Funktioniert
Was es kann
Eine Designreferenz für KI-Wartezustands-UX: Argumentations-/Gedankenkette-Anzeigen, mehrstufige Fortschrittsanzeigen, Token-Streaming-Zustände und Hintergrundstatusanzeigen, jeweils mit Anatomie-Diagrammen, Zustandsautomaten, Barrierefreiheitsnotizen und benannten Anti-Mustern. Löst aus, wenn explizit nach dem Entwurf oder der Verbesserung von KI-Lade-, Denk- oder Fortschritts-UX gefragt wird; nicht für generische (nicht-KI) Lade-Spinner.
Testbericht
Eine echte Baseline-vs-Skill-Design-Überprüfung für einen 3-stufigen Forschungsagenten-Ladezustand durchgeführt: Die vom Skill geführte Version klassifizierte die Aufgabe korrekt über ihren eigenen Entscheidungsrahmen (Fortschrittsschritte, nicht Denkprozessanzeige), wählte das Layout 'Vertikale Liste' mit seinen Referenzdateinamen für 3-7 Schritte aus und fügte eine aria-live/role=progressbar-Barrierefreiheits-Spezifikation und einen Fehlerbehebungs-Edge-Case hinzu, den die Freiform-Baseline nie berücksichtigte.
Getestet am: 2026-07-16 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/rohunvora/cool-claude-skills cd cool-claude-skills mkdir -p ~/.claude/skills cp -r skills/ai-loading-ux ~/.claude/skills/ai-loading-ux
Befehle & Beispiel-Prompts
/ai-loading-uxEine Musterbibliothek für KI-Denk-/Fortschritts-/Streaming-Indikatoren, mit einem echten Entscheidungsrahmen, nicht nur einem Moodboard.
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
Design the loading state for my 3-step AI research agentWhat's the best way to show token streaming progress in my chat UI?Pick an accessible progress indicator pattern for my AI pipeline