mirror of https://github.com/NousResearch/hermes-agent.git synced 2026-04-26 01:01:40 +00:00

Teknium 19c589a20b refactor(concept-diagrams): rename + tighten v1k22's skill for merge

Salvage of PR #11045 (original by v1k22). Changes on top of the
original commit:

- Rename 'architecture-visualization-svg-diagrams' -> 'concept-diagrams'
  to differentiate from the existing architecture-diagram skill.
  architecture-diagram stays as the dark-themed Cocoon-style option for
  software/infra; concept-diagrams covers physics, chemistry, math,
  engineering, physical objects, and educational visuals.
- Trigger description scoped to actual use cases; removed the 'always
  use this skill' language and long phrase-capture list to stop
  colliding with architecture-diagram, excalidraw, generative-widgets,
  manim-video.
- Default output is now a standalone self-contained HTML file (works
  offline, no server). The preview server is opt-in and no longer part
  of the default workflow.
- When the server IS used: bind to 127.0.0.1 instead of 0.0.0.0 (was a
  LAN exposure hazard on shared networks) and let the OS pick a free
  ephemeral port instead of hard-coding 22223 (collision prone).
- Shrink SKILL.md from 1540 to 353 lines by extracting reusable
  material into linked files:
    - templates/template.html (host page with full CSS design system)
    - references/physical-shape-cookbook.md
    - references/infrastructure-patterns.md
    - references/dashboard-patterns.md
  All 15 examples kept intact.
- Add dhandhalyabhavik@gmail.com -> v1k22 to AUTHOR_MAP.

Preserves v1k22's authorship on the underlying commit.

2026-04-16 20:39:55 -07:00

2 KiB

Raw Blame History

Physical Shape Cookbook

Guidance for drawing physical objects (vehicles, buildings, hardware, mechanical systems, anatomy) — when rectangles aren't enough.

Shape selection

Physical form	SVG element	Example use
Curved bodies	`<path>` with Q/C curves	Fuselage, tanks, pipes
Tapered/angular shapes	`<polygon>`	Wings, fins, wedges
Cylindrical/round	`<ellipse>`, `<circle>`	Engines, wheels, buttons
Linear structures	`<line>`	Struts, beams, connections
Internal sections	`<rect>` inside parent	Compartments, rooms
Dashed boundaries	`stroke-dasharray`	Hidden parts, fuel tanks

Layering approach

Draw outer structure first (fuselage, frame, hull)
Add internal sections on top (cabins, compartments)
Add detail elements (engines, wheels, controls)
Add leader lines with labels

Semantic CSS classes (instead of c-* ramps)

For physical diagrams, define component-specific classes directly rather than applying c-* color classes. This makes each part self-documenting and lets you keep a restrained palette:

.fuselage { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1; }
.wing     { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
.engine   { fill: #FAECE7; stroke: #993C1D; stroke-width: 1; }

Add these to a local <style> inside the SVG (or extend the host page's <style> block). The light-mode/dark-mode pattern still works — use the CSS variables from the template (var(--bg-secondary), var(--border), var(--text-primary)) if you want dark-mode awareness.

Reference examples

Look at these example files for working physical-diagram patterns:

examples/commercial-aircraft-structure.md — fuselage curves + tapered wings + ellipse engines
examples/wind-turbine-structure.md — underground foundation, tubular tower, nacelle cutaway
examples/smartphone-layer-anatomy.md — exploded-view stack with alternating labels
examples/apartment-floor-plan-conversion.md — walls, doors, windows, proposed changes

2 KiB Raw Blame History