How do I install the Svg Collisions skill?

Run npx skillmds@latest add metabench/svg-collisions in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Svg Collisions skill do?

Create or repair SVG diagrams without overlapping text/shapes. Use when shipping new SVGs, editing WLILO-styled diagrams, or when collision checks report overlaps/clipping. It is listed under Docs & Writing on SkillMD.

Is Svg Collisions safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Svg Collisions?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Svg Collisions free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Svg Collisions?

metabench (@metabench) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Svg Collisions by metabench — Agent Skill

Name: Svg Collisions
Rating: 4.666666666666667 (3 reviews)
Author: metabench

File contents

SVG Collisions (Repair + Validation)

Triggers

"svg", "overlap", "collisions", "diagrams", "WLILO", "layout repair"

Scope

Detect overlaps/collisions in SVGs
Apply safe layout fixes (move label backgrounds, adjust spacing)
Re-run validation until clean

Inputs

SVG filepath
Desired strictness (--strict vs normal)
Whether collisions are real (text-on-rect label patterns are often intentional)

Procedure

Run collision detection.
Inspect reported collisions by severity.
Fix only true problems (especially text-over-text).
Re-run strict mode before shipping.

Validation

Run:

node tools/dev/svg-collisions.js <file> --strict

Anti-Patterns to Avoid

Ignoring Strict Mode: Shipping an SVG that passes default validation but fails strict mode without explicit confirmation that the overlaps are intentional.
Manual Nudging Sandbox: Spending hours manually guessing <g transform="translate(...)"> values instead of generating a clean layout via templates or collision scripts.

Escalation / Research request

Ask for dedicated research if:

strict mode repeatedly reports false positives tied to viewBox scaling
you need a new reusable theme/layout template under data/svg-templates/ or tools/dev/svg-templates/

References

Tool doc: tools/dev/README.md (svg-collisions section)
SVG methodology: docs/guides/SVG_CREATION_METHODOLOGY.md

Frequently asked questions

Svg Collisions