How should I handle AI reasoning transparency?

The skill recommends progressive disclosure: show a condensed 'Thinking...' indicator by default and allow curious users to expand it for more detailed chain-of-thought information without overwhelming others.

When should I use progress steps versus streaming states?

Use progress steps for multi-step sequential tasks where users need to see advancement toward a goal. Use streaming states for real-time content generation where text or data appears token-by-token.

What is the 'elevator mirror effect' in AI UX?

It is a design principle where providing users with something engaging to watch—like an animated thinking indicator—reduces their perceived wait time, even if the actual processing time remains unchanged.

How do I ensure users know when an AI task is finished?

This skill provides patterns for clear completion signals, ensuring there are no ambiguous end states that might frustrate users or leave them wondering if the process is still running.

AI Loading UX

Name: AI Loading UX
Author: shipshitdev

byshipshitdev

•

Design Tools

Implements specialized UI/UX patterns for AI reasoning, thinking indicators, and progress states to improve user trust and perceived performance.

This skill provides a comprehensive framework and decision-making guide for designing sophisticated AI waiting states, covering everything from chain-of-thought reasoning displays to real-time token streaming. It helps developers reduce perceived wait times using the 'elevator mirror effect' while balancing transparency with cognitive load through progressive disclosure and structured progress indicators. Whether you are building a chat interface or a background processing tool, this skill ensures your AI interactions feel fast, transparent, and reliable.

Key Features

01Guidelines for the 'Elevator Mirror Effect' to reduce perceived wait times

02Implementation checklists for progress steps, streaming states, and error handling

03Templates for expandable reasoning displays and structured chain-of-thought bullets

04Comparative analysis of industry-standard patterns from Claude, ChatGPT, and DeepSeek

05Decision framework for selecting reasoning, progress, streaming, or status patterns

0610 GitHub stars

Use Cases

01Designing an expandable 'Thinking' block for complex AI reasoning tasks

02Optimizing the visual flow and animations for real-time token streaming interfaces

03Creating multi-step progress indicators for background AI processing and data analysis

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add shipshitdev/library ai-loading-ux

For use in Claude.ai and ChatGPT

Download Skill