mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-07-19 15:18:03 +00:00
9362ce2575
* 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.
4.1 KiB
4.1 KiB
Reference Examples (Anthropic html-effectiveness gallery)
Twenty complete, self-contained reference HTML files — Anthropic's html-effectiveness gallery, MIT licensed. These are the ground truth this skill is built on. Reading the one that matches your mode is a required step before authoring (workflow step 2): a full polished example carries density, spacing, and structure that no prose summary reproduces. The other references explain why the patterns are the way they are; these show you the patterns whole.
They are not committed into this skill (it's someone else's living repo, ~384 KB). Fetch them with the bundled script — it's idempotent, so just run it every time; it clones if the examples are missing and pulls the latest otherwise.
Fetch + read (do this before writing)
terminal: bash scripts/fetch-examples.sh
read_file references/examples/<file-for-your-mode>.html
The script lands the files in references/examples/. Always run it first — it's
cheap and self-healing, so you never have to wonder whether the examples are
present. Then read the index or jump straight to the file for your mode:
read_file references/examples/index.html # categorized index of all 20
read_file references/examples/03-code-review-pr.html # a specific example
Only if the fetch genuinely fails (no network) do you fall back to the distilled pattern references alone — and say so, since you're then working without the source.
What each file demonstrates → which to read
Pick the example closest to your mode, read it, then adapt — don't copy verbatim.
| File | Mode | Read it when you're building… |
|---|---|---|
01-exploration-code-approaches.html |
variants | a side-by-side comparison of code approaches with tradeoffs + a recommendation |
02-exploration-visual-designs.html |
variants | live design directions on a light/dark switchable surface |
03-code-review-pr.html |
code review | a PR/diff review — the gold-standard 3-column diff grid + risk map + comment bubbles |
04-code-understanding.html |
explainer | a code-flow explainer with an inline-SVG request-path diagram + callstack |
05-design-system.html |
report | a design-token / component reference sheet |
06-component-variants.html |
editor | a live component matrix driven by :root custom-property knobs |
07-prototype-animation.html |
editor | a CSS micro-interaction tuner (easing knobs, static copy-paste CSS export) |
08-prototype-interaction.html |
editor | a drag-to-reorder feel-test (DOM-only, no export by design) |
09-slide-deck.html |
report | a scroll-snap slide deck (pure-CSS paging) |
10-svg-illustrations.html |
diagram | standalone exportable inline-SVG illustrations |
11-status-report.html |
report | a weekly status report (zero-JS, shape tokens, stat band) |
12-incident-report.html |
report | an incident postmortem (CSS-only timeline + checklist) |
13-flowchart-diagram.html |
diagram | a clickable annotated flowchart with a synced detail panel (data-k pattern) |
14-research-feature-explainer.html |
explainer | "how feature X works" — sticky anchor-nav doc shell + tabbed code |
15-research-concept-explainer.html |
explainer | an interactive concept explainer (deterministic-hash SVG demo + glossary) |
16-implementation-plan.html |
plan | an implementation plan — milestone timeline, SVG architecture, DOM mockups |
17-pr-writeup.html |
code review | a PR walkthrough for reviewers — file-by-file tour, hand-marked diffs, TOC |
18-editor-triage-board.html |
editor | a drag-to-triage board with copy-as-markdown export |
19-editor-feature-flags.html |
editor | a config-flag editor with copy-diff + copy-full-JSON export |
20-editor-prompt-tuner.html |
editor | a prompt-template editor (contenteditable + live preview + copy-prompt) |
All 20 are single-file, zero-dependency, no-build — the same discipline this skill
requires. Use them to calibrate density, spacing, and the house style; the distilled
references (house-style.md, svg-diagrams.md, throwaway-editors.md, …) tell you
why each pattern is the way it is.