Boneyard: Generate pixel-perfect skeleton screens from your real DOM

What it does

Boneyard extracts pixel-perfect skeleton loading screens directly from your real UI so you don't have to measure or hand-tune placeholders. Works with React, Svelte 5 and React Native. Wrap your components in a , run a CLI build, and the tool snapshots layouts at multiple breakpoints — producing a cross-platform .bones.json that your app can render as a skeleton. Tired of blurry gray boxes? This is a sharp, layout-matching alternative.

How it works

On the web the CLI spins up a headless browser, visits your dev server, finds every Skeleton marker and snapshots their layout. For React Native the CLI talks to a dev-mode scanner that walks the React fiber tree, measures views via UIManager on-device, and uploads "bones" to the CLI — no browser needed. Both flows output the same format so a single design can cover web and native. The project claims zero runtime overhead in production; it has been reported that bones capture automatically during development and that the runtime adds no work in production bundles.

Why it matters

API-wise it's simple: a Skeleton component with props like loading, name, animate (pulse|shimmer|solid), fixture, initialBones and fallback; plus a boneyard.config.json for breakpoints and defaults. CLI flags let you target URLs, native devices, custom breakpoints and output paths. For teams shipping fast UIs — where perceived performance and visual continuity matter — this reduces friction between designers and engineers and keeps loading states honest. It's open-source (MIT), available on npm and GitHub, and sits neatly in the current trend of treating skeleton screens as first-class UX rather than an afterthought. Who wouldn't want that small win for user experience?

Sources: github.com/0xgf, Hacker News