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.