# 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.

Website: https://boneyard.vercel.app/

Also at: https://github.com/0xGF/boneyard

## What it is 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](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- 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_, 19 August 2026](https://www.instagram.com/reel/DcNcU-YFMFl/): Saves developers from manually measuring and hand-coding skeleton loaders across frameworks like React, Preact, Vue, Svelte 5, Angular, and React Native.
- [@0xGoodfuture, 2 April 2026](https://x.com/0xGoodfuture/status/2039818750568878245): 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

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 11 October 2026. Page: https://xiry.app/resources/boneyard

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.