# Skeleton

> Loading shimmer placeholder.

- **Level**: atom · **Status**: stable · **Role**: status
- **Import**: `import { Skeleton } from "@rrios-forge/ui/atoms/skeleton";`
- **Source**: `packages/ui/src/atoms/skeleton`

Loading placeholder. Uses the translucent `bg-fill-muted` (reads on white, content material and glass) + `animate-pulse`. The `text` shape is a 12 px bar in a 20 px line box; `lines` renders a paragraph whose last line is shorter. Always `aria-hidden`; the actual loading announcement lives on the surrounding region (e.g. a wrapping `role="status"` or an adjacent Spinner with a label).

## Use it for

- Empty / loading state → `EmptyState` / `LoadingState` or `Skeleton`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `shape` | — | `text` `rectangle` `circle` | `text` | Geometry, where geometry is the meaning. |

## Stories

- [Playground](/?path=/story/components-atoms-skeleton--playground) · frame: `/iframe.html?id=components-atoms-skeleton--playground&viewMode=story`
- [Shapes](/?path=/story/components-atoms-skeleton--shapes) · frame: `/iframe.html?id=components-atoms-skeleton--shapes&viewMode=story`
- [In context](/?path=/story/components-atoms-skeleton--in-context) · frame: `/iframe.html?id=components-atoms-skeleton--in-context&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).