CLI

Generate skeleton bones from your running app. Works with every framework.

Build command

Start your dev server, then run the CLI. It opens a headless browser, visits your app, finds every <Skeleton name="...">, and snapshots the layout at each breakpoint.

bash

npx boneyard-js build

Auto-detects your dev server by scanning common ports (3000, 5173, 4321, 8080...). Auto-detects Tailwind breakpoints from your config.

Flags

Flag	Default	Description
[url]	auto-detected	URL to visit (scans common ports if omitted)
--out	./src/bones	Output directory for .bones.json files
--breakpoints	375,768,1280	Viewport widths to capture, comma-separated
--wait	800	ms to wait after page load before capturing
--force	—	Skip incremental cache, recapture all
--watch	—	Re-capture when your app changes (listens for HMR)
--native	—	React Native mode — scans from device
--no-scan	—	Skip filesystem route scanning (only crawl links)
--cdp <port>	—	Connect to existing Chrome via debug port (reuses cookies/auth)
--env-file	—	Load env vars from file (useful for Bun runtime)

Examples

bash

# Auto-detect server, default breakpoints
npx boneyard-js build

# Specific page
npx boneyard-js build http://localhost:3000/dashboard

# Custom breakpoints + output dir
npx boneyard-js build --breakpoints 390,820,1440 --out ./public/bones

# Force recapture all
npx boneyard-js build --force

# Watch mode
npx boneyard-js build --watch

# React Native
npx boneyard-js build --native --out ./bones

# Use existing Chrome (reuses cookies, auth, extensions)
npx boneyard-js build --cdp 9222

Vite plugin

For Vite-based projects (Vue, Svelte, React with Vite, Nuxt, SvelteKit), use the plugin instead of the CLI. Bones are captured on dev server start and re-captured on every HMR update. No second terminal.

vite.config.ts

import { boneyardPlugin } from 'boneyard-js/vite'

export default defineConfig({
  plugins: [boneyardPlugin()]
})

Option	Default	Description
out	./src/bones	Output directory
breakpoints	[375, 768, 1280]	Viewport widths to capture
wait	800	ms to wait after page load
framework	auto	Registry import (auto-detects vue/svelte/react)
skipInitial	false	Skip capture on server start
cdp	—	Chrome debug port (reuses existing browser session)

Watch mode

Keep the CLI running and re-capture when your dev server pushes HMR updates. Works with Vite, Next.js, Webpack, and SvelteKit.

bash

npx boneyard-js build --watch

Silent when nothing changes. Prints a one-line summary when bones are updated. Only writes files when the captured bones actually differ from the previous capture.

Incremental builds

The CLI hashes each skeleton's content and skips unchanged components on subsequent builds. Only modified skeletons are recaptured — saving time on large apps.

Use --force to bypass the cache and recapture everything.

Playwright is included as a dependency. On first run you may need to install the browser: npx playwright install chromium

React Native

The --native flag starts a scan receiver instead of opening a browser. The Skeleton component on your device auto-scans and sends bones to the CLI.

bash

npx boneyard-js build --native --out ./bones
# Open your app on device — bones capture automatically

See React Native docs for full setup details.