skills.rest
gqf2008
gqf2008COMMUNITY
Explore all skills by this author →
Website𝕏@gqf25044395GitHub

concept-diagrams

Generate standalone HTML files containing self-contained SVG diagrams.

Updated Apr 19, 2026
Search Tags:#design#education#visualization#svg#diagrams#templating#dark-mode
One-click install
npx skills add https://github.com/gqf2008/hermez-ai --skill concept-diagrams-gqf2008
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: concept-diagrams
Source: https://github.com/gqf2008/hermez-ai/tree/main/skills/creative/concept-diagrams
Command: npx skills add https://github.com/gqf2008/hermez-ai --skill concept-diagrams-gqf2008

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and educators need consistent, accessible SVG diagrams that render the same across environments and themes, without software dependencies.

Core Features & Use Cases

  • Standalone HTML: produce self-contained HTML files that render diagrams offline.
  • Educational visuals: 9 semantic color ramps, sentence-case typography, dark-mode aware styling.
  • Flexible diagram types: flowcharts, physicals, UI mockups, architecture diagrams, and more using a unified design language.
  • Examples: ships with 15 example diagrams to illustrate patterns.

Quick Start

Paste your SVG into the template and save as an HTML file to preview immediately.

Frequently Asked Questions about concept-diagrams

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

FAQPage Schema
How do I generate standalone SVG diagrams for educational materials?▼

You can generate self-contained HTML files with embedded SVG diagrams that render offline without software dependencies. This Skill enforces consistent typography, semantic color ramps, and accessibility validation for educational visuals.

Can I create dark-mode aware physics and engineering diagrams without coding?▼

Yes, you can create dark-mode aware physics and engineering diagrams using a frontmatter-driven discovery model. The output applies dark-mode aware styling and a unified educational aesthetic across multiple diagram types.

What is the best way to ensure consistent SVG visualization across different themes?▼

The best way to ensure consistent SVG visualization across themes is using a template with enforced validation checklists for typography, palettes, and sizing. It provides semantic color ramps and dark-mode support for uniform rendering.

Does this SVG diagram generator support UI mockups and floor plans?▼

Yes, this SVG diagram generator supports UI mockups and floor plans alongside flowcharts and architecture diagrams. It applies a unified design language to maintain an education-ready aesthetic across all supported visual formats.

How do I preview generated SVG diagrams offline?▼

To preview generated SVG diagrams offline, paste your SVG into the provided template and save it as an HTML file. The resulting standalone file renders immediately in any web browser without requiring an internet connection.

Are there limitations to using frontmatter-driven SVG templates for education?▼

A limitation of frontmatter-driven SVG templates is that outputs are restricted to a specific educational aesthetic with semantic color ramps. Diagrams must conform to the enforced validation checklist for typography and sizing rather than allowing fully custom styling.

Related Skills

Explore More Design & Creative Skills→
LynxLabVNLynxLabVN

architecture-diagram

Generate technical architecture diagrams as HTML files with inline SVG.

Official
Intermediate
vikrant-projectvikrant-project
2

concept-diagrams

Generate flat, minimal light/dark-aware SVG diagrams as standalone HTML files.

Community
Intermediate
HKUDSHKUDS
46.8k

cli-anything-inkscape

Manipulate SVG documents via command-line commands with Inkscape compatibility.

Official
Intermediate
cericocerico

visx

Build interactive SVG data visualizations in React using visx.

Community
Intermediate