skills.rest
JamesFincher
JamesFincherCOMMUNITY
Explore all skills by this author →
GitHub

concept-diagrams

Generate standalone HTML SVG diagrams with light/dark styling for educational topics.

Updated May 4, 2026
Search Tags:#data visualization#svg#dark mode#diagram generation#standalone html#educational visuals#mechanism diagrams
One-click install
npx skills add https://github.com/JamesFincher/gengar --skill concept-diagrams-jamesfincher
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: concept-diagrams
Source: https://github.com/JamesFincher/gengar/tree/main/optional-skills/creative/concept-diagrams
Command: npx skills add https://github.com/JamesFincher/gengar --skill concept-diagrams-jamesfincher

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you turn explanations into clear, consistent educational visuals without needing graphic design skills or manual SVG/CSS work.

Core Features & Use Cases

  • Generates production-quality SVG diagram HTML: Produces a standalone HTML file that renders consistently across modern browsers.
  • Uses a unified educational design system: Flat, minimal, dark-mode-aware visuals with consistent typography, spacing, strokes, and arrow styling.
  • Covers broad subject matter with ready patterns: Works well for physics/chemistry/biology mechanisms, math/quantitative curves, physical cross-sections, floor plans, anatomy, narrative journeys, and system hub-spoke integrations.

Quick Start

Use the concept-diagrams skill to generate an HTML page of an educational SN2 reaction mechanism with automatic light/dark styling.

Frequently Asked Questions about concept-diagrams

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

FAQPage Schema
How do I generate educational SVG diagrams for physics and chemistry topics?▼

Generate educational SVG diagrams by applying a unified design system that produces flat, minimal, dark-mode-aware visuals. The output is a standalone HTML file with consistent typography, strokes, and arrow markers for physics, chemistry, and biology content.

Can I create dark mode-aware mechanism diagrams without manual SVG coding?▼

Yes, you can create dark mode-aware mechanism diagrams without manual SVG coding. The system automatically applies light/dark styling to flat, minimal educational visuals exported as self-contained HTML files.

What is the best way to export standalone HTML educational visuals?▼

The best way to export standalone HTML educational visuals is using a diagram generation design system that wraps SVG content in a template. It requires no external runtime dependencies besides the hosting page CSS expectations.

Does this SVG diagram generator support biology and system-integration topics?▼

Yes, the SVG diagram generator supports biology and system-integration topics. It includes ready patterns for physical cross-sections, anatomy, narrative journeys, and system hub-spoke integration diagrams.

Are there any external runtime dependencies required for the generated HTML diagrams?▼

No external runtime dependencies are required for the generated HTML diagrams. The output is a single self-contained HTML file that renders consistently across modern browsers using only the hosting page CSS expectations.

Related Skills

Explore More Design & Creative Skills→
jaredcroxtonjaredcroxton

baoyu-infographic

Convert source content into layout-aware infographic images with style references.

Community
Advanced
AissenLiuAissenLiu

concept-diagrams

Generate standalone HTML SVG diagrams with light and dark mode support.

Community
Advanced
jkzleondjkzleond

converting-markdown

Convert Markdown documents into HTML with ASCII diagrams rendered as SVG.

Community
Advanced
NITISH-gitbitNITISH-gitbit

concept-diagrams

Generate flat, minimal SVG diagrams with semantic color ramps and automatic dark mode.

Community
Intermediate