Boneyard Rethinks Skeleton Screens: From Hand‑Written UI to Compile‑Time Assets

In the frontend world, almost everyone has written a skeleton screen at some point.

Typical approaches are either using component libraries such as Ant Design to assemble a skeleton, or hand‑coding a set of skeleton components. These methods suffer from excessive code, synchronization issues when the UI changes, and high effort for complex layouts.

Boneyard: Ditch Hand‑Written Skeletons

A recent project called Boneyard does something counter‑intuitive: it stops developers from writing Skeleton components manually and instead generates them directly from the real page.

How It Works

During the build phase Boneyard “flattens” the actual UI into skeleton data.

Core Workflow (Critical)

The process is straightforward:

Write Your Component Normally

You write the UI component as usual without any skeleton code:

<Skeleton name="user-card">
  <UserCard />
</Skeleton>

Run the CLI to Generate Skeleton

npx boneyard-js build

This step launches a Playwright browser, scans the DOM, and records the position and size of every element. The result is a .bones.json file containing coordinates (x, y, width, height, radius).

UI → Coordinate data (x / y / width / height / radius)

Render at Runtime

<Skeleton name="user-card" />

At runtime the component no longer depends on the original UI; it renders the stored skeleton data directly.

Quick Start

Only three steps are needed:

Install

npm install boneyard-js

Wrap Your Component

<Skeleton name="card">
  <Card />
</Skeleton>

Generate Skeleton

npx boneyard-js build

After the build you can use the generated skeleton immediately.

Supported Frameworks

Boneyard is framework‑agnostic. Officially it supports React, React Native, and Svelte 5. A community version boneyard-vue adapts it for Vue.

Vue Example

<Skeleton name="card" :loading="loading">
  <Card />
</Skeleton>

Conclusion

Boneyard turns skeleton screens from a manual chore into a compile‑time artifact, moving UI loading states into the era of compilation.

Related Links

Boneyard website: https://boneyard.vercel.app/overview Boneyard Vue repository:

https://github.com/samuelbelo/boneyard-vue