Skeleton screens.
Automatically generated.

GitHub 1263

boneyard snapshots your real UI and captures a flat list of skeleton "bones" — positioned, sized rectangles that mirror the page exactly.

No manual measurement. No hand-tuned placeholders. Wrap your component in <Skeleton> and get pixel-perfect skeleton screens that stay in sync with your actual layout.

Note: This is a Svelte 5 port of the original Boneyard library created by 0xGF.

localhost:5173
Real UI
A
Acme Dashboard
Revenue
$12.3k
Users
1,204
Skeleton
Acme Dashboard
Revenue
$12.3k
Users
1,204
How you use it
1

Wrap your component

2

Run the CLI once

Auto-detects your dev server. Captures at 375px, 768px, 1280px. Writes responsive JSON to src/bones/.

3

Import the registry once

Add this to your root layout. Every <Skeleton> auto-resolves its bones by name.

The skeleton is extracted from your real rendered content. Run the build once to generate bones from your live DOM. Import the registry once and every component auto-resolves — pixel-perfect, zero layout shift.