shipshitdev/ai-loading-ux
skills/ai-loading-ux/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add shipshitdev/library ai-loading-uxInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 1, 2026, 5:05 AM98.9s6 files scanned
SKILL.md
- name:
- ai-loading-ux
- description:
- 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.
- version:
- 1.0.0
- tags:
- ai, loading, ux
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
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
Related Skills
shipshitdev/typescript-refactor
development
VerifiedTrustedCommunity
TypeScript refactoring and modernization guidelines from a principal specialist perspective. This skill should be used when refactoring, reviewing, or modernizing TypeScript code to ensure type safety, compiler performance, and idiomatic patterns. Triggers on tasks involving TypeScript type architecture, narrowing, generics, error handling, or migration to modern TypeScript features.
30SKILL.mdUpdated Jul 14, 2026
shipshitdev/typescript-expert
tools
VerifiedTrustedCommunity
Resolves TypeScript and JavaScript problems across type-level programming, performance, monorepo management, migration, and modern tooling. Invoke when diagnosing "type instantiation excessively deep" errors, migrating JS to TS, configuring strict tsconfig, debugging module resolution, or choosing between Biome/ESLint/Turborepo/Nx.
30SKILL.mdUpdated Jul 14, 2026
shipshitdev/turborepo
tools
VerifiedTrustedCommunity
Turborepo monorepo build system guidance. Triggers on: `turbo.json`, task pipelines, `dependsOn`, caching, remote cache, the `turbo` CLI, `--filter`, `--affected`, CI optimization, environment variables, internal packages, monorepo structure, and package boundaries. Use when the user configures tasks or workflows, creates packages, sets up a monorepo, shares code between apps, runs changed packages, debugs cache behavior, or works in an `apps/` plus `packages/` workspace.
30SKILL.mdUpdated Jul 14, 2026
shipshitdev/tailwind
tools
VerifiedTrustedCommunity
Provides Tailwind CSS v4 performance optimization and best practices guidelines. Triggers when writing, reviewing, or refactoring Tailwind CSS v4 code; when working with Tailwind configuration, @theme directive, utility classes, responsive design, dark mode, container queries, or CSS generation optimization.
30SKILL.mdUpdated Jul 14, 2026