loading-state-patterns
OfficialDesign polished, system-matched loading states.
Authorvibekit-apps
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Patterns for skeleton loaders, shimmer effects, and loading states that match a design system aesthetic, providing ready-to-use components and guidelines.
Core Features & Use Cases
- Skeleton Base: A reusable Skeleton component with optional shimmer for lightweight placeholder UI.
- Patterned layouts: CardSkeleton, TableRowSkeleton, MetricSkeleton for common content structures.
- Progressive & streaming loading: ProgressiveLoad, StreamingIndicator, and LoadingProgress for dynamic data loading scenarios.
- Design system alignment: Styles and utilities to ensure skeletons match design tokens and surfaces.
- Use Case: Implement a dashboard with cards that progressively load content while placeholders maintain layout consistency.
Quick Start
Install the Loading States Skill and begin by rendering Skeleton components to create placeholder UI while content loads.
Dependency Matrix
Required Modules
None requiredComponents
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-state-patterns Download link: https://github.com/vibekit-apps/skills-registry/archive/main.zip#loading-state-patterns Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.