skeleton-loading-system
CommunityOptimize UI loading with progressive skeleton hierarchy, reduce jank and improve user perception.
Software Engineering#performance optimization#user experience#progressive loading#UI loading#skeleton components
AuthorApothecaryMan
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill helps address UI jank, blank screens, and layout shifts during loading states, providing a more immediate and seamless user experience.
Core Features & Use Cases
- Progressive Loading: Manages loading in a 4-tier hierarchy from app boot to component level.
- Page Transition Skeletons: Handles full-page loading during transitions.
- Section-Level Skeletons: Allows partial loading without blocking other sections.
- Inline Element Skeletons: Manages component-specific loading with minimal performance impact.
- Use Case: Integrate this Skill into web applications to reduce perceived loading time, maintain UI integrity, and prevent user frustration.
Quick Start
Run 'npm run add-skeleton' to add the progressive skeleton loading to your page.
Dependency Matrix
Required Modules
None requiredComponents
scripts
💻 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: skeleton-loading-system Download link: https://github.com/ApothecaryMan/pharmaflow-ai/archive/main.zip#skeleton-loading-system 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 620,000+ vetted skills library on demand.