samuelbelo

samuelbelo / boneyard-vue

Public

Pixel-perfect skeleton loading screens for Vue 3. Port of boneyard-js by 0xGF.

18
0
100% credibility
Found Apr 07, 2026 at 18 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

A tool for Vue 3 that automatically creates skeleton loading screens matching the exact shape and layout of your real content.

How It Works

1
🔍 Discover perfect loading placeholders

You find boneyard-vue while searching for ways to make your website's loading screens look exactly like the final content, no guesswork needed.

2
📦 Add it to your project

You easily bring the tool into your website builder or app with one quick step.

3
🖼️ Wrap your content areas

You surround the parts of your page that load data, like cards or lists, with a simple loader wrapper and give each a friendly name.

4
📸 Capture your layouts

You take quick snapshots of how your pages look when fully loaded, creating exact gray shape templates that shimmer nicely.

5
🔗 Link the snapshots

You add the captured templates to your site once, and every loader automatically uses the right one.

6
🎨 Tweak looks if needed

You pick colors, turn on shimmer animation, or match dark mode, and it adapts to different screen sizes perfectly.

✨ Enjoy instant-feeling site

Now your site shows beautiful, matching placeholders while loading, making everything feel fast and polished for visitors.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 18 to 18 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-vue?

boneyard-vue is a TypeScript library for Vue 3 that auto-generates pixel-perfect skeleton loading screens by snapshotting your real DOM layout. Wrap any component in ``, run `npx boneyard-vue build` to capture bones at responsive breakpoints like 375px or 1280px, then import the registry once for instant use everywhere. It's a direct port of boneyard-js by 0xGF, delivering exact matches without manual measurements.

Why is it gaining traction?

Unlike generic shimmer libraries, it pulls precise positions, sizes, and radii from your live UI, handling flexbox, tables, and dark mode automatically with pulse animations. The CLI supports fixtures for data-less builds and custom breakpoints, while Vue integration offers a global plugin, composable, or tree-shakeable import. Developers love the zero-config path to pixel-perfect loading screens that scale responsively.

Who should use this?

Vue 3 frontend devs building dashboards, blogs, or e-commerce apps with async data fetches, especially those tired of tweaking placeholder divs for every breakpoint. Teams using Tailwind or custom CSS grids will appreciate the DOM-extracted accuracy for cards, tables, chats, and navs. Ideal for polishing perceived performance in SPAs without design system overhauls.

Verdict

Try it for quick wins on loading UX – solid docs, demo, and CLI make adoption easy despite 18 stars and 1.0% credibility score signaling early maturity. Pair with boneyard-js for non-Vue needs, but watch for broader adoption.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.