# Skeleton Component Library

> Common skeleton screen patterns for different component types.

- Skill: `dragoon0x/skeleton-component-library` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/skeleton-component-library`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/skeleton-component-library/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/skeleton-component-library

---


# Skeleton Component Library

## Component Skeletons
```
Text paragraph:
████████████████████████████████████
██████████████████████████████
████████████████████████████████████████

Card:
┌─────────────────┐
│ ████████████████ │  ← Image placeholder
│ ████████████     │  ← Title
│ ██████████████   │  ← Description line 1
│ ████████████     │  ← Description line 2
│ ██████           │  ← Metadata
└─────────────────┘

Avatar + Name:
(●) ████████████

Table Row:
████ │ ████████ │ ██████████ │ █████
```

## Rules
1. Match real content dimensions exactly
2. Vary text line widths (not all same length)
3. Shimmer animation: left to right, 1.5s cycle
4. Show 3-5 skeleton items, not 20
5. Transition: fade in real content, don't replace instantly