Skills
.Work. You
Rest

loading-states

Community

Design loading states that keep users confident.

Design & Creative#design#ui-patterns#spinner#loading-states#skeleton-screen#empty-state#progress-bar
Authorsanky369
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Designing loading states, skeleton screens, and empty states that preserve user confidence when content takes time to load or when data is missing.

Core Features & Use Cases

  • Skeleton screens that match the actual layout (with avatar, list items, and actions)
  • Subtle indicators and spinners for short waits
  • Progress bars and estimated timelines for long operations
  • Helpful empty-state messaging and actionable next steps
  • Accessibility considerations (aria-busy, reduced motion)

Quick Start

Use the loading-states skill to generate a skeleton screen and spinner set for a user list page that loads asynchronously.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: loading-states
Download link: https://github.com/sanky369/vibe-building-skills/archive/main.zip#loading-states

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.