mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-04-25 00:51:20 +00:00
19c589a20b
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.
174 lines
6.6 KiB
HTML
174 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Concept Diagram</title>
|
|
<style>
|
|
:root {
|
|
--text-primary: #1a1a18;
|
|
--text-secondary: #5f5e5a;
|
|
--text-tertiary: #88877f;
|
|
--bg-primary: #ffffff;
|
|
--bg-secondary: #f6f5f0;
|
|
--bg-tertiary: #eeedeb;
|
|
--border: rgba(0,0,0,0.15);
|
|
--border-hover: rgba(0,0,0,0.3);
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--text-primary: #e8e6de;
|
|
--text-secondary: #b4b2a9;
|
|
--text-tertiary: #888780;
|
|
--bg-primary: #1a1a18;
|
|
--bg-secondary: #2c2c2a;
|
|
--bg-tertiary: #3d3d3a;
|
|
--border: rgba(255,255,255,0.15);
|
|
--border-hover: rgba(255,255,255,0.3);
|
|
}
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
background: var(--bg-tertiary);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
min-height: 100vh;
|
|
padding: 40px 20px;
|
|
}
|
|
.card {
|
|
background: var(--bg-primary);
|
|
border-radius: 16px;
|
|
padding: 32px;
|
|
max-width: 780px;
|
|
width: 100%;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
|
}
|
|
h1 {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
margin-bottom: 8px;
|
|
}
|
|
.subtitle {
|
|
font-size: 13px;
|
|
color: var(--text-tertiary);
|
|
margin-bottom: 24px;
|
|
}
|
|
svg { width: 100%; height: auto; }
|
|
|
|
/* === SVG Design System Classes === */
|
|
|
|
/* Text classes */
|
|
.t { font-family: system-ui, -apple-system, sans-serif; font-size: 14px; fill: var(--text-primary); }
|
|
.ts { font-family: system-ui, -apple-system, sans-serif; font-size: 12px; fill: var(--text-secondary); }
|
|
.th { font-family: system-ui, -apple-system, sans-serif; font-size: 14px; fill: var(--text-primary); font-weight: 500; }
|
|
|
|
/* Neutral box */
|
|
.box { fill: var(--bg-secondary); stroke: var(--border); stroke-width: 0.5px; }
|
|
|
|
/* Arrow */
|
|
.arr { stroke: var(--text-secondary); stroke-width: 1.5px; fill: none; }
|
|
|
|
/* Leader line */
|
|
.leader { stroke: var(--text-tertiary); stroke-width: 0.5px; stroke-dasharray: 4 3; fill: none; }
|
|
|
|
/* Clickable node */
|
|
.node { cursor: pointer; transition: opacity 0.15s; }
|
|
.node:hover { opacity: 0.82; }
|
|
|
|
/* === Color Ramp Classes (light mode) === */
|
|
.c-purple > rect, .c-purple > circle, .c-purple > ellipse { fill: #EEEDFE; stroke: #534AB7; }
|
|
.c-purple > .th, .c-purple > text.th { fill: #3C3489; }
|
|
.c-purple > .ts, .c-purple > text.ts { fill: #534AB7; }
|
|
.c-purple > .t, .c-purple > text.t { fill: #3C3489; }
|
|
|
|
.c-teal > rect, .c-teal > circle, .c-teal > ellipse { fill: #E1F5EE; stroke: #0F6E56; }
|
|
.c-teal > .th, .c-teal > text.th { fill: #085041; }
|
|
.c-teal > .ts, .c-teal > text.ts { fill: #0F6E56; }
|
|
.c-teal > .t, .c-teal > text.t { fill: #085041; }
|
|
|
|
.c-coral > rect, .c-coral > circle, .c-coral > ellipse { fill: #FAECE7; stroke: #993C1D; }
|
|
.c-coral > .th, .c-coral > text.th { fill: #712B13; }
|
|
.c-coral > .ts, .c-coral > text.ts { fill: #993C1D; }
|
|
.c-coral > .t, .c-coral > text.t { fill: #712B13; }
|
|
|
|
.c-pink > rect, .c-pink > circle, .c-pink > ellipse { fill: #FBEAF0; stroke: #993556; }
|
|
.c-pink > .th, .c-pink > text.th { fill: #72243E; }
|
|
.c-pink > .ts, .c-pink > text.ts { fill: #993556; }
|
|
.c-pink > .t, .c-pink > text.t { fill: #72243E; }
|
|
|
|
.c-gray > rect, .c-gray > circle, .c-gray > ellipse { fill: #F1EFE8; stroke: #5F5E5A; }
|
|
.c-gray > .th, .c-gray > text.th { fill: #444441; }
|
|
.c-gray > .ts, .c-gray > text.ts { fill: #5F5E5A; }
|
|
.c-gray > .t, .c-gray > text.t { fill: #444441; }
|
|
|
|
.c-blue > rect, .c-blue > circle, .c-blue > ellipse { fill: #E6F1FB; stroke: #185FA5; }
|
|
.c-blue > .th, .c-blue > text.th { fill: #0C447C; }
|
|
.c-blue > .ts, .c-blue > text.ts { fill: #185FA5; }
|
|
.c-blue > .t, .c-blue > text.t { fill: #0C447C; }
|
|
|
|
.c-green > rect, .c-green > circle, .c-green > ellipse { fill: #EAF3DE; stroke: #3B6D11; }
|
|
.c-green > .th, .c-green > text.th { fill: #27500A; }
|
|
.c-green > .ts, .c-green > text.ts { fill: #3B6D11; }
|
|
.c-green > .t, .c-green > text.t { fill: #27500A; }
|
|
|
|
.c-amber > rect, .c-amber > circle, .c-amber > ellipse { fill: #FAEEDA; stroke: #854F0B; }
|
|
.c-amber > .th, .c-amber > text.th { fill: #633806; }
|
|
.c-amber > .ts, .c-amber > text.ts { fill: #854F0B; }
|
|
.c-amber > .t, .c-amber > text.t { fill: #633806; }
|
|
|
|
.c-red > rect, .c-red > circle, .c-red > ellipse { fill: #FCEBEB; stroke: #A32D2D; }
|
|
.c-red > .th, .c-red > text.th { fill: #791F1F; }
|
|
.c-red > .ts, .c-red > text.ts { fill: #A32D2D; }
|
|
.c-red > .t, .c-red > text.t { fill: #791F1F; }
|
|
|
|
/* === Dark mode overrides === */
|
|
@media (prefers-color-scheme: dark) {
|
|
.c-purple > rect, .c-purple > circle, .c-purple > ellipse { fill: #3C3489; stroke: #AFA9EC; }
|
|
.c-purple > .th, .c-purple > text.th { fill: #CECBF6; }
|
|
.c-purple > .ts, .c-purple > text.ts { fill: #AFA9EC; }
|
|
|
|
.c-teal > rect, .c-teal > circle, .c-teal > ellipse { fill: #085041; stroke: #5DCAA5; }
|
|
.c-teal > .th, .c-teal > text.th { fill: #9FE1CB; }
|
|
.c-teal > .ts, .c-teal > text.ts { fill: #5DCAA5; }
|
|
|
|
.c-coral > rect, .c-coral > circle, .c-coral > ellipse { fill: #712B13; stroke: #F0997B; }
|
|
.c-coral > .th, .c-coral > text.th { fill: #F5C4B3; }
|
|
.c-coral > .ts, .c-coral > text.ts { fill: #F0997B; }
|
|
|
|
.c-pink > rect, .c-pink > circle, .c-pink > ellipse { fill: #72243E; stroke: #ED93B1; }
|
|
.c-pink > .th, .c-pink > text.th { fill: #F4C0D1; }
|
|
.c-pink > .ts, .c-pink > text.ts { fill: #ED93B1; }
|
|
|
|
.c-gray > rect, .c-gray > circle, .c-gray > ellipse { fill: #444441; stroke: #B4B2A9; }
|
|
.c-gray > .th, .c-gray > text.th { fill: #D3D1C7; }
|
|
.c-gray > .ts, .c-gray > text.ts { fill: #B4B2A9; }
|
|
|
|
.c-blue > rect, .c-blue > circle, .c-blue > ellipse { fill: #0C447C; stroke: #85B7EB; }
|
|
.c-blue > .th, .c-blue > text.th { fill: #B5D4F4; }
|
|
.c-blue > .ts, .c-blue > text.ts { fill: #85B7EB; }
|
|
|
|
.c-green > rect, .c-green > circle, .c-green > ellipse { fill: #27500A; stroke: #97C459; }
|
|
.c-green > .th, .c-green > text.th { fill: #C0DD97; }
|
|
.c-green > .ts, .c-green > text.ts { fill: #97C459; }
|
|
|
|
.c-amber > rect, .c-amber > circle, .c-amber > ellipse { fill: #633806; stroke: #EF9F27; }
|
|
.c-amber > .th, .c-amber > text.th { fill: #FAC775; }
|
|
.c-amber > .ts, .c-amber > text.ts { fill: #EF9F27; }
|
|
|
|
.c-red > rect, .c-red > circle, .c-red > ellipse { fill: #791F1F; stroke: #F09595; }
|
|
.c-red > .th, .c-red > text.th { fill: #F7C1C1; }
|
|
.c-red > .ts, .c-red > text.ts { fill: #F09595; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<h1><!-- DIAGRAM TITLE HERE --></h1>
|
|
<p class="subtitle"><!-- OPTIONAL SUBTITLE HERE --></p>
|
|
<!-- PASTE SVG HERE -->
|
|
</div>
|
|
</body>
|
|
</html>
|