Generate self-contained HTML and SVG technical diagrams with semantic token styling.
npx skills add https://github.com/tsukhani/jclaw --skill diagram-design-tsukhani
Please help me install this Agent Skill. Skill: diagram-design Source: https://github.com/tsukhani/jclaw/tree/main/skills/diagram-design Command: npx skills add https://github.com/tsukhani/jclaw --skill diagram-design-tsukhani
This skill solves the challenge of creating consistent, high-quality technical diagrams that match your brand identity without requiring manual design software.
Ask the assistant to create an architecture diagram for your application by specifying the components and their relationships.
High-intent search queries and answers about installing and using this skill.
You can generate an HTML architecture diagram by specifying your application components and relationships. The skill creates self-contained HTML and SVG technical diagrams following an opinionated editorial design system for documentation and product design.
Yes, technical diagrams can automatically match your brand colors through brand onboarding. The skill extracts colors and fonts from your website and applies semantic token-based styling to ensure visual consistency across all generated assets.
You can create thirteen types of technical diagrams for system visualization, including architecture, flowcharts, sequence, state machines, and ER data models. These visualizations support diverse documentation and product design use cases.
The best way to create consistent SVG diagrams without manual design software is using a strict grid-based editorial design system. This approach applies semantic color tokens to ensure high-quality, brand-aligned visual consistency across all outputs.
No, you do not need manual design software to create sequence and data model diagrams. The skill generates self-contained HTML and SVG files directly, implementing semantic token-based styling for professional results.
Semantic token-based styling for diagram visualization works by applying a strict grid-based aesthetic with predefined color tokens. This mechanism ensures brand alignment and visual consistency across all generated technical architecture and data models.
benciumProvide UI/UX design guidance with WCAG 2.1 AA compliance.
cathrynlaveryCreate standalone HTML diagrams with inline SVG and CSS.
Tiao553Generate interactive Mermaid diagrams and HTML data visualizations for technical documentation.
raweAutomate FirstSpirit template export, modification, and re-import via fs-cli workflows.
