Loading Choreography UI
SkillStack Official
Choreograph how a page loads: skeleton screens that mirror the final layout, left-to-right shimmer sweeps, staged reveals, honest progress that only reports real numbers, and optimistic UI that never blocks. Includes a full motion pattern library with copy-paste vanilla CSS/JS snippets and two working demos.
Use the loading-choreography-ui skill to design the loading states for my pet adoption catalog page: skeleton cards that mirror the real layout, a shimmer sweep, staged card reveals, and an optimistic save button.
What you get
- A complete loading-choreography system: SKILL.md with workflow, motion tokens and QA checklist, plus design-tokens, components, and snippets references with copy-paste vanilla CSS/JS for skeleton cards, shimmer, staged reveals, optimistic actions, and honest progress rails.
Good fit
- Catalog, feed, search results, or profile-grid pages where the layout is known before data arrives; multi-step flows that need an honest progress story; any page where one small action currently blocks the whole interface.
Not for
- Pages that load in under ~300ms (never flash a skeleton); pages whose layout is genuinely unknown; anywhere a fake percentage would be needed to fill a progress bar.
- Name
- Loading Choreography UI
- Downloads
- 0
- Category
- Design
- Skills inside
- 1
Download & install
What's new: v1.0.0: skeleton-screen grammar, shimmer/staged-reveal/optimistic-UI/honest-progress pattern library with copy-paste snippets, plus two demos (pet adoption catalog with replayable load choreography, and a 4-step adoption application with honest progress rail).
Free for signed-in users.
1. Download the ZIP
Use the button above to download the packaged skill. It contains the SKILL.md plus all supporting files.
2. Unzip into your agent's skills folder
Extract the archive so that SKILL.md sits directly inside a folder named after the skill:
unzip loading-choreography-ui-v1.0.0.zip -d ~/.claude/skills/loading-choreography-ui/Skills folder per agent
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. Restart your agent
Your agent picks up the new skill automatically on next launch. Ask it what it can do.
Like this free skill? Premium unlocks 77 exclusive skills.
One subscription unlocks every premium skill, prompt and pack — plus all future drops.
Reviews
Related skills
Scroll Narrative UI
Scroll Narrative UI
Scroll-driven storytelling UI: pinned chapters, multi-layer parallax, kinetic typography, scroll-scrubbed text, horizontal galleries and scroll-mapped stats — turn a landing page into a cinematic journey the user controls with the scrollbar.
Claude Code · Codex · Cursor · Copilot +3
Micro Interaction UI
Micro Interaction UI
A micro-interaction motion pattern library for AI agents: 16 production-ready web animation patterns — magnetic buttons, scroll narratives, 3D tilt cards, marquee counters, and more — with copy-paste code and live demos.
Claude Code · Codex · Cursor · Copilot +3
Custom Cursor UI
Custom Cursor UI
Build Awwwards-grade custom cursor experiences — dot+ring engine, label cursors, image-preview hover, spotlight reveal, magnetic pull, blend-mode inversion, click ripples, drag cursors, all vanilla JS with reduced-motion fallbacks.
Claude Code · Codex · Cursor · Copilot +3
Marquee & Number UI
Marquee & Number UI
A complete marquee & number motion system for landing pages: seamless tickers, multi-lane marquees, odometer price wheels, eased count-ups, scroll-linked numbers, animated stat bars — all vanilla JS with reduced-motion fallbacks. Demo: a fictional boutique coastal hotel (Casa Brisa) with live booking widgets.
Claude Code · Codex · Cursor · Copilot +3