svg-collisions

Detect and repair overlapping text and shapes in SVG diagrams.

1|Updated Sep 12, 2025
One-click install
npx skills add https://github.com/metabench/copilot-dl-news --skill svg-collisions-metabench
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-collisions
Source: https://github.com/metabench/copilot-dl-news/tree/main/docs/agi/skills/svg-collisions
Command: npx skills add https://github.com/metabench/copilot-dl-news --skill svg-collisions-metabench

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? SVG diagrams often ship with overlapping text labels, clipped shapes, or colliding elements that are hard to spot manually, especially in WLILO-styled diagrams. This Skill detects those collisions, distinguishes real problems from intentional label patterns, and guides safe layout repairs. ## Core Features & Use Cases - Collision Detection: Run automated checks that report overlapping text and shapes by severity. - Guided Layout Repair: Apply safe fixes such as moving label backgrounds and adjusting spacing, then re-validate until clean. - Strict Mode Validation: Re-run checks with --strict before shipping to catch issues default validation misses. - Use Case: You edited a WLILO-styled architecture diagram and want to confirm no labels overlap before publishing; run the collision check, fix only true text-over-text problems, and verify with strict mode. ## Quick Start Check the SVG file at docs/diagrams/architecture.svg for collisions and fix any overlapping text until strict mode passes.

Frequently Asked Questions about svg-collisions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check an SVG file for overlapping text?▼

Run the collision detection tool with node tools/dev/svg-collisions.js followed by the SVG filepath. It reports collisions by severity so you can inspect and fix true problems, especially text-over-text overlaps.

How to fix overlapping labels in SVG diagrams?▼

Fix only true problems by moving label backgrounds and adjusting spacing rather than manually guessing transform values. Re-run the collision check after each fix until the report is clean.

What is the difference between strict and normal SVG collision checks?▼

Strict mode, enabled with the --strict flag, catches overlaps that default validation misses. Always run strict mode before shipping, unless the flagged overlaps are confirmed to be intentional.

Why does the SVG collision check report false positives?▼

Text-on-rect label patterns are often intentional and get flagged as collisions. If strict mode repeatedly reports false positives tied to viewBox scaling, escalate for dedicated research rather than forcing fixes.

When should I use SVG layout templates instead of manual fixes?▼

Use reusable templates under data/svg-templates/ or tools/dev/svg-templates/ when manual transform nudging becomes time-consuming. Templates generate clean layouts that avoid collisions by construction.