advanced-svg-system-design
OfficialBuild a reusable SVG diagram system.
Design & Creative#documentation#svg#visual-language#component-architecture#diagram-system#export-fidelity
AuthorThalesGroup
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Designing SVG graphics at scale often leads to inconsistent diagrams, manual drift, and fragile handoffs. This skill provides a durable system for an editable visual language that can power multiple figures across web, docs, and slides, with a single source of truth and repeatable export behavior.
Core Features & Use Cases
- Define a shared layout grid, typography baseline, and color semantics for an entire diagram family.
- Build reusable components and groupings to prevent drift as figures evolve.
- Ensure export-fidelity and cross-renderer consistency for web, slides, and print, with clear guidance for editors and reviewers.
- Use it for projects requiring multiple related diagrams, dashboards, or architecture visuals that must stay coherent over time.
Quick Start
Draft a durable SVG diagram system specification that defines grid, components, and export rules to guide your next diagram family.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: advanced-svg-system-design Download link: https://github.com/ThalesGroup/agilab/archive/main.zip#advanced-svg-system-design Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 510,000+ vetted skills library on demand.