メニュー
Apply when editing, generating, or reviewing any SVG diagram. Pixel-perfect Playwright bbox-check is the acceptance test — eyeballing is not sufficient. Run on every SVG before declaring done.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | svg-check |
| description | Apply when editing, generating, or reviewing any SVG diagram. Pixel-perfect Playwright bbox-check is the acceptance test — eyeballing is not sufficient. Run on every SVG before declaring done. |
| license | MIT |
| version | 1.0.0 |
| tokens_target | 1800 |
| triggers | ["svg edit","svg review","diagram","pixel review","svg overflow"] |
| loads_after | [] |
| supersedes | [] |
Purpose. Catch text-overflow and foreign-rect-intersection bugs in SVG diagrams before commit. LLM eyeball review at 4× zoom misses these bug classes consistently — measurement is the only reliable test.
The acceptance test is the script output. Not your visual judgment.
Apply this skill whenever:
*.svg in any docs/diagrams folder),*.svg.OVERFLOW (own-container): a <text> whose rendered bbox extends past the bounds of its containing <rect> (in the same <g>). Caught by getBBox() measurement, tolerance 2 px.
FOREIGN-RECT INTERSECT: a <text> whose viewport bbox intersects a <rect> that is not an ancestor of the text — i.e. a tagline ascender that touches a structural box above/below it. Caught by getBoundingClientRect() intersection, tolerance 2 px.
Both classes filter false-positives: rects smaller than 40 × 18 (legend swatches) are not treated as containers; texts that start more than 5 px outside a rect's horizontal range are not treated as contained.
The script lives next to this file: overflow-check.js. It needs Playwright installed once per machine.
# From the skill folder
cd skills/svg-check
bash setup.sh
Or manually:
npm install playwright
npx playwright install chromium --with-deps
node skills/svg-check/overflow-check.js path/to/diagram.svg
for svg in path/to/*.svg; do
out=$(node skills/svg-check/overflow-check.js "$svg" 2>&1)
if echo "$out" | grep -q "FOUND"; then
echo "FAIL: $svg"; echo "$out" | grep -E "FOUND| \[| \""
fi
done
The script exits non-zero when issues are found — suitable for use as a pre-commit gate or CI step.
The script output must contain both of these lines, verbatim, for every SVG in scope:
OVERFLOW: CLEAN — 0 text overflows past their containing rect
FOREIGN-RECT INTERSECT: CLEAN — 0 text-vs-foreign-rect intersections
Anything else means not done. Fix the SVG (shorten text, widen rect, move element, change font-size) and re-run until both lines are CLEAN.
In addition, after the script is CLEAN, render a Playwright screenshot in light + dark mode and visually cross-check for bug classes the script does not cover (see § Limits below).
| Pattern | Fix |
|---|---|
| Mono-tag text wider than its 200 px box | Move trailing content to a mono-dim line below, or drop the suffix entirely. Match the sibling-box pattern. |
| Tagline ascenders touch the rect above | Extend the SVG viewBox height (500 → 520) and move the tagline down. Other elements stay put. |
| Two-line label tight in a folder glyph | Move from y=22/33 to y=21/34 (13 px line-height instead of 11 px). |
| Annotation text overflowing a chip | Either widen the chip rect or shorten the annotation. Do not suppress the script — fix the SVG. |
See EXAMPLES.md for real before/after fixes with script output.
These remain eyeball-only for now. When a missed bug class surfaces, extend the script with a new check class — do not rely on agent self-reporting.
<text> crossing an <line> arrow.<text> elements at the same coords.architecture.svg clean. The GEMINI CLI loader-tag overflowed its 200 px box by 42.6 px. No agent measured.The script was built after the second miss. It catches both bug classes in under 5 seconds.
The rule that follows from these incidents: don't trust agent self-reports of "no issues at 4× zoom". Trust the measurement.
When reporting work on any SVG, paste the script output verbatim — both before the fix (showing the bug) and after the fix (showing CLEAN). Without that paste, the work is not done.
Git-versioned agent memory — agents that never make the same mistake twice.
Apply when generating ideas, exploring solution space, or facilitating divergent thinking before committing to an approach.
Apply when closing out a feature branch — pre-merge checklist, rebase, CI verification, cleanup, and post-merge steps.
Apply when writing or refactoring code. Generic rules to prevent the most common review comments — function length, naming, error handling, security, and tooling.
Apply when designing database schemas, writing migrations, or reviewing table structure. Covers naming, keys, indexes, constraints, nullability, and migration safety.
Apply when diagnosing a bug, reproducing a failure, or performing root cause analysis. Covers systematic isolation, binary search, logging strategy, and hypothesis-driven investigation.