bo-canvaslisted

# BO Canvas Created by Kenneth Villar ([BrewedOps](https://brewedops.com)). The user moves and resizes the real pieces of a section instead of describing them in words. The canvas turns each drag into numbers: the box before and after, font-size, zoom, neighbours and order. One **Copy prompt** click hands that spec back. The tool is a fixed, tested template. Never regenerate it per run. ## Files `<skill>` below means this skill's own folder (`~/.claude/skills/bo-canvas`, or the plugin's install path). - `assets/bo-canvas.html` - the tool. Works standalone (paste a screenshot) or seeded. - `scripts/capture_section.mjs` - takes a live URL + selector and captures a screenshot, plus one layer per component (real selector, real box, computed styles), then writes the canvas. It prints a table of CSS-px boxes. - `scripts/build_canvas.mjs` - turns a screenshot file (+ optional layers.json) into a canvas. With no `--image` it writes the blank tool. - `scripts/selftest.mjs` - end-to-end check. **Run it after any edit to the template or scripts** (`node <skill>/scripts/selftest.mjs [out-dir]`). It must print PASS. ## Design contract - apple-design, white + blue The canvas is a tool, not a mock of the project, so it always wears the BO look. It does not take the project's tokens. **Before editing `assets/bo-canvas.html` or building any other HTML for this skill, load the `apple-design` skill (Emil Kowalski's skills) if you have it** and keep these rules: - **Palette:** wh