skills.rest
JuanMS20
JuanMS20COMMUNITY
Explore all skills by this author →
GitHub

concept-diagrams

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

Updated May 3, 2026
Search Tags:#template#education#visualization#svg#diagrams#dark-mode
One-click install
npx skills add https://github.com/JuanMS20/solviora-agent --skill concept-diagrams-juanms20
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: concept-diagrams
Source: https://github.com/JuanMS20/solviora-agent/tree/main/optional-skills/creative/concept-diagrams
Command: npx skills add https://github.com/JuanMS20/solviora-agent --skill concept-diagrams-juanms20

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate flat, minimal light/dark-aware SVG diagrams as standalone HTML files that render consistently offline, enabling educators and designers to share clear visuals without dependencies.

Core Features & Use Cases

  • Unified design system: a consistent educational aesthetic with 9 semantic color ramps and sentence-case typography for all diagrams.
  • Self-contained outputs: each diagram is produced as a single standalone HTML file containing the SVG and design system.
  • Template-driven workflow: diagrams are authored via a SKILL.md frontmatter (name/description) plus a Markdown body that provides operational instructions loaded into context.
  • Subject versatility: suitable for physics, chemistry, engineering, anatomy, floor plans, narratives, and hub-spoke system visuals, among others.
  • Example gallery: ships with multiple example diagrams to illustrate patterns and best practices.

Quick Start

Create a new concept diagram by supplying a subject name to render a self-contained HTML diagram.

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?▼

To generate standalone SVG educational diagrams, you supply a subject name and diagram instructions. The skill renders a self-contained HTML file with the SVG and design system, requiring no runtime dependencies.

Can I create light and dark mode SVG visualizations without external libraries?▼

Yes, you can create light and dark mode SVG visualizations without external libraries. The skill produces standalone HTML files that enforce a dark-aware design system using semantic color ramps and sentence-case typography.

What subjects are supported for creating flat SVG diagrams?▼

Flat SVG diagrams are supported across physics, chemistry, math, engineering, anatomy, floor plans, and hub-spoke system visuals. The skill applies a unified aesthetic template suitable for these educational subjects.

How do I author custom SVG diagrams using a Markdown template workflow?▼

You author custom SVG diagrams by defining a SKILL.md frontmatter with a name and description, then providing operational instructions in the Markdown body. This template-driven approach loads your instructions into context to render the final HTML.

What is the best way to share offline educational visuals that render consistently?▼

The best way to share offline educational visuals is generating standalone HTML files. Each output contains the SVG and design system internally, ensuring clear visuals render consistently without requiring any runtime dependencies.

Are there any runtime dependencies required to view the generated HTML diagrams?▼

No runtime dependencies are required to view the generated HTML diagrams. The skill outputs self-contained HTML files that include the SVG and the complete design system, enabling offline rendering and sharing.

Related Skills

Explore More Design & Creative Skills→
openaiopenai
104.9k

skill-creator

Generate standardized SKILL.md templates and scaffolding for Codex Skill definitions.

Official
Advanced
zaiyemeiyou404zaiyemeiyou404

architecture-diagram

Generate standalone HTML architecture diagrams from SVG data using Python.

Community
Advanced
adobe-summit2026-l613adobe-summit2026-l613

generate-import-html

Convert authoring analysis into structured HTML export for AEM Edge Delivery.

Official
Intermediate
pascallammerspascallammers
1

artifacts-builder

Generate interactive, self-contained HTML/JavaScript artifacts for embedding or standalone use.

Community
Basic