skeleton-loading-system
Implements a 4-tier progressive skeleton loading architecture to improve UI perceived performance.
Install
mkdir -p .claude/skills/skeleton-loading-system && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/15527" && unzip -o skill.zip -d .claude/skills/skeleton-loading-system && rm skill.zipInstalls to .claude/skills/skeleton-loading-system
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Comprehensive guide for PharmaFlow AI's progressive skeleton loading architecture. Use when creating new pages, adding loading states, building skeleton components, or debugging loading UI issues. Covers the 4-tier loading hierarchy, design tokens, anti-patterns, and step-by-step checklists for adding skeletons to new features.Key capabilities
- →Implement full-screen spinners for app bootstrap (Tier 0)
- →Create page transition skeletons for blocking loads (Tier 1)
- →Develop section-level skeletons for progressive loading (Tier 2)
- →Handle inline element skeletons within components (Tier 3)
- →Register page skeletons in PAGE_REGISTRY
How it works
The system uses a 4-tier progressive loading hierarchy, where each tier handles a different lifecycle stage, from app bootstrap to inline element loading. It replaces spinners with placeholders that maintain UI consistency during data fetches.
Inputs & outputs
When to use skeleton-loading-system
- →Building a new skeleton loading component
- →Debugging loading UI states
- →Adding skeleton hierarchy to a new page
About skeleton-loading-system
Provides a standardized approach for skeleton loading, moving away from spinners to a tier-based placeholder system that maintains UI consistency during data fetches.
Comprehensive guide for PharmaFlow AI's progressive skeleton loading architecture. Use when creating new pages, adding loading states, building skeleton components, or debugging loading UI issues. Covers the 4-tier loading hierarchy, design tokens, anti-patterns, and step-by-step checklists for addi
How it compares
This system replaces traditional spinners and blank screens with a tiered, progressive skeleton loading architecture, ensuring the UI feels rendered from the first frame and preventing layout shifts.
Compared to similar skills
skeleton-loading-system side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| skeleton-loading-system (this skill) | 0 | 3mo | No flags | Intermediate |
| scroll-experience | 101 | 6mo | No flags | Intermediate |
| anthropic-frontend-design | 12 | 6mo | No flags | Intermediate |
| infographic-structure-creator | 1 | 5mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
anthropic-frontend-design
chaibuilder
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
infographic-structure-creator
antvis
Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart), including layout logic, component composition, and registration.
logo-with-variants
crafter-station
Create logo components with multiple variants (icon, wordmark, logo) and light/dark modes. Use when the user provides logo SVG files and wants to create a variant-based logo component following the Clerk pattern in the Elements project.
design-context
WellApp-ai
Refresh UI/UX context from design system, Storybook, and codebase
add-template
TonnyWong1052
Add new UI style template to the ui-style-react project. This skill should be used when users want to add a new style template with HTML/CSS code, create a new preview page, or register a template in the system. Triggers include "add template", "create new style", "add new template", or when users provide HTML code for a new UI style.