ai-loading-ux
Provides design patterns for AI waiting states, including reasoning displays, progress tracking, and streaming UI.
Install
mkdir -p .claude/skills/ai-loading-ux && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16254" && unzip -o skill.zip -d .claude/skills/ai-loading-ux && rm skill.zipInstalls to .claude/skills/ai-loading-ux
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Design AI loading, thinking, and progress indicator UX. Use when explicitly asked to improve AI waiting states, add thinking indicators, or design loading UX for AI interfaces. Covers reasoning display (chain-of-thought), progress steps, streaming states, and the "elevator mirror effect" for reducing perceived wait time.Key capabilities
- →Design AI loading, thinking, and progress indicator UX
- →Implement reasoning display (chain-of-thought) patterns
- →Create progress steps for multi-step AI tasks
- →Design streaming states for content generation
- →Develop status indicators for background AI processing
How it works
The skill identifies the appropriate pattern category (reasoning, progress, streaming, status) based on the user's waiting scenario. It then applies core principles like the Elevator Mirror Effect and Progressive Disclosure to design the AI loading UX.
Inputs & outputs
When to use ai-loading-ux
- →Designing AI thinking indicators
- →Implementing progress steps for tasks
- →Improving perceived wait times for AI
About this skill
AI Loading UX
Design patterns for showing users what's happening while waiting for AI output.
Decision Framework
First, identify which pattern category applies:
| User is waiting for... | Pattern Category | Key Goal |
|---|---|---|
| AI reasoning/thinking | Reasoning Display | Build trust through transparency |
| Multi-step task completion | Progress Steps | Show advancement toward goal |
| Content generation/streaming | Streaming States | Reduce perceived wait time |
| Background processing | Status Indicators | Confirm work is happening |
Core Principles
1. The Elevator Mirror Effect
Users waiting for AI feel time pass slower. Give them something to watch/read—animated indicators reduce perceived wait time even when actual time is unchanged.
2. Progressive Disclosure
- Show condensed indicator by default ("Thinking...")
- Make details available but not forced
- Let curious users expand; don't burden everyone
3. More Transparency ≠ Better UX
Balance visibility with cognitive load. Users want answers, not reasoning—but they want to trust the answer came from good reasoning.
4. Signal Completion Clearly
Users must know when processing ends. Ambiguous end states frustrate users.
Pattern Quick Reference
Reasoning Display (Chain-of-Thought)
When AI is "thinking" through a problem. See references/reasoning-patterns.md.
Best approach (Claude-style):
- Hidden by default, expandable on demand
- Structured bullets when expanded
- Time counter or progress indicator
- Clear "done" state
Anti-patterns:
- Wall of streaming text (overwhelming)
- Scrolling too fast to read
- No expand option (feels opaque)
- No clear end state
Progress Steps
When AI completes sequential tasks. See references/progress-patterns.md.
Best approach:
- Show current step + total steps
- Mark completed steps visually
- Show what's actively happening
- Allow step-level details on expand
Streaming States
When content generates token-by-token. See references/streaming-patterns.md.
Best approach:
- Typing cursor or text animation
- Smooth token appearance (not jarring)
- Skeleton for expected content shape
- "Stop generating" escape hatch
Status Indicators
When background work happens. See references/status-patterns.md.
Best approach:
- Subtle but visible animation
- Brief description of current action
- Don't block user from other actions
- Notify on completion
Implementation Checklist
When implementing any AI loading state:
- Identify pattern category from decision framework above
- Choose visibility level: always visible, expandable, or minimal
- Add motion: animation reduces perceived wait (but keep it subtle)
- Show progress: time elapsed, steps completed, or content streamed
- Signal completion: clear visual/state change when done
- Provide escape: stop/cancel for long operations
- Handle errors: don't leave user in permanent loading state
- Test on slow connections: ensure graceful degradation
Product Comparisons (Reference)
| Product | Approach | Strength | Weakness |
|---|---|---|---|
| Claude | Hidden reasoning, expandable, structured bullets | Low cognitive load | Can feel opaque |
| ChatGPT | Brief labels, auto-collapse | Unobtrusive | Less transparent |
| DeepSeek | Full streaming reasoning | Maximum transparency | Overwhelming |
| Gemini | User-scrolled, numbered steps | Clear structure | Unclear completion |
Usage
Read the relevant reference file for your pattern category:
- references/reasoning-patterns.md - Chain-of-thought, thinking indicators
- references/progress-patterns.md - Step sequences, task completion
- references/streaming-patterns.md - Token streaming, content generation
- references/status-patterns.md - Background processing, polling states
When not to use it
- →When the user needs to design general application loading states not related to AI
- →When the user needs to implement AI functionality itself
- →When the user needs to design a UI that does not involve waiting for AI output
Limitations
- →The skill designs AI loading, thinking, and progress indicator UX.
- →The skill focuses on patterns for showing users what's happening while waiting for AI output.
- →The skill balances visibility with cognitive load.
How it compares
This skill provides specific design patterns and principles for AI loading UX, focusing on perceived wait time and transparency, which is distinct from general loading animations.
Compared to similar skills
ai-loading-ux side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| ai-loading-ux (this skill) | 0 | 7mo | No flags | Intermediate |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| penpot-uiux-design | 27 | 6mo | Review | Advanced |
| ui-ux-designer | 41 | 4mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by rohunvora
View all by rohunvora →You might also like
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".
ui-ux-designer
sickn33
Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.
interactive-portfolio
davila7
Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.
paywall-upgrade-cro
davila7
When the user wants to create or optimize in-app paywalls, upgrade screens, upsell modals, or feature gates. Also use when the user mentions "paywall," "upgrade screen," "upgrade modal," "upsell," "feature gate," "convert free to paid," "freemium conversion," "trial expiration screen," "limit reached screen," "plan upgrade prompt," or "in-app pricing." Distinct from public pricing pages (see page-cro) — this skill focuses on in-product upgrade moments where the user has already experienced value.
aesthetic
mrgoonie
Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.