ai-loading-ux_skill

Overview

This skill designs AI loading, thinking, and progress indicator UX for TypeScript projects. It provides concrete patterns for reasoning displays, progress steps, streaming states, and background status indicators. The goal is to reduce perceived wait time, build user trust, and clearly signal completion. Use it when you need polished waiting-state behavior for AI-driven interfaces.

How this skill works

The skill inspects the user's waiting scenario and maps it to one of four pattern categories: Reasoning Display, Progress Steps, Streaming States, or Status Indicators. For each category it prescribes visibility level (minimal, expandable, or full), motion and animation guidance, progress signals (time, steps, streaming tokens), and completion/error handling. It includes an implementation checklist and practical anti-patterns to avoid. Code-friendly recommendations are tailored for integration into TypeScript frontends.

When to use it

• When the model is performing step-by-step reasoning and you need to show provenance without overwhelming users
• When a task involves multiple sequential steps and users should see advancement toward completion
• When content is generated progressively (token-by-token) and streaming feedback reduces perceived delay
• When background processing runs asynchronously and users need a subtle confirmation that work is happening
• When perceived wait time is a UX problem and the elevator mirror effect can help

Best practices

• Default to a condensed indicator like “Thinking…” and make detailed reasoning expandable on demand
• Use subtle animation to reduce perceived wait time but avoid distracting motion
• Show concrete progress: elapsed time, completed steps, or streaming tokens, and mark clear completion
• Provide an escape hatch (stop/cancel) for long operations and handle errors to avoid stuck states
• Test loading states on slow networks and with interrupted streams to ensure graceful degradation

Example use cases

• Show expandable chain-of-thought bullets when a model solves math or logic problems, with a time counter and clear done state
• Display current step out of total steps during multi-step document generation, with the ability to expand step details
• Stream generated article text with a typing cursor, skeleton layout, and a ‘Stop generating’ button
• Show a subtle background status indicator for long data-sync jobs that does not block other UI actions
• Use animated micro-interactions (elevator mirror) during brief waits to improve perceived responsiveness