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 skills/clawenable/html-artifact-best-practices/html-artifact-guidenpx skills add ClawEnable/html-artifact-best-practices --skill html-artifact-guidegit clone --depth 1 https://github.com/ClawEnable/html-artifact-best-practicesWrote 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/clawenable/html-artifact-best-practices/html-artifact-guide)<a href="https://agentmods.dev/skills/clawenable/html-artifact-best-practices/html-artifact-guide"><img src="https://agentmods.dev/badge/skills/clawenable/html-artifact-best-practices/html-artifact-guide.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.00062 | $0.01542 |
| Opus 5 | $0.00031 | $0.00771 |
| Sonnet 5 | $0.00012 | $0.00308 |
| Haiku 4.5 | $0.00006 | $0.00154 |
Grade A, and why
html-artifact-guide 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 5d 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 — 117 lines — stays where its author put it; the contents beside it link to each section on GitHub.
HTML Artifact Best Practices
Produce readable, interactive, shareable, and reviewable single-file HTML artifacts. Avoid treating HTML as a visual wrapper for Markdown or as a substitute for proper frontend engineering.
Purpose
This skill covers four capabilities:
- Judge — Decide whether HTML is appropriate, or whether Markdown suffices.
- Create — Generate standalone single-file HTML artifacts using inline CSS and vanilla JS.
- Review — Audit existing HTML artifacts for quality, accessibility, and anti-patterns.
- Improve — Refine information architecture, interaction quality, and remove decorative waste.
This skill does NOT use React, Vue, Tailwind, Vite, shadcn/ui, or any framework. If the task requires complex multi-component UIs with state management, use the web-artifacts-builder skill instead. These skills are complementary, not interchangeable.
When to Use
Use this skill when:
- Multi-option comparison with filtering, collapsing, or side-by-side layout
- Interactive reports, dashboards, or visual explanations
- Decision support pages with risk matrices or priority sorting
- Roadmap or timeline views for team review
- Research synthesis requiring non-linear navigation
- Review surfaces for multi-round agent collaboration outputs
- Any output where the user needs to scan, compare, filter, or interact
Do NOT use this skill when:
- Short explanations, notes, or documentation
- Long-term knowledge base articles
- Content needing frequent human editing
- Content primarily consumed by other agents or tools
- Simple tables and lists that Markdown handles well
- Meeting minutes without visual complexity
Decision Rule
Before generating HTML, apply this decision flow:
- Does the task involve human review, comparison, interaction, or sharing?
- No → Use Markdown. Stop here.
- Yes → Continue.
- Is Markdown sufficient for the user's goal?
- Yes → Use Markdown. Explain why.
- No → Use HTML artifact. Continue to creation workflow.
What ships with it
4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 5d ago First seen · 117 lines · 62 tokens per session scan A 7a18a18c7e65
html-artifact-guide is a skill published in the GitHub repository ClawEnable/html-artifact-best-practices (2 stars, last pushed 3mo ago), licensed Apache-2.0. It adds 62 tokens to every session and 1,542 once invoked, about $0.0003 per session on Opus 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-08-31.
Other skills, from other repositories
ui-conventions
Frontend change conventions for apps/web — i18n (bilingual keys), dark mode (the highest-frequency rework source), theming inline SVG/chart colors, loading/empty/error states. Use for any UI change.
link-ticket-to-session
Link the current Claude Code session to a ticket (Linear, Jira, GitHub Issues, or GitHub Pull Requests) and cache its title/status in karma. Use when the user explicitly asks to link, attach, associate, or connect this session to a ticket, issue, or PR — e.g. "/link-ticket-to-session ABC-123", "link this session to…
hugo-theme
Build, customize, and debug advanced Hugo CMS themes — template architecture, asset pipeline (CSS/JS/image processing), shortcodes and render hooks, page bundles, cover images, Hugo Modules, performance, SEO, and CI/CD. Use when working on a Hugo theme or site template layer. Do not use this skill for unrelated…
styling
PyWry provides CSS variables that adapt to dark/light themes. Use these instead of hardcoded colors!
uiux
Dashboard design system — colors, typography, spacing, components, and visual patterns for the session dashboard UI.
css_selectors
The most reliable way to target elements is by componentid.