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.
43 lines
1.8 KiB
Markdown
43 lines
1.8 KiB
Markdown
# Dashboard Patterns
|
|
|
|
Building blocks for UI/dashboard mockups inside a concept diagram — admin panels, monitoring dashboards, control interfaces, status displays.
|
|
|
|
## Pattern
|
|
|
|
A "screen" is a rounded dark rect inside a lighter "frame" rect, with chart/gauge/indicator elements nested on top.
|
|
|
|
```xml
|
|
<!-- Monitor frame -->
|
|
<rect class="dashboard" x="0" y="0" width="200" height="120" rx="8"/>
|
|
<!-- Screen -->
|
|
<rect class="screen" x="10" y="10" width="180" height="85" rx="4"/>
|
|
<!-- Mini bar chart -->
|
|
<rect class="screen-content" x="18" y="18" width="50" height="35" rx="2"/>
|
|
<rect class="screen-chart" x="22" y="38" width="8" height="12"/>
|
|
<rect class="screen-chart" x="33" y="32" width="8" height="18"/>
|
|
<!-- Gauge -->
|
|
<circle class="screen-bar" cx="100" cy="35" r="12"/>
|
|
<text x="100" y="39" text-anchor="middle" fill="#E8E6DE" style="font-size:8px">78%</text>
|
|
<!-- Status indicators -->
|
|
<circle cx="35" cy="74" r="6" fill="#97C459"/> <!-- green = ok -->
|
|
<circle cx="75" cy="74" r="6" fill="#EF9F27"/> <!-- amber = warning -->
|
|
<circle cx="115" cy="74" r="6" fill="#E24B4A"/> <!-- red = alert -->
|
|
```
|
|
|
|
## CSS
|
|
|
|
```css
|
|
.dashboard { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1.5; }
|
|
.screen { fill: #1a1a18; }
|
|
.screen-content { fill: #2C2C2A; }
|
|
.screen-chart { fill: #5DCAA5; }
|
|
.screen-bar { fill: #7F77DD; }
|
|
.screen-alert { fill: #E24B4A; }
|
|
```
|
|
|
|
## Tips
|
|
|
|
- Dashboard screens stay dark in both light and dark mode — they represent actual monitor glass.
|
|
- Keep on-screen text small (`font-size:8px` or `10px`) and high-contrast (near-white fill on dark).
|
|
- Use the status triad green/amber/red consistently — OK / warning / alert.
|
|
- A single dashboard usually sits on top of an infrastructure hub diagram as a unified view (see `examples/smart-city-infrastructure.md`).
|