# Skeleton

Grey shapes in the final layout while data loads, pulsing slowly on one shared token. Off under reduced motion.

- **Group:** Status and feedback · **family:** `status-feedback` · **shadcn:** Skeleton
- **Build:** shadcn `Skeleton`.
- **In apps/admin today:** `ui/skeleton.tsx` exists (`animate-pulse bg-primary/10`). Swap to the kit pulse token.
- **Client component:** no. 

## Content rules

- No text inside skeletons.

## Do

- Match the final layout so nothing jumps.

## Don't

- A shimmer sweep (not approved; it became the pulse).
- Spinners for a list that has a known shape.

## Motion

- Pulse: opacity .55 → 1 on `--motion-skeleton` (1.6s, `--ease-standard`, infinite alternate).
- Reduced motion: `--motion-skeleton: none` (static).

## Accessibility

- **ARIA:** The container sets `aria-busy="true"`; skeleton shapes are `aria-hidden`.
- **ARIA:** A visually hidden "Loading cloths" live message.
- **Keyboard:** Not focusable.
- **Focus:** None.

## Tokens

`--r-chip` `--foreground` `--motion-skeleton` `--r-media` `--s-4` `--border` `--row-th` `--muted` `--w-semibold` `--text-micro` `--font-voice` `--font-stretch-title` `--muted-foreground`

## Files

`skeleton.html` live specimen · `skeleton.css` kit rules · `skeleton.d.ts` props · full page: `docs/components/skeleton/` (phone: `m/`).