AI Loading UX
Ett mönsterbibliotek för AI-tänkande/framstegs-/streamingindikatorer, med ett verkligt beslutsramverk, inte bara en moodboard.
Testad · Fungerar
Vad den gör
En desigreferens för AI-vänteläges-UX: resonemang/tanke-kedja-visningar, flerstegs-framstegsindikatorer, token-streaming-tillstånd, och bakgrundsstatusindikatorer, var och en med anatomidiagram, tillståndsmaskiner, tillgänglighetsanteckningar och namngivna anti-mönster. Triggar när det uttryckligen efterfrågas att designa eller förbättra AI-laddning, tänkande, eller framstegs-UX; inte för generiska (icke-AI) laddningsspinnare.
Testrapport
Körde en verklig grundläggande vs färdighetsdesignpassning för ett 3-stegs research-agent-laddningstillstånd: den färdighetsstyrda versionen klassificerade korrekt uppgiften via sitt eget beslutsramverk (Progress Steps, inte Reasoning Display), valde vertikala listlayouten som dess referensfilnamn för 3-7 steg, och lade till en aria-live/role=progressbar tillgänglighetsspecifikation och en felåterhämtnings-edge case som den fri-form grundlinjen aldrig övervägde.
Testad: 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
Kommandon och exempelprompter
/ai-loading-uxEtt mönsterbibliotek för AI-tänkande/framstegs-/streamingindikatorer, med ett verkligt beslutsramverk, inte bara en moodboard.
Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):
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