April 7, 2026
Bones out, devs on edge
Boneyard: Generate pixel-perfect skeleton screens from your real DOM
Dev tool promises perfect loading screens — commenters want proof
TLDR: Boneyard auto-creates pixel-perfect loading placeholders by snapshotting your page during a build. The crowd split between “show me examples,” confusion over build vs runtime, and calls for a video, with a few cheers for Svelte support and a helpful docs link—important for apps that want smoother, cleaner loading states.
Boneyard burst onto the scene promising pixel‑perfect loading screens that match your real page, no fiddly setup required. You wrap your content in a <Skeleton>, run a command that snapshots the page, and — boom — gray placeholders that look exactly like the final layout. Sounds slick, but the internet immediately asked: Where are the receipts? One early critic slammed the launch with “No examples… and the site is broken on mobile,” setting the tone.
Confusion then took center stage. A top comment called out mixed messaging over when this magic happens: build time vs runtime. If the tool is “headless” but runs while your app is live, isn’t that runtime? “That sounds like runtime,” one user deadpanned, and the thread nodded along. Others were plain lost: “Make a video dammit,” begged another, while one bright spot cheered, “I love seeing things that support Svelte.”
To calm the storm, a helpful commenter dropped the official docs showing a clean example, hinting the tool might be more real than the homepage lets on. Bottom line: the pitch is no‑effort, responsive skeletons with a gentle shimmer, but the comment section wants proof, clarity, and a demo before they let this one bury the competition.
Key Points
- •Boneyard generates pixel-perfect skeleton screens by snapshotting the real DOM at build time.
- •Developers wrap UI with a <Skeleton> component and run npx boneyard-js build to create bones.
- •A registry import enables skeletons to auto-resolve by name across the app.
- •The tool reads getBoundingClientRect() for each visible element, storing bones as { x, y, w, h, r }.
- •Supports responsive breakpoints (375, 768, 1280 by default), color customization, and shimmer animation.