what is boneyard fr?

0xgf/boneyard — explained in plain English

Analysis updated 2026-06-26

★ 5,615TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

vibe map

mindmap
  root((Boneyard))
    What it does
      Auto-generates skeletons
      Scans real UI layout
      Captures multiple widths
    Frameworks
      React and Preact
      Vue
      Svelte 5
      Angular and React Native
    Animations
      Pulse
      Shimmer
      Solid
    Setup
      npm install boneyard-js
      Vite plugin or CLI
      bones.json output file
    Config
      Light and dark colors
      Staggered delay
      Fade out on load

mindmap root((Boneyard)) What it does Auto-generates skeletons Scans real UI layout Captures multiple widths Frameworks React and Preact Vue Svelte 5 Angular and React Native Animations Pulse Shimmer Solid Setup npm install boneyard-js Vite plugin or CLI bones.json output file Config Light and dark colors Staggered delay Fade out on load

what do people make with this?

VIBE 1

Automatically generate accurate skeleton loading screens for every component in your React app without drawing placeholder shapes by hand.

VIBE 2

Add shimmer or pulse animations to loading states in a Vue or Svelte app by wrapping components in a single Skeleton element.

VIBE 3

Generate skeleton placeholders for a React Native mobile app using Boneyard's dev-mode device scanner.

VIBE 4

Customize skeleton colors for light and dark mode from a shared boneyard.config.json file shared across all components.

what's the stack?

TypeScriptReactVueSvelteAngularVite

how it stacks up fr

	0xgf/boneyard	airbnb/ts-migrate	softprops/action-gh-release
Stars	5,615	5,613	5,611
Language	TypeScript	TypeScript	TypeScript
Setup difficulty	easy	moderate	easy
Complexity	2/5	3/5	2/5
Audience	developer	developer	developer

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 30min

Requires a headless browser launched via CLI or Vite plugin to scan your app's layout, React Native scanning connects from the device in dev mode without a browser.

Free to use for any purpose, including commercially, as long as you keep the copyright notice.

in plain english

Boneyard is a library that automatically generates skeleton loading screens for web and mobile applications. Skeleton screens are the gray placeholder shapes that appear while a page is loading its real content. Most tools require developers to build those placeholders by hand, measuring and recreating the shapes of each UI element. Boneyard skips that step by scanning your actual interface and generating the skeleton shapes from it. The tool works by using a command-line interface or a Vite plugin to open a headless browser, visit your app, find every component wrapped in a Skeleton element, and capture its layout at multiple screen widths. This produces a .bones.json file for each skeleton, which the library reads at runtime to display the correct shapes while data loads. For React Native, a dev-mode scanner connects from the device directly to the CLI without requiring a browser. Integration follows the same pattern across all supported frameworks: wrap a component in a Skeleton element, give it a name, and pass a loading boolean prop. The real content renders when loading is false, the skeleton shows when loading is true. Supported frameworks include React, Preact, Vue, Svelte 5, Angular, and React Native. Several animation styles are available for the placeholder shapes: pulse, shimmer, and solid. Colors can be customized separately for light and dark modes. Each skeleton can be configured to fade out when loading ends, and bones within a single skeleton can animate with a staggered delay. Settings can come from per-component props or a shared boneyard.config.json file at the project root. The package is available on npm as boneyard-js and is licensed under MIT.

prompts (copy fr)

prompt 1

Set up Boneyard in my React plus Vite app: install the package, add the Vite plugin to vite.config.ts, wrap my ProductCard component in a Skeleton element, and show me how the loading boolean prop switches between skeleton and real content.

prompt 2

I have a Vue 3 component that fetches data on mount. Show me how to wrap it with Boneyard's Skeleton element so a shimmer placeholder appears during the fetch and fades out when data arrives.

prompt 3

Configure boneyard.config.json to use custom hex colors for skeleton shapes in light mode and dark mode, with a 100ms staggered animation delay between bones.

Frequently asked questions