From 9362ce2575e00f5a795285b74e79d54c02e1326c Mon Sep 17 00:00:00 2001 From: Siddharth Balyan <52913345+alt-glitch@users.noreply.github.com> Date: Fri, 19 Jun 2026 13:32:31 +0530 Subject: [PATCH] feat(skills): add html-artifact skill, fold in sketch + architecture-diagram + concept-diagrams (#48899) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(skills): add html-artifact skill, fold in sketch + architecture-diagram + concept-diagrams Adds a unified `html-artifact` creative skill that produces self-contained, single-file HTML artifacts — concept explainers, implementation plans, status/incident reports, code-review walkthroughs, technical + educational SVG diagrams, multi-variant design comparisons, and throwaway editors that export their state back to the clipboard. Grounded in Anthropic's html-effectiveness gallery (MIT); the house style (token block, serif/sans/ mono split, hand-rolled diffs, inline-SVG diagrams, graceful degradation) is distilled from reading all 20 reference files. Supersedes and removes three overlapping skills, folding their unique value in: - sketch -> the fidelity dial (throwaway vs presentation) + the multi-variant comparison layouts + the browser-vision verify loop (references/fidelity-and-verify.md) - architecture-diagram-> the dark "infra" token variant + double-rect masking + semantic component palette (references/dark-tech.md, templates/diagram.html infra mode) - concept-diagrams -> the 9-ramp educational color system + the concept archetype library (references/concept-archetypes.md, the light design system in templates/diagram.html) Structure: - SKILL.md (description exactly 60 chars), 6 references, 3 templates - templates verified by headless-Chrome render + vision inspection - editor export logic (file://-safe clipboard, Promise-normalized) verified in node Cross-references updated in claude-design (new disambiguation table row drawing the design-taste vs information-artifact boundary), design-md, pretext, spike, and kanban-video-orchestrator. Website skill docs + catalogs regenerated; stale EN/zh-Hans per-skill pages pruned and i18n cross-refs fixed. Not folded (intentionally orthogonal): excalidraw (.excalidraw JSON), p5js (generative canvas), claude-design / popular-web-designs / design-md (visual design taste / brand vocab / token spec). * feat(skills): ship html-effectiveness gallery as fetched reference examples Add scripts/fetch-examples.sh (idempotent clone/pull of Anthropic's MIT html-effectiveness gallery) + references/examples.md mapping each of the 20 example files to a mode so the agent reads the right worked example. The clone lands in references/examples/ and is gitignored (it's a 384KB upstream repo, not vendored). SKILL.md workflow + reference list now point at it; falls back to the distilled pattern references when offline. * feat(skills): make reading a gallery example a required authoring step Reading the matching html-effectiveness example is now workflow step 2 (was an optional aside in step 3): fetch the gallery, read_file the file for your mode, mirror its structure. Models skip optional steps; the examples are the ground truth, so consulting one is mandatory. Added an 'Example' column to the mode->build quick-reference table and a 'don't skip the example' pitfall. Also dogfooded the skill: read 03-code-review-pr.html and 13-flowchart-diagram.html raw and reconciled the distilled references against source — aligned diff-row tint opacity to the source's 0.15 (was 0.18) and added the .ctx/.hunk rows in house-style.md + base.html so they match 03-code-review-pr.html verbatim. * docs(skills): explain the consolidation + bundled-vs-optional rationale The supersession note only stated *what* was folded, not *why* the prune is sound. Expand SKILL.md's intro into a 'Why this skill exists' section: the three former skills emitted the same artifact and overlapped, so consolidating removes which-one-do-I-load ambiguity; and the optional->bundled promotion of concept-diagrams is footprint-safe because this skill has zero deps (only cost is the 60-char description; everything else is progressive-disclosure). States the bundling dividing line explicitly: zero install cost + broadly useful gets bundled, real install cost (hyperframes: Node+FFmpeg+Chromium) stays optional. Regenerated website per-skill page to match. --- .../creative/concept-diagrams/SKILL.md | 362 ----------------- .../apartment-floor-plan-conversion.md | 244 ----------- .../examples/automated-password-reset-flow.md | 276 ------------- .../autonomous-llm-research-agent-flow.md | 240 ----------- .../banana-journey-tree-to-smoothie.md | 161 -------- .../examples/commercial-aircraft-structure.md | 209 ---------- .../examples/cpu-ooo-microarchitecture.md | 236 ----------- .../examples/electricity-grid-flow.md | 182 --------- .../feature-film-production-pipeline.md | 172 -------- .../hospital-emergency-department-flow.md | 165 -------- .../ml-benchmark-grouped-bar-chart.md | 114 ------ .../examples/place-order-uml-sequence.md | 325 --------------- .../examples/smart-city-infrastructure.md | 173 -------- .../examples/smartphone-layer-anatomy.md | 154 ------- .../examples/sn2-reaction-mechanism.md | 247 ------------ .../examples/wind-turbine-structure.md | 338 ---------------- .../references/dashboard-patterns.md | 43 -- .../references/infrastructure-patterns.md | 144 ------- .../references/physical-shape-cookbook.md | 42 -- .../concept-diagrams/templates/template.html | 174 -------- .../kanban-video-orchestrator/SKILL.md | 2 +- .../references/intake.md | 3 +- .../references/role-archetypes.md | 5 +- .../references/tool-matrix.md | 4 +- skills/creative/architecture-diagram/SKILL.md | 148 ------- .../templates/template.html | 319 --------------- skills/creative/claude-design/SKILL.md | 12 +- skills/creative/design-md/SKILL.md | 2 +- skills/creative/html-artifact/SKILL.md | 184 +++++++++ .../html-artifact/references/.gitignore | 3 + .../references/concept-archetypes.md | 94 +++++ .../html-artifact/references/dark-tech.md | 92 +++++ .../html-artifact/references/examples.md | 64 +++ .../references/fidelity-and-verify.md | 78 ++++ .../html-artifact/references/house-style.md | 179 +++++++++ .../html-artifact/references/svg-diagrams.md | 123 ++++++ .../references/throwaway-editors.md | 114 ++++++ .../html-artifact/scripts/fetch-examples.sh | 43 ++ .../html-artifact/templates/base.html | 104 +++++ .../html-artifact/templates/diagram.html | 127 ++++++ .../html-artifact/templates/editor.html | 120 ++++++ skills/creative/pretext/SKILL.md | 2 +- skills/creative/sketch/SKILL.md | 218 ---------- skills/software-development/spike/SKILL.md | 2 +- .../docs/reference/optional-skills-catalog.md | 1 - website/docs/reference/skills-catalog.md | 3 +- .../autonomous-ai-agents-hermes-agent.md | 4 +- .../creative/creative-architecture-diagram.md | 165 -------- .../creative/creative-claude-design.md | 12 +- .../bundled/creative/creative-design-md.md | 2 +- .../creative/creative-html-artifact.md | 202 ++++++++++ .../bundled/creative/creative-pretext.md | 2 +- .../bundled/creative/creative-sketch.md | 238 ----------- .../creative/creative-touchdesigner-mcp.md | 2 +- .../skills/bundled/email/email-himalaya.md | 5 + .../bundled/github/github-github-auth.md | 4 +- .../github/github-github-code-review.md | 4 +- .../bundled/github/github-github-issues.md | 4 +- .../github/github-github-pr-workflow.md | 4 +- .../github/github-github-repo-management.md | 4 +- .../skills/bundled/media/media-gif-search.md | 2 +- .../note-taking/note-taking-obsidian.md | 2 +- .../productivity/productivity-airtable.md | 4 +- .../productivity/productivity-notion.md | 4 +- .../productivity-teams-meeting-pipeline.md | 2 +- .../bundled/research/research-llm-wiki.md | 2 +- .../research-research-paper-writing.md | 2 +- ...tware-development-node-inspect-debugger.md | 2 +- .../software-development-python-debugpy.md | 2 +- .../software-development-spike.md | 2 +- .../autonomous-ai-agents-honcho.md | 4 +- .../blockchain/blockchain-hyperliquid.md | 4 +- .../creative/creative-concept-diagrams.md | 379 ------------------ .../creative-kanban-video-orchestrator.md | 4 +- .../optional/devops/devops-pinggy-tunnel.md | 2 +- .../skills/optional/devops/devops-watchers.md | 2 +- .../skills/optional/mcp/mcp-fastmcp.md | 2 +- .../payments/payments-stripe-projects.md | 2 +- .../productivity/productivity-canvas.md | 2 +- .../productivity/productivity-shopify.md | 2 +- .../productivity/productivity-siyuan.md | 2 +- .../productivity/productivity-telephony.md | 8 +- .../research/research-gitnexus-explorer.md | 2 +- .../skills/optional/research/research-qmd.md | 2 +- .../optional/security/security-1password.md | 2 +- .../optional/security/security-godmode.md | 2 +- ...software-development-rest-graphql-debug.md | 2 +- .../reference/optional-skills-catalog.md | 1 - .../current/reference/skills-catalog.md | 2 - .../creative/creative-architecture-diagram.md | 165 -------- .../creative/creative-claude-design.md | 2 +- .../bundled/creative/creative-design-md.md | 2 +- .../bundled/creative/creative-pretext.md | 2 +- .../bundled/creative/creative-sketch.md | 238 ----------- .../software-development-spike.md | 2 +- .../creative/creative-concept-diagrams.md | 379 ------------------ .../creative-kanban-video-orchestrator.md | 2 +- website/sidebars.ts | 5 +- 98 files changed, 1610 insertions(+), 6336 deletions(-) delete mode 100644 optional-skills/creative/concept-diagrams/SKILL.md delete mode 100644 optional-skills/creative/concept-diagrams/examples/apartment-floor-plan-conversion.md delete mode 100644 optional-skills/creative/concept-diagrams/examples/automated-password-reset-flow.md delete mode 100644 optional-skills/creative/concept-diagrams/examples/autonomous-llm-research-agent-flow.md delete mode 100644 optional-skills/creative/concept-diagrams/examples/banana-journey-tree-to-smoothie.md delete mode 100644 optional-skills/creative/concept-diagrams/examples/commercial-aircraft-structure.md delete mode 100644 optional-skills/creative/concept-diagrams/examples/cpu-ooo-microarchitecture.md delete mode 100644 optional-skills/creative/concept-diagrams/examples/electricity-grid-flow.md delete mode 100644 optional-skills/creative/concept-diagrams/examples/feature-film-production-pipeline.md delete mode 100644 optional-skills/creative/concept-diagrams/examples/hospital-emergency-department-flow.md delete mode 100644 optional-skills/creative/concept-diagrams/examples/ml-benchmark-grouped-bar-chart.md delete mode 100644 optional-skills/creative/concept-diagrams/examples/place-order-uml-sequence.md delete mode 100644 optional-skills/creative/concept-diagrams/examples/smart-city-infrastructure.md delete mode 100644 optional-skills/creative/concept-diagrams/examples/smartphone-layer-anatomy.md delete mode 100644 optional-skills/creative/concept-diagrams/examples/sn2-reaction-mechanism.md delete mode 100644 optional-skills/creative/concept-diagrams/examples/wind-turbine-structure.md delete mode 100644 optional-skills/creative/concept-diagrams/references/dashboard-patterns.md delete mode 100644 optional-skills/creative/concept-diagrams/references/infrastructure-patterns.md delete mode 100644 optional-skills/creative/concept-diagrams/references/physical-shape-cookbook.md delete mode 100644 optional-skills/creative/concept-diagrams/templates/template.html delete mode 100644 skills/creative/architecture-diagram/SKILL.md delete mode 100644 skills/creative/architecture-diagram/templates/template.html create mode 100644 skills/creative/html-artifact/SKILL.md create mode 100644 skills/creative/html-artifact/references/.gitignore create mode 100644 skills/creative/html-artifact/references/concept-archetypes.md create mode 100644 skills/creative/html-artifact/references/dark-tech.md create mode 100644 skills/creative/html-artifact/references/examples.md create mode 100644 skills/creative/html-artifact/references/fidelity-and-verify.md create mode 100644 skills/creative/html-artifact/references/house-style.md create mode 100644 skills/creative/html-artifact/references/svg-diagrams.md create mode 100644 skills/creative/html-artifact/references/throwaway-editors.md create mode 100755 skills/creative/html-artifact/scripts/fetch-examples.sh create mode 100644 skills/creative/html-artifact/templates/base.html create mode 100644 skills/creative/html-artifact/templates/diagram.html create mode 100644 skills/creative/html-artifact/templates/editor.html delete mode 100644 skills/creative/sketch/SKILL.md delete mode 100644 website/docs/user-guide/skills/bundled/creative/creative-architecture-diagram.md create mode 100644 website/docs/user-guide/skills/bundled/creative/creative-html-artifact.md delete mode 100644 website/docs/user-guide/skills/bundled/creative/creative-sketch.md delete mode 100644 website/docs/user-guide/skills/optional/creative/creative-concept-diagrams.md delete mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-architecture-diagram.md delete mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-sketch.md delete mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/optional/creative/creative-concept-diagrams.md diff --git a/optional-skills/creative/concept-diagrams/SKILL.md b/optional-skills/creative/concept-diagrams/SKILL.md deleted file mode 100644 index 6017d4fd121..00000000000 --- a/optional-skills/creative/concept-diagrams/SKILL.md +++ /dev/null @@ -1,362 +0,0 @@ ---- -name: concept-diagrams -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 -dependencies: [] -platforms: [linux, macos, windows] -metadata: - hermes: - tags: [diagrams, svg, visualization, education, physics, chemistry, engineering] - related_skills: [architecture-diagram, excalidraw, generative-widgets] ---- - -# Concept Diagrams - -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. - -## Scope - -**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) - -**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) - -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 - -1. Decide on the diagram type (see Diagram Types below). -2. Lay out components using the Design System rules. -3. Write the full HTML page using `templates/template.html` as the wrapper — paste your SVG where the template says ``. -4. Save as a standalone `.html` file (for example `~/my-diagram.html` or `./my-diagram.html`). -5. User opens it directly in a browser — no server, no dependencies. - -Optional: if the user wants a browsable gallery of multiple diagrams, see "Local Preview Server" at the bottom. - -Load the HTML template: -``` -skill_view(name="concept-diagrams", file_path="templates/template.html") -``` - -The template embeds the full CSS design system (`c-*` color classes, text classes, light/dark variables, arrow marker styles). The SVG you generate relies on these classes being present on the hosting page. - ---- - -## Design System - -### Philosophy - -- **Flat**: no gradients, drop shadows, blur, glow, or neon effects. -- **Minimal**: show the essential. No decorative icons inside boxes. -- **Consistent**: same colors, spacing, typography, and stroke widths across every diagram. -- **Dark-mode ready**: all colors auto-adapt via CSS classes — no per-mode SVG. - -### Color Palette - -9 color ramps, each with 7 stops. Put the class name on a `` or shape element; the template CSS handles both modes. - -| Class | 50 (lightest) | 100 | 200 | 400 | 600 | 800 | 900 (darkest) | -|------------|---------------|---------|---------|---------|---------|---------|---------------| -| `c-purple` | #EEEDFE | #CECBF6 | #AFA9EC | #7F77DD | #534AB7 | #3C3489 | #26215C | -| `c-teal` | #E1F5EE | #9FE1CB | #5DCAA5 | #1D9E75 | #0F6E56 | #085041 | #04342C | -| `c-coral` | #FAECE7 | #F5C4B3 | #F0997B | #D85A30 | #993C1D | #712B13 | #4A1B0C | -| `c-pink` | #FBEAF0 | #F4C0D1 | #ED93B1 | #D4537E | #993556 | #72243E | #4B1528 | -| `c-gray` | #F1EFE8 | #D3D1C7 | #B4B2A9 | #888780 | #5F5E5A | #444441 | #2C2C2A | -| `c-blue` | #E6F1FB | #B5D4F4 | #85B7EB | #378ADD | #185FA5 | #0C447C | #042C53 | -| `c-green` | #EAF3DE | #C0DD97 | #97C459 | #639922 | #3B6D11 | #27500A | #173404 | -| `c-amber` | #FAEEDA | #FAC775 | #EF9F27 | #BA7517 | #854F0B | #633806 | #412402 | -| `c-red` | #FCEBEB | #F7C1C1 | #F09595 | #E24B4A | #A32D2D | #791F1F | #501313 | - -#### Color Assignment Rules - -Color encodes **meaning**, not sequence. Never cycle through colors like a rainbow. - -- Group nodes by **category** — all nodes of the same type share one color. -- Use `c-gray` for neutral/structural nodes (start, end, generic steps, users). -- Use **2-3 colors per diagram**, not 6+. -- Prefer `c-purple`, `c-teal`, `c-coral`, `c-pink` for general categories. -- Reserve `c-blue`, `c-green`, `c-amber`, `c-red` for semantic meaning (info, success, warning, error). - -Light/dark stop mapping (handled by the template CSS — just use the class): -- Light mode: 50 fill + 600 stroke + 800 title / 600 subtitle -- Dark mode: 800 fill + 200 stroke + 100 title / 200 subtitle - -### Typography - -Only two font sizes. No exceptions. - -| Class | Size | Weight | Use | -|-------|------|--------|-----| -| `th` | 14px | 500 | Node titles, region labels | -| `ts` | 12px | 400 | Subtitles, descriptions, arrow labels | -| `t` | 14px | 400 | General text | - -- **Sentence case always.** Never Title Case, never ALL CAPS. -- Every `` MUST carry a class (`t`, `ts`, or `th`). No unclassed text. -- `dominant-baseline="central"` on all text inside boxes. -- `text-anchor="middle"` for centered text in boxes. - -**Width estimation (approx):** -- 14px weight 500: ~8px per character -- 12px weight 400: ~6.5px per character -- Always verify: `box_width >= (char_count × px_per_char) + 48` (24px padding each side) - -### Spacing & Layout - -- **ViewBox**: `viewBox="0 0 680 H"` where H = content height + 40px buffer. -- **Safe area**: x=40 to x=640, y=40 to y=(H-40). -- **Between boxes**: 60px minimum gap. -- **Inside boxes**: 24px horizontal padding, 12px vertical padding. -- **Arrowhead gap**: 10px between arrowhead and box edge. -- **Single-line box**: 44px height. -- **Two-line box**: 56px height, 18px between title and subtitle baselines. -- **Container padding**: 20px minimum inside every container. -- **Max nesting**: 2-3 levels deep. Deeper gets unreadable at 680px width. - -### Stroke & Shape - -- **Stroke width**: 0.5px on all node borders. Not 1px, not 2px. -- **Rect rounding**: `rx="8"` for nodes, `rx="12"` for inner containers, `rx="16"` to `rx="20"` for outer containers. -- **Connector paths**: MUST have `fill="none"`. SVG defaults to `fill: black` otherwise. - -### Arrow Marker - -Include this `` block at the start of **every** SVG: - -```xml - - - - - -``` - -Use `marker-end="url(#arrow)"` on lines. The arrowhead inherits the line color via `context-stroke`. - -### CSS Classes (Provided by the Template) - -The template page provides: - -- Text: `.t`, `.ts`, `.th` -- Neutral: `.box`, `.arr`, `.leader`, `.node` -- Color ramps: `.c-purple`, `.c-teal`, `.c-coral`, `.c-pink`, `.c-gray`, `.c-blue`, `.c-green`, `.c-amber`, `.c-red` (all with automatic light/dark mode) - -You do **not** need to redefine these — just apply them in your SVG. The template file contains the full CSS definitions. - ---- - -## SVG Boilerplate - -Every SVG inside the template page starts with this exact structure: - -```xml - - - - - - - - - - -``` - -Replace `{HEIGHT}` with the actual computed height (last element bottom + 40px). - -### Node Patterns - -**Single-line node (44px):** -```xml - - - Service name - -``` - -**Two-line node (56px):** -```xml - - - Service name - Short description - -``` - -**Connector (no label):** -```xml - -``` - -**Container (dashed or solid):** -```xml - - - Container label - Subtitle info - -``` - ---- - -## Diagram Types - -Choose the layout that fits the subject: - -1. **Flowchart** — CI/CD pipelines, request lifecycles, approval workflows, data processing. Single-direction flow (top-down or left-right). Max 4-5 nodes per row. -2. **Structural / Containment** — Cloud infrastructure nesting, system architecture with layers. Large outer containers with inner regions. Dashed rects for logical groupings. -3. **API / Endpoint Map** — REST routes, GraphQL schemas. Tree from root, branching to resource groups, each containing endpoint nodes. -4. **Microservice Topology** — Service mesh, event-driven systems. Services as nodes, arrows for communication patterns, message queues between. -5. **Data Flow** — ETL pipelines, streaming architectures. Left-to-right flow from sources through processing to sinks. -6. **Physical / Structural** — Vehicles, buildings, hardware, anatomy. Use shapes that match the physical form — `` for curved bodies, `` for tapered shapes, ``/`` for cylindrical parts, nested `` for compartments. See `references/physical-shape-cookbook.md`. -7. **Infrastructure / Systems Integration** — Smart cities, IoT networks, multi-domain systems. Hub-spoke layout with central platform connecting subsystems. Semantic line styles (`.data-line`, `.power-line`, `.water-pipe`, `.road`). See `references/infrastructure-patterns.md`. -8. **UI / Dashboard Mockups** — Admin panels, monitoring dashboards. Screen frame with nested chart/gauge/indicator elements. See `references/dashboard-patterns.md`. - -For physical, infrastructure, and dashboard diagrams, load the matching reference file before generating — each one provides ready-made CSS classes and shape primitives. - ---- - -## Validation Checklist - -Before finalizing any SVG, verify ALL of the following: - -1. Every `` has class `t`, `ts`, or `th`. -2. Every `` inside a box has `dominant-baseline="central"`. -3. Every connector `` or `` used as arrow has `fill="none"`. -4. No arrow line crosses through an unrelated box. -5. `box_width >= (longest_label_chars × 8) + 48` for 14px text. -6. `box_width >= (longest_label_chars × 6.5) + 48` for 12px text. -7. ViewBox height = bottom-most element + 40px. -8. All content stays within x=40 to x=640. -9. Color classes (`c-*`) are on `` or shape elements, never on `` connectors. -10. Arrow `` block is present. -11. No gradients, shadows, blur, or glow effects. -12. Stroke width is 0.5px on all node borders. - ---- - -## Output & Preview - -### Default: standalone HTML file - -Write a single `.html` file the user can open directly. No server, no dependencies, works offline. Pattern: - -```python -# 1. Load the template -template = skill_view("concept-diagrams", "templates/template.html") - -# 2. Fill in title, subtitle, and paste your SVG -html = template.replace( - "", "SN2 reaction mechanism" -).replace( - "", "Bimolecular nucleophilic substitution" -).replace( - "", svg_content -) - -# 3. Write to a user-chosen path (or ./ by default) -write_file("./sn2-mechanism.html", html) -``` - -Tell the user how to open it: - -``` -# macOS -open ./sn2-mechanism.html -# Linux -xdg-open ./sn2-mechanism.html -``` - -### Optional: local preview server (multi-diagram gallery) - -Only use this when the user explicitly wants a browsable gallery of multiple diagrams. - -**Rules:** -- Bind to `127.0.0.1` only. Never `0.0.0.0`. Exposing diagrams on all network interfaces is a security hazard on shared networks. -- Pick a free port (do NOT hard-code one) and tell the user the chosen URL. -- The server is optional and opt-in — prefer the standalone HTML file first. - -Recommended pattern (lets the OS pick a free ephemeral port): - -```bash -# Put each diagram in its own folder under .diagrams/ -mkdir -p .diagrams/sn2-mechanism -# ...write .diagrams/sn2-mechanism/index.html... - -# Serve on loopback only, free port -cd .diagrams && python3 -c " -import http.server, socketserver -with socketserver.TCPServer(('127.0.0.1', 0), http.server.SimpleHTTPRequestHandler) as s: - print(f'Serving at http://127.0.0.1:{s.server_address[1]}/') - s.serve_forever() -" & -``` - -If the user insists on a fixed port, use `127.0.0.1:` — still never `0.0.0.0`. Document how to stop the server (`kill %1` or `pkill -f "http.server"`). - ---- - -## Examples Reference - -The `examples/` directory ships 15 complete, tested diagrams. Browse them for working patterns before writing a new diagram of a similar type: - -| File | Type | Demonstrates | -|------|------|--------------| -| `hospital-emergency-department-flow.md` | Flowchart | Priority routing with semantic colors | -| `feature-film-production-pipeline.md` | Flowchart | Phased workflow, horizontal sub-flows | -| `automated-password-reset-flow.md` | Flowchart | Auth flow with error branches | -| `autonomous-llm-research-agent-flow.md` | Flowchart | Loop-back arrows, decision branches | -| `place-order-uml-sequence.md` | Sequence | UML sequence diagram style | -| `commercial-aircraft-structure.md` | Physical | Paths, polygons, ellipses for realistic shapes | -| `wind-turbine-structure.md` | Physical cross-section | Underground/above-ground separation, color coding | -| `smartphone-layer-anatomy.md` | Exploded view | Alternating left/right labels, layered components | -| `apartment-floor-plan-conversion.md` | Floor plan | Walls, doors, proposed changes in dotted red | -| `banana-journey-tree-to-smoothie.md` | Narrative journey | Winding path, progressive state changes | -| `cpu-ooo-microarchitecture.md` | Hardware pipeline | Fan-out, memory hierarchy sidebar | -| `sn2-reaction-mechanism.md` | Chemistry | Molecules, curved arrows, energy profile | -| `smart-city-infrastructure.md` | Hub-spoke | Semantic line styles per system | -| `electricity-grid-flow.md` | Multi-stage flow | Voltage hierarchy, flow markers | -| `ml-benchmark-grouped-bar-chart.md` | Chart | Grouped bars, dual axis | - -Load any example with: -``` -skill_view(name="concept-diagrams", file_path="examples/") -``` - ---- - -## Quick Reference: What to Use When - -| User says | Diagram type | Suggested colors | -|-----------|--------------|------------------| -| "show the pipeline" | Flowchart | gray start/end, purple steps, red errors, teal deploy | -| "draw the data flow" | Data pipeline (left-right) | gray sources, purple processing, teal sinks | -| "visualize the system" | Structural (containment) | purple container, teal services, coral data | -| "map the endpoints" | API tree | purple root, one ramp per resource group | -| "show the services" | Microservice topology | gray ingress, teal services, purple bus, coral workers | -| "draw the aircraft/vehicle" | Physical | paths, polygons, ellipses for realistic shapes | -| "smart city / IoT" | Hub-spoke integration | semantic line styles per subsystem | -| "show the dashboard" | UI mockup | dark screen, chart colors: teal, purple, coral for alerts | -| "power grid / electricity" | Multi-stage flow | voltage hierarchy (HV/MV/LV line weights) | -| "wind turbine / turbine" | Physical cross-section | foundation + tower cutaway + nacelle color-coded | -| "journey of X / lifecycle" | Narrative journey | winding path, progressive state changes | -| "layers of X / exploded" | Exploded layer view | vertical stack, alternating labels | -| "CPU / pipeline" | Hardware pipeline | vertical stages, fan-out to execution ports | -| "floor plan / apartment" | Floor plan | walls, doors, proposed changes in dotted red | -| "reaction mechanism" | Chemistry | atoms, bonds, curved arrows, transition state, energy profile | diff --git a/optional-skills/creative/concept-diagrams/examples/apartment-floor-plan-conversion.md b/optional-skills/creative/concept-diagrams/examples/apartment-floor-plan-conversion.md deleted file mode 100644 index 7c11d3401e5..00000000000 --- a/optional-skills/creative/concept-diagrams/examples/apartment-floor-plan-conversion.md +++ /dev/null @@ -1,244 +0,0 @@ -# Apartment Floor Plan: 3 BHK to 4 BHK Conversion - -An architectural floor plan showing a 1,500 sq ft apartment with proposed modifications to convert from 3 BHK to 4 BHK. Demonstrates architectural drawing conventions, room layouts, proposed changes with dotted lines, and area comparison tables. - -## Key Patterns Used - -- **Architectural floor plan**: Top-down view with walls, doors, windows -- **Proposed modifications**: Dotted red lines for new walls -- **Room color coding**: Light fills to distinguish room types -- **Circulation paths**: Arrows showing new access routes -- **Data table**: Before/after area comparison with highlighting -- **Architectural symbols**: North arrow, scale bar, door swings - -## Diagram Type - -This is an **architectural floor plan** with: -- **Plan view**: Top-down orthographic projection -- **Overlay technique**: Existing structure + proposed changes -- **Quantitative data**: Area measurements and comparison table - -## Architectural Drawing Elements - -### Wall Styles - -```xml - - - - - - - - -``` - -```css -.wall { stroke: var(--text-primary); stroke-width: 6; fill: none; stroke-linecap: square; } -.wall-thin { stroke: var(--text-primary); stroke-width: 3; fill: none; } -.proposed-wall { stroke: #A32D2D; stroke-width: 4; fill: none; stroke-dasharray: 8 4; } -``` - -### Door Symbols - -```xml - - - - - - - - - - - - - -``` - -```css -.door { stroke: var(--text-secondary); stroke-width: 1.5; fill: none; } -.door-swing { stroke: var(--text-tertiary); stroke-width: 1; fill: none; stroke-dasharray: 3 2; } -``` - -### Window Symbols - -```xml - - - - - - - -``` - -```css -.window { stroke: var(--text-primary); stroke-width: 1; fill: var(--bg-primary); } -.window-glass { stroke: #378ADD; stroke-width: 2; fill: none; } -``` - -### Room Fills - -```xml - - - - - - - - - -``` - -```css -.room-master { fill: rgba(206, 203, 246, 0.3); } /* purple tint */ -.room-bed2 { fill: rgba(159, 225, 203, 0.3); } /* teal tint */ -.room-bed3 { fill: rgba(250, 199, 117, 0.3); } /* amber tint */ -.room-living { fill: rgba(245, 196, 179, 0.3); } /* coral tint */ -.room-kitchen { fill: rgba(237, 147, 177, 0.3); } /* pink tint */ -.room-bath { fill: rgba(133, 183, 235, 0.3); } /* blue tint */ -.room-new { fill: rgba(163, 45, 45, 0.15); } /* red tint for proposed */ -``` - -### Support Fixtures - -```xml - - -Counter - - - -``` - -```css -.balcony { fill: none; stroke: var(--text-secondary); stroke-width: 2; stroke-dasharray: 6 3; } -.balcony-fill { fill: rgba(93, 202, 165, 0.1); } -``` - -### Room Labels - -```xml - -MASTER -BEDROOM -195 sq ft - - -BEDROOM 4 -(NEW) -``` - -```css -.room-label { font-family: system-ui; font-size: 11px; fill: var(--text-primary); font-weight: 500; } -.area-label { font-family: system-ui; font-size: 9px; fill: var(--text-tertiary); } -``` - -### Circulation Arrow - -```xml - - - - - - - -New corridor access -``` - -```css -.circulation { stroke: #3B6D11; stroke-width: 2; fill: none; } -.circulation-fill { fill: #3B6D11; } -``` - -### North Arrow and Scale Bar - -```xml - - - - - N - - - - - - - - - 0 - 5' - 10' - -``` - -## Area Comparison Table - -### Table Structure - -```xml - - -Room - - - -Master Bedroom -195 - - - - - - -Bedroom 4 (NEW) -+100 - - - -TOTAL CARPET AREA -``` - -```css -.table-header { fill: var(--bg-secondary); } -.table-row { fill: var(--bg-primary); stroke: var(--border); stroke-width: 0.5; } -.table-row-alt { fill: var(--bg-tertiary); stroke: var(--border); stroke-width: 0.5; } -.table-highlight { fill: rgba(163, 45, 45, 0.1); stroke: #A32D2D; stroke-width: 0.5; } -``` - -## Layout Notes - -- **ViewBox**: 800×780 (portrait for floor plan + table) -- **Scale**: 10px = 1 foot (apartment ~50ft × 33ft) -- **Floor plan origin**: Offset at (50, 60) for margins -- **Wall thickness**: 6px outer, 3px inner (represents ~6" walls) -- **Room labels**: Centered in each room with area below -- **Table placement**: Below floor plan with full width - -## Color Coding - -| Element | Color | Usage | -|---------|-------|-------| -| Proposed walls | Red (#A32D2D) dotted | New construction | -| New room fill | Red 15% opacity | Bedroom 4 area | -| Circulation | Green (#3B6D11) | New access path | -| Window glass | Blue (#378ADD) | Glass indication | -| Bedrooms | Purple/Teal/Amber tints | Room differentiation | -| Wet areas | Blue tint | Bathrooms | -| Living | Coral tint | Common areas | - -## When to Use This Pattern - -Use this diagram style for: -- Apartment/house floor plans -- Office layout planning -- Renovation proposals showing before/after -- Space planning with area calculations -- Real estate marketing materials -- Interior design presentations -- Building permit documentation diff --git a/optional-skills/creative/concept-diagrams/examples/automated-password-reset-flow.md b/optional-skills/creative/concept-diagrams/examples/automated-password-reset-flow.md deleted file mode 100644 index 86cd1cc0782..00000000000 --- a/optional-skills/creative/concept-diagrams/examples/automated-password-reset-flow.md +++ /dev/null @@ -1,276 +0,0 @@ -# Automated Password Reset Flow - -A two-section flowchart tracing the full user journey for a web application password reset: the initial request phase (forgot password → email check → token generation) and the reset-form phase (link click → new password entry → token/password validation). Demonstrates multi-exit decision diamonds, a three-column branching layout, a loop-back path, and a cross-section separator arrow. - -## Key Patterns Used - -- **Three-column layout**: Left column (error/terminal branches at cx=115), center column (main happy path at cx=340), right column (expired-token branch at cx=552) — allows side branches to live at the same y-level as center nodes without overlap -- **Decision diamonds with ``**: Each decision uses a `` wrapper containing a `` and centered ``; the diamond points are computed as `cx±hw, cy±hh` (hw=100, hh=28) -- **Pill-shaped terminals**: Start and end nodes use `rx=22` on their `` to signal entry/exit points; all mid-flow process nodes use `rx=8` -- **Three-branch decision paths**: Each diamond has a "Yes" branch (down, short ``) and a "No" branch (`` going horizontal then vertical to a side column) -- **Loop-back path**: Mismatch error node loops back to the password-entry node via a routing corridor at x=215 — a 5-px gap between the left column (right edge x=210) and center column (left edge x=220); the path exits the bottom of the error node, drops below it, travels right to x=215, then goes up to the target node's center y, then right 5 px into the node's left edge -- **Section separator**: A dashed horizontal `` at y=452 splits the two phases; the connecting arrow crosses it with a faded label ("user receives email") to preserve flow continuity -- **Italic annotation**: The exact UX copy for the generic message ("If that email exists…") is shown as a faded italic `ts` text block below the left-branch terminal node -- **Legend row**: Five inline swatches (gray, purple, teal, red, amber diamond) at the bottom explain the color-to-role mapping - -## Diagram - -```xml - - - - - - - - - - - Section 1 — Forgot password request - - - - - User: "Forgot password" - - - - - - - - Enter email address - - - - - - - - Email in system? - - - - - No - - - - Yes - - - - - - - Generic message shown - Email sent if found - - - - - - - - Request handled - - - - "If that email exists, a reset - link has been sent." - - - - - - - Generate unique token - Time-limited, cryptographic - - - - - - - - Store token + user ID - - - - - - - - Send reset link via email - - - - - - - - user receives email - - Section 2 — Password reset form - - - - - - - User clicks reset link - - - - - - - - Enter new password ×2 - Confirm both passwords match - - - - - - - - Token expired? - - - - - Yes - - - - No - - - - - - - Token expired - Show expiry error - - - - - - - - End — request again - - - - - - Passwords match? - - - - - No - - - - Yes - - - - - - - Password mismatch - Passwords do not match - - - - - retry - - - - - - - Reset password - Invalidate used token - - - - - - - - Password reset complete - - - - Legend — - - User action - - System process - - Email / success - - Error state - - Decision - - -``` - -## Custom CSS - -Add these classes to the hosting page ` - - -
-

-

- -
- - diff --git a/optional-skills/creative/kanban-video-orchestrator/SKILL.md b/optional-skills/creative/kanban-video-orchestrator/SKILL.md index c5ac2a8c96e..f323406300b 100644 --- a/optional-skills/creative/kanban-video-orchestrator/SKILL.md +++ b/optional-skills/creative/kanban-video-orchestrator/SKILL.md @@ -8,7 +8,7 @@ platforms: [linux, macos, windows] metadata: hermes: tags: [video, kanban, multi-agent, orchestration, production-pipeline] - related_skills: [kanban-orchestrator, kanban-worker, ascii-video, manim-video, p5js, comfyui, touchdesigner-mcp, blender-mcp, pixel-art, ascii-art, songwriting-and-ai-music, heartmula, songsee, spotify, youtube-content, claude-design, excalidraw, architecture-diagram, concept-diagrams, baoyu-comic, baoyu-infographic, humanizer, gif-search, meme-generation] + related_skills: [kanban-orchestrator, kanban-worker, ascii-video, manim-video, p5js, comfyui, touchdesigner-mcp, blender-mcp, pixel-art, ascii-art, songwriting-and-ai-music, heartmula, songsee, spotify, youtube-content, claude-design, excalidraw, html-artifact, baoyu-comic, baoyu-infographic, humanizer, gif-search, meme-generation] credits: | The single-project workspace layout, profile-config patching pattern, SOUL.md-per-profile model, TEAM.md task-graph convention, and diff --git a/optional-skills/creative/kanban-video-orchestrator/references/intake.md b/optional-skills/creative/kanban-video-orchestrator/references/intake.md index d290b606f49..1f817da020b 100644 --- a/optional-skills/creative/kanban-video-orchestrator/references/intake.md +++ b/optional-skills/creative/kanban-video-orchestrator/references/intake.md @@ -96,8 +96,7 @@ texture inside the final scene. - **Terminal-only or with GUI?** - **Voiceover for narration?** - **Diagram support needed?** — Often these benefit from a diagram skill - alongside the screen-capture/render step (`excalidraw`, - `architecture-diagram`, `concept-diagrams`) + alongside the screen-capture/render step (`excalidraw`, `html-artifact`) ### ASCII / terminal art diff --git a/optional-skills/creative/kanban-video-orchestrator/references/role-archetypes.md b/optional-skills/creative/kanban-video-orchestrator/references/role-archetypes.md index 95eaeb33b66..c5e15c06f4b 100644 --- a/optional-skills/creative/kanban-video-orchestrator/references/role-archetypes.md +++ b/optional-skills/creative/kanban-video-orchestrator/references/role-archetypes.md @@ -59,7 +59,7 @@ local skills. - **Toolsets:** kanban, terminal, file - **Skills:** `kanban-worker` plus any project-specific design skill — - `claude-design` (UI/web), `sketch` (quick mockup variants), + `claude-design` (UI/web), `html-artifact` (quick mockup variants, explainers, diagrams), `popular-web-designs` (matching known web aesthetic), `pixel-art` (retro), `ascii-art` (terminal/retro), `excalidraw` (hand-drawn frames), `design-md` (text-based design docs) @@ -72,8 +72,7 @@ film and music video. Often pairs with a diagramming tool. - **Toolsets:** kanban, file - **Skills:** `kanban-worker` plus a diagram skill — `excalidraw` (sketch), - `architecture-diagram` (technical/system), `concept-diagrams` (educational/ - scientific) + `html-artifact` (technical/system + educational/scientific diagrams) - **Outputs:** `storyboard.md` with one row per scene/shot, optional storyboard sketches diff --git a/optional-skills/creative/kanban-video-orchestrator/references/tool-matrix.md b/optional-skills/creative/kanban-video-orchestrator/references/tool-matrix.md index b5e59c31478..2f27ffc41e7 100644 --- a/optional-skills/creative/kanban-video-orchestrator/references/tool-matrix.md +++ b/optional-skills/creative/kanban-video-orchestrator/references/tool-matrix.md @@ -30,10 +30,8 @@ called from the terminal toolset; they don't appear in `always_load`. | `claude-design` | Design one-off HTML artifacts (landing, deck, prototype) | Concept artist for product video style frames; storyboarder for UI-heavy content | | `design-md` | Design markdown docs | Concept artist documenting visual specs | | `popular-web-designs` | Reference patterns for popular web designs | Concept artist; cinematographer when matching a known UI aesthetic | -| `sketch` | Throwaway HTML mockups (2-3 design variants to compare) | Concept artist exploring directions; storyboarder for UI flows | | `excalidraw` | Excalidraw-style hand-drawn diagrams | Storyboarder; concept artist for sketch-style frames | -| `architecture-diagram` | Software architecture diagrams | Storyboarder for technical content; explainer scenes about systems | -| `concept-diagrams` *(optional)* | Flat, minimal SVG diagrams (educational visual language; physics, chemistry, math, anatomy, etc.) | Renderer / storyboarder for explainer scenes with clean educational diagrams | +| `html-artifact` | Self-contained HTML artifacts: throwaway mockup variants, explainers, dark-tech architecture + educational SVG diagrams | Concept artist exploring directions; storyboarder for UI flows + technical/educational explainer scenes | | `pretext` | Mathematical/scientific content authoring | Writer / cinematographer for technical-explainer pretexts | | `creative-ideation` | Constraint-driven project ideation | Director / cinematographer when the brief is wide-open and needs framing | | `humanizer` | Strip AI-isms from text, add real voice | Writer / copywriter post-process to avoid AI-tells in scripts and VO copy | diff --git a/skills/creative/architecture-diagram/SKILL.md b/skills/creative/architecture-diagram/SKILL.md deleted file mode 100644 index 2c813c53c13..00000000000 --- a/skills/creative/architecture-diagram/SKILL.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -name: architecture-diagram -description: "Dark-themed SVG architecture/cloud/infra diagrams as HTML." -version: 1.0.0 -author: Cocoon AI (hello@cocoon-ai.com), ported by Hermes Agent -license: MIT -dependencies: [] -platforms: [linux, macos, windows] -metadata: - hermes: - tags: [architecture, diagrams, SVG, HTML, visualization, infrastructure, cloud] - related_skills: [concept-diagrams, excalidraw] ---- - -# Architecture Diagram Skill - -Generate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser. - -## Scope - -**Best suited for:** -- Software system architecture (frontend / backend / database layers) -- Cloud infrastructure (VPC, regions, subnets, managed services) -- Microservice / service-mesh topology -- Database + API map, deployment diagrams -- Anything with a tech-infra subject that fits a dark, grid-backed aesthetic - -**Look elsewhere first for:** -- Physics, chemistry, math, biology, or other scientific subjects -- Physical objects (vehicles, hardware, anatomy, cross-sections) -- Floor plans, narrative journeys, educational / textbook-style visuals -- Hand-drawn whiteboard sketches (consider `excalidraw`) -- Animated explainers (consider an animation skill) - -If a more specialized skill is available for the subject, prefer that. If none fits, this skill can also serve as a general SVG diagram fallback — the output will just carry the dark tech aesthetic described below. - -Based on [Cocoon AI's architecture-diagram-generator](https://github.com/Cocoon-AI/architecture-diagram-generator) (MIT). - -## Workflow - -1. User describes their system architecture (components, connections, technologies) -2. Generate the HTML file following the design system below -3. Save with `write_file` to a `.html` file (e.g. `~/architecture-diagram.html`) -4. User opens in any browser — works offline, no dependencies - -### Output Location - -Save diagrams to a user-specified path, or default to the current working directory: -``` -./[project-name]-architecture.html -``` - -### Preview - -After saving, suggest the user open it: -```bash -# macOS -open ./my-architecture.html -# Linux -xdg-open ./my-architecture.html -``` - -## Design System & Visual Language - -### Color Palette (Semantic Mapping) - -Use specific `rgba` fills and hex strokes to categorize components: - -| Component Type | Fill (rgba) | Stroke (Hex) | -| :--- | :--- | :--- | -| **Frontend** | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) | -| **Backend** | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) | -| **Database** | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) | -| **AWS/Cloud** | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) | -| **Security** | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) | -| **Message Bus** | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) | -| **External** | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate-400) | - -### Typography & Background -- **Font:** JetBrains Mono (Monospace), loaded from Google Fonts -- **Sizes:** 12px (Names), 9px (Sublabels), 8px (Annotations), 7px (Tiny labels) -- **Background:** Slate-950 (`#020617`) with a subtle 40px grid pattern - -```svg - - - - -``` - -## Technical Implementation Details - -### Component Rendering -Components are rounded rectangles (`rx="6"`) with 1.5px strokes. To prevent arrows from showing through semi-transparent fills, use a **double-rect masking technique**: -1. Draw an opaque background rect (`#0f172a`) -2. Draw the semi-transparent styled rect on top - -### Connection Rules -- **Z-Order:** Draw arrows *early* in the SVG (after the grid) so they render behind component boxes -- **Arrowheads:** Defined via SVG markers -- **Security Flows:** Use dashed lines in rose color (`#fb7185`) -- **Boundaries:** - - *Security Groups:* Dashed (`4,4`), rose color - - *Regions:* Large dashed (`8,4`), amber color, `rx="12"` - -### Spacing & Layout Logic -- **Standard Height:** 60px (Services); 80-120px (Large components) -- **Vertical Gap:** Minimum 40px between components -- **Message Buses:** Must be placed *in the gap* between services, not overlapping them -- **Legend Placement:** **CRITICAL.** Must be placed outside all boundary boxes. Calculate the lowest Y-coordinate of all boundaries and place the legend at least 20px below it. - -## Document Structure - -The generated HTML file follows a four-part layout: -1. **Header:** Title with a pulsing dot indicator and subtitle -2. **Main SVG:** The diagram contained within a rounded border card -3. **Summary Cards:** A grid of three cards below the diagram for high-level details -4. **Footer:** Minimal metadata - -### Info Card Pattern -```html -
-
-
-

Title

-
-
    -
  • • Item one
    • -
  • • Item two
    • -
-
-``` - -## Output Requirements -- **Single File:** One self-contained `.html` file -- **No External Dependencies:** All CSS and SVG must be inline (except Google Fonts) -- **No JavaScript:** Use pure CSS for any animations (like pulsing dots) -- **Compatibility:** Must render correctly in any modern web browser - -## Template Reference - -Load the full HTML template for the exact structure, CSS, and SVG component examples: - -``` -skill_view(name="architecture-diagram", file_path="templates/template.html") -``` - -The template contains working examples of every component type (frontend, backend, database, cloud, security), arrow styles (standard, dashed, curved), security groups, region boundaries, and the legend — use it as your structural reference when generating diagrams. diff --git a/skills/creative/architecture-diagram/templates/template.html b/skills/creative/architecture-diagram/templates/template.html deleted file mode 100644 index f5b32fbe7fd..00000000000 --- a/skills/creative/architecture-diagram/templates/template.html +++ /dev/null @@ -1,319 +0,0 @@ - - - - - - [PROJECT NAME] Architecture Diagram - - - - -
- -
-
-
-

[PROJECT NAME] Architecture

-
-

[Subtitle description]

-
- - -
- - - - - - - - - - - - - - - - - - - Users - Browser/Mobile - - - - Auth Provider - OAuth 2.0 - - - - AWS Region: us-west-2 - - - - CloudFront - CDN - - - - S3 Buckets - • bucket-one - • bucket-two - • bucket-three - OAI Protected - - - - sg-name :port - - - - Load Balancer - HTTPS :443 - - - - API Server - FastAPI :8000 - - - - Database - PostgreSQL - - - - Frontend - React + TypeScript - Additional detail - More info - domain.example.com - - - - - - HTTPS - - - - - - - OAI - - - - - TLS - - - - JWT + PKCE - - - Legend - - - Frontend - - - Backend - - - Cloud Service - - - Database - - - Security - - - Auth Flow - - - Security Group - -
- - -
-
-
-
-

Card Title 1

-
-
    -
  • • Item one
    • -
  • • Item two
    • -
  • • Item three
    • -
  • • Item four
    • -
-
- -
-
-
-

Card Title 2

-
-
    -
  • • Item one
    • -
  • • Item two
    • -
  • • Item three
    • -
  • • Item four
    • -
-
- -
-
-
-

Card Title 3

-
-
    -
  • • Item one
    • -
  • • Item two
    • -
  • • Item three
    • -
  • • Item four
    • -
-
-
- - -

- [Project Name] • [Additional metadata] -

-
- - diff --git a/skills/creative/claude-design/SKILL.md b/skills/creative/claude-design/SKILL.md index 673d1ff827a..d61dbcb2f00 100644 --- a/skills/creative/claude-design/SKILL.md +++ b/skills/creative/claude-design/SKILL.md @@ -8,7 +8,7 @@ platforms: [linux, macos, windows] metadata: hermes: tags: [design, html, prototype, ux, ui, creative, artifact, deck, motion, design-system] - related_skills: [design-md, popular-web-designs, excalidraw, architecture-diagram] + related_skills: [html-artifact, design-md, popular-web-designs, excalidraw] --- # Claude Design for CLI/API Agents @@ -19,19 +19,21 @@ The goal is to preserve Claude Design's useful design behavior and taste while r **Before starting, check for other web-design skills like `popular-web-designs` (ready-to-paste design systems for Stripe, Linear, Vercel, Notion, etc.) and `design-md` (Google's DESIGN.md token spec format).** If the user wants a known brand's look, load `popular-web-designs` alongside this one and let it supply the visual vocabulary. If the deliverable is a token spec file rather than a rendered artifact, use `design-md` instead. Full decision table below. -## When To Use This Skill vs `popular-web-designs` vs `design-md` +## When To Use This Skill vs `html-artifact` vs `popular-web-designs` vs `design-md` -Hermes has three design-related skills under `skills/creative/`. They do different jobs — load the right one (or combine them): +Several skills produce HTML — they do different jobs. Load the right one (or combine them): | Skill | What it gives you | Use when the user wants... | |---|---|---| -| **claude-design** (this one) | Design *process and taste* — how to scope a brief, gather context, produce variants, verify a local HTML artifact, avoid AI-design slop | a from-scratch designed artifact (landing page, prototype, deck, component lab, motion study) with no specific brand or token system dictated | +| **claude-design** (this one) | Visual design *process and taste* — how to scope a brief, gather context, produce variants, verify a local HTML artifact, avoid AI-design slop | a from-scratch *designed* artifact (landing page, prototype, deck, component lab, motion study) where the look itself is the point and no specific brand or token system is dictated | +| **html-artifact** | A house style for *information* artifacts — explainers, plans, reports, code reviews, technical/educational diagrams, throwaway editors | to *explain / plan / report / diagram / review* something as a shareable HTML page — the content is the point, not bespoke visual design | | **popular-web-designs** | 54 ready-to-paste design systems — exact colors, typography, components, CSS values for sites like Stripe, Linear, Vercel, Notion, Airbnb | "make it look like Stripe / Linear / Vercel", a page styled after a known brand, or a visual starting point pulled from a real product | | **design-md** | Google's DESIGN.md spec format — author/validate/diff/export design-token files, WCAG contrast checking, Tailwind/DTCG export | a formal, persistent, machine-readable design-system *spec file* (tokens + rationale) that lives in a repo and gets consumed by agents over time | Rule of thumb: -- **Process + taste, one-off artifact** → claude-design +- **Bespoke visual design, taste-driven artifact** → claude-design +- **Explain / plan / report / diagram as a shareable page** → html-artifact - **Match a known brand's look** → popular-web-designs (and let claude-design drive the process) - **Author the tokens spec itself** → design-md diff --git a/skills/creative/design-md/SKILL.md b/skills/creative/design-md/SKILL.md index 6604be1979d..e0534d9ba72 100644 --- a/skills/creative/design-md/SKILL.md +++ b/skills/creative/design-md/SKILL.md @@ -8,7 +8,7 @@ platforms: [linux, macos, windows] metadata: hermes: tags: [design, design-system, tokens, ui, accessibility, wcag, tailwind, dtcg, google] - related_skills: [popular-web-designs, claude-design, excalidraw, architecture-diagram] + related_skills: [popular-web-designs, claude-design, excalidraw, html-artifact] --- # DESIGN.md Skill diff --git a/skills/creative/html-artifact/SKILL.md b/skills/creative/html-artifact/SKILL.md new file mode 100644 index 00000000000..4883e1ff4c1 --- /dev/null +++ b/skills/creative/html-artifact/SKILL.md @@ -0,0 +1,184 @@ +--- +name: html-artifact +description: Build self-contained HTML files to explain, plan, or review. +version: 1.0.0 +author: Anthropic (html-effectiveness gallery, MIT), adapted for Hermes Agent +license: MIT +platforms: [linux, macos, windows] +metadata: + hermes: + tags: [html, artifact, explainer, plan, report, code-review, diagram, svg, design, prototype, editor] + related_skills: [claude-design, popular-web-designs, design-md, excalidraw, p5js] +--- + +# HTML Artifact Skill + +Produce a single self-contained `.html` file — no build step, no dependencies, no +CDN — whenever the deliverable is something a human should *read, share, or poke at*: +a concept explainer, an implementation plan, a status/incident report, a code-review +walkthrough, a technical or educational diagram, a set of design variants, or a +throwaway editor that exports its result back to you. + +HTML beats Markdown once a doc has color, layout, diagrams, tables, code, or +interaction. It opens in any browser, shares as a link, stays readable past 100 +lines, and can carry SVG diagrams and live controls Markdown can't. Default to an +HTML artifact when the user says "make an HTML file/artifact", or asks you to +*explain how X works*, *write up a plan/PR/report*, *diagram* something, *compare* +options, or *prototype* an interaction — even when they don't say "HTML". + +## Why this skill exists (and what it replaced) + +This skill **supersedes** three former skills — `sketch` (throwaway multi-variant +HTML mockups), `architecture-diagram` (dark-tech infra SVG), and `concept-diagrams` +(educational SVG). They were consolidated for a concrete reason: all three emitted +the *same artifact* — a single self-contained HTML file with inline CSS/SVG — and +overlapped heavily (three "diagram" skills, two "compare variants" paths, no shared +token system). Folding them into one mode-switched skill removes the +which-one-do-I-load ambiguity and gives every output the same house style, while +keeping each skill's unique value: the fidelity dial + verify loop (from `sketch`), +the dark infra aesthetic (from `architecture-diagram`), and the 9-ramp educational +system + archetype library (from `concept-diagrams`). + +The consolidation is footprint-safe: this skill has **zero dependencies** (no Node, +FFmpeg, Chromium, or pip packages — it authors plain HTML/CSS/SVG), so even though it +ships **bundled** (active by default) where `concept-diagrams` was optional, the only +always-in-context cost is this skill's one-line description. All references, +templates, and the example gallery load on demand. `concept-diagrams` was optional +because it was niche, not because it had an install cost — promoting that capability +into a general-purpose, zero-dep bundled skill is the right home for it. Diagram-style +work with a *real* install cost (e.g. `hyperframes`: Node + FFmpeg + Chromium) +deliberately stays optional and is **not** folded in here. + +Use a different skill when: matching a known brand's look → `popular-web-designs`; a +formal design-token spec file → `design-md`; a *bespoke visually-designed* artifact +where the look itself is the point → `claude-design`; hand-drawn/whiteboard +`.excalidraw` files → `excalidraw`; generative/animated canvas art → `p5js`. This +skill is for everything else that ships as a readable, shareable HTML page. + +## Reference files (load on demand) + +- `references/house-style.md` — the canonical `:root` token block, type system, + card/table/callout/code-block patterns. **Read this before authoring any artifact.** +- `references/examples.md` — 20 complete reference HTML files (Anthropic's + html-effectiveness gallery, MIT) keyed to each mode, plus the script to fetch them. + Read/fetch one that matches your task to calibrate the house style from a full example. +- `references/svg-diagrams.md` — hand-authored inline SVG: arrow markers, node + groups, decision diamonds, edge semantics, coordinate-grid discipline. Read for + any flowchart / architecture / concept diagram. +- `references/concept-archetypes.md` — the 9-ramp educational color system + a + library of diagram archetypes (timeline, tree, quadrant, layered stack, + before/after, hub-spoke, cross-section). Read for educational / non-software visuals. +- `references/dark-tech.md` — the dark "infra" token variant (carries the old + architecture-diagram aesthetic). Read for cloud/infra/system architecture diagrams. +- `references/throwaway-editors.md` — the single-file editor recipe and the + copy-to-clipboard export pattern that survives `file://`. Read when the artifact + needs interactive controls that export state back to a prompt. +- `references/fidelity-and-verify.md` — the throwaway↔presentation fidelity dial, + the multi-variant comparison layout, and the mandatory browser-vision verify loop. + +## Templates + +- `templates/base.html` — document scaffold with the house-style ` + + +
+

Section · Context

+

Artifact Title

+

One-sentence framing of what this artifact is and who it's for.

+ +

Overview

+

Body copy. Keep paragraphs readable; let layout carry structure.

+ +
+

Metric

42
+

Metric

7
+

Needs attention

3
+

Metric

98%
+
+ +
Note. Use callouts for the one thing the reader must not miss.
+ + + +
+ + diff --git a/skills/creative/html-artifact/templates/diagram.html b/skills/creative/html-artifact/templates/diagram.html new file mode 100644 index 00000000000..93522119d36 --- /dev/null +++ b/skills/creative/html-artifact/templates/diagram.html @@ -0,0 +1,127 @@ + + + + + +Diagram + + + + + +
+

+

+ + +
+ + diff --git a/skills/creative/html-artifact/templates/editor.html b/skills/creative/html-artifact/templates/editor.html new file mode 100644 index 00000000000..88ee378d7a3 --- /dev/null +++ b/skills/creative/html-artifact/templates/editor.html @@ -0,0 +1,120 @@ + + + + + +Editor + + + + +
+

Throwaway editor

+

Toggle what ships, copy the result

+
+
+ + +
+
+ + + + diff --git a/skills/creative/pretext/SKILL.md b/skills/creative/pretext/SKILL.md index 78f5ab2d959..c526d000ddd 100644 --- a/skills/creative/pretext/SKILL.md +++ b/skills/creative/pretext/SKILL.md @@ -8,7 +8,7 @@ platforms: [linux, macos, windows] metadata: hermes: tags: [creative-coding, typography, pretext, ascii-art, canvas, generative, text-layout, kinetic-typography] - related_skills: [p5js, claude-design, excalidraw, architecture-diagram] + related_skills: [p5js, claude-design, excalidraw, html-artifact] --- # Pretext Creative Demos diff --git a/skills/creative/sketch/SKILL.md b/skills/creative/sketch/SKILL.md deleted file mode 100644 index 6e49585acd4..00000000000 --- a/skills/creative/sketch/SKILL.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -name: sketch -description: "Throwaway HTML mockups: 2-3 design variants to compare." -version: 1.0.0 -author: Hermes Agent (adapted from gsd-build/get-shit-done) -license: MIT -platforms: [linux, macos, windows] -metadata: - hermes: - tags: [sketch, mockup, design, ui, prototype, html, variants, exploration, wireframe, comparison] - related_skills: [spike, claude-design, popular-web-designs, excalidraw] ---- - -# Sketch - -Use this skill when the user wants to **see a design direction before committing** to one — exploring a UI/UX idea as disposable HTML mockups. The point is to generate 2-3 interactive variants so the user can compare visual directions side-by-side, not to produce shippable code. - -Load this when the user says things like "sketch this screen", "show me what X could look like", "compare layout A vs B", "give me 2-3 takes on this UI", "let me see some variants", "mockup this before I build". - -## When NOT to use this - -- User wants a production component — use `claude-design` or build it properly -- User wants a polished one-off HTML artifact (landing page, deck) — `claude-design` -- User wants a diagram — `excalidraw`, `architecture-diagram` -- The design is already locked — just build it - -## If the user has the full GSD system installed - -If `gsd-sketch` shows up as a sibling skill (installed via `npx get-shit-done-cc --hermes`), prefer **`gsd-sketch`** for the full workflow: persistent `.planning/sketches/` with MANIFEST, frontier mode analysis, consistency audits across past sketches, and integration with the rest of GSD. This skill is the lightweight standalone version — one-off sketching without the state machinery. - -## Core method - -``` -intake → variants → head-to-head → pick winner (or iterate) -``` - -### 1. Intake (skip if the user already gave you enough) - -Before generating variants, get three things — one question at a time, not all at once: - -1. **Feel.** "What should this feel like? Adjectives, emotions, a vibe." — *"calm, editorial, like Linear"* tells you more than *"minimal"*. -2. **References.** "What apps, sites, or products capture the feel you're imagining?" — actual references beat abstract descriptions. -3. **Core action.** "What's the single most important thing a user does on this screen?" — the variants should all serve this well; if they don't, they're just decoration. - -Reflect each answer briefly before the next question. If the user already gave you all three upfront, skip straight to variants. - -### 2. Variants (2-3, never 1, rarely 4+) - -Produce **2-3 variants** in one go. Each variant is a complete, standalone HTML file. Don't describe variants — build them. The point is comparison. - -Each variant should take a **different design stance**, not different pixel values. Three good variant axes: - -- **Density:** compact / airy / ultra-dense (pick two contrasting poles) -- **Emphasis:** content-first / action-first / tool-first -- **Aesthetic:** editorial / utilitarian / playful -- **Layout:** single-column / sidebar / split-pane -- **Grounding:** card-based / bare-content / document-style - -Pick one axis and pull apart from it. Two variants that differ only in accent color are wasted effort — the user can't distinguish them. - -**Variant naming:** describe the stance, not the number. - -``` -sketches/ -├── 001-calm-editorial/ -│ ├── index.html -│ └── README.md -├── 001-utilitarian-dense/ -│ ├── index.html -│ └── README.md -└── 001-playful-split/ - ├── index.html - └── README.md -``` - -### 3. Make them real HTML - -Each variant is a **single self-contained HTML file**: - -- Inline ` -``` - -### 4. Variant README - -Each variant's `README.md` answers: - -```markdown -## Variant: {stance name} - -### Design stance -One sentence on the principle driving this variant. - -### Key choices -- Layout: ... -- Typography: ... -- Color: ... -- Interaction: ... - -### Trade-offs -- Strong at: ... -- Weak at: ... - -### Best for -- The kind of user or use case this variant actually serves -``` - -### 5. Head-to-head - -After all variants are built, present them as a comparison. Don't just list — **opinionate**: - -```markdown -## Three takes on the home screen - -| Dimension | Calm editorial | Utilitarian dense | Playful split | -|-----------|----------------|-------------------|---------------| -| Density | Low | High | Medium | -| Primary action visibility | Low | High | Medium | -| Scan-ability | High | Medium | Low | -| Feel | Calm, trusted | Sharp, tool-like | Inviting, energetic | - -**My take:** Utilitarian dense for power users, calm editorial for content-forward audiences. Playful split is weakest — tries to do both and commits to neither. -``` - -Let the user pick a winner, or combine two into a hybrid, or ask for another round. - -## Theming (when the project has a visual identity) - -If the user has an existing theme (colors, fonts, tokens), put shared tokens in `sketches/themes/tokens.css` and `@import` them in each variant. Keep tokens minimal: - -```css -/* sketches/themes/tokens.css */ -:root { - --color-bg: #fafafa; - --color-fg: #1a1a1a; - --color-accent: #0066ff; - --color-muted: #666; - --radius: 8px; - --font-display: "Inter", sans-serif; - --font-body: -apple-system, BlinkMacSystemFont, sans-serif; -} -``` - -Don't over-tokenize a throwaway sketch — three colors and one font is usually enough. - -## Interactivity bar - -A sketch is interactive enough when the user can: - -1. **Click a primary action** and something visible happens (state change, modal, toast, navigation feint) -2. **See one meaningful state transition** (filter a list, toggle a mode, open/close a panel) -3. **Hover recognizable affordances** (buttons, rows, tabs) - -More than that is over-engineering a throwaway. Less than that is a screenshot. - -## Frontier mode (picking what to sketch next) - -If sketches already exist and the user says "what should I sketch next?": - -- **Consistency gaps** — two winning variants from different sketches made independent choices that haven't been composed together yet -- **Unsketched screens** — referenced but never explored -- **State coverage** — happy path sketched, but not empty / loading / error / 1000-items -- **Responsive gaps** — validated at one viewport; does it hold at mobile / ultrawide? -- **Interaction patterns** — static layouts exist; transitions, drag, scroll behavior don't - -Propose 2-4 named candidates. Let the user pick. - -## Output - -- Create `sketches/` (or `.planning/sketches/` if the user is using GSD conventions) in the repo root -- One subdir per variant: `NNN-stance-name/index.html` + `README.md` -- Tell the user how to open them: `open sketches/001-calm-editorial/index.html` on macOS, `xdg-open` on Linux, `start` on Windows -- Keep variants disposable — a sketch that you felt the need to preserve should be promoted into real project code, not curated as an asset - -**Typical tool sequence for one variant:** - -``` -terminal("mkdir -p sketches/001-calm-editorial") -write_file("sketches/001-calm-editorial/index.html", "...") -write_file("sketches/001-calm-editorial/README.md", "## Variant: Calm editorial\n...") -browser_navigate(url="file://$(pwd)/sketches/001-calm-editorial/index.html") -browser_vision(question="How does this look? Any obvious layout issues?") -``` - -Repeat for each variant, then present the comparison table. - -## Attribution - -Adapted from the GSD (Get Shit Done) project's `/gsd-sketch` workflow — MIT © 2025 Lex Christopherson ([gsd-build/get-shit-done](https://github.com/gsd-build/get-shit-done)). The full GSD system ships persistent sketch state, theme/variant pattern references, and consistency-audit workflows; install with `npx get-shit-done-cc --hermes --global`. diff --git a/skills/software-development/spike/SKILL.md b/skills/software-development/spike/SKILL.md index 2a980f0ade9..313cbe7fb9c 100644 --- a/skills/software-development/spike/SKILL.md +++ b/skills/software-development/spike/SKILL.md @@ -8,7 +8,7 @@ platforms: [linux, macos, windows] metadata: hermes: tags: [spike, prototype, experiment, feasibility, throwaway, exploration, research, planning, mvp, proof-of-concept] - related_skills: [sketch, subagent-driven-development, plan] + related_skills: [html-artifact, subagent-driven-development, plan] --- # Spike diff --git a/website/docs/reference/optional-skills-catalog.md b/website/docs/reference/optional-skills-catalog.md index 4e2b2524fe2..a9e27dfd90e 100644 --- a/website/docs/reference/optional-skills-catalog.md +++ b/website/docs/reference/optional-skills-catalog.md @@ -58,7 +58,6 @@ hermes skills uninstall | [**baoyu-article-illustrator**](/docs/user-guide/skills/optional/creative/creative-baoyu-article-illustrator) | Article illustrations: type × style × palette consistency. | | [**baoyu-comic**](/docs/user-guide/skills/optional/creative/creative-baoyu-comic) | Knowledge comics (知识漫画): educational, biography, tutorial. | | [**blender-mcp**](/docs/user-guide/skills/optional/creative/creative-blender-mcp) | Control Blender directly from Hermes via socket connection to the blender-mcp addon. Create 3D objects, materials, animations, and run arbitrary Blender Python (bpy) code. Use when user wants to create or modify anything in Blender. | -| [**concept-diagrams**](/docs/user-guide/skills/optional/creative/creative-concept-diagrams) | 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 no... | | [**ideation**](/docs/user-guide/skills/optional/creative/creative-creative-ideation) | Generate project ideas via creative constraints. | | [**hyperframes**](/docs/user-guide/skills/optional/creative/creative-hyperframes) | Create HTML-based video compositions, animated title cards, social overlays, captioned talking-head videos, audio-reactive visuals, and shader transitions using HyperFrames. HTML is the source of truth for video. Use when the user wants... | | [**kanban-video-orchestrator**](/docs/user-guide/skills/optional/creative/creative-kanban-video-orchestrator) | Plan, set up, and monitor a multi-agent video production pipeline backed by Hermes Kanban. Use when the user wants to make ANY video — narrative film, product/marketing, music video, explainer, ASCII/terminal art, abstract/generative loo... | diff --git a/website/docs/reference/skills-catalog.md b/website/docs/reference/skills-catalog.md index 5ccb1f5f5ca..3ae519a07f8 100644 --- a/website/docs/reference/skills-catalog.md +++ b/website/docs/reference/skills-catalog.md @@ -35,7 +35,6 @@ If a skill is missing from this list but present in the repo, the catalog is reg | Skill | Description | Path | |-------|-------------|------| -| [`architecture-diagram`](/docs/user-guide/skills/bundled/creative/creative-architecture-diagram) | Dark-themed SVG architecture/cloud/infra diagrams as HTML. | `creative/architecture-diagram` | | [`ascii-art`](/docs/user-guide/skills/bundled/creative/creative-ascii-art) | ASCII art: pyfiglet, cowsay, boxes, image-to-ascii. | `creative/ascii-art` | | [`ascii-video`](/docs/user-guide/skills/bundled/creative/creative-ascii-video) | ASCII video: convert video/audio to colored ASCII MP4/GIF. | `creative/ascii-video` | | [`baoyu-infographic`](/docs/user-guide/skills/bundled/creative/creative-baoyu-infographic) | Infographics: 21 layouts x 21 styles (信息图, 可视化). | `creative/baoyu-infographic` | @@ -43,12 +42,12 @@ If a skill is missing from this list but present in the repo, the catalog is reg | [`comfyui`](/docs/user-guide/skills/bundled/creative/creative-comfyui) | Generate images, video, and audio with ComfyUI — install, launch, manage nodes/models, run workflows with parameter injection. Uses the official comfy-cli for lifecycle and direct REST/WebSocket API for execution. | `creative/comfyui` | | [`design-md`](/docs/user-guide/skills/bundled/creative/creative-design-md) | Author/validate/export Google's DESIGN.md token spec files. | `creative/design-md` | | [`excalidraw`](/docs/user-guide/skills/bundled/creative/creative-excalidraw) | Hand-drawn Excalidraw JSON diagrams (arch, flow, seq). | `creative/excalidraw` | +| [`html-artifact`](/docs/user-guide/skills/bundled/creative/creative-html-artifact) | Build self-contained HTML files to explain, plan, or review. | `creative/html-artifact` | | [`humanizer`](/docs/user-guide/skills/bundled/creative/creative-humanizer) | Humanize text: strip AI-isms and add real voice. | `creative/humanizer` | | [`manim-video`](/docs/user-guide/skills/bundled/creative/creative-manim-video) | Manim CE animations: 3Blue1Brown math/algo videos. | `creative/manim-video` | | [`p5js`](/docs/user-guide/skills/bundled/creative/creative-p5js) | p5.js sketches: gen art, shaders, interactive, 3D. | `creative/p5js` | | [`popular-web-designs`](/docs/user-guide/skills/bundled/creative/creative-popular-web-designs) | 54 real design systems (Stripe, Linear, Vercel) as HTML/CSS. | `creative/popular-web-designs` | | [`pretext`](/docs/user-guide/skills/bundled/creative/creative-pretext) | Use when building creative browser demos with @chenglou/pretext — DOM-free text layout for ASCII art, typographic flow around obstacles, text-as-geometry games, kinetic typography, and text-powered generative art. Produces single-file HT... | `creative/pretext` | -| [`sketch`](/docs/user-guide/skills/bundled/creative/creative-sketch) | Throwaway HTML mockups: 2-3 design variants to compare. | `creative/sketch` | | [`songwriting-and-ai-music`](/docs/user-guide/skills/bundled/creative/creative-songwriting-and-ai-music) | Songwriting craft and Suno AI music prompts. | `creative/songwriting-and-ai-music` | | [`touchdesigner-mcp`](/docs/user-guide/skills/bundled/creative/creative-touchdesigner-mcp) | Control a running TouchDesigner instance via twozero MCP — create operators, set parameters, wire connections, execute Python, build real-time visuals. 36 native tools. | `creative/touchdesigner-mcp` | diff --git a/website/docs/user-guide/skills/bundled/autonomous-ai-agents/autonomous-ai-agents-hermes-agent.md b/website/docs/user-guide/skills/bundled/autonomous-ai-agents/autonomous-ai-agents-hermes-agent.md index 77f81db14b6..089ea173923 100644 --- a/website/docs/user-guide/skills/bundled/autonomous-ai-agents/autonomous-ai-agents-hermes-agent.md +++ b/website/docs/user-guide/skills/bundled/autonomous-ai-agents/autonomous-ai-agents-hermes-agent.md @@ -360,7 +360,7 @@ The registry of record is `hermes_cli/commands.py` — every consumer ``` ~/.hermes/config.yaml Main configuration -~/.hermes/.env API keys and secrets +~/.hermes/.env API keys and secrets (under $HERMES_HOME if set) $HERMES_HOME/skills/ Installed skills ~/.hermes/sessions/ Gateway routing index, request dumps, *.jsonl transcripts (and optional per-session JSON snapshots when sessions.write_json_snapshots: true) ~/.hermes/state.db Canonical session store (SQLite + FTS5) @@ -927,7 +927,7 @@ hermes-agent/ ``` -Config: `~/.hermes/config.yaml` (settings), `~/.hermes/.env` (API keys). +Config: `~/.hermes/config.yaml` (settings), `~/.hermes/.env` (API keys) — both under `$HERMES_HOME` when it is set. ### Adding a Tool (3 files) diff --git a/website/docs/user-guide/skills/bundled/creative/creative-architecture-diagram.md b/website/docs/user-guide/skills/bundled/creative/creative-architecture-diagram.md deleted file mode 100644 index ad816a370ad..00000000000 --- a/website/docs/user-guide/skills/bundled/creative/creative-architecture-diagram.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: "Architecture Diagram — Dark-themed SVG architecture/cloud/infra diagrams as HTML" -sidebar_label: "Architecture Diagram" -description: "Dark-themed SVG architecture/cloud/infra diagrams as HTML" ---- - -{/* This page is auto-generated from the skill's SKILL.md by website/scripts/generate-skill-docs.py. Edit the source SKILL.md, not this page. */} - -# Architecture Diagram - -Dark-themed SVG architecture/cloud/infra diagrams as HTML. - -## Skill metadata - -| | | -|---|---| -| Source | Bundled (installed by default) | -| Path | `skills/creative/architecture-diagram` | -| Version | `1.0.0` | -| Author | Cocoon AI (hello@cocoon-ai.com), ported by Hermes Agent | -| License | MIT | -| Platforms | linux, macos, windows | -| Tags | `architecture`, `diagrams`, `SVG`, `HTML`, `visualization`, `infrastructure`, `cloud` | -| Related skills | [`concept-diagrams`](/docs/user-guide/skills/optional/creative/creative-concept-diagrams), [`excalidraw`](/docs/user-guide/skills/bundled/creative/creative-excalidraw) | - -## Reference: full SKILL.md - -:::info -The following is the complete skill definition that Hermes loads when this skill is triggered. This is what the agent sees as instructions when the skill is active. -::: - -# Architecture Diagram Skill - -Generate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser. - -## Scope - -**Best suited for:** -- Software system architecture (frontend / backend / database layers) -- Cloud infrastructure (VPC, regions, subnets, managed services) -- Microservice / service-mesh topology -- Database + API map, deployment diagrams -- Anything with a tech-infra subject that fits a dark, grid-backed aesthetic - -**Look elsewhere first for:** -- Physics, chemistry, math, biology, or other scientific subjects -- Physical objects (vehicles, hardware, anatomy, cross-sections) -- Floor plans, narrative journeys, educational / textbook-style visuals -- Hand-drawn whiteboard sketches (consider `excalidraw`) -- Animated explainers (consider an animation skill) - -If a more specialized skill is available for the subject, prefer that. If none fits, this skill can also serve as a general SVG diagram fallback — the output will just carry the dark tech aesthetic described below. - -Based on [Cocoon AI's architecture-diagram-generator](https://github.com/Cocoon-AI/architecture-diagram-generator) (MIT). - -## Workflow - -1. User describes their system architecture (components, connections, technologies) -2. Generate the HTML file following the design system below -3. Save with `write_file` to a `.html` file (e.g. `~/architecture-diagram.html`) -4. User opens in any browser — works offline, no dependencies - -### Output Location - -Save diagrams to a user-specified path, or default to the current working directory: -``` -./[project-name]-architecture.html -``` - -### Preview - -After saving, suggest the user open it: -```bash -# macOS -open ./my-architecture.html -# Linux -xdg-open ./my-architecture.html -``` - -## Design System & Visual Language - -### Color Palette (Semantic Mapping) - -Use specific `rgba` fills and hex strokes to categorize components: - -| Component Type | Fill (rgba) | Stroke (Hex) | -| :--- | :--- | :--- | -| **Frontend** | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) | -| **Backend** | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) | -| **Database** | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) | -| **AWS/Cloud** | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) | -| **Security** | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) | -| **Message Bus** | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) | -| **External** | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate-400) | - -### Typography & Background -- **Font:** JetBrains Mono (Monospace), loaded from Google Fonts -- **Sizes:** 12px (Names), 9px (Sublabels), 8px (Annotations), 7px (Tiny labels) -- **Background:** Slate-950 (`#020617`) with a subtle 40px grid pattern - -```svg - - - - -``` - -## Technical Implementation Details - -### Component Rendering -Components are rounded rectangles (`rx="6"`) with 1.5px strokes. To prevent arrows from showing through semi-transparent fills, use a **double-rect masking technique**: -1. Draw an opaque background rect (`#0f172a`) -2. Draw the semi-transparent styled rect on top - -### Connection Rules -- **Z-Order:** Draw arrows *early* in the SVG (after the grid) so they render behind component boxes -- **Arrowheads:** Defined via SVG markers -- **Security Flows:** Use dashed lines in rose color (`#fb7185`) -- **Boundaries:** - - *Security Groups:* Dashed (`4,4`), rose color - - *Regions:* Large dashed (`8,4`), amber color, `rx="12"` - -### Spacing & Layout Logic -- **Standard Height:** 60px (Services); 80-120px (Large components) -- **Vertical Gap:** Minimum 40px between components -- **Message Buses:** Must be placed *in the gap* between services, not overlapping them -- **Legend Placement:** **CRITICAL.** Must be placed outside all boundary boxes. Calculate the lowest Y-coordinate of all boundaries and place the legend at least 20px below it. - -## Document Structure - -The generated HTML file follows a four-part layout: -1. **Header:** Title with a pulsing dot indicator and subtitle -2. **Main SVG:** The diagram contained within a rounded border card -3. **Summary Cards:** A grid of three cards below the diagram for high-level details -4. **Footer:** Minimal metadata - -### Info Card Pattern -```html -
-
-
-

Title

-
-
    -
  • • Item one
    • -
  • • Item two
    • -
-
-``` - -## Output Requirements -- **Single File:** One self-contained `.html` file -- **No External Dependencies:** All CSS and SVG must be inline (except Google Fonts) -- **No JavaScript:** Use pure CSS for any animations (like pulsing dots) -- **Compatibility:** Must render correctly in any modern web browser - -## Template Reference - -Load the full HTML template for the exact structure, CSS, and SVG component examples: - -``` -skill_view(name="architecture-diagram", file_path="templates/template.html") -``` - -The template contains working examples of every component type (frontend, backend, database, cloud, security), arrow styles (standard, dashed, curved), security groups, region boundaries, and the legend — use it as your structural reference when generating diagrams. diff --git a/website/docs/user-guide/skills/bundled/creative/creative-claude-design.md b/website/docs/user-guide/skills/bundled/creative/creative-claude-design.md index bf6f4eafaa3..8fa3c563bbf 100644 --- a/website/docs/user-guide/skills/bundled/creative/creative-claude-design.md +++ b/website/docs/user-guide/skills/bundled/creative/creative-claude-design.md @@ -21,7 +21,7 @@ Design one-off HTML artifacts (landing, deck, prototype). | License | MIT | | Platforms | linux, macos, windows | | Tags | `design`, `html`, `prototype`, `ux`, `ui`, `creative`, `artifact`, `deck`, `motion`, `design-system` | -| Related skills | [`design-md`](/docs/user-guide/skills/bundled/creative/creative-design-md), [`popular-web-designs`](/docs/user-guide/skills/bundled/creative/creative-popular-web-designs), [`excalidraw`](/docs/user-guide/skills/bundled/creative/creative-excalidraw), [`architecture-diagram`](/docs/user-guide/skills/bundled/creative/creative-architecture-diagram) | +| Related skills | [`html-artifact`](/docs/user-guide/skills/bundled/creative/creative-html-artifact), [`design-md`](/docs/user-guide/skills/bundled/creative/creative-design-md), [`popular-web-designs`](/docs/user-guide/skills/bundled/creative/creative-popular-web-designs), [`excalidraw`](/docs/user-guide/skills/bundled/creative/creative-excalidraw) | ## Reference: full SKILL.md @@ -37,19 +37,21 @@ The goal is to preserve Claude Design's useful design behavior and taste while r **Before starting, check for other web-design skills like `popular-web-designs` (ready-to-paste design systems for Stripe, Linear, Vercel, Notion, etc.) and `design-md` (Google's DESIGN.md token spec format).** If the user wants a known brand's look, load `popular-web-designs` alongside this one and let it supply the visual vocabulary. If the deliverable is a token spec file rather than a rendered artifact, use `design-md` instead. Full decision table below. -## When To Use This Skill vs `popular-web-designs` vs `design-md` +## When To Use This Skill vs `html-artifact` vs `popular-web-designs` vs `design-md` -Hermes has three design-related skills under `skills/creative/`. They do different jobs — load the right one (or combine them): +Several skills produce HTML — they do different jobs. Load the right one (or combine them): | Skill | What it gives you | Use when the user wants... | |---|---|---| -| **claude-design** (this one) | Design *process and taste* — how to scope a brief, gather context, produce variants, verify a local HTML artifact, avoid AI-design slop | a from-scratch designed artifact (landing page, prototype, deck, component lab, motion study) with no specific brand or token system dictated | +| **claude-design** (this one) | Visual design *process and taste* — how to scope a brief, gather context, produce variants, verify a local HTML artifact, avoid AI-design slop | a from-scratch *designed* artifact (landing page, prototype, deck, component lab, motion study) where the look itself is the point and no specific brand or token system is dictated | +| **html-artifact** | A house style for *information* artifacts — explainers, plans, reports, code reviews, technical/educational diagrams, throwaway editors | to *explain / plan / report / diagram / review* something as a shareable HTML page — the content is the point, not bespoke visual design | | **popular-web-designs** | 54 ready-to-paste design systems — exact colors, typography, components, CSS values for sites like Stripe, Linear, Vercel, Notion, Airbnb | "make it look like Stripe / Linear / Vercel", a page styled after a known brand, or a visual starting point pulled from a real product | | **design-md** | Google's DESIGN.md spec format — author/validate/diff/export design-token files, WCAG contrast checking, Tailwind/DTCG export | a formal, persistent, machine-readable design-system *spec file* (tokens + rationale) that lives in a repo and gets consumed by agents over time | Rule of thumb: -- **Process + taste, one-off artifact** → claude-design +- **Bespoke visual design, taste-driven artifact** → claude-design +- **Explain / plan / report / diagram as a shareable page** → html-artifact - **Match a known brand's look** → popular-web-designs (and let claude-design drive the process) - **Author the tokens spec itself** → design-md diff --git a/website/docs/user-guide/skills/bundled/creative/creative-design-md.md b/website/docs/user-guide/skills/bundled/creative/creative-design-md.md index a96723ddb7f..687916eb2dc 100644 --- a/website/docs/user-guide/skills/bundled/creative/creative-design-md.md +++ b/website/docs/user-guide/skills/bundled/creative/creative-design-md.md @@ -21,7 +21,7 @@ Author/validate/export Google's DESIGN.md token spec files. | License | MIT | | Platforms | linux, macos, windows | | Tags | `design`, `design-system`, `tokens`, `ui`, `accessibility`, `wcag`, `tailwind`, `dtcg`, `google` | -| Related skills | [`popular-web-designs`](/docs/user-guide/skills/bundled/creative/creative-popular-web-designs), [`claude-design`](/docs/user-guide/skills/bundled/creative/creative-claude-design), [`excalidraw`](/docs/user-guide/skills/bundled/creative/creative-excalidraw), [`architecture-diagram`](/docs/user-guide/skills/bundled/creative/creative-architecture-diagram) | +| Related skills | [`popular-web-designs`](/docs/user-guide/skills/bundled/creative/creative-popular-web-designs), [`claude-design`](/docs/user-guide/skills/bundled/creative/creative-claude-design), [`excalidraw`](/docs/user-guide/skills/bundled/creative/creative-excalidraw), [`html-artifact`](/docs/user-guide/skills/bundled/creative/creative-html-artifact) | ## Reference: full SKILL.md diff --git a/website/docs/user-guide/skills/bundled/creative/creative-html-artifact.md b/website/docs/user-guide/skills/bundled/creative/creative-html-artifact.md new file mode 100644 index 00000000000..0f34348ef2e --- /dev/null +++ b/website/docs/user-guide/skills/bundled/creative/creative-html-artifact.md @@ -0,0 +1,202 @@ +--- +title: "Html Artifact — Build self-contained HTML files to explain, plan, or review" +sidebar_label: "Html Artifact" +description: "Build self-contained HTML files to explain, plan, or review" +--- + +{/* This page is auto-generated from the skill's SKILL.md by website/scripts/generate-skill-docs.py. Edit the source SKILL.md, not this page. */} + +# Html Artifact + +Build self-contained HTML files to explain, plan, or review. + +## Skill metadata + +| | | +|---|---| +| Source | Bundled (installed by default) | +| Path | `skills/creative/html-artifact` | +| Version | `1.0.0` | +| Author | Anthropic (html-effectiveness gallery, MIT), adapted for Hermes Agent | +| License | MIT | +| Platforms | linux, macos, windows | +| Tags | `html`, `artifact`, `explainer`, `plan`, `report`, `code-review`, `diagram`, `svg`, `design`, `prototype`, `editor` | +| Related skills | [`claude-design`](/docs/user-guide/skills/bundled/creative/creative-claude-design), [`popular-web-designs`](/docs/user-guide/skills/bundled/creative/creative-popular-web-designs), [`design-md`](/docs/user-guide/skills/bundled/creative/creative-design-md), [`excalidraw`](/docs/user-guide/skills/bundled/creative/creative-excalidraw), [`p5js`](/docs/user-guide/skills/bundled/creative/creative-p5js) | + +## Reference: full SKILL.md + +:::info +The following is the complete skill definition that Hermes loads when this skill is triggered. This is what the agent sees as instructions when the skill is active. +::: + +# HTML Artifact Skill + +Produce a single self-contained `.html` file — no build step, no dependencies, no +CDN — whenever the deliverable is something a human should *read, share, or poke at*: +a concept explainer, an implementation plan, a status/incident report, a code-review +walkthrough, a technical or educational diagram, a set of design variants, or a +throwaway editor that exports its result back to you. + +HTML beats Markdown once a doc has color, layout, diagrams, tables, code, or +interaction. It opens in any browser, shares as a link, stays readable past 100 +lines, and can carry SVG diagrams and live controls Markdown can't. Default to an +HTML artifact when the user says "make an HTML file/artifact", or asks you to +*explain how X works*, *write up a plan/PR/report*, *diagram* something, *compare* +options, or *prototype* an interaction — even when they don't say "HTML". + +## Why this skill exists (and what it replaced) + +This skill **supersedes** three former skills — `sketch` (throwaway multi-variant +HTML mockups), `architecture-diagram` (dark-tech infra SVG), and `concept-diagrams` +(educational SVG). They were consolidated for a concrete reason: all three emitted +the *same artifact* — a single self-contained HTML file with inline CSS/SVG — and +overlapped heavily (three "diagram" skills, two "compare variants" paths, no shared +token system). Folding them into one mode-switched skill removes the +which-one-do-I-load ambiguity and gives every output the same house style, while +keeping each skill's unique value: the fidelity dial + verify loop (from `sketch`), +the dark infra aesthetic (from `architecture-diagram`), and the 9-ramp educational +system + archetype library (from `concept-diagrams`). + +The consolidation is footprint-safe: this skill has **zero dependencies** (no Node, +FFmpeg, Chromium, or pip packages — it authors plain HTML/CSS/SVG), so even though it +ships **bundled** (active by default) where `concept-diagrams` was optional, the only +always-in-context cost is this skill's one-line description. All references, +templates, and the example gallery load on demand. `concept-diagrams` was optional +because it was niche, not because it had an install cost — promoting that capability +into a general-purpose, zero-dep bundled skill is the right home for it. Diagram-style +work with a *real* install cost (e.g. `hyperframes`: Node + FFmpeg + Chromium) +deliberately stays optional and is **not** folded in here. + +Use a different skill when: matching a known brand's look → `popular-web-designs`; a +formal design-token spec file → `design-md`; a *bespoke visually-designed* artifact +where the look itself is the point → `claude-design`; hand-drawn/whiteboard +`.excalidraw` files → `excalidraw`; generative/animated canvas art → `p5js`. This +skill is for everything else that ships as a readable, shareable HTML page. + +## Reference files (load on demand) + +- `references/house-style.md` — the canonical `:root` token block, type system, + card/table/callout/code-block patterns. **Read this before authoring any artifact.** +- `references/examples.md` — 20 complete reference HTML files (Anthropic's + html-effectiveness gallery, MIT) keyed to each mode, plus the script to fetch them. + Read/fetch one that matches your task to calibrate the house style from a full example. +- `references/svg-diagrams.md` — hand-authored inline SVG: arrow markers, node + groups, decision diamonds, edge semantics, coordinate-grid discipline. Read for + any flowchart / architecture / concept diagram. +- `references/concept-archetypes.md` — the 9-ramp educational color system + a + library of diagram archetypes (timeline, tree, quadrant, layered stack, + before/after, hub-spoke, cross-section). Read for educational / non-software visuals. +- `references/dark-tech.md` — the dark "infra" token variant (carries the old + architecture-diagram aesthetic). Read for cloud/infra/system architecture diagrams. +- `references/throwaway-editors.md` — the single-file editor recipe and the + copy-to-clipboard export pattern that survives `file://`. Read when the artifact + needs interactive controls that export state back to a prompt. +- `references/fidelity-and-verify.md` — the throwaway↔presentation fidelity dial, + the multi-variant comparison layout, and the mandatory browser-vision verify loop. + +## Templates + +- `templates/base.html` — document scaffold with the house-style ` -``` - -### 4. Variant README - -Each variant's `README.md` answers: - -```markdown -## Variant: {stance name} - -### Design stance -One sentence on the principle driving this variant. - -### Key choices -- Layout: ... -- Typography: ... -- Color: ... -- Interaction: ... - -### Trade-offs -- Strong at: ... -- Weak at: ... - -### Best for -- The kind of user or use case this variant actually serves -``` - -### 5. Head-to-head - -After all variants are built, present them as a comparison. Don't just list — **opinionate**: - -```markdown -## Three takes on the home screen - -| Dimension | Calm editorial | Utilitarian dense | Playful split | -|-----------|----------------|-------------------|---------------| -| Density | Low | High | Medium | -| Primary action visibility | Low | High | Medium | -| Scan-ability | High | Medium | Low | -| Feel | Calm, trusted | Sharp, tool-like | Inviting, energetic | - -**My take:** Utilitarian dense for power users, calm editorial for content-forward audiences. Playful split is weakest — tries to do both and commits to neither. -``` - -Let the user pick a winner, or combine two into a hybrid, or ask for another round. - -## Theming (when the project has a visual identity) - -If the user has an existing theme (colors, fonts, tokens), put shared tokens in `sketches/themes/tokens.css` and `@import` them in each variant. Keep tokens minimal: - -```css -/* sketches/themes/tokens.css */ -:root { - --color-bg: #fafafa; - --color-fg: #1a1a1a; - --color-accent: #0066ff; - --color-muted: #666; - --radius: 8px; - --font-display: "Inter", sans-serif; - --font-body: -apple-system, BlinkMacSystemFont, sans-serif; -} -``` - -Don't over-tokenize a throwaway sketch — three colors and one font is usually enough. - -## Interactivity bar - -A sketch is interactive enough when the user can: - -1. **Click a primary action** and something visible happens (state change, modal, toast, navigation feint) -2. **See one meaningful state transition** (filter a list, toggle a mode, open/close a panel) -3. **Hover recognizable affordances** (buttons, rows, tabs) - -More than that is over-engineering a throwaway. Less than that is a screenshot. - -## Frontier mode (picking what to sketch next) - -If sketches already exist and the user says "what should I sketch next?": - -- **Consistency gaps** — two winning variants from different sketches made independent choices that haven't been composed together yet -- **Unsketched screens** — referenced but never explored -- **State coverage** — happy path sketched, but not empty / loading / error / 1000-items -- **Responsive gaps** — validated at one viewport; does it hold at mobile / ultrawide? -- **Interaction patterns** — static layouts exist; transitions, drag, scroll behavior don't - -Propose 2-4 named candidates. Let the user pick. - -## Output - -- Create `sketches/` (or `.planning/sketches/` if the user is using GSD conventions) in the repo root -- One subdir per variant: `NNN-stance-name/index.html` + `README.md` -- Tell the user how to open them: `open sketches/001-calm-editorial/index.html` on macOS, `xdg-open` on Linux, `start` on Windows -- Keep variants disposable — a sketch that you felt the need to preserve should be promoted into real project code, not curated as an asset - -**Typical tool sequence for one variant:** - -``` -terminal("mkdir -p sketches/001-calm-editorial") -write_file("sketches/001-calm-editorial/index.html", "...") -write_file("sketches/001-calm-editorial/README.md", "## Variant: Calm editorial\n...") -browser_navigate(url="file://$(pwd)/sketches/001-calm-editorial/index.html") -browser_vision(question="How does this look? Any obvious layout issues?") -``` - -Repeat for each variant, then present the comparison table. - -## Attribution - -Adapted from the GSD (Get Shit Done) project's `/gsd-sketch` workflow — MIT © 2025 Lex Christopherson ([gsd-build/get-shit-done](https://github.com/gsd-build/get-shit-done)). The full GSD system ships persistent sketch state, theme/variant pattern references, and consistency-audit workflows; install with `npx get-shit-done-cc --hermes --global`. diff --git a/website/docs/user-guide/skills/bundled/creative/creative-touchdesigner-mcp.md b/website/docs/user-guide/skills/bundled/creative/creative-touchdesigner-mcp.md index 2577f1f741c..9a14bceffd9 100644 --- a/website/docs/user-guide/skills/bundled/creative/creative-touchdesigner-mcp.md +++ b/website/docs/user-guide/skills/bundled/creative/creative-touchdesigner-mcp.md @@ -21,7 +21,7 @@ Control a running TouchDesigner instance via twozero MCP — create operators, s | License | MIT | | Platforms | linux, macos, windows | | Tags | `TouchDesigner`, `MCP`, `twozero`, `creative-coding`, `real-time-visuals`, `generative-art`, `audio-reactive`, `VJ`, `installation`, `GLSL` | -| Related skills | [`native-mcp`](/docs/user-guide/skills/bundled/mcp/mcp-native-mcp), [`ascii-video`](/docs/user-guide/skills/bundled/creative/creative-ascii-video), [`manim-video`](/docs/user-guide/skills/bundled/creative/creative-manim-video), `hermes-video` | +| Related skills | `native-mcp`, [`ascii-video`](/docs/user-guide/skills/bundled/creative/creative-ascii-video), [`manim-video`](/docs/user-guide/skills/bundled/creative/creative-manim-video), `hermes-video` | ## Reference: full SKILL.md diff --git a/website/docs/user-guide/skills/bundled/email/email-himalaya.md b/website/docs/user-guide/skills/bundled/email/email-himalaya.md index adf3d973635..34c868e9f26 100644 --- a/website/docs/user-guide/skills/bundled/email/email-himalaya.md +++ b/website/docs/user-guide/skills/bundled/email/email-himalaya.md @@ -32,6 +32,11 @@ The following is the complete skill definition that Hermes loads when this skill Himalaya is a CLI email client that lets you manage emails from the terminal using IMAP, SMTP, Notmuch, or Sendmail backends. +This skill is separate from the Hermes Email gateway adapter. The gateway +adapter lets people email the agent and uses Hermes' built-in IMAP/SMTP +adapter; this skill lets the agent operate a mailbox from terminal tools and +requires the external `himalaya` CLI. + ## References - `references/configuration.md` (config file setup + IMAP/SMTP authentication) diff --git a/website/docs/user-guide/skills/bundled/github/github-github-auth.md b/website/docs/user-guide/skills/bundled/github/github-github-auth.md index 92b9d9f6690..35e631fb237 100644 --- a/website/docs/user-guide/skills/bundled/github/github-github-auth.md +++ b/website/docs/user-guide/skills/bundled/github/github-github-auth.md @@ -238,8 +238,8 @@ if command -v gh &>/dev/null && gh auth status &>/dev/null; then echo "AUTH_METHOD=gh" elif [ -n "$GITHUB_TOKEN" ]; then echo "AUTH_METHOD=curl" -elif [ -f ~/.hermes/.env ] && grep -q "^GITHUB_TOKEN=" ~/.hermes/.env; then - export GITHUB_TOKEN=$(grep "^GITHUB_TOKEN=" ~/.hermes/.env | head -1 | cut -d= -f2 | tr -d '\n\r') +elif _hermes_env="${HERMES_HOME:-$HOME/.hermes}/.env"; [ -f "$_hermes_env" ] && grep -q "^GITHUB_TOKEN=" "$_hermes_env"; then + export GITHUB_TOKEN=$(grep "^GITHUB_TOKEN=" "$_hermes_env" | head -1 | cut -d= -f2 | tr -d '\n\r') echo "AUTH_METHOD=curl" elif grep -q "github.com" ~/.git-credentials 2>/dev/null; then export GITHUB_TOKEN=$(grep "github.com" ~/.git-credentials | head -1 | sed 's|https://[^:]*:\([^@]*\)@.*|\1|') diff --git a/website/docs/user-guide/skills/bundled/github/github-github-code-review.md b/website/docs/user-guide/skills/bundled/github/github-github-code-review.md index 56e8fa97ad2..a7adc59e119 100644 --- a/website/docs/user-guide/skills/bundled/github/github-github-code-review.md +++ b/website/docs/user-guide/skills/bundled/github/github-github-code-review.md @@ -46,8 +46,8 @@ if command -v gh &>/dev/null && gh auth status &>/dev/null; then else AUTH="git" if [ -z "$GITHUB_TOKEN" ]; then - if [ -f ~/.hermes/.env ] && grep -q "^GITHUB_TOKEN=" ~/.hermes/.env; then - GITHUB_TOKEN=$(grep "^GITHUB_TOKEN=" ~/.hermes/.env | head -1 | cut -d= -f2 | tr -d '\n\r') + if _hermes_env="${HERMES_HOME:-$HOME/.hermes}/.env"; [ -f "$_hermes_env" ] && grep -q "^GITHUB_TOKEN=" "$_hermes_env"; then + GITHUB_TOKEN=$(grep "^GITHUB_TOKEN=" "$_hermes_env" | head -1 | cut -d= -f2 | tr -d '\n\r') elif grep -q "github.com" ~/.git-credentials 2>/dev/null; then GITHUB_TOKEN=$(grep "github.com" ~/.git-credentials 2>/dev/null | head -1 | sed 's|https://[^:]*:\([^@]*\)@.*|\1|') fi diff --git a/website/docs/user-guide/skills/bundled/github/github-github-issues.md b/website/docs/user-guide/skills/bundled/github/github-github-issues.md index 6f99685d71a..fa3dc52c7e2 100644 --- a/website/docs/user-guide/skills/bundled/github/github-github-issues.md +++ b/website/docs/user-guide/skills/bundled/github/github-github-issues.md @@ -46,8 +46,8 @@ if command -v gh &>/dev/null && gh auth status &>/dev/null; then else AUTH="git" if [ -z "$GITHUB_TOKEN" ]; then - if [ -f ~/.hermes/.env ] && grep -q "^GITHUB_TOKEN=" ~/.hermes/.env; then - GITHUB_TOKEN=$(grep "^GITHUB_TOKEN=" ~/.hermes/.env | head -1 | cut -d= -f2 | tr -d '\n\r') + if _hermes_env="${HERMES_HOME:-$HOME/.hermes}/.env"; [ -f "$_hermes_env" ] && grep -q "^GITHUB_TOKEN=" "$_hermes_env"; then + GITHUB_TOKEN=$(grep "^GITHUB_TOKEN=" "$_hermes_env" | head -1 | cut -d= -f2 | tr -d '\n\r') elif grep -q "github.com" ~/.git-credentials 2>/dev/null; then GITHUB_TOKEN=$(grep "github.com" ~/.git-credentials 2>/dev/null | head -1 | sed 's|https://[^:]*:\([^@]*\)@.*|\1|') fi diff --git a/website/docs/user-guide/skills/bundled/github/github-github-pr-workflow.md b/website/docs/user-guide/skills/bundled/github/github-github-pr-workflow.md index 48aa4ea9fff..a0221be3d73 100644 --- a/website/docs/user-guide/skills/bundled/github/github-github-pr-workflow.md +++ b/website/docs/user-guide/skills/bundled/github/github-github-pr-workflow.md @@ -48,8 +48,8 @@ else AUTH="git" # Ensure we have a token for API calls if [ -z "$GITHUB_TOKEN" ]; then - if [ -f ~/.hermes/.env ] && grep -q "^GITHUB_TOKEN=" ~/.hermes/.env; then - GITHUB_TOKEN=$(grep "^GITHUB_TOKEN=" ~/.hermes/.env | head -1 | cut -d= -f2 | tr -d '\n\r') + if _hermes_env="${HERMES_HOME:-$HOME/.hermes}/.env"; [ -f "$_hermes_env" ] && grep -q "^GITHUB_TOKEN=" "$_hermes_env"; then + GITHUB_TOKEN=$(grep "^GITHUB_TOKEN=" "$_hermes_env" | head -1 | cut -d= -f2 | tr -d '\n\r') elif grep -q "github.com" ~/.git-credentials 2>/dev/null; then GITHUB_TOKEN=$(grep "github.com" ~/.git-credentials 2>/dev/null | head -1 | sed 's|https://[^:]*:\([^@]*\)@.*|\1|') fi diff --git a/website/docs/user-guide/skills/bundled/github/github-github-repo-management.md b/website/docs/user-guide/skills/bundled/github/github-github-repo-management.md index 0921e3dbccc..b87a7abdf37 100644 --- a/website/docs/user-guide/skills/bundled/github/github-github-repo-management.md +++ b/website/docs/user-guide/skills/bundled/github/github-github-repo-management.md @@ -45,8 +45,8 @@ if command -v gh &>/dev/null && gh auth status &>/dev/null; then else AUTH="git" if [ -z "$GITHUB_TOKEN" ]; then - if [ -f ~/.hermes/.env ] && grep -q "^GITHUB_TOKEN=" ~/.hermes/.env; then - GITHUB_TOKEN=$(grep "^GITHUB_TOKEN=" ~/.hermes/.env | head -1 | cut -d= -f2 | tr -d '\n\r') + if _hermes_env="${HERMES_HOME:-$HOME/.hermes}/.env"; [ -f "$_hermes_env" ] && grep -q "^GITHUB_TOKEN=" "$_hermes_env"; then + GITHUB_TOKEN=$(grep "^GITHUB_TOKEN=" "$_hermes_env" | head -1 | cut -d= -f2 | tr -d '\n\r') elif grep -q "github.com" ~/.git-credentials 2>/dev/null; then GITHUB_TOKEN=$(grep "github.com" ~/.git-credentials 2>/dev/null | head -1 | sed 's|https://[^:]*:\([^@]*\)@.*|\1|') fi diff --git a/website/docs/user-guide/skills/bundled/media/media-gif-search.md b/website/docs/user-guide/skills/bundled/media/media-gif-search.md index c26c5fd4a5e..31d0e03eb88 100644 --- a/website/docs/user-guide/skills/bundled/media/media-gif-search.md +++ b/website/docs/user-guide/skills/bundled/media/media-gif-search.md @@ -38,7 +38,7 @@ Useful for finding reaction GIFs, creating visual content, and sending GIFs in c ## Setup -Set your Tenor API key in your environment (add to `~/.hermes/.env`): +Set your Tenor API key in your environment (add to `${HERMES_HOME:-~/.hermes}/.env`): ```bash TENOR_API_KEY=your_key_here diff --git a/website/docs/user-guide/skills/bundled/note-taking/note-taking-obsidian.md b/website/docs/user-guide/skills/bundled/note-taking/note-taking-obsidian.md index e8315c2fd4f..49f317144d7 100644 --- a/website/docs/user-guide/skills/bundled/note-taking/note-taking-obsidian.md +++ b/website/docs/user-guide/skills/bundled/note-taking/note-taking-obsidian.md @@ -32,7 +32,7 @@ Use this skill for filesystem-first Obsidian vault work: reading notes, listing Use a known or resolved vault path before calling file tools. -The documented vault-path convention is the `OBSIDIAN_VAULT_PATH` environment variable, for example from `~/.hermes/.env`. If it is unset, use `~/Documents/Obsidian Vault`. +The documented vault-path convention is the `OBSIDIAN_VAULT_PATH` environment variable, for example from `${HERMES_HOME:-~/.hermes}/.env`. If it is unset, use `~/Documents/Obsidian Vault`. File tools do not expand shell variables. Do not pass paths containing `$OBSIDIAN_VAULT_PATH` to `read_file`, `write_file`, `patch`, or `search_files`; resolve the vault path first and pass a concrete absolute path. Vault paths may contain spaces, which is another reason to prefer file tools over shell commands. diff --git a/website/docs/user-guide/skills/bundled/productivity/productivity-airtable.md b/website/docs/user-guide/skills/bundled/productivity/productivity-airtable.md index bc4b4686433..05a3e13fba0 100644 --- a/website/docs/user-guide/skills/bundled/productivity/productivity-airtable.md +++ b/website/docs/user-guide/skills/bundled/productivity/productivity-airtable.md @@ -40,7 +40,7 @@ Work with Airtable's REST API directly via `curl` using the `terminal` tool. No - `data.records:write` — create / update / delete rows - `schema.bases:read` — list bases and tables 3. **Important:** in the same token UI, add each base you want to access to the token's **Access** list. PATs are scoped per-base — a valid token on the wrong base returns `403`. -4. Store the token in `~/.hermes/.env` (or via `hermes setup`): +4. Store the token in `${HERMES_HOME:-~/.hermes}/.env` (or via `hermes setup`): ``` AIRTABLE_API_KEY=pat_your_token_here ``` @@ -236,7 +236,7 @@ done ## Important Notes for Hermes - **Always use the `terminal` tool with `curl`.** Do NOT use `web_extract` (it can't send auth headers) or `browser_navigate` (needs UI auth and is slow). -- **`AIRTABLE_API_KEY` flows from `~/.hermes/.env` into the subprocess automatically** when this skill is loaded — no need to re-export it before each `curl` call. +- **`AIRTABLE_API_KEY` flows from `${HERMES_HOME:-~/.hermes}/.env` into the subprocess automatically** when this skill is loaded — no need to re-export it before each `curl` call. - **Escape curly braces in formulas carefully.** In a heredoc body, `{Status}` is literal. In a shell argument, `{Status}` is safe outside `{...}` brace-expansion context — but pass dynamic strings through `python3 urllib.parse.quote` before splicing into a URL. - **Pretty-print with `python3 -m json.tool`** (always present) rather than `jq` (optional). Only reach for `jq` when you need filtering/projection. - **Pagination is per-page, not global.** Airtable's 100-record cap is a hard limit; there is no way to bump it. Loop with `offset` until the field is absent. diff --git a/website/docs/user-guide/skills/bundled/productivity/productivity-notion.md b/website/docs/user-guide/skills/bundled/productivity/productivity-notion.md index 80487d6b88f..985240ca41f 100644 --- a/website/docs/user-guide/skills/bundled/productivity/productivity-notion.md +++ b/website/docs/user-guide/skills/bundled/productivity/productivity-notion.md @@ -41,7 +41,7 @@ Talk to Notion two ways. Same integration token works for both — pick by what' 1. Create an integration at https://notion.so/my-integrations 2. Copy the API key (starts with `ntn_` or `secret_`) -3. Store in `~/.hermes/.env`: +3. Store in `${HERMES_HOME:-~/.hermes}/.env`: ``` NOTION_API_KEY=ntn_your_key_here ``` @@ -65,7 +65,7 @@ export NOTION_API_TOKEN=$NOTION_API_KEY # ntn reads NOTION_API_TOKEN export NOTION_KEYRING=0 # don't try to use the OS keychain ``` -Add those exports to your shell profile (or to `~/.hermes/.env`) so every session inherits them. +Add those exports to your shell profile (or to `${HERMES_HOME:-~/.hermes}/.env`) so every session inherits them. ### 3. Choose path at runtime diff --git a/website/docs/user-guide/skills/bundled/productivity/productivity-teams-meeting-pipeline.md b/website/docs/user-guide/skills/bundled/productivity/productivity-teams-meeting-pipeline.md index 125021bc4cb..8fb4c066302 100644 --- a/website/docs/user-guide/skills/bundled/productivity/productivity-teams-meeting-pipeline.md +++ b/website/docs/user-guide/skills/bundled/productivity/productivity-teams-meeting-pipeline.md @@ -50,7 +50,7 @@ Multilingual trigger examples (not exhaustive): ## Prerequisites -Before using the pipeline, verify these are set in `~/.hermes/.env`: +Before using the pipeline, verify these are set in `${HERMES_HOME:-~/.hermes}/.env`: ```bash MSGRAPH_TENANT_ID=... diff --git a/website/docs/user-guide/skills/bundled/research/research-llm-wiki.md b/website/docs/user-guide/skills/bundled/research/research-llm-wiki.md index 419c7cd7cb2..a6097a1a07c 100644 --- a/website/docs/user-guide/skills/bundled/research/research-llm-wiki.md +++ b/website/docs/user-guide/skills/bundled/research/research-llm-wiki.md @@ -52,7 +52,7 @@ Use this skill when the user: ## Wiki Location -**Location:** Set via `WIKI_PATH` environment variable (e.g. in `~/.hermes/.env`). +**Location:** Set via `WIKI_PATH` environment variable (e.g. in `${HERMES_HOME:-~/.hermes}/.env`). If unset, defaults to `~/wiki`. diff --git a/website/docs/user-guide/skills/bundled/research/research-research-paper-writing.md b/website/docs/user-guide/skills/bundled/research/research-research-paper-writing.md index 9dc216ebac7..611215c06c3 100644 --- a/website/docs/user-guide/skills/bundled/research/research-research-paper-writing.md +++ b/website/docs/user-guide/skills/bundled/research/research-research-paper-writing.md @@ -22,7 +22,7 @@ Write ML papers for NeurIPS/ICML/ICLR: design→submit. | Dependencies | `semanticscholar`, `arxiv`, `habanero`, `requests`, `scipy`, `numpy`, `matplotlib`, `SciencePlots` | | Platforms | linux, macos | | Tags | `Research`, `Paper Writing`, `Experiments`, `ML`, `AI`, `NeurIPS`, `ICML`, `ICLR`, `ACL`, `AAAI`, `COLM`, `LaTeX`, `Citations`, `Statistical Analysis` | -| Related skills | [`arxiv`](/docs/user-guide/skills/bundled/research/research-arxiv), `ml-paper-writing`, [`subagent-driven-development`](/docs/user-guide/skills/bundled/software-development/software-development-subagent-driven-development), [`plan`](/docs/user-guide/skills/bundled/software-development/software-development-plan) | +| Related skills | [`arxiv`](/docs/user-guide/skills/bundled/research/research-arxiv), `ml-paper-writing`, [`subagent-driven-development`](/docs/user-guide/skills/optional/software-development/software-development-subagent-driven-development), [`plan`](/docs/user-guide/skills/bundled/software-development/software-development-plan) | ## Reference: full SKILL.md diff --git a/website/docs/user-guide/skills/bundled/software-development/software-development-node-inspect-debugger.md b/website/docs/user-guide/skills/bundled/software-development/software-development-node-inspect-debugger.md index deddf5dafdb..5257512e9e6 100644 --- a/website/docs/user-guide/skills/bundled/software-development/software-development-node-inspect-debugger.md +++ b/website/docs/user-guide/skills/bundled/software-development/software-development-node-inspect-debugger.md @@ -21,7 +21,7 @@ Debug Node.js via --inspect + Chrome DevTools Protocol CLI. | License | MIT | | Platforms | linux, macos, windows | | Tags | `debugging`, `nodejs`, `node-inspect`, `cdp`, `breakpoints`, `ui-tui` | -| Related skills | [`systematic-debugging`](/docs/user-guide/skills/bundled/software-development/software-development-systematic-debugging), [`python-debugpy`](/docs/user-guide/skills/bundled/software-development/software-development-python-debugpy), [`debugging-hermes-tui-commands`](/docs/user-guide/skills/bundled/software-development/software-development-debugging-hermes-tui-commands) | +| Related skills | [`systematic-debugging`](/docs/user-guide/skills/bundled/software-development/software-development-systematic-debugging), [`python-debugpy`](/docs/user-guide/skills/bundled/software-development/software-development-python-debugpy), `debugging-hermes-tui-commands` | ## Reference: full SKILL.md diff --git a/website/docs/user-guide/skills/bundled/software-development/software-development-python-debugpy.md b/website/docs/user-guide/skills/bundled/software-development/software-development-python-debugpy.md index 0524b1f3ab9..dbc26409efe 100644 --- a/website/docs/user-guide/skills/bundled/software-development/software-development-python-debugpy.md +++ b/website/docs/user-guide/skills/bundled/software-development/software-development-python-debugpy.md @@ -21,7 +21,7 @@ Debug Python: pdb REPL + debugpy remote (DAP). | License | MIT | | Platforms | linux, macos | | Tags | `debugging`, `python`, `pdb`, `debugpy`, `breakpoints`, `dap`, `post-mortem` | -| Related skills | [`systematic-debugging`](/docs/user-guide/skills/bundled/software-development/software-development-systematic-debugging), [`node-inspect-debugger`](/docs/user-guide/skills/bundled/software-development/software-development-node-inspect-debugger), [`debugging-hermes-tui-commands`](/docs/user-guide/skills/bundled/software-development/software-development-debugging-hermes-tui-commands) | +| Related skills | [`systematic-debugging`](/docs/user-guide/skills/bundled/software-development/software-development-systematic-debugging), [`node-inspect-debugger`](/docs/user-guide/skills/bundled/software-development/software-development-node-inspect-debugger), `debugging-hermes-tui-commands` | ## Reference: full SKILL.md diff --git a/website/docs/user-guide/skills/bundled/software-development/software-development-spike.md b/website/docs/user-guide/skills/bundled/software-development/software-development-spike.md index 56c0954b698..694cdcbf7af 100644 --- a/website/docs/user-guide/skills/bundled/software-development/software-development-spike.md +++ b/website/docs/user-guide/skills/bundled/software-development/software-development-spike.md @@ -21,7 +21,7 @@ Throwaway experiments to validate an idea before build. | License | MIT | | Platforms | linux, macos, windows | | Tags | `spike`, `prototype`, `experiment`, `feasibility`, `throwaway`, `exploration`, `research`, `planning`, `mvp`, `proof-of-concept` | -| Related skills | [`sketch`](/docs/user-guide/skills/bundled/creative/creative-sketch), [`subagent-driven-development`](/docs/user-guide/skills/optional/software-development/software-development-subagent-driven-development), [`plan`](/docs/user-guide/skills/bundled/software-development/software-development-plan) | +| Related skills | [`html-artifact`](/docs/user-guide/skills/bundled/creative/creative-html-artifact), [`subagent-driven-development`](/docs/user-guide/skills/optional/software-development/software-development-subagent-driven-development), [`plan`](/docs/user-guide/skills/bundled/software-development/software-development-plan) | ## Reference: full SKILL.md diff --git a/website/docs/user-guide/skills/optional/autonomous-ai-agents/autonomous-ai-agents-honcho.md b/website/docs/user-guide/skills/optional/autonomous-ai-agents/autonomous-ai-agents-honcho.md index 1b989116636..a54a2a0dea0 100644 --- a/website/docs/user-guide/skills/optional/autonomous-ai-agents/autonomous-ai-agents-honcho.md +++ b/website/docs/user-guide/skills/optional/autonomous-ai-agents/autonomous-ai-agents-honcho.md @@ -47,14 +47,14 @@ Honcho provides AI-native cross-session user modeling. It learns who the user is ### Cloud (app.honcho.dev) ```bash -hermes honcho setup +hermes memory setup honcho # select "cloud", paste API key from https://app.honcho.dev ``` ### Self-hosted ```bash -hermes honcho setup +hermes memory setup honcho # select "local", enter base URL (e.g. http://localhost:8000) ``` diff --git a/website/docs/user-guide/skills/optional/blockchain/blockchain-hyperliquid.md b/website/docs/user-guide/skills/optional/blockchain/blockchain-hyperliquid.md index 8651bc979f6..177dfe36a10 100644 --- a/website/docs/user-guide/skills/optional/blockchain/blockchain-hyperliquid.md +++ b/website/docs/user-guide/skills/optional/blockchain/blockchain-hyperliquid.md @@ -53,7 +53,7 @@ Read-only — no API key, no signing, no order placement. Stdlib only — no external packages, no API key. -The script reads `~/.hermes/.env` for two optional defaults: +The script reads `${HERMES_HOME:-~/.hermes}/.env` for two optional defaults: - `HYPERLIQUID_API_URL` — defaults to `https://api.hyperliquid.xyz`. Set to `https://api.hyperliquid-testnet.xyz` for testnet. @@ -97,7 +97,7 @@ hyperliquid_client.py export [--interval 1h] [--hours N] [--output PATH] ``` For `state`, `spot-balances`, `fills`, `orders`, and `review`, the address is -optional when `HYPERLIQUID_USER_ADDRESS` is set in `~/.hermes/.env`. +optional when `HYPERLIQUID_USER_ADDRESS` is set in `${HERMES_HOME:-~/.hermes}/.env`. --- diff --git a/website/docs/user-guide/skills/optional/creative/creative-concept-diagrams.md b/website/docs/user-guide/skills/optional/creative/creative-concept-diagrams.md deleted file mode 100644 index 9b3ba92b3bd..00000000000 --- a/website/docs/user-guide/skills/optional/creative/creative-concept-diagrams.md +++ /dev/null @@ -1,379 +0,0 @@ ---- -title: "Concept Diagrams" -sidebar_label: "Concept Diagrams" -description: "Generate flat, minimal light/dark-aware SVG diagrams as standalone HTML files, using a unified educational visual language with 9 semantic color ramps, sente..." ---- - -{/* This page is auto-generated from the skill's SKILL.md by website/scripts/generate-skill-docs.py. Edit the source SKILL.md, not this page. */} - -# Concept Diagrams - -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. - -## Skill metadata - -| | | -|---|---| -| Source | Optional — install with `hermes skills install official/creative/concept-diagrams` | -| Path | `optional-skills/creative/concept-diagrams` | -| Version | `0.1.0` | -| Author | v1k22 (original PR), ported into hermes-agent | -| License | MIT | -| Platforms | linux, macos, windows | -| Tags | `diagrams`, `svg`, `visualization`, `education`, `physics`, `chemistry`, `engineering` | -| Related skills | [`architecture-diagram`](/docs/user-guide/skills/bundled/creative/creative-architecture-diagram), [`excalidraw`](/docs/user-guide/skills/bundled/creative/creative-excalidraw), `generative-widgets` | - -## Reference: full SKILL.md - -:::info -The following is the complete skill definition that Hermes loads when this skill is triggered. This is what the agent sees as instructions when the skill is active. -::: - -# Concept Diagrams - -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. - -## Scope - -**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) - -**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) - -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 - -1. Decide on the diagram type (see Diagram Types below). -2. Lay out components using the Design System rules. -3. Write the full HTML page using `templates/template.html` as the wrapper — paste your SVG where the template says ``. -4. Save as a standalone `.html` file (for example `~/my-diagram.html` or `./my-diagram.html`). -5. User opens it directly in a browser — no server, no dependencies. - -Optional: if the user wants a browsable gallery of multiple diagrams, see "Local Preview Server" at the bottom. - -Load the HTML template: -``` -skill_view(name="concept-diagrams", file_path="templates/template.html") -``` - -The template embeds the full CSS design system (`c-*` color classes, text classes, light/dark variables, arrow marker styles). The SVG you generate relies on these classes being present on the hosting page. - ---- - -## Design System - -### Philosophy - -- **Flat**: no gradients, drop shadows, blur, glow, or neon effects. -- **Minimal**: show the essential. No decorative icons inside boxes. -- **Consistent**: same colors, spacing, typography, and stroke widths across every diagram. -- **Dark-mode ready**: all colors auto-adapt via CSS classes — no per-mode SVG. - -### Color Palette - -9 color ramps, each with 7 stops. Put the class name on a `` or shape element; the template CSS handles both modes. - -| Class | 50 (lightest) | 100 | 200 | 400 | 600 | 800 | 900 (darkest) | -|------------|---------------|---------|---------|---------|---------|---------|---------------| -| `c-purple` | #EEEDFE | #CECBF6 | #AFA9EC | #7F77DD | #534AB7 | #3C3489 | #26215C | -| `c-teal` | #E1F5EE | #9FE1CB | #5DCAA5 | #1D9E75 | #0F6E56 | #085041 | #04342C | -| `c-coral` | #FAECE7 | #F5C4B3 | #F0997B | #D85A30 | #993C1D | #712B13 | #4A1B0C | -| `c-pink` | #FBEAF0 | #F4C0D1 | #ED93B1 | #D4537E | #993556 | #72243E | #4B1528 | -| `c-gray` | #F1EFE8 | #D3D1C7 | #B4B2A9 | #888780 | #5F5E5A | #444441 | #2C2C2A | -| `c-blue` | #E6F1FB | #B5D4F4 | #85B7EB | #378ADD | #185FA5 | #0C447C | #042C53 | -| `c-green` | #EAF3DE | #C0DD97 | #97C459 | #639922 | #3B6D11 | #27500A | #173404 | -| `c-amber` | #FAEEDA | #FAC775 | #EF9F27 | #BA7517 | #854F0B | #633806 | #412402 | -| `c-red` | #FCEBEB | #F7C1C1 | #F09595 | #E24B4A | #A32D2D | #791F1F | #501313 | - -#### Color Assignment Rules - -Color encodes **meaning**, not sequence. Never cycle through colors like a rainbow. - -- Group nodes by **category** — all nodes of the same type share one color. -- Use `c-gray` for neutral/structural nodes (start, end, generic steps, users). -- Use **2-3 colors per diagram**, not 6+. -- Prefer `c-purple`, `c-teal`, `c-coral`, `c-pink` for general categories. -- Reserve `c-blue`, `c-green`, `c-amber`, `c-red` for semantic meaning (info, success, warning, error). - -Light/dark stop mapping (handled by the template CSS — just use the class): -- Light mode: 50 fill + 600 stroke + 800 title / 600 subtitle -- Dark mode: 800 fill + 200 stroke + 100 title / 200 subtitle - -### Typography - -Only two font sizes. No exceptions. - -| Class | Size | Weight | Use | -|-------|------|--------|-----| -| `th` | 14px | 500 | Node titles, region labels | -| `ts` | 12px | 400 | Subtitles, descriptions, arrow labels | -| `t` | 14px | 400 | General text | - -- **Sentence case always.** Never Title Case, never ALL CAPS. -- Every `` MUST carry a class (`t`, `ts`, or `th`). No unclassed text. -- `dominant-baseline="central"` on all text inside boxes. -- `text-anchor="middle"` for centered text in boxes. - -**Width estimation (approx):** -- 14px weight 500: ~8px per character -- 12px weight 400: ~6.5px per character -- Always verify: `box_width >= (char_count × px_per_char) + 48` (24px padding each side) - -### Spacing & Layout - -- **ViewBox**: `viewBox="0 0 680 H"` where H = content height + 40px buffer. -- **Safe area**: x=40 to x=640, y=40 to y=(H-40). -- **Between boxes**: 60px minimum gap. -- **Inside boxes**: 24px horizontal padding, 12px vertical padding. -- **Arrowhead gap**: 10px between arrowhead and box edge. -- **Single-line box**: 44px height. -- **Two-line box**: 56px height, 18px between title and subtitle baselines. -- **Container padding**: 20px minimum inside every container. -- **Max nesting**: 2-3 levels deep. Deeper gets unreadable at 680px width. - -### Stroke & Shape - -- **Stroke width**: 0.5px on all node borders. Not 1px, not 2px. -- **Rect rounding**: `rx="8"` for nodes, `rx="12"` for inner containers, `rx="16"` to `rx="20"` for outer containers. -- **Connector paths**: MUST have `fill="none"`. SVG defaults to `fill: black` otherwise. - -### Arrow Marker - -Include this `` block at the start of **every** SVG: - -```xml - - - - - -``` - -Use `marker-end="url(#arrow)"` on lines. The arrowhead inherits the line color via `context-stroke`. - -### CSS Classes (Provided by the Template) - -The template page provides: - -- Text: `.t`, `.ts`, `.th` -- Neutral: `.box`, `.arr`, `.leader`, `.node` -- Color ramps: `.c-purple`, `.c-teal`, `.c-coral`, `.c-pink`, `.c-gray`, `.c-blue`, `.c-green`, `.c-amber`, `.c-red` (all with automatic light/dark mode) - -You do **not** need to redefine these — just apply them in your SVG. The template file contains the full CSS definitions. - ---- - -## SVG Boilerplate - -Every SVG inside the template page starts with this exact structure: - -```xml - - - - - - - - - - -``` - -Replace `{HEIGHT}` with the actual computed height (last element bottom + 40px). - -### Node Patterns - -**Single-line node (44px):** -```xml - - - Service name - -``` - -**Two-line node (56px):** -```xml - - - Service name - Short description - -``` - -**Connector (no label):** -```xml - -``` - -**Container (dashed or solid):** -```xml - - - Container label - Subtitle info - -``` - ---- - -## Diagram Types - -Choose the layout that fits the subject: - -1. **Flowchart** — CI/CD pipelines, request lifecycles, approval workflows, data processing. Single-direction flow (top-down or left-right). Max 4-5 nodes per row. -2. **Structural / Containment** — Cloud infrastructure nesting, system architecture with layers. Large outer containers with inner regions. Dashed rects for logical groupings. -3. **API / Endpoint Map** — REST routes, GraphQL schemas. Tree from root, branching to resource groups, each containing endpoint nodes. -4. **Microservice Topology** — Service mesh, event-driven systems. Services as nodes, arrows for communication patterns, message queues between. -5. **Data Flow** — ETL pipelines, streaming architectures. Left-to-right flow from sources through processing to sinks. -6. **Physical / Structural** — Vehicles, buildings, hardware, anatomy. Use shapes that match the physical form — `` for curved bodies, `` for tapered shapes, ``/`` for cylindrical parts, nested `` for compartments. See `references/physical-shape-cookbook.md`. -7. **Infrastructure / Systems Integration** — Smart cities, IoT networks, multi-domain systems. Hub-spoke layout with central platform connecting subsystems. Semantic line styles (`.data-line`, `.power-line`, `.water-pipe`, `.road`). See `references/infrastructure-patterns.md`. -8. **UI / Dashboard Mockups** — Admin panels, monitoring dashboards. Screen frame with nested chart/gauge/indicator elements. See `references/dashboard-patterns.md`. - -For physical, infrastructure, and dashboard diagrams, load the matching reference file before generating — each one provides ready-made CSS classes and shape primitives. - ---- - -## Validation Checklist - -Before finalizing any SVG, verify ALL of the following: - -1. Every `` has class `t`, `ts`, or `th`. -2. Every `` inside a box has `dominant-baseline="central"`. -3. Every connector `` or `` used as arrow has `fill="none"`. -4. No arrow line crosses through an unrelated box. -5. `box_width >= (longest_label_chars × 8) + 48` for 14px text. -6. `box_width >= (longest_label_chars × 6.5) + 48` for 12px text. -7. ViewBox height = bottom-most element + 40px. -8. All content stays within x=40 to x=640. -9. Color classes (`c-*`) are on `` or shape elements, never on `` connectors. -10. Arrow `` block is present. -11. No gradients, shadows, blur, or glow effects. -12. Stroke width is 0.5px on all node borders. - ---- - -## Output & Preview - -### Default: standalone HTML file - -Write a single `.html` file the user can open directly. No server, no dependencies, works offline. Pattern: - -```python -# 1. Load the template -template = skill_view("concept-diagrams", "templates/template.html") - -# 2. Fill in title, subtitle, and paste your SVG -html = template.replace( - "", "SN2 reaction mechanism" -).replace( - "", "Bimolecular nucleophilic substitution" -).replace( - "", svg_content -) - -# 3. Write to a user-chosen path (or ./ by default) -write_file("./sn2-mechanism.html", html) -``` - -Tell the user how to open it: - -``` -# macOS -open ./sn2-mechanism.html -# Linux -xdg-open ./sn2-mechanism.html -``` - -### Optional: local preview server (multi-diagram gallery) - -Only use this when the user explicitly wants a browsable gallery of multiple diagrams. - -**Rules:** -- Bind to `127.0.0.1` only. Never `0.0.0.0`. Exposing diagrams on all network interfaces is a security hazard on shared networks. -- Pick a free port (do NOT hard-code one) and tell the user the chosen URL. -- The server is optional and opt-in — prefer the standalone HTML file first. - -Recommended pattern (lets the OS pick a free ephemeral port): - -```bash -# Put each diagram in its own folder under .diagrams/ -mkdir -p .diagrams/sn2-mechanism -# ...write .diagrams/sn2-mechanism/index.html... - -# Serve on loopback only, free port -cd .diagrams && python3 -c " -import http.server, socketserver -with socketserver.TCPServer(('127.0.0.1', 0), http.server.SimpleHTTPRequestHandler) as s: - print(f'Serving at http://127.0.0.1:{s.server_address[1]}/') - s.serve_forever() -" & -``` - -If the user insists on a fixed port, use `127.0.0.1:` — still never `0.0.0.0`. Document how to stop the server (`kill %1` or `pkill -f "http.server"`). - ---- - -## Examples Reference - -The `examples/` directory ships 15 complete, tested diagrams. Browse them for working patterns before writing a new diagram of a similar type: - -| File | Type | Demonstrates | -|------|------|--------------| -| `hospital-emergency-department-flow.md` | Flowchart | Priority routing with semantic colors | -| `feature-film-production-pipeline.md` | Flowchart | Phased workflow, horizontal sub-flows | -| `automated-password-reset-flow.md` | Flowchart | Auth flow with error branches | -| `autonomous-llm-research-agent-flow.md` | Flowchart | Loop-back arrows, decision branches | -| `place-order-uml-sequence.md` | Sequence | UML sequence diagram style | -| `commercial-aircraft-structure.md` | Physical | Paths, polygons, ellipses for realistic shapes | -| `wind-turbine-structure.md` | Physical cross-section | Underground/above-ground separation, color coding | -| `smartphone-layer-anatomy.md` | Exploded view | Alternating left/right labels, layered components | -| `apartment-floor-plan-conversion.md` | Floor plan | Walls, doors, proposed changes in dotted red | -| `banana-journey-tree-to-smoothie.md` | Narrative journey | Winding path, progressive state changes | -| `cpu-ooo-microarchitecture.md` | Hardware pipeline | Fan-out, memory hierarchy sidebar | -| `sn2-reaction-mechanism.md` | Chemistry | Molecules, curved arrows, energy profile | -| `smart-city-infrastructure.md` | Hub-spoke | Semantic line styles per system | -| `electricity-grid-flow.md` | Multi-stage flow | Voltage hierarchy, flow markers | -| `ml-benchmark-grouped-bar-chart.md` | Chart | Grouped bars, dual axis | - -Load any example with: -``` -skill_view(name="concept-diagrams", file_path="examples/") -``` - ---- - -## Quick Reference: What to Use When - -| User says | Diagram type | Suggested colors | -|-----------|--------------|------------------| -| "show the pipeline" | Flowchart | gray start/end, purple steps, red errors, teal deploy | -| "draw the data flow" | Data pipeline (left-right) | gray sources, purple processing, teal sinks | -| "visualize the system" | Structural (containment) | purple container, teal services, coral data | -| "map the endpoints" | API tree | purple root, one ramp per resource group | -| "show the services" | Microservice topology | gray ingress, teal services, purple bus, coral workers | -| "draw the aircraft/vehicle" | Physical | paths, polygons, ellipses for realistic shapes | -| "smart city / IoT" | Hub-spoke integration | semantic line styles per subsystem | -| "show the dashboard" | UI mockup | dark screen, chart colors: teal, purple, coral for alerts | -| "power grid / electricity" | Multi-stage flow | voltage hierarchy (HV/MV/LV line weights) | -| "wind turbine / turbine" | Physical cross-section | foundation + tower cutaway + nacelle color-coded | -| "journey of X / lifecycle" | Narrative journey | winding path, progressive state changes | -| "layers of X / exploded" | Exploded layer view | vertical stack, alternating labels | -| "CPU / pipeline" | Hardware pipeline | vertical stages, fan-out to execution ports | -| "floor plan / apartment" | Floor plan | walls, doors, proposed changes in dotted red | -| "reaction mechanism" | Chemistry | atoms, bonds, curved arrows, transition state, energy profile | diff --git a/website/docs/user-guide/skills/optional/creative/creative-kanban-video-orchestrator.md b/website/docs/user-guide/skills/optional/creative/creative-kanban-video-orchestrator.md index 8fa3cdf127f..a148ba6d2d6 100644 --- a/website/docs/user-guide/skills/optional/creative/creative-kanban-video-orchestrator.md +++ b/website/docs/user-guide/skills/optional/creative/creative-kanban-video-orchestrator.md @@ -21,7 +21,7 @@ Plan, set up, and monitor a multi-agent video production pipeline backed by Herm | License | MIT | | Platforms | linux, macos, windows | | Tags | `video`, `kanban`, `multi-agent`, `orchestration`, `production-pipeline` | -| Related skills | [`kanban-orchestrator`](/docs/user-guide/skills/bundled/devops/devops-kanban-orchestrator), [`kanban-worker`](/docs/user-guide/skills/bundled/devops/devops-kanban-worker), [`ascii-video`](/docs/user-guide/skills/bundled/creative/creative-ascii-video), [`manim-video`](/docs/user-guide/skills/bundled/creative/creative-manim-video), [`p5js`](/docs/user-guide/skills/bundled/creative/creative-p5js), [`comfyui`](/docs/user-guide/skills/bundled/creative/creative-comfyui), [`touchdesigner-mcp`](/docs/user-guide/skills/bundled/creative/creative-touchdesigner-mcp), [`blender-mcp`](/docs/user-guide/skills/optional/creative/creative-blender-mcp), [`pixel-art`](/docs/user-guide/skills/bundled/creative/creative-pixel-art), [`ascii-art`](/docs/user-guide/skills/bundled/creative/creative-ascii-art), [`songwriting-and-ai-music`](/docs/user-guide/skills/bundled/creative/creative-songwriting-and-ai-music), [`heartmula`](/docs/user-guide/skills/bundled/media/media-heartmula), [`songsee`](/docs/user-guide/skills/bundled/media/media-songsee), [`spotify`](/docs/user-guide/skills/bundled/media/media-spotify), [`youtube-content`](/docs/user-guide/skills/bundled/media/media-youtube-content), [`claude-design`](/docs/user-guide/skills/bundled/creative/creative-claude-design), [`excalidraw`](/docs/user-guide/skills/bundled/creative/creative-excalidraw), [`architecture-diagram`](/docs/user-guide/skills/bundled/creative/creative-architecture-diagram), [`concept-diagrams`](/docs/user-guide/skills/optional/creative/creative-concept-diagrams), [`baoyu-comic`](/docs/user-guide/skills/bundled/creative/creative-baoyu-comic), [`baoyu-infographic`](/docs/user-guide/skills/bundled/creative/creative-baoyu-infographic), [`humanizer`](/docs/user-guide/skills/bundled/creative/creative-humanizer), [`gif-search`](/docs/user-guide/skills/bundled/media/media-gif-search), [`meme-generation`](/docs/user-guide/skills/optional/creative/creative-meme-generation) | +| Related skills | [`kanban-orchestrator`](/docs/user-guide/skills/bundled/devops/devops-kanban-orchestrator), [`kanban-worker`](/docs/user-guide/skills/bundled/devops/devops-kanban-worker), [`ascii-video`](/docs/user-guide/skills/bundled/creative/creative-ascii-video), [`manim-video`](/docs/user-guide/skills/bundled/creative/creative-manim-video), [`p5js`](/docs/user-guide/skills/bundled/creative/creative-p5js), [`comfyui`](/docs/user-guide/skills/bundled/creative/creative-comfyui), [`touchdesigner-mcp`](/docs/user-guide/skills/bundled/creative/creative-touchdesigner-mcp), [`blender-mcp`](/docs/user-guide/skills/optional/creative/creative-blender-mcp), [`pixel-art`](/docs/user-guide/skills/optional/creative/creative-pixel-art), [`ascii-art`](/docs/user-guide/skills/bundled/creative/creative-ascii-art), [`songwriting-and-ai-music`](/docs/user-guide/skills/bundled/creative/creative-songwriting-and-ai-music), [`heartmula`](/docs/user-guide/skills/bundled/media/media-heartmula), [`songsee`](/docs/user-guide/skills/bundled/media/media-songsee), `spotify`, [`youtube-content`](/docs/user-guide/skills/bundled/media/media-youtube-content), [`claude-design`](/docs/user-guide/skills/bundled/creative/creative-claude-design), [`excalidraw`](/docs/user-guide/skills/bundled/creative/creative-excalidraw), [`html-artifact`](/docs/user-guide/skills/bundled/creative/creative-html-artifact), [`baoyu-comic`](/docs/user-guide/skills/optional/creative/creative-baoyu-comic), [`baoyu-infographic`](/docs/user-guide/skills/bundled/creative/creative-baoyu-infographic), [`humanizer`](/docs/user-guide/skills/bundled/creative/creative-humanizer), [`gif-search`](/docs/user-guide/skills/bundled/media/media-gif-search), [`meme-generation`](/docs/user-guide/skills/optional/creative/creative-meme-generation) | ## Reference: full SKILL.md @@ -194,7 +194,7 @@ task graphs. See **[references/examples.md](https://github.com/NousResearch/herm right human-review gates. 8. **Verify API keys BEFORE firing.** External APIs (TTS, image-gen, - image-to-video) need keys in `~/.hermes/.env` or the user's secret store. + image-to-video) need keys in `${HERMES_HOME:-~/.hermes}/.env` or the user's secret store. A worker that hits a missing-key error wastes a task slot. The setup script's `check_key` helper aborts cleanly if a required key is missing. diff --git a/website/docs/user-guide/skills/optional/devops/devops-pinggy-tunnel.md b/website/docs/user-guide/skills/optional/devops/devops-pinggy-tunnel.md index 19f431f1967..18fb572bdcb 100644 --- a/website/docs/user-guide/skills/optional/devops/devops-pinggy-tunnel.md +++ b/website/docs/user-guide/skills/optional/devops/devops-pinggy-tunnel.md @@ -21,7 +21,7 @@ Zero-install localhost tunnels over SSH via Pinggy. | License | MIT | | Platforms | linux, macos, windows | | Tags | `Pinggy`, `Tunnel`, `Networking`, `SSH`, `Webhook`, `Localhost` | -| Related skills | `cloudflared-quick-tunnel`, [`webhook-subscriptions`](/docs/user-guide/skills/bundled/devops/devops-webhook-subscriptions) | +| Related skills | `cloudflared-quick-tunnel`, `webhook-subscriptions` | ## Reference: full SKILL.md diff --git a/website/docs/user-guide/skills/optional/devops/devops-watchers.md b/website/docs/user-guide/skills/optional/devops/devops-watchers.md index 8a56162bdb8..9d2fc7f7523 100644 --- a/website/docs/user-guide/skills/optional/devops/devops-watchers.md +++ b/website/docs/user-guide/skills/optional/devops/devops-watchers.md @@ -77,7 +77,7 @@ python $HERMES_HOME/skills/devops/watchers/scripts/watch_rss.py \ --name hn --url https://news.ycombinator.com/rss --max 5 ``` -Watch a GitHub repo (set `GITHUB_TOKEN` in `~/.hermes/.env` to avoid the 60 req/hr anonymous rate limit): +Watch a GitHub repo (set `GITHUB_TOKEN` in `${HERMES_HOME:-~/.hermes}/.env` to avoid the 60 req/hr anonymous rate limit): ```bash python $HERMES_HOME/skills/devops/watchers/scripts/watch_github.py \ diff --git a/website/docs/user-guide/skills/optional/mcp/mcp-fastmcp.md b/website/docs/user-guide/skills/optional/mcp/mcp-fastmcp.md index 2defe89d4eb..3efe47b12b8 100644 --- a/website/docs/user-guide/skills/optional/mcp/mcp-fastmcp.md +++ b/website/docs/user-guide/skills/optional/mcp/mcp-fastmcp.md @@ -21,7 +21,7 @@ Build, test, inspect, install, and deploy MCP servers with FastMCP in Python. Us | License | MIT | | Platforms | linux, macos, windows | | Tags | `MCP`, `FastMCP`, `Python`, `Tools`, `Resources`, `Prompts`, `Deployment` | -| Related skills | [`native-mcp`](/docs/user-guide/skills/bundled/mcp/mcp-native-mcp), [`mcporter`](/docs/user-guide/skills/optional/mcp/mcp-mcporter) | +| Related skills | `native-mcp`, [`mcporter`](/docs/user-guide/skills/optional/mcp/mcp-mcporter) | ## Reference: full SKILL.md diff --git a/website/docs/user-guide/skills/optional/payments/payments-stripe-projects.md b/website/docs/user-guide/skills/optional/payments/payments-stripe-projects.md index 74e60876bf5..fcd20673edd 100644 --- a/website/docs/user-guide/skills/optional/payments/payments-stripe-projects.md +++ b/website/docs/user-guide/skills/optional/payments/payments-stripe-projects.md @@ -44,7 +44,7 @@ Trigger phrases: - "manage my stack credentials", "rotate this key", "upgrade my plan" - "what providers can I add?" -If the user already has a provider account, this skill can still connect it with `stripe projects link <provider>`. If the user wants to use an existing provider resource, such as an existing database or Vercel project, check provider support first; many providers currently support provisioning new resources but not importing existing ones. +If the user already has a provider account, this skill can still connect it with `stripe projects link `. If the user wants to use an existing provider resource, such as an existing database or Vercel project, check provider support first; many providers currently support provisioning new resources but not importing existing ones. ## Prerequisites diff --git a/website/docs/user-guide/skills/optional/productivity/productivity-canvas.md b/website/docs/user-guide/skills/optional/productivity/productivity-canvas.md index e94a81b0407..11bbf7e2006 100644 --- a/website/docs/user-guide/skills/optional/productivity/productivity-canvas.md +++ b/website/docs/user-guide/skills/optional/productivity/productivity-canvas.md @@ -42,7 +42,7 @@ Read-only access to Canvas LMS for listing courses and assignments. 2. Go to **Account → Settings** (click your profile icon, then Settings) 3. Scroll to **Approved Integrations** and click **+ New Access Token** 4. Name the token (e.g., "Hermes Agent"), set an optional expiry, and click **Generate Token** -5. Copy the token and add to `~/.hermes/.env`: +5. Copy the token and add to `${HERMES_HOME:-~/.hermes}/.env`: ``` CANVAS_API_TOKEN=your_token_here diff --git a/website/docs/user-guide/skills/optional/productivity/productivity-shopify.md b/website/docs/user-guide/skills/optional/productivity/productivity-shopify.md index 61bc95cfa66..97d4116d82d 100644 --- a/website/docs/user-guide/skills/optional/productivity/productivity-shopify.md +++ b/website/docs/user-guide/skills/optional/productivity/productivity-shopify.md @@ -40,7 +40,7 @@ The REST Admin API is legacy since 2024-04 and only receives security fixes. **U 1. In Shopify admin: **Settings → Apps and sales channels → Develop apps → Create an app**. 2. Click **Configure Admin API scopes**, select what you need (examples below), save. 3. **Install app** → the Admin API access token appears ONCE. Copy it immediately — Shopify will never show it again. Tokens start with `shpat_`. -4. Save to `~/.hermes/.env`: +4. Save to `${HERMES_HOME:-~/.hermes}/.env`: ``` SHOPIFY_ACCESS_TOKEN=shpat_xxxxxxxxxxxxxxxxxxxx SHOPIFY_STORE_DOMAIN=my-store.myshopify.com diff --git a/website/docs/user-guide/skills/optional/productivity/productivity-siyuan.md b/website/docs/user-guide/skills/optional/productivity/productivity-siyuan.md index 58263053fdd..777ee265d11 100644 --- a/website/docs/user-guide/skills/optional/productivity/productivity-siyuan.md +++ b/website/docs/user-guide/skills/optional/productivity/productivity-siyuan.md @@ -37,7 +37,7 @@ Use the [SiYuan](https://github.com/siyuan-note/siyuan) kernel API via curl to s 1. Install and run SiYuan (desktop or Docker) 2. Get your API token: **Settings > About > API token** -3. Store it in `~/.hermes/.env`: +3. Store it in `${HERMES_HOME:-~/.hermes}/.env`: ``` SIYUAN_TOKEN=your_token_here SIYUAN_URL=http://127.0.0.1:6806 diff --git a/website/docs/user-guide/skills/optional/productivity/productivity-telephony.md b/website/docs/user-guide/skills/optional/productivity/productivity-telephony.md index f6c15444cbb..03d08bdc399 100644 --- a/website/docs/user-guide/skills/optional/productivity/productivity-telephony.md +++ b/website/docs/user-guide/skills/optional/productivity/productivity-telephony.md @@ -34,7 +34,7 @@ The following is the complete skill definition that Hermes loads when this skill This optional skill gives Hermes practical phone capabilities while keeping telephony out of the core tool list. It ships with a helper script, `scripts/telephony.py`, that can: -- save provider credentials into `~/.hermes/.env` +- save provider credentials into `${HERMES_HOME:-~/.hermes}/.env` - search for and buy a Twilio phone number - remember that owned number for later sessions - send SMS / MMS from the owned number @@ -121,7 +121,7 @@ Why: The skill persists telephony state in two places: -### `~/.hermes/.env` +### `${HERMES_HOME:-~/.hermes}/.env` Used for long-lived provider credentials and owned-number IDs, for example: - `TWILIO_ACCOUNT_SID` - `TWILIO_AUTH_TOKEN` @@ -258,7 +258,7 @@ python3 "$SCRIPT" save-twilio AC... auth_token_here python3 "$SCRIPT" twilio-search --country US --area-code 702 --limit 10 ``` -3. Buy it and save it into `~/.hermes/.env` + state: +3. Buy it and save it into `${HERMES_HOME:-~/.hermes}/.env` + state: ```bash python3 "$SCRIPT" twilio-buy "+17025551234" --save-env ``` @@ -420,7 +420,7 @@ After setup, you should be able to do all of the following with just this skill: 1. `diagnose` shows provider readiness and remembered state 2. search and buy a Twilio number -3. persist that number to `~/.hermes/.env` +3. persist that number to `${HERMES_HOME:-~/.hermes}/.env` 4. send an SMS from the owned number 5. poll inbound texts for the owned number later 6. place a direct Twilio call diff --git a/website/docs/user-guide/skills/optional/research/research-gitnexus-explorer.md b/website/docs/user-guide/skills/optional/research/research-gitnexus-explorer.md index 5b1f62458d1..a5f062dc373 100644 --- a/website/docs/user-guide/skills/optional/research/research-gitnexus-explorer.md +++ b/website/docs/user-guide/skills/optional/research/research-gitnexus-explorer.md @@ -21,7 +21,7 @@ Index a codebase with GitNexus and serve an interactive knowledge graph via web | License | MIT | | Platforms | linux, macos, windows | | Tags | `gitnexus`, `code-intelligence`, `knowledge-graph`, `visualization` | -| Related skills | [`native-mcp`](/docs/user-guide/skills/bundled/mcp/mcp-native-mcp), [`codebase-inspection`](/docs/user-guide/skills/bundled/github/github-codebase-inspection) | +| Related skills | `native-mcp`, [`codebase-inspection`](/docs/user-guide/skills/bundled/github/github-codebase-inspection) | ## Reference: full SKILL.md diff --git a/website/docs/user-guide/skills/optional/research/research-qmd.md b/website/docs/user-guide/skills/optional/research/research-qmd.md index 47cf81634b8..8d145080b45 100644 --- a/website/docs/user-guide/skills/optional/research/research-qmd.md +++ b/website/docs/user-guide/skills/optional/research/research-qmd.md @@ -21,7 +21,7 @@ Search personal knowledge bases, notes, docs, and meeting transcripts locally us | License | MIT | | Platforms | macos, linux | | Tags | `Search`, `Knowledge-Base`, `RAG`, `Notes`, `MCP`, `Local-AI` | -| Related skills | [`obsidian`](/docs/user-guide/skills/bundled/note-taking/note-taking-obsidian), [`native-mcp`](/docs/user-guide/skills/bundled/mcp/mcp-native-mcp), [`arxiv`](/docs/user-guide/skills/bundled/research/research-arxiv) | +| Related skills | [`obsidian`](/docs/user-guide/skills/bundled/note-taking/note-taking-obsidian), `native-mcp`, [`arxiv`](/docs/user-guide/skills/bundled/research/research-arxiv) | ## Reference: full SKILL.md diff --git a/website/docs/user-guide/skills/optional/security/security-1password.md b/website/docs/user-guide/skills/optional/security/security-1password.md index 4ed526a87b6..c2c3fccb6e9 100644 --- a/website/docs/user-guide/skills/optional/security/security-1password.md +++ b/website/docs/user-guide/skills/optional/security/security-1password.md @@ -51,7 +51,7 @@ Use this skill when the user wants secrets managed through 1Password instead of ### Service Account (recommended for Hermes) -Set `OP_SERVICE_ACCOUNT_TOKEN` in `~/.hermes/.env` (the skill will prompt for this on first load). +Set `OP_SERVICE_ACCOUNT_TOKEN` in `${HERMES_HOME:-~/.hermes}/.env` (the skill will prompt for this on first load). No desktop app needed. Supports `op read`, `op inject`, `op run`. ```bash diff --git a/website/docs/user-guide/skills/optional/security/security-godmode.md b/website/docs/user-guide/skills/optional/security/security-godmode.md index ee12f700f6d..f41975a4966 100644 --- a/website/docs/user-guide/skills/optional/security/security-godmode.md +++ b/website/docs/user-guide/skills/optional/security/security-godmode.md @@ -418,4 +418,4 @@ Claude Sonnet 4 is robust against all current techniques for clearly harmful con 9. **Always use `load_godmode.py` in execute_code** — The individual scripts (`parseltongue.py`, `godmode_race.py`, `auto_jailbreak.py`) have argparse CLI entry points with `if __name__ == '__main__'` blocks. When loaded via `exec()` in execute_code, `__name__` is `'__main__'` and argparse fires, crashing the script. The `load_godmode.py` loader handles this by setting `__name__` to a non-main value and managing sys.argv. 10. **boundary_inversion is model-version specific** — Works on Claude 3.5 Sonnet but NOT Claude Sonnet 4 or Claude 4.6. The strategy order in auto_jailbreak tries it first for Claude models, but falls through to refusal_inversion when it fails. Update the strategy order if you know the model version. 11. **Gray-area vs hard queries** — Jailbreak techniques work much better on "dual-use" queries (lock picking, security tools, chemistry) than on overtly harmful ones (phishing templates, malware). For hard queries, skip directly to ULTRAPLINIAN or use Hermes/Grok models that don't refuse. -12. **execute_code sandbox has no env vars** — When Hermes runs auto_jailbreak via execute_code, the sandbox doesn't inherit `~/.hermes/.env`. Load dotenv explicitly: `from dotenv import load_dotenv; load_dotenv(os.path.expanduser("~/.hermes/.env"))` +12. **execute_code sandbox has no env vars** — When Hermes runs auto_jailbreak via execute_code, the sandbox doesn't inherit the Hermes `.env`. Load dotenv explicitly: `import os; from dotenv import load_dotenv; load_dotenv(os.path.join(os.environ.get("HERMES_HOME", os.path.expanduser("~/.hermes")), ".env"))` diff --git a/website/docs/user-guide/skills/optional/software-development/software-development-rest-graphql-debug.md b/website/docs/user-guide/skills/optional/software-development/software-development-rest-graphql-debug.md index 0698d855f5f..6c9f84bafcb 100644 --- a/website/docs/user-guide/skills/optional/software-development/software-development-rest-graphql-debug.md +++ b/website/docs/user-guide/skills/optional/software-development/software-development-rest-graphql-debug.md @@ -414,7 +414,7 @@ class TestAPISmoke: ### Token handling - Never log full tokens. Redact: `Bearer `. -- Never hardcode tokens in scripts. Read from env (`os.environ["API_TOKEN"]`) or `~/.hermes/.env`. +- Never hardcode tokens in scripts. Read from env (`os.environ["API_TOKEN"]`) or `${HERMES_HOME:-~/.hermes}/.env`. - Rotate immediately if a token surfaces in logs, error messages, or git history. ### Safe logging diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/optional-skills-catalog.md b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/optional-skills-catalog.md index aed044b3099..ff9b48cef6f 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/optional-skills-catalog.md +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/optional-skills-catalog.md @@ -53,7 +53,6 @@ hermes skills uninstall | 技能 | 描述 | |-------|-------------| | [**blender-mcp**](/user-guide/skills/optional/creative/creative-blender-mcp) | 通过 socket 连接 blender-mcp 插件，直接从 Hermes 控制 Blender。创建 3D 对象、材质、动画，并运行任意 Blender Python（bpy）代码。适用于用户希望在 Blender 中创建或修改任何内容的场景。 | -| [**concept-diagrams**](/user-guide/skills/optional/creative/creative-concept-diagrams) | 生成扁平、极简、支持亮色/暗色模式的 SVG 图表，输出为独立 HTML 文件，采用统一的教育视觉语言，包含 9 种语义色阶、句首大写排版及自动暗色模式。最适合教育和说明类内容。 | | [**hyperframes**](/user-guide/skills/optional/creative/creative-hyperframes) | 使用 HyperFrames 创建基于 HTML 的视频合成、动态标题卡、社交叠层、字幕访谈视频、音频响应视觉效果及着色器转场。HTML 是视频的唯一来源。适用于用户希望制作任何视频内容的场景。 | | [**kanban-video-orchestrator**](/user-guide/skills/optional/creative/creative-kanban-video-orchestrator) | 规划、搭建并监控由 Hermes Kanban 支撑的多 agent 视频制作流水线。适用于用户希望制作任何类型视频的场景 — 叙事影片、产品/营销视频、MV、解说视频、ASCII/终端艺术、抽象/生成式循环等。 | | [**meme-generation**](/user-guide/skills/optional/creative/creative-meme-generation) | 通过选取模板并使用 Pillow 叠加文字来生成真实的 meme 图片，输出实际的 .png 文件。 | diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/skills-catalog.md b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/skills-catalog.md index 20773484b6c..f6f24bd932d 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/skills-catalog.md +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/skills-catalog.md @@ -35,7 +35,6 @@ Hermes 在执行 `hermes update` 时也会同步内置技能，但同步清单 | 技能 | 描述 | 路径 | |-------|-------------|------| -| [`architecture-diagram`](/user-guide/skills/bundled/creative/creative-architecture-diagram) | 以 HTML 形式生成深色主题的 SVG 架构/云/基础设施图。 | `creative/architecture-diagram` | | [`ascii-art`](/user-guide/skills/bundled/creative/creative-ascii-art) | ASCII 艺术：pyfiglet、cowsay、boxes、图像转 ASCII。 | `creative/ascii-art` | | [`ascii-video`](/user-guide/skills/bundled/creative/creative-ascii-video) | ASCII 视频：将视频/音频转换为彩色 ASCII MP4/GIF。 | `creative/ascii-video` | | [`baoyu-infographic`](/user-guide/skills/bundled/creative/creative-baoyu-infographic) | 信息图（可视化）：21 种布局 × 21 种风格。 | `creative/baoyu-infographic` | @@ -48,7 +47,6 @@ Hermes 在执行 `hermes update` 时也会同步内置技能，但同步清单 | [`p5js`](/user-guide/skills/bundled/creative/creative-p5js) | p5.js 草图：生成艺术、着色器、交互、3D。 | `creative/p5js` | | [`popular-web-designs`](/user-guide/skills/bundled/creative/creative-popular-web-designs) | 54 种真实设计系统（Stripe、Linear、Vercel）的 HTML/CSS 实现。 | `creative/popular-web-designs` | | [`pretext`](/user-guide/skills/bundled/creative/creative-pretext) | 使用 @chenglou/pretext 构建创意浏览器 demo——无 DOM 的文本布局，支持 ASCII 艺术、绕障碍物的排版流、文字即几何游戏、动态排版和文字驱动的生成艺术。生成单文件 HTML。 | `creative/pretext` | -| [`sketch`](/user-guide/skills/bundled/creative/creative-sketch) | 一次性 HTML 原型：生成 2-3 个设计变体供对比。 | `creative/sketch` | | [`songwriting-and-ai-music`](/user-guide/skills/bundled/creative/creative-songwriting-and-ai-music) | 歌曲创作技巧与 Suno AI 音乐 prompt（提示词）。 | `creative/songwriting-and-ai-music` | | [`touchdesigner-mcp`](/user-guide/skills/bundled/creative/creative-touchdesigner-mcp) | 通过 twozero MCP 控制运行中的 TouchDesigner 实例——创建算子、设置参数、连接节点、执行 Python、构建实时视觉效果。36 个原生工具。 | `creative/touchdesigner-mcp` | diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-architecture-diagram.md b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-architecture-diagram.md deleted file mode 100644 index 60846a64f16..00000000000 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-architecture-diagram.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: "Architecture Diagram — 深色主题 SVG 架构/云/基础设施图表（HTML 格式）" -sidebar_label: "Architecture Diagram" -description: "深色主题 SVG 架构/云/基础设施图表（HTML 格式）" ---- - -{/* This page is auto-generated from the skill's SKILL.md by website/scripts/generate-skill-docs.py. Edit the source SKILL.md, not this page. */} - -# Architecture Diagram - -深色主题 SVG 架构/云/基础设施图表，以 HTML 格式输出。 - -## Skill 元数据 - -| | | -|---|---| -| 来源 | 内置（默认安装） | -| 路径 | `skills/creative/architecture-diagram` | -| 版本 | `1.0.0` | -| 作者 | Cocoon AI (hello@cocoon-ai.com)，由 Hermes Agent 移植 | -| 许可证 | MIT | -| 平台 | linux, macos, windows | -| 标签 | `architecture`, `diagrams`, `SVG`, `HTML`, `visualization`, `infrastructure`, `cloud` | -| 相关 skill | [`concept-diagrams`](/user-guide/skills/optional/creative/creative-concept-diagrams), [`excalidraw`](/user-guide/skills/bundled/creative/creative-excalidraw) | - -## 参考：完整 SKILL.md - -:::info -以下是 Hermes 在触发该 skill 时加载的完整 skill 定义。这是 agent 在 skill 激活时所看到的指令内容。 -::: - -# Architecture Diagram Skill - -生成专业的深色主题技术架构图，输出为包含内联 SVG 图形的独立 HTML 文件。无需外部工具、无需 API 密钥、无需渲染库——只需写入 HTML 文件并在浏览器中打开即可。 - -## 适用范围 - -**最适合：** -- 软件系统架构（前端/后端/数据库层） -- 云基础设施（VPC、区域、子网、托管服务） -- 微服务/服务网格拓扑 -- 数据库 + API 映射、部署图 -- 任何具有技术基础设施主题、适合深色网格背景风格的内容 - -**以下场景请优先考虑其他工具：** -- 物理、化学、数学、生物或其他科学学科 -- 实物对象（车辆、硬件、解剖结构、截面图） -- 平面图、叙事流程、教育/教科书风格的视觉内容 -- 手绘白板草图（建议使用 `excalidraw`） -- 动画说明（建议使用动画相关 skill） - -如果有更专业的 skill 适用于该主题，请优先使用。如果没有合适的，本 skill 也可作为通用 SVG 图表的备选方案——输出内容将带有下述深色技术风格。 - -基于 [Cocoon AI 的 architecture-diagram-generator](https://github.com/Cocoon-AI/architecture-diagram-generator)（MIT 许可证）。 - -## 工作流程 - -1. 用户描述其系统架构（组件、连接关系、技术栈） -2. 按照下方设计规范生成 HTML 文件 -3. 使用 `write_file` 保存为 `.html` 文件（例如 `~/architecture-diagram.html`） -4. 用户在任意浏览器中打开——支持离线使用，无需任何依赖 - -### 输出位置 - -将图表保存到用户指定路径，或默认保存至当前工作目录： -``` -./[project-name]-architecture.html -``` - -### 预览 - -保存后，建议用户通过以下命令打开： -```bash -# macOS -open ./my-architecture.html -# Linux -xdg-open ./my-architecture.html -``` - -## 设计规范与视觉语言 - -### 颜色方案（语义映射） - -使用特定的 `rgba` 填充色和十六进制描边色对组件进行分类： - -| 组件类型 | 填充色（rgba） | 描边色（Hex） | -| :--- | :--- | :--- | -| **前端** | `rgba(8, 51, 68, 0.4)` | `#22d3ee`（cyan-400） | -| **后端** | `rgba(6, 78, 59, 0.4)` | `#34d399`（emerald-400） | -| **数据库** | `rgba(76, 29, 149, 0.4)` | `#a78bfa`（violet-400） | -| **AWS/云** | `rgba(120, 53, 15, 0.3)` | `#fbbf24`（amber-400） | -| **安全** | `rgba(136, 19, 55, 0.4)` | `#fb7185`（rose-400） | -| **消息总线** | `rgba(251, 146, 60, 0.3)` | `#fb923c`（orange-400） | -| **外部** | `rgba(30, 41, 59, 0.5)` | `#94a3b8`（slate-400） | - -### 字体与背景 -- **字体：** JetBrains Mono（等宽字体），从 Google Fonts 加载 -- **字号：** 12px（名称）、9px（副标签）、8px（注释）、7px（极小标签） -- **背景：** Slate-950（`#020617`），带有细腻的 40px 网格图案 - -```svg - - - - -``` - -## 技术实现细节 - -### 组件渲染 -组件为圆角矩形（`rx="6"`），描边宽度 1.5px。为防止箭头透过半透明填充色显现，使用**双矩形遮罩技术**： -1. 绘制不透明背景矩形（`#0f172a`） -2. 在其上方绘制半透明样式矩形 - -### 连接规则 -- **Z 轴顺序：** 在 SVG 早期绘制箭头（在网格之后），使其渲染在组件框的下方 -- **箭头头部：** 通过 SVG marker 定义 -- **安全流：** 使用 rose 色（`#fb7185`）虚线 -- **边界：** - - *安全组：* 虚线（`4,4`），rose 色 - - *区域：* 大虚线（`8,4`），amber 色，`rx="12"` - -### 间距与布局规则 -- **标准高度：** 60px（服务）；80–120px（大型组件） -- **垂直间距：** 组件之间最小 40px -- **消息总线：** 必须放置在服务之间的间隙中，不得与其重叠 -- **图例位置：** **关键。** 必须放置在所有边界框的外部。计算所有边界的最低 Y 坐标，并将图例放置在其下方至少 20px 处。 - -## 文档结构 - -生成的 HTML 文件遵循四段式布局： -1. **页眉：** 带有脉冲点指示器的标题和副标题 -2. **主 SVG：** 包含在圆角边框卡片中的图表 -3. **摘要卡片：** 图表下方的三张卡片网格，用于展示高层次详情 -4. **页脚：** 简洁的元数据信息 - -### 信息卡片模式 -```html -
-
-
-

Title

-
-
    -
  • • Item one
    • -
  • • Item two
    • -
-
-``` - -## 输出要求 -- **单文件：** 一个自包含的 `.html` 文件 -- **无外部依赖：** 所有 CSS 和 SVG 必须内联（Google Fonts 除外） -- **无 JavaScript：** 所有动画（如脉冲点）使用纯 CSS 实现 -- **兼容性：** 必须在任何现代浏览器中正确渲染 - -## 模板参考 - -加载完整 HTML 模板以获取精确的结构、CSS 和 SVG 组件示例： - -``` -skill_view(name="architecture-diagram", file_path="templates/template.html") -``` - -模板包含每种组件类型（前端、后端、数据库、云、安全）、箭头样式（标准、虚线、曲线）、安全组、区域边界和图例的完整示例——生成图表时请以此作为结构参考。 \ No newline at end of file diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-claude-design.md b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-claude-design.md index 6d1b7529ab3..7aaa2d26f2d 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-claude-design.md +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-claude-design.md @@ -21,7 +21,7 @@ description: "设计一次性 HTML 制品（落地页、幻灯片、原型）" | 许可证 | MIT | | 平台 | linux, macos, windows | | 标签 | `design`, `html`, `prototype`, `ux`, `ui`, `creative`, `artifact`, `deck`, `motion`, `design-system` | -| 相关 skill | [`design-md`](/user-guide/skills/bundled/creative/creative-design-md), [`popular-web-designs`](/user-guide/skills/bundled/creative/creative-popular-web-designs), [`excalidraw`](/user-guide/skills/bundled/creative/creative-excalidraw), [`architecture-diagram`](/user-guide/skills/bundled/creative/creative-architecture-diagram) | +| 相关 skill | [`design-md`](/user-guide/skills/bundled/creative/creative-design-md), [`popular-web-designs`](/user-guide/skills/bundled/creative/creative-popular-web-designs), [`excalidraw`](/user-guide/skills/bundled/creative/creative-excalidraw), [`html-artifact`](/user-guide/skills/bundled/creative/creative-html-artifact) | ## 参考：完整 SKILL.md diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-design-md.md b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-design-md.md index 4d21eb7f671..e9fc5aade25 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-design-md.md +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-design-md.md @@ -21,7 +21,7 @@ description: "编写/验证/导出 Google 的 DESIGN" | 许可证 | MIT | | 平台 | linux, macos, windows | | 标签 | `design`, `design-system`, `tokens`, `ui`, `accessibility`, `wcag`, `tailwind`, `dtcg`, `google` | -| 相关 skill | [`popular-web-designs`](/user-guide/skills/bundled/creative/creative-popular-web-designs), [`claude-design`](/user-guide/skills/bundled/creative/creative-claude-design), [`excalidraw`](/user-guide/skills/bundled/creative/creative-excalidraw), [`architecture-diagram`](/user-guide/skills/bundled/creative/creative-architecture-diagram) | +| 相关 skill | [`popular-web-designs`](/user-guide/skills/bundled/creative/creative-popular-web-designs), [`claude-design`](/user-guide/skills/bundled/creative/creative-claude-design), [`excalidraw`](/user-guide/skills/bundled/creative/creative-excalidraw), [`html-artifact`](/user-guide/skills/bundled/creative/creative-html-artifact) | ## 参考：完整 SKILL.md diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-pretext.md b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-pretext.md index 83dadb74c8d..243e776f6a7 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-pretext.md +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-pretext.md @@ -21,7 +21,7 @@ description: "适用于使用 @chenglou/pretext 构建创意浏览器演示 — | 许可证 | MIT | | 平台 | linux, macos, windows | | 标签 | `creative-coding`, `typography`, `pretext`, `ascii-art`, `canvas`, `generative`, `text-layout`, `kinetic-typography` | -| 相关 skill | [`p5js`](/user-guide/skills/bundled/creative/creative-p5js), [`claude-design`](/user-guide/skills/bundled/creative/creative-claude-design), [`excalidraw`](/user-guide/skills/bundled/creative/creative-excalidraw), [`architecture-diagram`](/user-guide/skills/bundled/creative/creative-architecture-diagram) | +| 相关 skill | [`p5js`](/user-guide/skills/bundled/creative/creative-p5js), [`claude-design`](/user-guide/skills/bundled/creative/creative-claude-design), [`excalidraw`](/user-guide/skills/bundled/creative/creative-excalidraw), [`html-artifact`](/user-guide/skills/bundled/creative/creative-html-artifact) | ## 参考：完整 SKILL.md diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-sketch.md b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-sketch.md deleted file mode 100644 index 6478c87f362..00000000000 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/creative/creative-sketch.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: "Sketch — 一次性 HTML 原型：2-3 个设计方案对比" -sidebar_label: "Sketch" -description: "一次性 HTML 原型：2-3 个设计方案对比" ---- - -{/* This page is auto-generated from the skill's SKILL.md by website/scripts/generate-skill-docs.py. Edit the source SKILL.md, not this page. */} - -# Sketch - -一次性 HTML 原型：2-3 个设计方案对比。 - -## Skill 元数据 - -| | | -|---|---| -| 来源 | 内置（默认安装） | -| 路径 | `skills/creative/sketch` | -| 版本 | `1.0.0` | -| 作者 | Hermes Agent（改编自 gsd-build/get-shit-done） | -| 许可证 | MIT | -| 平台 | linux, macos, windows | -| 标签 | `sketch`, `mockup`, `design`, `ui`, `prototype`, `html`, `variants`, `exploration`, `wireframe`, `comparison` | -| 相关 skill | [`spike`](/user-guide/skills/bundled/software-development/software-development-spike), [`claude-design`](/user-guide/skills/bundled/creative/creative-claude-design), [`popular-web-designs`](/user-guide/skills/bundled/creative/creative-popular-web-designs), [`excalidraw`](/user-guide/skills/bundled/creative/creative-excalidraw) | - -## 参考：完整 SKILL.md - -:::info -以下是 Hermes 在触发该 skill 时加载的完整 skill 定义。这是 agent 在 skill 激活时所看到的指令内容。 -::: - -# Sketch - -当用户希望**在确定方向之前先看到设计效果**时使用此 skill——以一次性 HTML 原型的形式探索 UI/UX 想法。目的是生成 2-3 个可交互的方案，让用户并排对比视觉方向，而非产出可交付的代码。 - -当用户说以下内容时加载此 skill："sketch this screen"、"show me what X could look like"、"compare layout A vs B"、"give me 2-3 takes on this UI"、"let me see some variants"、"mockup this before I build"。 - -## 不适用场景 - -- 用户需要生产级组件——使用 `claude-design` 或正式构建 -- 用户需要精良的一次性 HTML 产物（落地页、幻灯片）——使用 `claude-design` -- 用户需要图表——使用 `excalidraw`、`architecture-diagram` -- 设计已确定——直接构建即可 - -## 如果用户安装了完整的 GSD 系统 - -如果 `gsd-sketch` 作为同级 skill 出现（通过 `npx get-shit-done-cc --hermes` 安装），优先使用 **`gsd-sketch`** 以获得完整工作流：持久化的 `.planning/sketches/` 目录（含 MANIFEST）、前沿模式分析、跨历史草图的一致性审计，以及与 GSD 其余部分的集成。本 skill 是轻量级独立版本——无状态机制的一次性草图。 - -## 核心方法 - -``` -intake → variants → head-to-head → pick winner (or iterate) -``` - -### 1. Intake（如果用户已提供足够信息则跳过） - -在生成方案之前，获取三项信息——每次只问一个问题，不要一次全问： - -1. **感觉。** "这个应该给人什么感觉？形容词、情绪、氛围。"——*"calm, editorial, like Linear"* 比 *"minimal"* 更有参考价值。 -2. **参考。** "哪些 app、网站或产品接近你想象中的感觉？"——实际参考比抽象描述更有效。 -3. **核心操作。** "用户在这个页面上最重要的单一操作是什么？"——所有方案都应服务于此；否则只是装饰。 - -每次回答后简短复述，再问下一个问题。如果用户已一次性提供了全部三项，直接跳到方案生成。 - -### 2. 方案（2-3 个，不少于 1 个，极少超过 4 个） - -一次性生成 **2-3 个方案**。每个方案是一个完整的独立 HTML 文件。不要描述方案——直接构建。目的是对比。 - -每个方案应采取**不同的设计立场**，而非不同的像素值。三种有效的方案维度： - -- **密度：** 紧凑 / 宽松 / 极密（选两个对比极端） -- **重点：** 内容优先 / 操作优先 / 工具优先 -- **美学：** 编辑风格 / 实用主义 / 趣味性 -- **布局：** 单列 / 侧边栏 / 分屏 -- **基调：** 卡片式 / 纯内容 / 文档风格 - -选定一个维度并从中拉开差距。两个仅在强调色上不同的方案是无效的——用户无法区分。 - -**方案命名：** 描述立场，而非编号。 - - -``` -sketches/ -├── 001-calm-editorial/ -│ ├── index.html -│ └── README.md -├── 001-utilitarian-dense/ -│ ├── index.html -│ └── README.md -└── 001-playful-split/ - ├── index.html - └── README.md -``` - - -### 3. 制作真实的 HTML - -每个方案是一个**单一自包含的 HTML 文件**： - -- 内联 ` -``` - -### 4. 方案 README - -每个方案的 `README.md` 回答以下内容： - -```markdown -## Variant: {stance name} - -### Design stance -One sentence on the principle driving this variant. - -### Key choices -- Layout: ... -- Typography: ... -- Color: ... -- Interaction: ... - -### Trade-offs -- Strong at: ... -- Weak at: ... - -### Best for -- The kind of user or use case this variant actually serves -``` - -### 5. 正面对比 - -所有方案构建完成后，以对比形式呈现。不要只是罗列——**给出观点**： - -```markdown -## Three takes on the home screen - -| Dimension | Calm editorial | Utilitarian dense | Playful split | -|-----------|----------------|-------------------|---------------| -| Density | Low | High | Medium | -| Primary action visibility | Low | High | Medium | -| Scan-ability | High | Medium | Low | -| Feel | Calm, trusted | Sharp, tool-like | Inviting, energetic | - -**My take:** Utilitarian dense for power users, calm editorial for content-forward audiences. Playful split is weakest — tries to do both and commits to neither. -``` - -让用户选出胜出方案，或将两个方案合并为混合版，或要求新一轮迭代。 - -## 主题化（当项目有视觉标识时） - -如果用户有现有主题（颜色、字体、token），将共享 token 放入 `sketches/themes/tokens.css` 并在每个方案中 `@import`。保持 token 精简： - -```css -/* sketches/themes/tokens.css */ -:root { - --color-bg: #fafafa; - --color-fg: #1a1a1a; - --color-accent: #0066ff; - --color-muted: #666; - --radius: 8px; - --font-display: "Inter", sans-serif; - --font-body: -apple-system, BlinkMacSystemFont, sans-serif; -} -``` - -不要对一次性草图过度 token 化——三种颜色加一种字体通常已足够。 - -## 交互基准 - -当用户能够完成以下操作时，草图的交互程度即为合格： - -1. **点击主要操作**并看到可见的变化（状态变更、模态框、toast、导航模拟） -2. **看到一个有意义的状态转换**（筛选列表、切换模式、展开/收起面板） -3. **悬停可识别的交互元素**（按钮、行、标签页） - -超过此程度是对一次性草图的过度工程化。低于此程度则只是截图。 - -## 前沿模式（决定下一步草图内容） - -如果草图已存在且用户询问"接下来应该草图什么？"： - -- **一致性缺口**——来自不同草图的两个胜出方案做出了独立选择，尚未组合在一起 -- **未草图的页面**——被引用但从未探索过 -- **状态覆盖**——已草图了正常路径，但未覆盖空状态 / 加载中 / 错误 / 千条数据 -- **响应式缺口**——在某一视口下验证过；在移动端 / 超宽屏下是否成立？ -- **交互模式**——静态布局已存在；过渡动效、拖拽、滚动行为尚未探索 - -提出 2-4 个命名候选项，让用户选择。 - -## 输出 - -- 在仓库根目录创建 `sketches/`（如果用户使用 GSD 约定则为 `.planning/sketches/`） -- 每个方案一个子目录：`NNN-stance-name/index.html` + `README.md` -- 告知用户如何打开：macOS 上用 `open sketches/001-calm-editorial/index.html`，Linux 上用 `xdg-open`，Windows 上用 `start` -- 保持方案的一次性特性——如果你觉得有必要保留某个草图，应将其提升为真实项目代码，而非作为资产保管 - -**单个方案的典型工具调用序列：** - -``` -terminal("mkdir -p sketches/001-calm-editorial") -write_file("sketches/001-calm-editorial/index.html", "...") -write_file("sketches/001-calm-editorial/README.md", "## Variant: Calm editorial\n...") -browser_navigate(url="file://$(pwd)/sketches/001-calm-editorial/index.html") -browser_vision(question="How does this look? Any obvious layout issues?") -``` - -对每个方案重复上述步骤，然后呈现对比表格。 - -## 致谢 - -改编自 GSD（Get Shit Done）项目的 `/gsd-sketch` 工作流——MIT © 2025 Lex Christopherson（[gsd-build/get-shit-done](https://github.com/gsd-build/get-shit-done)）。完整 GSD 系统提供持久化草图状态、主题/方案模式参考及一致性审计工作流；通过 `npx get-shit-done-cc --hermes --global` 安装。 \ No newline at end of file diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/software-development/software-development-spike.md b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/software-development/software-development-spike.md index e5486edd0d3..be869779937 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/software-development/software-development-spike.md +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/bundled/software-development/software-development-spike.md @@ -21,7 +21,7 @@ description: "在构建前验证想法的一次性实验" | 许可证 | MIT | | 平台 | linux, macos, windows | | 标签 | `spike`, `prototype`, `experiment`, `feasibility`, `throwaway`, `exploration`, `research`, `planning`, `mvp`, `proof-of-concept` | -| 相关 skill | [`sketch`](/user-guide/skills/bundled/creative/creative-sketch)、[`writing-plans`](/user-guide/skills/bundled/software-development/software-development-writing-plans)、[`subagent-driven-development`](/user-guide/skills/bundled/software-development/software-development-subagent-driven-development)、[`plan`](/user-guide/skills/bundled/software-development/software-development-plan) | +| 相关 skill | [`html-artifact`](/user-guide/skills/bundled/creative/creative-html-artifact)、[`writing-plans`](/user-guide/skills/bundled/software-development/software-development-writing-plans)、[`subagent-driven-development`](/user-guide/skills/bundled/software-development/software-development-subagent-driven-development)、[`plan`](/user-guide/skills/bundled/software-development/software-development-plan) | ## 参考：完整 SKILL.md diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/optional/creative/creative-concept-diagrams.md b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/optional/creative/creative-concept-diagrams.md deleted file mode 100644 index 405f658a22b..00000000000 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/optional/creative/creative-concept-diagrams.md +++ /dev/null @@ -1,379 +0,0 @@ ---- -title: "概念图" -sidebar_label: "概念图" -description: "以统一的教育视觉语言生成扁平、简约、支持明暗模式的 SVG 图表，输出为独立 HTML 文件，包含 9 种语义色阶、句首大写排版及自动暗色模式。..." ---- - -{/* This page is auto-generated from the skill's SKILL.md by website/scripts/generate-skill-docs.py. Edit the source SKILL.md, not this page. */} - -# 概念图 - -以统一的教育视觉语言生成扁平、简约、支持明暗模式的 SVG 图表，输出为独立 HTML 文件，包含 9 种语义色阶、句首大写排版及自动暗色模式。最适合教育类和非软件类视觉内容——物理装置、化学机制、数学曲线、实物（飞机、涡轮机、智能手机、机械表）、解剖图、平面图、截面图、叙事流程（X 的生命周期、Y 的过程）、中心辐射型系统集成（智慧城市、IoT）以及爆炸分层视图。若已有更专业的 skill 适用于该主题（专用软件/云架构、手绘草图、动画说明等），优先使用那些 skill——否则本 skill 也可作为通用 SVG 图表的备选方案，具备简洁的教育风格外观。内置 15 个示例图表。 - -## Skill 元数据 - -| | | -|---|---| -| 来源 | 可选 — 通过 `hermes skills install official/creative/concept-diagrams` 安装 | -| 路径 | `optional-skills/creative/concept-diagrams` | -| 版本 | `0.1.0` | -| 作者 | v1k22（原始 PR），移植至 hermes-agent | -| 许可证 | MIT | -| 平台 | linux, macos, windows | -| 标签 | `diagrams`, `svg`, `visualization`, `education`, `physics`, `chemistry`, `engineering` | -| 相关 skills | [`architecture-diagram`](/user-guide/skills/bundled/creative/creative-architecture-diagram), [`excalidraw`](/user-guide/skills/bundled/creative/creative-excalidraw), `generative-widgets` | - -## 参考：完整 SKILL.md - -:::info -以下是 Hermes 在触发本 skill 时加载的完整 skill 定义。这是 agent 在 skill 激活时所看到的指令内容。 -::: - -# 概念图 - -使用统一的扁平、简约设计系统生成生产级 SVG 图表。输出为单个自包含 HTML 文件，可在任何现代浏览器中一致渲染，并自动支持明暗模式。 - -## 适用范围 - -**最适合：** -- 物理装置、化学机制、数学曲线、生物学 -- 实物（飞机、涡轮机、智能手机、机械表、细胞） -- 解剖图、截面图、爆炸分层视图 -- 平面图、建筑改造图 -- 叙事流程（X 的生命周期、Y 的过程） -- 中心辐射型系统集成（智慧城市、IoT 网络、电网） -- 任何领域的教育/教科书风格视觉内容 -- 定量图表（分组柱状图、能量曲线） - -**优先考虑其他方案：** -- 具有深色科技风格的专用软件/云基础设施架构（如有 `architecture-diagram` 可用，优先使用） -- 手绘白板草图（如有 `excalidraw` 可用，优先使用） -- 动画说明或视频输出（考虑动画 skill） - -若已有更专业的 skill 适用于该主题，优先使用。若无合适选项，本 skill 可作为通用 SVG 图表备选方案——输出将呈现下文描述的简洁教育风格，适用于几乎任何主题。 - -## 工作流程 - -1. 确定图表类型（见下方"图表类型"）。 -2. 使用设计系统规则布局组件。 -3. 使用 `templates/template.html` 作为包装器编写完整 HTML 页面——将 SVG 粘贴到模板中 `` 的位置。 -4. 保存为独立 `.html` 文件（例如 `~/my-diagram.html` 或 `./my-diagram.html`）。 -5. 用户直接在浏览器中打开——无需服务器，无需依赖。 - -可选：若用户需要可浏览的多图表画廊，参见底部"本地预览服务器"。 - -加载 HTML 模板： -``` -skill_view(name="concept-diagrams", file_path="templates/template.html") -``` - -模板内嵌完整 CSS 设计系统（`c-*` 颜色类、文本类、明暗变量、箭头标记样式）。你生成的 SVG 依赖这些类存在于宿主页面中。 - ---- - -## 设计系统 - -### 设计理念 - -- **扁平**：无渐变、无投影、无模糊、无发光、无霓虹效果。 -- **简约**：只展示核心内容，框内无装饰性图标。 -- **一致**：每张图表使用相同的颜色、间距、排版和描边宽度。 -- **暗色模式就绪**：所有颜色通过 CSS 类自动适配——无需为每种模式单独编写 SVG。 - -### 调色板 - -9 种色阶，每种 7 个色阶值。将类名放在 `` 或形状元素上；模板 CSS 自动处理明暗两种模式。 - -| 类名 | 50（最浅） | 100 | 200 | 400 | 600 | 800 | 900（最深） | -|------------|---------------|---------|---------|---------|---------|---------|---------------| -| `c-purple` | #EEEDFE | #CECBF6 | #AFA9EC | #7F77DD | #534AB7 | #3C3489 | #26215C | -| `c-teal` | #E1F5EE | #9FE1CB | #5DCAA5 | #1D9E75 | #0F6E56 | #085041 | #04342C | -| `c-coral` | #FAECE7 | #F5C4B3 | #F0997B | #D85A30 | #993C1D | #712B13 | #4A1B0C | -| `c-pink` | #FBEAF0 | #F4C0D1 | #ED93B1 | #D4537E | #993556 | #72243E | #4B1528 | -| `c-gray` | #F1EFE8 | #D3D1C7 | #B4B2A9 | #888780 | #5F5E5A | #444441 | #2C2C2A | -| `c-blue` | #E6F1FB | #B5D4F4 | #85B7EB | #378ADD | #185FA5 | #0C447C | #042C53 | -| `c-green` | #EAF3DE | #C0DD97 | #97C459 | #639922 | #3B6D11 | #27500A | #173404 | -| `c-amber` | #FAEEDA | #FAC775 | #EF9F27 | #BA7517 | #854F0B | #633806 | #412402 | -| `c-red` | #FCEBEB | #F7C1C1 | #F09595 | #E24B4A | #A32D2D | #791F1F | #501313 | - -#### 颜色分配规则 - -颜色编码**语义**，而非顺序。切勿像彩虹一样循环使用颜色。 - -- 按**类别**对节点分组——同类型的所有节点共用一种颜色。 -- 对中性/结构性节点（起点、终点、通用步骤、用户）使用 `c-gray`。 -- 每张图表使用 **2-3 种颜色**，而非 6 种以上。 -- 通用类别优先使用 `c-purple`、`c-teal`、`c-coral`、`c-pink`。 -- 将 `c-blue`、`c-green`、`c-amber`、`c-red` 保留用于语义含义（信息、成功、警告、错误）。 - -明暗色阶映射（由模板 CSS 处理——直接使用类名即可）： -- 亮色模式：50 填充 + 600 描边 + 800 标题 / 600 副标题 -- 暗色模式：800 填充 + 200 描边 + 100 标题 / 200 副标题 - -### 排版 - -只有两种字体大小，不得例外。 - -| 类名 | 大小 | 字重 | 用途 | -|-------|------|--------|-----| -| `th` | 14px | 500 | 节点标题、区域标签 | -| `ts` | 12px | 400 | 副标题、描述、箭头标签 | -| `t` | 14px | 400 | 通用文本 | - -- **始终使用句首大写。** 禁止首字母大写（Title Case），禁止全大写（ALL CAPS）。 -- 每个 `` 必须带有类名（`t`、`ts` 或 `th`），不得有无类名的文本。 -- 框内所有文本使用 `dominant-baseline="central"`。 -- 框内居中文本使用 `text-anchor="middle"`。 - -**宽度估算（近似值）：** -- 14px 字重 500：每字符约 8px -- 12px 字重 400：每字符约 6.5px -- 始终验证：`box_width >= (字符数 × px/字符) + 48`（每侧 24px 内边距） - -### 间距与布局 - -- **ViewBox**：`viewBox="0 0 680 H"`，其中 H = 内容高度 + 40px 缓冲。 -- **安全区域**：x=40 至 x=640，y=40 至 y=(H-40)。 -- **框间距**：最小 60px。 -- **框内边距**：水平 24px，垂直 12px。 -- **箭头间隙**：箭头与框边缘之间 10px。 -- **单行框**：高度 44px。 -- **双行框**：高度 56px，标题与副标题基线间距 18px。 -- **容器内边距**：每个容器内部最小 20px。 -- **最大嵌套层级**：2-3 层。在 680px 宽度下更深的嵌套会难以阅读。 - -### 描边与形状 - -- **描边宽度**：所有节点边框 0.5px，不得使用 1px 或 2px。 -- **矩形圆角**：节点使用 `rx="8"`，内层容器使用 `rx="12"`，外层容器使用 `rx="16"` 至 `rx="20"`。 -- **连接路径**：必须设置 `fill="none"`，否则 SVG 默认填充为黑色。 - -### 箭头标记 - -在**每个** SVG 开头包含以下 `` 块： - -```xml - - - - - -``` - -在线条上使用 `marker-end="url(#arrow)"`。箭头通过 `context-stroke` 继承线条颜色。 - -### CSS 类（由模板提供） - -模板页面提供： - -- 文本：`.t`、`.ts`、`.th` -- 中性：`.box`、`.arr`、`.leader`、`.node` -- 色阶：`.c-purple`、`.c-teal`、`.c-coral`、`.c-pink`、`.c-gray`、`.c-blue`、`.c-green`、`.c-amber`、`.c-red`（均自动支持明暗模式） - -你**无需**重新定义这些类——直接在 SVG 中应用即可。模板文件包含完整的 CSS 定义。 - ---- - -## SVG 样板代码 - -模板页面中的每个 SVG 均以如下结构开头： - -```xml - - - - - - - - - - -``` - -将 `{HEIGHT}` 替换为实际计算高度（最后一个元素底部 + 40px）。 - -### 节点模式 - -**单行节点（44px）：** -```xml - - - Service name - -``` - -**双行节点（56px）：** -```xml - - - Service name - Short description - -``` - -**连接线（无标签）：** -```xml - -``` - -**容器（虚线或实线）：** -```xml - - - Container label - Subtitle info - -``` - ---- - -## 图表类型 - -根据主题选择合适的布局： - -1. **流程图** — CI/CD 流水线、请求生命周期、审批工作流、数据处理。单向流（从上到下或从左到右），每行最多 4-5 个节点。 -2. **结构/包含图** — 云基础设施嵌套、分层系统架构。大型外层容器包含内层区域，虚线矩形表示逻辑分组。 -3. **API/端点映射** — REST 路由、GraphQL schema。从根节点树状展开，分支到资源组，每组包含端点节点。 -4. **微服务拓扑** — 服务网格、事件驱动系统。服务作为节点，箭头表示通信模式，消息队列位于服务之间。 -5. **数据流图** — ETL 流水线、流式架构。从数据源经处理流向数据汇，方向从左到右。 -6. **实物/结构图** — 交通工具、建筑、硬件、解剖图。使用与实物形态匹配的形状——弯曲体用 ``，锥形用 ``，圆柱部件用 ``/``，隔间用嵌套 ``。参见 `references/physical-shape-cookbook.md`。 -7. **基础设施/系统集成图** — 智慧城市、IoT 网络、多域系统。中心辐射布局，中央平台连接各子系统。按系统使用语义线型（`.data-line`、`.power-line`、`.water-pipe`、`.road`）。参见 `references/infrastructure-patterns.md`。 -8. **UI/仪表盘原型** — 管理面板、监控仪表盘。屏幕框架内嵌套图表/仪表/指示器元素。参见 `references/dashboard-patterns.md`。 - -对于实物图、基础设施图和仪表盘图，生成前请先加载对应的参考文件——每个文件提供现成的 CSS 类和形状原语。 - ---- - -## 验证清单 - -在最终确定任何 SVG 之前，验证以下**所有**项目： - -1. 每个 `` 都有类名 `t`、`ts` 或 `th`。 -2. 框内每个 `` 都有 `dominant-baseline="central"`。 -3. 用作箭头的每个连接 `` 或 `` 都有 `fill="none"`。 -4. 没有箭头线穿过无关的框。 -5. 14px 文本：`box_width >= (最长标签字符数 × 8) + 48`。 -6. 12px 文本：`box_width >= (最长标签字符数 × 6.5) + 48`。 -7. ViewBox 高度 = 最底部元素 + 40px。 -8. 所有内容在 x=40 至 x=640 范围内。 -9. 颜色类（`c-*`）放在 `` 或形状元素上，不得放在 `` 连接线上。 -10. 箭头 `` 块存在。 -11. 无渐变、投影、模糊或发光效果。 -12. 所有节点边框描边宽度为 0.5px。 - ---- - -## 输出与预览 - -### 默认：独立 HTML 文件 - -写入单个 `.html` 文件，用户可直接打开。无需服务器，无需依赖，离线可用。模式： - -```python -# 1. Load the template -template = skill_view("concept-diagrams", "templates/template.html") - -# 2. Fill in title, subtitle, and paste your SVG -html = template.replace( - "", "SN2 reaction mechanism" -).replace( - "", "Bimolecular nucleophilic substitution" -).replace( - "", svg_content -) - -# 3. Write to a user-chosen path (or ./ by default) -write_file("./sn2-mechanism.html", html) -``` - -告知用户如何打开： - -``` -# macOS -open ./sn2-mechanism.html -# Linux -xdg-open ./sn2-mechanism.html -``` - -### 可选：本地预览服务器（多图表画廊） - -仅在用户明确需要可浏览的多图表画廊时使用。 - -**规则：** -- 仅绑定到 `127.0.0.1`，绝不使用 `0.0.0.0`。在共享网络上将图表暴露在所有网络接口上存在安全风险。 -- 选择空闲端口（不得硬编码），并告知用户所选 URL。 -- 服务器是可选的、需用户主动选择的——优先使用独立 HTML 文件。 - -推荐模式（让操作系统选择空闲的临时端口）： - -```bash -# Put each diagram in its own folder under .diagrams/ -mkdir -p .diagrams/sn2-mechanism -# ...write .diagrams/sn2-mechanism/index.html... - -# Serve on loopback only, free port -cd .diagrams && python3 -c " -import http.server, socketserver -with socketserver.TCPServer(('127.0.0.1', 0), http.server.SimpleHTTPRequestHandler) as s: - print(f'Serving at http://127.0.0.1:{s.server_address[1]}/') - s.serve_forever() -" & -``` - -若用户坚持使用固定端口，使用 `127.0.0.1:`——仍然不得使用 `0.0.0.0`。说明如何停止服务器（`kill %1` 或 `pkill -f "http.server"`）。 - ---- - -## 示例参考 - -`examples/` 目录内置 15 个完整、经过测试的图表。在编写同类型新图表之前，先浏览这些示例以获取可用模式： - -| 文件 | 类型 | 演示内容 | -|------|------|--------------| -| `hospital-emergency-department-flow.md` | 流程图 | 带语义颜色的优先级路由 | -| `feature-film-production-pipeline.md` | 流程图 | 分阶段工作流、水平子流程 | -| `automated-password-reset-flow.md` | 流程图 | 带错误分支的认证流程 | -| `autonomous-llm-research-agent-flow.md` | 流程图 | 回环箭头、决策分支 | -| `place-order-uml-sequence.md` | 时序图 | UML 时序图风格 | -| `commercial-aircraft-structure.md` | 实物图 | 使用路径、多边形、椭圆绘制真实形状 | -| `wind-turbine-structure.md` | 实物截面图 | 地下/地上分离、颜色编码 | -| `smartphone-layer-anatomy.md` | 爆炸视图 | 左右交替标签、分层组件 | -| `apartment-floor-plan-conversion.md` | 平面图 | 墙体、门、虚线红色标注改造方案 | -| `banana-journey-tree-to-smoothie.md` | 叙事流程 | 蜿蜒路径、渐进状态变化 | -| `cpu-ooo-microarchitecture.md` | 硬件流水线 | 扇出、内存层次侧边栏 | -| `sn2-reaction-mechanism.md` | 化学图 | 分子、弯曲箭头、能量曲线 | -| `smart-city-infrastructure.md` | 中心辐射图 | 每个系统使用语义线型 | -| `electricity-grid-flow.md` | 多阶段流程图 | 电压层次、流向标记 | -| `ml-benchmark-grouped-bar-chart.md` | 图表 | 分组柱状图、双轴 | - -使用以下命令加载任意示例： -``` -skill_view(name="concept-diagrams", file_path="examples/") -``` - ---- - -## 快速参考：何时使用何种图表 - -| 用户说 | 图表类型 | 建议颜色 | -|-----------|--------------|------------------| -| "展示流水线" | 流程图 | 灰色起止点，紫色步骤，红色错误，青色部署 | -| "画数据流" | 数据流水线（从左到右） | 灰色数据源，紫色处理，青色数据汇 | -| "可视化系统" | 结构图（包含关系） | 紫色容器，青色服务，珊瑚色数据 | -| "映射端点" | API 树状图 | 紫色根节点，每个资源组一种色阶 | -| "展示服务" | 微服务拓扑 | 灰色入口，青色服务，紫色总线，珊瑚色 worker | -| "画飞机/交通工具" | 实物图 | 路径、多边形、椭圆绘制真实形状 | -| "智慧城市/IoT" | 中心辐射集成图 | 每个子系统使用语义线型 | -| "展示仪表盘" | UI 原型 | 深色屏幕，图表颜色：青色、紫色、珊瑚色告警 | -| "电网/电力" | 多阶段流程图 | 电压层次（高/中/低压线宽） | -| "风力涡轮机/涡轮机" | 实物截面图 | 基础 + 塔筒截面 + 机舱颜色编码 | -| "X 的旅程/生命周期" | 叙事流程 | 蜿蜒路径，渐进状态变化 | -| "X 的层次/爆炸图" | 爆炸分层视图 | 垂直堆叠，交替标签 | -| "CPU/流水线" | 硬件流水线 | 垂直阶段，扇出到执行端口 | -| "平面图/公寓" | 平面图 | 墙体、门，虚线红色标注改造方案 | -| "反应机制" | 化学图 | 原子、化学键、弯曲箭头、过渡态、能量曲线 | \ No newline at end of file diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/optional/creative/creative-kanban-video-orchestrator.md b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/optional/creative/creative-kanban-video-orchestrator.md index 15bbaaec8d1..b8f0a7946c1 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/optional/creative/creative-kanban-video-orchestrator.md +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-guide/skills/optional/creative/creative-kanban-video-orchestrator.md @@ -21,7 +21,7 @@ description: "规划、搭建并监控由 Hermes Kanban 支撑的多智能体视 | 许可证 | MIT | | 平台 | linux, macos, windows | | 标签 | `video`, `kanban`, `multi-agent`, `orchestration`, `production-pipeline` | -| 相关技能 | [`kanban-orchestrator`](/user-guide/skills/bundled/devops/devops-kanban-orchestrator)、[`kanban-worker`](/user-guide/skills/bundled/devops/devops-kanban-worker)、[`ascii-video`](/user-guide/skills/bundled/creative/creative-ascii-video)、[`manim-video`](/user-guide/skills/bundled/creative/creative-manim-video)、[`p5js`](/user-guide/skills/bundled/creative/creative-p5js)、[`comfyui`](/user-guide/skills/bundled/creative/creative-comfyui)、[`touchdesigner-mcp`](/user-guide/skills/bundled/creative/creative-touchdesigner-mcp)、[`blender-mcp`](/user-guide/skills/optional/creative/creative-blender-mcp)、[`pixel-art`](/user-guide/skills/bundled/creative/creative-pixel-art)、[`ascii-art`](/user-guide/skills/bundled/creative/creative-ascii-art)、[`songwriting-and-ai-music`](/user-guide/skills/bundled/creative/creative-songwriting-and-ai-music)、[`heartmula`](/user-guide/skills/bundled/media/media-heartmula)、[`songsee`](/user-guide/skills/bundled/media/media-songsee)、[`spotify`](/user-guide/skills/bundled/media/media-spotify)、[`youtube-content`](/user-guide/skills/bundled/media/media-youtube-content)、[`claude-design`](/user-guide/skills/bundled/creative/creative-claude-design)、[`excalidraw`](/user-guide/skills/bundled/creative/creative-excalidraw)、[`architecture-diagram`](/user-guide/skills/bundled/creative/creative-architecture-diagram)、[`concept-diagrams`](/user-guide/skills/optional/creative/creative-concept-diagrams)、[`baoyu-comic`](/user-guide/skills/bundled/creative/creative-baoyu-comic)、[`baoyu-infographic`](/user-guide/skills/bundled/creative/creative-baoyu-infographic)、[`humanizer`](/user-guide/skills/bundled/creative/creative-humanizer)、[`gif-search`](/user-guide/skills/bundled/media/media-gif-search)、[`meme-generation`](/user-guide/skills/optional/creative/creative-meme-generation) | +| 相关技能 | [`kanban-orchestrator`](/user-guide/skills/bundled/devops/devops-kanban-orchestrator)、[`kanban-worker`](/user-guide/skills/bundled/devops/devops-kanban-worker)、[`ascii-video`](/user-guide/skills/bundled/creative/creative-ascii-video)、[`manim-video`](/user-guide/skills/bundled/creative/creative-manim-video)、[`p5js`](/user-guide/skills/bundled/creative/creative-p5js)、[`comfyui`](/user-guide/skills/bundled/creative/creative-comfyui)、[`touchdesigner-mcp`](/user-guide/skills/bundled/creative/creative-touchdesigner-mcp)、[`blender-mcp`](/user-guide/skills/optional/creative/creative-blender-mcp)、[`pixel-art`](/user-guide/skills/bundled/creative/creative-pixel-art)、[`ascii-art`](/user-guide/skills/bundled/creative/creative-ascii-art)、[`songwriting-and-ai-music`](/user-guide/skills/bundled/creative/creative-songwriting-and-ai-music)、[`heartmula`](/user-guide/skills/bundled/media/media-heartmula)、[`songsee`](/user-guide/skills/bundled/media/media-songsee)、[`spotify`](/user-guide/skills/bundled/media/media-spotify)、[`youtube-content`](/user-guide/skills/bundled/media/media-youtube-content)、[`claude-design`](/user-guide/skills/bundled/creative/creative-claude-design)、[`excalidraw`](/user-guide/skills/bundled/creative/creative-excalidraw)、[`html-artifact`](/user-guide/skills/bundled/creative/creative-html-artifact)、[`baoyu-comic`](/user-guide/skills/bundled/creative/creative-baoyu-comic)、[`baoyu-infographic`](/user-guide/skills/bundled/creative/creative-baoyu-infographic)、[`humanizer`](/user-guide/skills/bundled/creative/creative-humanizer)、[`gif-search`](/user-guide/skills/bundled/media/media-gif-search)、[`meme-generation`](/user-guide/skills/optional/creative/creative-meme-generation) | ## 参考：完整 SKILL.md diff --git a/website/sidebars.ts b/website/sidebars.ts index dec160700e2..b8efcef0624 100644 --- a/website/sidebars.ts +++ b/website/sidebars.ts @@ -150,7 +150,6 @@ const sidebars: SidebarsConfig = { 'user-guide/skills/bundled/autonomous-ai-agents/autonomous-ai-agents-claude-code', 'user-guide/skills/bundled/autonomous-ai-agents/autonomous-ai-agents-codex', 'user-guide/skills/bundled/autonomous-ai-agents/autonomous-ai-agents-hermes-agent', - 'user-guide/skills/bundled/autonomous-ai-agents/autonomous-ai-agents-kanban-codex-lane', 'user-guide/skills/bundled/autonomous-ai-agents/autonomous-ai-agents-opencode', ], }, @@ -160,7 +159,6 @@ const sidebars: SidebarsConfig = { key: 'skills-bundled-creative', collapsed: true, items: [ - 'user-guide/skills/bundled/creative/creative-architecture-diagram', 'user-guide/skills/bundled/creative/creative-ascii-art', 'user-guide/skills/bundled/creative/creative-ascii-video', 'user-guide/skills/bundled/creative/creative-baoyu-infographic', @@ -168,12 +166,12 @@ const sidebars: SidebarsConfig = { 'user-guide/skills/bundled/creative/creative-comfyui', 'user-guide/skills/bundled/creative/creative-design-md', 'user-guide/skills/bundled/creative/creative-excalidraw', + 'user-guide/skills/bundled/creative/creative-html-artifact', 'user-guide/skills/bundled/creative/creative-humanizer', 'user-guide/skills/bundled/creative/creative-manim-video', 'user-guide/skills/bundled/creative/creative-p5js', 'user-guide/skills/bundled/creative/creative-popular-web-designs', 'user-guide/skills/bundled/creative/creative-pretext', - 'user-guide/skills/bundled/creative/creative-sketch', 'user-guide/skills/bundled/creative/creative-songwriting-and-ai-music', 'user-guide/skills/bundled/creative/creative-touchdesigner-mcp', ], @@ -387,7 +385,6 @@ const sidebars: SidebarsConfig = { 'user-guide/skills/optional/creative/creative-baoyu-article-illustrator', 'user-guide/skills/optional/creative/creative-baoyu-comic', 'user-guide/skills/optional/creative/creative-blender-mcp', - 'user-guide/skills/optional/creative/creative-concept-diagrams', 'user-guide/skills/optional/creative/creative-creative-ideation', 'user-guide/skills/optional/creative/creative-hyperframes', 'user-guide/skills/optional/creative/creative-kanban-video-orchestrator',