Loaders & Progress: AI Skill for UX Design
Loaders & Progress is an AI skill that matches loading feedback to the wait: spinners under five seconds, progress bars past ten, skeletons for content. No endless spinners on measurable tasks.
npx skills add Uxcel-Lab/product-skills --skill ux-loaders-and-progress
What this skill does
Helps an AI assistant match loading feedback to the wait instead of putting one spinner on everything.
- Establishes how long the wait is, whether progress is measurable, and what triggered it.
- Assigns indeterminate spinners or text loaders to waits under five seconds.
- Uses determinate bars with a visible endpoint for waits past ten seconds.
- Replaces spinners with skeleton screens where the layout is known.
- Places feedback at the action, on the content, or centered only for true page loads.
- Builds progress trackers with labeled steps and completed, current, and remaining states.
- Caps trackers at five to seven steps and flags bloated flows for restructuring.
When to use it
Use it when you need an AI assistant to:
- design loading states for an action or a page;
- choose between a spinner, a bar, or skeleton screens;
- add progress feedback to uploads or exports;
- design a progress tracker for a multi-step flow;
- fix a loader that feels broken or endless;
- review loading feedback across a product.
Decisions this skill helps you make
| Decision | Options |
|---|---|
| Skeleton vs. spinner | Skeletons for content areas, inline spinners for actions |
| Progress tracker at all | Numbered, labeled steps from three stages up |
| Tracker labeling | Titles plus step count, percentages only when they map honestly |
| Bar vs. numbered steps | Steps for forms, a bar for processing |
| Carousel dots | Walkthroughs with few skippable screens only |
| Vertical trackers | Event and status histories like delivery tracking |
| Save and autosave | Autosave plus return-to-last-step for long flows |
| Branded loaders | Function first, personality second |
How the skill works
1
Establish the wait
The skill checks how long the wait is, whether progress is measurable, and what triggered it.
2
Apply the ladder
It assigns spinners to short waits, determinate bars to long ones, and skeletons to content loads.
3
Surface trade-offs
It presents tracker labeling, skeletons, autosave, and branded loaders as choices with trade-offs.
Try it with
Related skills
1.0.0
MIT
UX Design
Components
