whiteboard: Skill for Claude Code

Before/after figures for a rendering change

AGENTS.md requires visual evidence on a PR whose change has a user-visible effect. For a routing or layout change that means: the same canvas, rendered by the code before and after, side by side. A reviewer should see the defect and the fix without cloning anything.

The whole thing is four steps and about five minutes. The traps below are the ones that actually cost time — every one of them has produced a wrong or misleading figure at least once.

1. Pick a case the change actually fixes

Do not eyeball this. A canvas can look wrong for several reasons at once, and the biggest offender is usually not the one you fixed — twice, a case picked by "worst total ink" turned out to be dominated by a defect class the change did not touch, and the figure showed the same flaw on both sides.

Select by the metric the change targets, and require it to go to zero:

// throwaway test: score every corpus case before and after, keep the ones
// this change actually repaired
const fixed = Object.keys(before).filter((name) => before[name] > 0 && after[name] === 0)

Run it once with the change, once with it stashed, and diff the two maps. Prefer the smallest case in the list — three nodes reads; eight does not.

2. Render both versions through the real pipeline

A throwaway test, because the pipeline needs a measurer and a body parser that only the test-utils have. Write to a path from the environment so one file serves both runs:

// packages/canvas-render/src/layout/__render.test.ts  (delete when done)
import { writeFileSync } from 'node:fs'
import { it } from 'vitest'
import { renderSceneToSvg } from '../svg/backend.js'
import { createFakeMeasure } from '../test-utils/fake-measure.js'
import { layoutSpatialCanvas } from './spatial-canvas.js'

it('render', () => {
  const scene = layoutSpatialCanvas(canvas, {
    measure: createFakeMeasure(),
    parseBody: (text) => ({ type: 'root', children: [{ type: 'paragraph', children: [{ type: 'text', value: text }] }] }),
    appearance: {
      resolveNode: () => ({ fill: '#ffffff', stroke: '#404040' }),
      resolveEdge: () => ({ stroke: '#d04040' }),
      resolveLabel: () => ({ fill: '#303030', fontFamily: 'sans-serif' }),
    },
    geometry: { paddingPx: 8, labelFontSizePx: 12, minContentWidthPx: 1 },
  })
  writeFileSync(process.env.OUT as string, renderSceneToSvg(scene))
})