docs(skills): make descriptions self-contained, not cross-dependent

Previous pass assumed both skills would always be loaded together, so
each description pointed at the other ('use concept-diagrams instead').
That breaks when only one skill is active — the agent reads 'use the
other skill' and there is no other skill.

Now each skill's description and scope section is fully self-contained:

- States what it's best suited for
- Lists subjects where a more specialized skill (if available) would be
  a better fit, naming them only as 'consider X if available'
- Explicitly offers itself as a general SVG diagram fallback when no
  more specialized skill exists

An agent loading either skill alone gets unambiguous guidance; an
agent with both loaded still gets useful routing via the 'consider X
if available' hints and the related_skills metadata.
This commit is contained in:
Teknium 2026-04-16 20:37:28 -07:00 committed by Teknium
parent 7d535969ff
commit fdefd98aa3
2 changed files with 32 additions and 30 deletions

View file

@ -1,6 +1,6 @@
---
name: concept-diagrams
description: Generate flat, minimal light/dark-aware SVG diagrams for educational and non-software visuals — physics setups, chemistry mechanisms, math curves, physical objects (aircraft, turbines, smartphones, mechanical watches), anatomy, floor plans, cross-sections, narrative journeys (lifecycle of X, process of Y), hub-spoke integrations (smart city, IoT), and exploded layer views. Uses 9 semantic color ramps with automatic light/dark mode and sentence-case typography. Single self-contained HTML file. Use this when the goal is explaining a concept, mechanism, or physical structure to a reader — textbook-style visuals for any domain outside software infrastructure. For software system architecture specifically (frontend/backend/database/cloud services, microservice topology, deployment diagrams), use the `architecture-diagram` skill instead — it has a darker palette and component-type color semantics tuned for software stacks.
description: Generate flat, minimal light/dark-aware SVG diagrams as standalone HTML files, using a unified educational visual language with 9 semantic color ramps, sentence-case typography, and automatic dark mode. Best suited for educational and non-software visuals — physics setups, chemistry mechanisms, math curves, physical objects (aircraft, turbines, smartphones, mechanical watches), anatomy, floor plans, cross-sections, narrative journeys (lifecycle of X, process of Y), hub-spoke system integrations (smart city, IoT), and exploded layer views. If a more specialized skill exists for the subject (dedicated software/cloud architecture, hand-drawn sketches, animated explainers, etc.), prefer that — otherwise this skill can also serve as a general-purpose SVG diagram fallback with a clean educational look. Ships with 15 example diagrams.
version: 0.1.0
author: v1k22 (original PR), ported into hermes-agent
license: MIT
@ -15,27 +15,24 @@ metadata:
Generate production-quality SVG diagrams with a unified flat, minimal design system. Output is a single self-contained HTML file that renders identically in any modern browser, with automatic light/dark mode.
**When to use this skill vs `architecture-diagram`:**
## Scope
| Use `concept-diagrams` for | Use `architecture-diagram` for |
|----------------------------|--------------------------------|
| Physics, chemistry, math, biology | Software system architecture |
| Physical objects (aircraft, turbines, watches, phones) | Cloud infrastructure (VPC, regions, services) |
| Anatomy, cross-sections, exploded views | Microservice / service mesh topology |
| Floor plans, narrative journeys, lifecycles | Database + API layer diagrams |
| Educational / textbook-style visuals | Security groups, message buses |
| Flat, light/dark-adaptive aesthetic | Dark-themed tech/infra aesthetic |
**Best suited for:**
- Physics setups, chemistry mechanisms, math curves, biology
- Physical objects (aircraft, turbines, smartphones, mechanical watches, cells)
- Anatomy, cross-sections, exploded layer views
- Floor plans, architectural conversions
- Narrative journeys (lifecycle of X, process of Y)
- Hub-spoke system integrations (smart city, IoT networks, electricity grids)
- Educational / textbook-style visuals in any domain
- Quantitative charts (grouped bars, energy profiles)
If in doubt: is the subject software/cloud infra? Use `architecture-diagram`. Anything else — physical, scientific, educational — this skill.
**Look elsewhere first for:**
- Dedicated software / cloud infrastructure architecture with a dark tech aesthetic (consider `architecture-diagram` if available)
- Hand-drawn whiteboard sketches (consider `excalidraw` if available)
- Animated explainers or video output (consider an animation skill)
Subjects this skill handles well:
- physical objects (aircraft, turbines, watches, smartphones, cells)
- scientific mechanisms (reactions, physics setups, electrical circuits)
- processes and flows (ETL, CI/CD, workflows, narrative journeys)
- general system topologies when a textbook/educational style is preferred (smart city hub-spoke, grids)
- floor plans, exploded views, cross-sections
- quantitative charts (grouped bars, energy profiles)
If a more specialized skill is available for the subject, prefer that. If none fits, this skill can serve as a general-purpose SVG diagram fallback — the output will carry the clean educational aesthetic described below, which is a reasonable default for almost any subject.
## Workflow