AI Loading UX
Una biblioteca de patrones para indicadores de pensamiento/progreso/streaming de IA, con un marco de decisión real, no solo un mood board.
Probado · Funciona
Qué hace
Una referencia de diseño para UX de estado de espera de IA: visualizaciones de razonamiento/cadena de pensamiento, indicadores de progreso de varios pasos, estados de streaming de tokens e indicadores de estado de fondo, cada uno con diagramas de anatomía, máquinas de estado, notas de accesibilidad y anti-patrones nombrados. Se activa cuando se solicita explícitamente diseñar o mejorar la UX de carga, pensamiento o progreso de IA; no para spinners de carga genéricos (no de IA).
Informe de la prueba
Ejecuté un pase de diseño base vs habilidad real para un estado de carga de agente de investigación de 3 pasos: la versión guiada por la habilidad clasificó correctamente la tarea a través de su propio marco de decisión (Pasos de Progreso, no Visualización de Razonamiento), eligió el diseño de Lista Vertical que nombra sus archivos para 3-7 pasos, y agregó una especificación de accesibilidad aria-live/role=progressbar y un caso límite de recuperación de fallos que la base de formato libre nunca consideró.
Probado el: 2026-07-16 · Claude Code 2.x (agent harness)
Instalación
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
Comandos y prompts de ejemplo
/ai-loading-uxUna biblioteca de patrones para indicadores de pensamiento/progreso/streaming de IA, con un marco de decisión real, no solo un mood board.
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
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