Skeleton screens.
Automatically generated.

GitHub

boneyardsnapshots 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.

localhost:3000
Real UI
A
Acme Dashboard
Revenue
$12.3k
Users
1,204
Orders
342
Alice — $240 — Done
Bob — $89 — Pending
Skeleton
How you use it
1

Wrap your component

import { Skeleton } from 'boneyard-js/react'

<Skeleton name="blog-card" loading={isLoading}>
  {data && <BlogCard data={data} />}
</Skeleton>
2

Run the CLI once to generate bones

npx boneyard-js build

Auto-detects your running dev server and Tailwind breakpoints. Writes responsive JSON to src/bones/ automatically. Customize with boneyard.config.json.

3

Import the registry once

import './bones/registry'

Add this to your app entry (e.g. layout.tsx). Every <Skeleton> auto-resolves its bones by name.

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

Built for production

~7.5KB runtime

The React component is tiny. Bones data is static JSON — no layout engine at runtime.

Compact format

Bones are stored as arrays instead of objects — smaller JSON files, faster parsing.

Incremental builds

The CLI hashes each skeleton and skips unchanged ones — only modified components are recaptured.