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 skills add mochow13/keen-agent --skill render-html-pagegit clone --depth 1 https://github.com/mochow13/keen-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/skills/mochow13/keen-agent/render-html-page)<a href="https://agentmods.dev/skills/mochow13/keen-agent/render-html-page"><img src="https://agentmods.dev/badge/skills/mochow13/keen-agent/render-html-page/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/mochow13/keen-agent/render-html-page"><img src="https://agentmods.dev/badge/skills/mochow13/keen-agent/render-html-page.svg" alt="Reviewed on agentmods" width="80" 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.00022 | $0.01196 |
| Opus 5.5 | $0.00009 | $0.00478 |
| Sonnet 5.5 | $0.00004 | $0.00239 |
| Haiku 4.5 | $0.00002 | $0.00120 |
Grade A, and why
render-html-page 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 1mo 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 — 63 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Render HTML page
Activate when the trip plan is complete and the user needs a file they can open in a browser.
Save via write_file as <Destination>_trip.html (e.g. Amsterdam_trip.html).
Hard constraints
- One file. All CSS inline in
<style>, all JS inline (or no JS at all). No external CSS/JS files, no build step, no CDN libraries, no icon webfonts. - Must open by double-click (
file://): nofetch()of local files, no module imports, no web-only APIs for core content. - The only external URLs allowed are content links: booking deep links, official ticket shops, operator timetables, Google Maps queries. Never a stylesheet, script, font, or image host.
- Never truncate the plan: every section from the output format (§5 of
prompts/system.md) appears in the page.
Design system
Tokens first, never hardcoded values outside :root. Standard palette — Tailwind slate neutrals + blue primary + amber warning (the most widely deployed web token system; all text pairs clear WCAG AA):
:root{
--ink:#0f172a; --muted:#64748b; --secondary:#475569; --bg:#f8fafc; --card:#ffffff;
--primary:#2563eb; --primary-dark:#1d4ed8; --primary-tint:#eff6ff;
--warn-bar:#d97706; --warn-bg:#fffbeb; --warn-line:#fde68a; --warn-ink:#92400e;
--line:#e2e8f0;
}
- Backgrounds: light neutral
var(--bg)page, whitevar(--card)content cards. No cream/paper tints, no dark-mode-only styling. - Accent discipline: blue = links/buttons/headings accents, slate = headings/body/borders, amber = warnings (
noticebox) only. Green/red strictly for success/error status; never decorative. - Typography (system stacks only, so the file works offline):
- Headings:
-apple-system, "Segoe UI", Inter, Roboto, sans-serif, tightletter-spacing:-.02em,h1 clamp(32px,5vw,54px),h2 24px,h3card titles. - Body: same stack at browser default size,
line-height:1.6. - Data/labels/prices/badges:
ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospacewithtabular-nums— all prices, dates, and status labels are mono.
- Headings:
- Spacing/shape: content column
max-width:1020pxcentered; cardsborder:1px solid var(--line),border-radius:var(--radius),box-shadow:var(--shadow),padding:22px. - Icons: inline Unicode symbols only (✈ 🏨 🗺️ 🎟️ 🚆 🍽️ ⚠️). No emoji walls, no external icon library. Mark decorative icons
aria-hidden="true".
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.
- 1mo ago First seen · 63 lines · 22 tokens per session scan A b7cc2a174056
render-html-page is a skill published in the GitHub repository mochow13/keen-agent (2 stars, last pushed 1mo ago), licensed MIT. It adds 22 tokens to every session and 1,196 once invoked, about $0.0001 per session on Opus 5.5. 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-12.
Other skills, from other repositories
css-architecture
CSS architecture: design tokens, custom properties, Tailwind config, CSS Modules, container queries, dark mode, fluid typography, animation. Covers how to implement styling; frontend-design covers what to achieve.
design-md
Google's DESIGN.md spec for describing a visual identity to coding agents: YAML tokens, Markdown rationale, CLI for WCAG checks and DTCG/Tailwind export. Use for agent-readable design system docs.
popular-web-designs
54 real-world design systems (Stripe, Linear, Vercel, Apple, Notion and more) as HTML/CSS reference: colors, type, components, spacing. Use when UI should match a specific company's look.
warm-editorial-ui
Apply the "Warm Editorial Refinement" design system (warm cream/charcoal surfaces, Bahnschrift + Plus Jakarta Sans, layered shadows), the canonical template for new frontend builds. Use for apps, dashboards or UI in the abc-project style, or on "use our design system", "apply our template", "make it look like…
design-system-tokens
Design token architecture (primitive → semantic → component), CSS variables, spacing and type scales, component state specs. Use when creating design tokens.
artifacts-builder
Build elaborate multi-component claude.ai HTML artifacts with React, Tailwind CSS and shadcn/ui. Use for complex artifacts with state or routing, not simple single-file HTML.