SkillsAdd

smithery.ai

svg-collisions

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.

First seen Apr 25, 2026

Installation

$ npx skills add https://smithery.ai
View on skills.sh ↗ Website ↗

Also in this package

Other skills from smithery.ai · top by installs.

npx skills add https://smithery.ai
smithery-ai-cli 7.8K frontend-design 6.2K skill-creator 2.5K ck:ui-ux-pro-max 1.3K pdf 1.2K xlsx 966 pptx 894 docx 884 webapp-testing 1 web-design-reviewer 657

Browse all from smithery.ai

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,646 B
  • docs SUMMARY.md 194 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 2 installs

SKILL.md

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

  1. Run collision detection.
  2. Inspect reported collisions by severity.
  3. Fix only true problems (especially text-over-text).
  4. 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/SVGCREATIONMETHODOLOGY.md