0xgf/boneyard

Boneyard is a library that automatically generates skeleton loading screens for web and mobile applications. Skeleton screens are the gray placeholder shapes that appear while a page is loading its real content. Most tools require developers to build those placeholders by hand, measuring and recreating the shapes of each UI element. Boneyard skips that step by scanning your actual interface and generating the skeleton shapes from it. The tool works by using a command-line interface or a Vite plugin to open a headless browser, visit your app, find every component wrapped in a Skeleton element, and capture its layout at multiple screen widths. This produces a .bones.json file for each skeleton, which the library reads at runtime to display the correct shapes while data loads. For React Native, a dev-mode scanner connects from the device directly to the CLI without requiring a browser. Integration follows the same pattern across all supported frameworks: wrap a component in a Skeleton element, give it a name, and pass a loading boolean prop. The real content renders when loading is false, the skeleton shows when loading is true. Supported frameworks include React, Preact, Vue, Svelte 5, Angular, and React Native. Several animation styles are available for the placeholder shapes: pulse, shimmer, and solid. Colors can be customized separately for light and dark modes. Each skeleton can be configured to fade out when loading ends, and bones within a single skeleton can animate with a staggered delay. Settings can come from per-component props or a shared boneyard.config.json file at the project root. The package is available on npm as boneyard-js and is licensed under MIT.