skills.rest
Yangel-hide
Yangel-hideCOMMUNITY
Explore all skills by this author →
GitHub

concept-diagrams

Create standalone HTML/SVG diagrams for multiple educational disciplines with light/dark mode support.

Updated May 3, 2026
Search Tags:#education#templates#svg#diagrams#dark-mode#visual-language
One-click install
npx skills add https://github.com/Yangel-hide/video-production-planner-agent --skill concept-diagrams-yangel-hide
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: concept-diagrams
Source: https://github.com/Yangel-hide/video-production-planner-agent/tree/main/optional-skills/creative/concept-diagrams
Command: npx skills add https://github.com/Yangel-hide/video-production-planner-agent --skill concept-diagrams-yangel-hide

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Generate consistent, self-contained SVG diagrams using a unified educational visual language, replacing ad-hoc, inconsistent visuals across disciplines.

Core Features & Use Cases

  • Generates standalone, light/dark-ready HTML/SVG diagrams with a single HTML wrapper.
  • Provides a unified 9-ramp color system and typography for clear, educational visuals.
  • Suitable for physics, chemistry, engineering, anatomy, floor plans, and narrative journeys; supports gallery-style diagrams and reference materials.

Quick Start

Copy the provided template, replace the SVG with your own diagram, and render with the skill_view helper to generate a standalone HTML.

Frequently Asked Questions about concept-diagrams

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

FAQPage Schema
How do I create consistent SVG diagrams for educational materials?▼

You create consistent SVG diagrams using a unified educational visual language with a 9-ramp color system and typography. This replaces ad-hoc visuals across disciplines by providing standardized, self-contained HTML/SVG outputs.

Can I generate SVG diagrams that support both light and dark mode?▼

Yes, you can generate SVG diagrams with built-in light and dark mode support. They are wrapped in standalone HTML to render identically in modern browsers with automatic theme adaptation and a minimal footprint.

What subjects are supported for generating educational SVG diagrams?▼

Educational SVG diagrams support physics, chemistry, engineering, anatomy, floor plans, and narrative journeys. The unified visual language accommodates these disciplines for gallery-style diagrams and reference materials.

How do I render standalone HTML SVG diagrams from a template?▼

To render standalone HTML SVG diagrams, copy the provided template, replace the SVG with your own diagram, and render with the skill_view helper. This generates standalone HTML/SVG diagrams that render identically across modern browsers.

Do I need any dependencies to create self-contained SVG diagrams?▼

No dependencies are required to create self-contained SVG diagrams. Optional resources under scripts, references, and assets can extend capabilities, while frontmatter ensures discoverable and repeatable results.

Related Skills

Explore More Education & Research Skills→
devMoezdevMoez
1

concept-diagrams

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

Community
Basic
richardnguyen0715richardnguyen0715

concept-diagrams

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

Community
Intermediate
dmccrearydmccreary
90

mermaid-generator

Generate interactive Mermaid workflow diagrams as standalone HTML MicroSim packages.

Community
Basic
sanky369sanky369
29

color-system

Create cohesive color systems with accessible theming and dark-mode support.

Community
Advanced