Responsive

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 window resizes, it swaps to the matching skeleton automatically.

The same product card at mobile, tablet, and desktop widths. Each skeleton matches the actual layout at that size.

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": 343,
      "height": 198,
      "bones": [
        [0, 0, 38.2, 17, 8],
        // ...
      ]
    },
    "768": { /* tablet bones */ },
    "1280": { /* desktop bones */ }
  }
}

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