boneyard

Boneyard generates skeleton loading screens by snapshotting your actual UI. Instead of hand-coding placeholder layouts that drift from your real components, you wrap them in a Skeleton component, run the CLI, and it captures the exact layout at multiple breakpoints. The skeletons match because they are derived from the real thing.

Works with React, Svelte 5, and React Native. The CLI opens a headless browser, finds your Skeleton wrappers, and outputs static JSON bone files. React Native support uses fiber tree walking instead of a browser, which is clever. Three animation styles (pulse, shimmer, solid), dark mode support, and incremental caching so rebuilds skip unchanged components.

Frontend developers tired of manually measuring skeleton states: this saves real time. Especially valuable on data-heavy apps where perceived load time matters. Teams get loading states that stay in sync as designs evolve.

The catch: the CLI needs a running dev server to snapshot from. Dynamic layouts that change shape based on data will not produce perfect skeletons. And if you change a component, you need to re-run the build.