An Agent Skill for producing, reviewing, and improving standalone single-file HTML artifacts
Vanilla HTML only — no frameworks, no CDN, no build chain
Claude Code:
/plugin marketplace add ClawEnable/html-artifact-best-practices
/plugin install html-artifact-guide@clawenableAgent Skills CLI:
npx skills add ClawEnable/html-artifact-best-practicesThen try:
"Create a comparison matrix for these 3 database options — I need to evaluate performance, cost, and ecosystem support with collapsible details"
The agent judges whether HTML adds value over Markdown, picks the right pattern, and generates a standalone .html file.
Create a new artifact:
"Create a comparison matrix for these database options and save it as database-comparison.html."
Review an existing artifact:
"Review this HTML artifact against the html-artifact-guide checklist."
Improve an artifact:
"Improve this artifact for mobile readability, print output, and copyability."
Use Markdown when HTML is unnecessary:
"Summarize these meeting notes. Use Markdown unless HTML adds clear review value."
Generated artifacts should be standalone .html files with inline CSS, vanilla JS, no CDN, and the AI verification disclaimer.
| Capability | Description |
|---|---|
| Judge | Decide whether HTML is appropriate, or Markdown suffices |
| Create | Generate standalone artifacts using vanilla HTML + inline CSS + vanilla JS |
| Review | Audit existing artifacts for quality, accessibility, and anti-patterns |
| Improve | Refine information architecture, interaction quality, and remove waste |
In May 2026, Thariq Shihipar (Claude Code team, Anthropic) published "The Unreasonable Effectiveness of HTML" — 20 interactive demos proving HTML delivers higher information density than Markdown for LLM outputs. Andrej Karpathy endorsed it (960K+ views): "ask your LLM to 'structure your response as HTML', then view the generated file in your browser." Simon Willison validated it the same day, using it to explain a real security vulnerability. Omar Sar proposed the architectural framing: "HTML doesn't replace Markdown. They are a much better combination working together."
The emerging consensus: Markdown is the source of truth; HTML is the human review surface. This skill operationalizes that principle — with judgment rules that prevent HTML overuse, 10 anti-patterns that catch common failures, and an 11-dimension quality checklist.
- Multi-option comparison matrices with filtering
- Interactive reports, dashboards, or visual explanations
- Decision support pages with risk matrices
- Roadmap or timeline views for team review
- Research synthesis requiring non-linear navigation
Simple documentation, knowledge base articles, meeting minutes — anything Markdown handles well.
| web-artifacts-builder | html-artifact-guide | |
|---|---|---|
| Stack | React, Vite, Tailwind, shadcn/ui | Vanilla HTML, inline CSS, vanilla JS |
| Use when | Complex interactive web apps | Standalone review/report artifacts |
| Build | Requires init + bundle | No build chain, single file |
- SKILL.md — Judgment rules, output contract, 10 anti-patterns, creation/review workflows
- 8 Artifact Patterns — Decision Brief, Comparison Matrix, Research Synthesis, Dashboard, Timeline, Interactive Checklist, Visual Explainer, Review Surface
- 11-Dimension Review Checklist — Content fidelity, information architecture, semantic HTML, responsive layout, accessibility, interaction quality, dependency policy, copyability, print readiness, visual emphasis, source-of-truth preservation
- Validator-Passing Standalone Template — Responsive, focus-visible, print-aware baseline for new artifacts
- Trigger Eval Scenarios — 20 structured cases covering HTML generation, Markdown fallback, and clarification boundaries
- Artifact Validator — Zero-dependency Node.js release gate for metadata, dependency policy, focus, print, copyability, and mobile-risk checks
Verified installation paths are Claude Code and Codex CLI. Other Agent Skills-compatible environments may work, but they are not currently verified by this repository.
Claude Code — Marketplace
/plugin marketplace add ClawEnable/html-artifact-best-practices
/plugin install html-artifact-guide@clawenableClaude Code — Plugin Dir (dev)
Loads this checkout for the current Claude Code session only:
claude --plugin-dir /path/to/html-artifact-best-practicesCodex CLI (OpenAI)
Run from the project where you want to use the skill:
npx skills add ClawEnable/html-artifact-best-practicesCodex in-session install, if $skill-installer is available:
$skill-installer install https://github.com/ClawEnable/html-artifact-best-practices/tree/v1.0.2/skills/html-artifact-guide
Manual fallback from a cloned checkout:
mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills/html-artifact-guide"
cp -R skills/html-artifact-guide/. "${CODEX_HOME:-$HOME/.codex}/skills/html-artifact-guide/"Restart Codex or start a new session after installing or updating. To verify discovery:
codex debug prompt-input "Create a comparison matrix as an HTML artifact" | rg "html-artifact-guide"For updates, rerun npx skills add ClawEnable/html-artifact-best-practices, or use npx skills update html-artifact-guide for npx-managed installs.
Other agents — unverified
The distributable skill is skills/html-artifact-guide/. Agent environments that support the Agent Skills directory format may be able to import that folder, but this repository currently verifies only Claude Code and Codex CLI installation paths.
See CONTRIBUTING.md. Conventional Commits: feat: / fix: / docs: / refactor:.
Apache-2.0 — free for commercial use, modification, and distribution.
Copyright © 2026 ClawEnable