Cookbook

Advanced patterns, Vite integration, and styling guides for power users.

Gated Routes & Mocking (The "Blocks" Pattern)

If your app has authenticated or dynamic routes, the headless browser won't be able to capture your skeletons directly. Instead, create an isolated directory (e.g. src/routes/blocks) where you can mock your UI in isolation.

Excluding from Production: You don't want these mock pages in your final build. You can exclude them in your svelte.config.js by customizing your adapter options, or using SvelteKit's built in routing config to ignore the directory entirely.

Vite Plugin

Tired of running the CLI manually? The boneyard-svelte/vite plugin watches your mock routes and automatically triggers a background crawl whenever you save a change.

Pro Tip: The plugin uses your active Tailwind breakpoints automatically to ensure your generated bones are always responsive.

CLI Power Options

Handling Heavy Renders

If your components use complex animations or heavy client-side logic, the CLI might capture them before they are fully settled. Use --wait to increase the delay.

npx boneyard-svelte build --wait 2000

Nested Route Extraction

Boneyard supports nested directory structures. Point the --out flag at your lib folder, and the CLI will mirror your route structure.

npx boneyard-svelte build --out src/lib/bones/marketing

Manual URL Capture

In non-SvelteKit projects, or when you want to capture a specific state of your running app, use the --url flag to point Boneyard at your dev server.

npx boneyard-svelte build --url http://localhost:5173/mocks/card
Standard Svelte (Vite) Setup

Using Boneyard with **Pure Svelte + Vite** (no SvelteKit)? Simply swap out the SvelteKit plugin for the standard Svelte one and point Boneyard to any directory containing your mock components.

Unlike SvelteKit which handles imports automatically via layouts, in a standard Svelte app you should import the registry in your main.ts entry point.

Svelte 5 Reactive Patterns

Boneyard works seamlessly with Svelte 5's new reactivity model. Use $state for your loading toggles to ensure the skeleton disappears the moment your data is ready.

Shadcn & Bits UI

When using Boneyard with component libraries like Shadcn Svelte, you often want to exclude ephemeral UI elements like Tooltips or Popovers that might accidentally be open during the build snapshot.

This configuration ensures your skeleton represents the stable layout of the card, not the transient UI floating on top of it.

Tailwind v4 Integration

Boneyard was built for the modern era. It natively detects Tailwind v4 CSS configurations.

  • Auto-discovers breakpoints from your globals.css imports.
  • Supports the new CSS-variable based theme system.
  • Handles canonical classes natively (e.g. max-w-180).