// summary
Boneyard is a development tool that extracts layout information from the real DOM to automatically generate pixel-perfect skeleton screens. Developers can achieve loading placeholder effects without manual adjustments through simple component wrapping and command-line builds. The tool supports various frameworks such as React, React Native, and Svelte, and provides a flexible layout API to meet different responsive requirements.
// technical analysis
Boneyard adopts a design philosophy of automated skeleton screen generation, eliminating the tedious work of manual measurement and placeholder adjustment by extracting layout information directly from the real DOM. This project addresses the pain point in traditional skeleton screen development where it is difficult to maintain high consistency with UI layouts, using a CLI tool to automatically capture element positions and generate precise skeleton data. Its technical decisions emphasize responsive support and performance optimization, allowing developers to efficiently reuse skeleton descriptors in SSR or high-frequency repaint scenarios by providing a compiled layout API, achieving a balance between development efficiency and runtime performance.
// key highlights
// use cases
// getting started
First, install the dependency via npm install boneyard-js, wrap your components with the <Skeleton> tag, and specify a unique name. Next, run the npx boneyard-js build command to automatically scan the DOM and generate skeleton data. Finally, import the generated registry file at your application entry point to implement the automated skeleton screen loading effect.