0xGF

0xGF / boneyard

Public

Auto generated skeleton loading framework

boneyard.vercel.app
983
37
100% credibility
Found Apr 03, 2026 at 983 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

Boneyard is a React component library that automatically generates pixel-perfect skeleton loading screens by capturing the visual layout of DOM elements.

How It Works

1
📰 Discover Boneyard

You learn about Boneyard, a handy tool that creates loading screens matching your page's exact look to make waits feel smoother.

2
📦 Add to your project

You easily include Boneyard in your website project so it's ready to use.

3
🎁 Wrap slow parts

You place a simple wrapper around sections of your page that load slowly, giving each a unique name like 'blog-post'.

4
📸 Capture the layout

While viewing your page preview, you snap a picture of the design, and Boneyard instantly generates perfect placeholder shapes.

5
🔗 Include the snapshot

You add the one generated snapshot file to your project, and everything connects automatically.

✨ Perfect loading magic

Now users see shimmering gray placeholders that look exactly like your real content during loads, making your site feel fast and polished.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 983 to 983 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is boneyard?

Boneyard auto-generates pixel-perfect skeleton loading screens for React apps by snapshotting your real DOM layout—no manual measurements or generic placeholders. Wrap any component in ``, run `npx boneyard-js build` to capture bones at breakpoints like 375px, 768px, and 1280px, then import the generated registry once. Built in TypeScript, it delivers responsive shimmers with pulse animations, mimicking your UI exactly during loads.

Why is it gaining traction?

It eliminates guesswork: skeletons match actual element positions, borders, and radii pulled straight from the browser, far beyond blurry SVG or fixed-div alternatives. The CLI auto-detects your dev server, handles multiple viewports, and spits out a simple importable registry—devs love the zero-config flow after one command. With dark mode support and custom colors, it feels native without constant tweaks.

Who should use this?

React devs crafting data-heavy UIs like dashboards, blog cards, or e-commerce listings, where loading states must blend seamlessly. Perfect for teams using Tailwind or complex flex/grid layouts, skipping boilerplate for forms, tables, or charts. Skip if you're on vanilla JS or non-React stacks.

Verdict

Solid pick for quick, precise skeletons in React—983 stars and full docs/tests make it production-ready for prototypes. 1.0% credibility score signals early maturity; test thoroughly before heavy reliance, but it's a smart time-saver now.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.