concept-diagrams

Generates flat, minimal SVG diagrams for educational subjects with semantic colors and dark mode support.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/THTProtocol/lastochka --skill concept-diagrams-thtprotocol
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: concept-diagrams
Source: https://github.com/THTProtocol/lastochka/tree/main/optional-skills/creative/concept-diagrams
Command: npx skills add https://github.com/THTProtocol/lastochka --skill concept-diagrams-thtprotocol

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill solves the problem of creating high-quality, visually consistent SVG diagrams for educational and non-software visuals, offering a streamlined approach to diagram creation with a focus on educational aesthetics.

Core Features & Use Cases

  • Educational Visuals: Generates flat, minimal SVG diagrams suitable for educational purposes, including physics, chemistry, biology, and anatomy.
  • General-Purpose Diagrams: Provides a general-purpose SVG diagram fallback with a clean educational look for various subjects.
  • Customization: Offers a design system with 9 semantic color ramps, sentence-case typography, and automatic dark mode.
  • Use Case: Ideal for creating diagrams for physics setups, chemistry mechanisms, math curves, and more, ensuring they are accessible and visually appealing.

Quick Start

Use the concept-diagrams skill to generate a diagram for a physics setup. Provide the necessary details in the command, such as the type of setup and components involved.

Frequently Asked Questions about concept-diagrams

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

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

You can generate clean, minimal SVG diagrams by describing your physics or chemistry setup. The skill produces flat, educational visuals using 9 semantic color ramps and sentence-case typography, automatically adapting to dark mode.

What is the best way to create dark mode compatible educational diagrams?▼

Creating dark mode compatible educational diagrams is handled automatically by the skill. It uses a unified educational visual language with light/dark-aware SVG generation, ensuring your biology and anatomy visuals remain accessible without manual theme adjustments.

Can I use this for general-purpose diagrams outside of physics and chemistry?▼

Yes, you can use this for general-purpose diagrams beyond physics and chemistry. It provides a clean educational look fallback for various subjects, applying its unified visual language with 9 semantic color ramps to any non-software visual you need.

Does the SVG output follow a specific visual style for educational content?▼

The SVG output follows a flat, minimal visual style designed specifically for educational content. It utilizes a unified visual language featuring 9 semantic color ramps and sentence-case typography to ensure visuals are clean and accessible.

How do I customize the colors in my generated educational SVG diagrams?▼

Customizing colors in your generated educational SVG diagrams is managed through 9 built-in semantic color ramps. The skill applies these ramps automatically based on the educational context, maintaining visual consistency across physics, chemistry, and biology visuals without manual color picking.