Development · GitHub repo
Boneyard
Auto-generates pixel-perfect skeleton screens directly from your real rendered DOM
Boneyard is a frontend tool that eliminates hand-crafted skeleton loading states by capturing the exact layout of your rendered components. Using a CLI backed by headless browser automation, it snapshots components across breakpoints and exports static JSON layouts that your UI components load with zero layout shift. It works across major frontend frameworks including React, Preact, Vue, Svelte, Angular, and React Native.
What it's for
- Generate pixel-perfect loading placeholders without hand-coding CSS or SVG skeletons
- Eliminate layout shifts (CLS) when real content replaces loading states
- Keep skeleton loaders automatically in sync with design and layout changes across viewports
Features
- Automated DOM extraction using headless browser crawling via CLI
- Responsive breakpoint detection matching Tailwind CSS configurations
- Lightweight static JSON storage format for fast parsing and zero runtime layout engines
- Incremental build support that hashes components and only recaptures changes
- Multi-framework support covering React, Preact, Vue, Svelte, Angular, and React Native
- Support for SSR and suspense boundaries with BoneSuspense
Pricing
Open source. Free and open-source (MIT)
Details
- Type
- GitHub repo
- Category
- Development
- Topic
- UI Components
- Open source
- Yes
- Platforms
- Code library, Command line
- For
- Frontend web and mobile developers seeking accurate, maintenance-free loading skeletons
- Alternative to
- react-loading-skeleton, react-content-loader
- Tags
- skeleton loader, react, vue, svelte, frontend, ui components, cli
Why it was saved
- @fork.cast_: Saves developers from manually measuring and hand-coding skeleton loaders across frameworks like React, Preact, Vue, Svelte 5, Angular, and React Native.
- @0xGoodfuture: Wrap a component with <Skeleton name="...">, then run 'npx boneyard-js build'. It uses Playwright to visit your running dev server at multiple viewports (375/640/768/1024/1280/1536px), calls getBoundingClientRect() on every visible element, and writes responsive JSON 'bones' (x, y, width, height, border-radius) to src/bones/. Import the generated registry once in your app entry; each <Skeleton> auto-resolves its bones by name at runtime based on container width — pixel-perfect, zero layout shift. React 18+, SSR support in progress. Design changes: just re-run the build.
Related
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Open-source animation library for React, Vue, and vanilla JavaScript
Open-source animated and interactive React UI components and backgrounds
Curated directory of crafted React, Tailwind, and shadcn UI components.
Open-source animated React icons built with Lucide and Motion
Updated