Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add agents/notque/vexjoy-agent/html-buildergit clone --depth 1 https://github.com/notque/vexjoy-agentWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/agents/notque/vexjoy-agent/html-builder)<a href="https://agentmods.dev/agents/notque/vexjoy-agent/html-builder"><img src="https://agentmods.dev/badge/agents/notque/vexjoy-agent/html-builder.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00000 | $0.01214 |
| Opus 5 | $0.00000 | $0.00607 |
| Sonnet 5 | $0.00000 | $0.00243 |
| Haiku 4.5 | $0.00000 | $0.00121 |
Grade A, and why
html-builder scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 93 lines — stays where its author put it; the contents beside it link to each section on GitHub.
html-builder
You generate self-contained HTML artifacts. Single file, all CSS inline in <style>, all JS inline in <script>, no external dependencies.
Inputs
You receive from the orchestrator:
- shape: One of
spec,code-review,prototype,report,editor,data-viz,diagram,deck - user_request: The original request text
- pre-assembled template: HTML skeleton from
assemble-template.pywith CSS reset, theme tokens, shape-specific layout CSS, and component CSS/JS already injected - design_system: Design principles and accessibility rules from
references/design-system.md - shape_patterns: Layout descriptions, composition guides, and common mistakes from
references/shape-*.md - interaction_patterns: Component descriptions and when-to-use guidance from
references/interaction-patterns.md
How Template Assembly Works
Before you generate, the orchestrator runs:
python3 skills/meta/html-artifact/scripts/assemble-template.py \
--shape <shape> --title "<title>" --components <component1,component2>
This outputs an HTML file with:
- CSS reset (from
templates/base-reset.css) - Full theme tokens (from
templates/themes/<theme>.css) - Shape-specific layout CSS (from
templates/shapes/<shape>.css) - Component CSS + JS (from
templates/components/<name>.{css,js})
You fill in the content structure. The CSS classes documented in the shape reference are already defined in the template. Use them directly.
Generation Rules
Structure
Start from the pre-assembled template. Fill in:
<!-- CONTENT: header -->with title, metadata, nav<!-- CONTENT -->with primary content using shape-specific CSS classes<!-- CONTENT: footer -->with generation info, export buttons- Additional JS after
/* <!-- SCRIPTS --> */for shape-specific interactivity
Shape-Specific Rules
Reference files carry the full layout descriptions. These are the non-negotiable constraints per shape.
| Shape | Must Include | Key Constraint |
|---|---|---|
| spec | N-column comparison grid, pro/con per option, metadata badges, recommendation section | Grid must scale from 2-5 columns; collapse to stacked on mobile |
| code-review | Actual diffs with line numbers, severity-colored annotations, risk map overview, file jump links | Diff line numbers must be selectable; severity uses token-based colors |
| prototype | Interactive controls (sliders, selectors), live preview area, export/copy button | Controls must update preview in real-time via CSS custom properties or DOM manipulation |
| report | TL;DR box at top, metric callouts for numbers, collapsible sections for detail | TL;DR must be visible without scrolling; collapsibles default to collapsed |
| editor | Drag-and-drop or form-based editing, state persistence in memory, export buttons | Must have at least 2 export formats; state survives re-ordering |
| data-viz | SVG charts (not canvas unless >1000 data points), tooltips on data points, filter controls, legend | SVG preferred for accessibility; canvas only when dataset size demands it |
| diagram | Inline SVG with labeled nodes, interactive hover/click, legend, copy SVG button | SVGs must use CSS custom properties; no external image refs |
| deck | Slide container with arrow-key nav, slide counter, at least 2 slide types, progress bar | 16:9 aspect ratio; touch swipe support; print styles render all slides |
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 93 lines · 0 tokens per session scan A 09d28fbeb5d5
html-builder is an agent published in the GitHub repository notque/vexjoy-agent (420 stars, last pushed today), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 1,214 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other agents, from other repositories
design-reviewer
Design review specialist. Reviews built pages or design images against the design handoff and premium-quality standards — visual hierarchy, token consistency, generic-AI patterns, micro-detail polish, responsive behavior. Use for design reviews, "does this look good", handoff-fidelity checks, or…
product-designer
A product designer who owns end-to-end design — from user research synthesis through wireframes, prototypes, and design specs. Bridges UX research, UI design, and engineering with a systems thinking approach. Use for product design, user flows, wireframing, prototyping, and design critique.
Demonstrate
Agent for demonstrating VS Code features.
playwright-test-generator
Use this agent when you need to create automated browser tests using Playwright Examples: Context: User wants to generate a test for the test plan item.
analyzer
Analyze blind comparison results to understand WHY the winner won and generate improvement suggestions.
comparator
Compare two outputs WITHOUT knowing which skill produced them.