fix: improve test.html visual clarity and verify-rule skill

[purupurupu]

Summary

Systematic visual improvement of examples/test.html test cases across 15 rules, plus enhancements to the verify-rule skill. Every rule's test cases were verified against real Chromium behavior via Playwright, with per-case screenshots reviewed for visual correctness.

Changes to examples/test.html

Global:

• Add overflow: hidden to .case CSS class to contain floated elements that were bleeding into adjacent cases

Per-rule improvements (15 rules):

Each rule received the same treatment:

1. Background color (#e8e8e8) added to all warn and ok case elements for visual contrast
2. Labels updated to be self-explanatory — warn labels describe the ignored behavior, ok labels explain why the property is effective and what to expect visually
3. Trivial ok cases removed — default-value cases (e.g. "no margin set", "default auto"), display:contents, and other self-evident cases that add no meaningful coverage
4. Proper structure — table-related rules now wrap targets in correct table/row/cell structure so internal table display types render correctly

Rule	Key Visual Improvements
nonfloat-no-shape-outside	Float ok case now has circle shape + wrapping text to show shape-outside effect
nonreplaced-no-aspect-ratio	Warn/ok contrast shows height generation difference; img uses data URI SVG
nonreplaced-no-object-fit	Img ok case uses wide SVG cropped by object-fit: cover; removed empty embed/object cases
nontable-no-border-spacing	Ok table cases have bordered cells showing visible spacing gaps
nontable-no-empty-cells	Ok case uses empty+filled cell pair to demonstrate empty-cells: hide
outline-no-style	Warn shows no outline; ok shows red solid / blue dashed outline
scroll-no-scroll-padding	Ok containers have gradient backgrounds; labels explain scroll-snap relationship
scroll-snap-no-align-without-type	Warn/ok cases have scrollable multi-section content with color coding
static-no-offset	Ok case shows position: relative + top: 20px actually shifting the element; removed non-verifiable sticky case
table-no-margin	Warn cases wrapped in proper table structure; ok cases show margin with bordered cells
table-no-padding	Same pattern as table-no-margin
transform-no-origin	Warn/ok cases have dimensions; ok cases visually show rotation/scaling from top-left
visible-overflow-no-resize	Warn has no resize handle; ok has visible handle in bottom-right corner
visible-overflow-no-text-overflow	Warn shows text spilling out; ok shows ... ellipsis truncation

Changes to verify-rule skill (.claude/skills/verify-rule/SKILL.md)

• New Step 4: Visual Screenshot Check — per-case screenshots taken during Playwright verification, reviewed via Read tool
• Screenshot template added to Playwright test boilerplate (c.screenshot() per .case)
• Cleanup updated to delete screenshots alongside temporary test files
• Report template expanded with Visual Screenshot Check section
• Label guidance updated — ok labels should explain "why effective" AND "what to expect visually"; non-visual cases should acknowledge limited verifiability

Test plan

• pnpm test — all unit tests pass
• pnpm test:e2e — all 20 e2e tests pass (dynamic test count, no code changes needed)
• pnpm lint — no lint errors
• Each rule verified individually via temporary Playwright test with per-case screenshots
• Manual: open examples/test.html in browser and visually confirm warn/ok contrast for each rule section