Responsive

This is a single <Skeleton name="responsive-product"> component. Resize it and watch it switch between the mobile, tablet, and desktop bone sets automatically.

The same <Skeleton name="responsive-product"> at three fixed widths. Each uses the same bones file — the component picks the matching breakpoint based on its container size.

When you run npx boneyard-js build, Playwright visits your page at multiple breakpoints and snapshots the DOM at each one. If you have Tailwind, it auto-detects your breakpoints — 375, 640, 768, 1024, 1280, 1536px. Without Tailwind, it falls back to 375, 768, 1280px. All breakpoints are stored in a single .bones.json file.

At runtime, the <Skeleton> component uses a ResizeObserver to measure its container and picks the closest breakpoint. When the container resizes, it swaps to the matching skeleton automatically.

Each .bones.json file contains all breakpoints in a single object. The x and w values are percentages of the container width, so they scale naturally.

{
  "breakpoints": {
    "375": {
      "width": 220,
      "height": 341,
      "bones": [
        [0, 0, 100, 186, 6],
        // ... vertical stack
      ]
    },
    "768": { /* horizontal layout */ },
    "1280": { /* wide layout with button on right */ }
  }
}

Tailwind breakpoints are auto-detected. Without Tailwind, the defaults are 375, 768, 1280. You can override them via boneyard.config.json or the CLI flag.

{
  "breakpoints": [390, 820, 1440]
}

Or pass directly: npx boneyard-js build --breakpoints 390,820,1440