loading-states

SKILL.md

| < 100ms | No indicator needed | | 100ms - 1s | Subtle indicator (opacity change) | | 1s - 10s | Skeleton screen or spinner | | > 10s | Progress bar with estimate |

Design effective loading states, skeleton screens, and empty states that maintain user confidence. Use when content takes time to load, when showing progress, or handling empty data scenarios. Triggers on "loading state", "skeleton screen", "empty state", "spinner", "progress bar", "loading animation", "zero state". Source: sanky369/vibe-building-skills.

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/sanky369/vibe-building-skills --skill loading-states Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor

View raw