diagram-quality

Detect and fix styling and layout issues in SVG diagrams.

2|Updated Apr 12, 2026
One-click install
npx skills add https://github.com/jemcik/the-radio-bench --skill diagram-quality
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: diagram-quality
Source: https://github.com/jemcik/the-radio-bench/tree/main/.claude/skills/diagram-quality
Command: npx skills add https://github.com/jemcik/the-radio-bench --skill diagram-quality

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses visual inconsistencies and technical issues in SVG diagrams, ensuring diagrams are clear, properly scaled, and thematically consistent across localizations.

Core Features & Use Cases

  • Diagram Inspection and Fixes: Detects and fixes font size, padding, overlap, and translation issues in SVG diagrams.
  • Style and Theme Compliance: Ensures diagrams adhere to theme tokens, proper sizing, and responsive layout standards.
  • Use Case: When updating a schematic or plot, invoke this Skill to automatically correct label sizes, alignments, and theme tokens to guarantee visual consistency and readability across languages and themes.

Quick Start

Invoke the diagram quality skill whenever touching src/components/diagrams/ or chapter visuals to automatically detect and fix diagram styling and layout issues.

Frequently Asked Questions about diagram-quality

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

FAQPage Schema
How do I fix font size and overlap issues in SVG diagrams?

To fix SVG diagram overlap and font size issues, you need automated checks that detect styling inconsistencies and resolve layout bugs. This ensures technical illustrations maintain proper padding and visual clarity.

What is the best way to ensure SVG schematic accuracy across multiple languages?

Ensuring SVG schematic accuracy across translations requires checking translation integrity and resolving typography issues. Automated detection corrects label alignments and theme tokens to guarantee universal readability.

How do I check if my SVG technical illustrations follow theme tokens?

Checking SVG technical illustrations for theme token compliance involves validating style and theme conformity. Automated inspections detect mismatched sizing and styling, applying fixes to maintain responsive layout standards.

Why does my translated SVG diagram have misaligned labels and padding?

Misaligned labels and padding in translated SVG diagrams occur due to unresolved layout and typography issues. Detecting and fixing these translation integrity problems ensures visual consistency across localizations.

Can I automatically correct styling and layout bugs in educational SVG diagrams?

You can automatically correct styling and layout bugs in educational SVG diagrams by running automated checks. This process detects and resolves common visual issues, enhancing the professionalism of educational content.

When do I need to run automated checks on SVG diagrams?

You need to run automated checks on SVG diagrams when updating schematics or plots to automatically detect and fix diagram styling and layout issues. This guarantees visual consistency and readability across themes.