# HTML Artifact

> Generate standalone HTML artifacts for human consumption from conversations, plans, approaches, reports, reviews, explainers, prototypes, or editors. Use instead of long replies or Markdown files when the user asks for an artifact.

- Skill: `zenobi-us/html-artifact` (Agent Skill, multi-file: 25 files)
- Install (CLI): `npx skillmds@latest add zenobi-us/html-artifact`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zenobi-us/html-artifact/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: zenobi-us (https://skillmd.com/u/zenobi-us)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/zenobi-us/html-artifact

---


> **Never edit this file directly.** To make additions or modifications, edit the appropriate section in `./vstack.toml`. Then run `vstack refresh`.

# HTML Artifact

Use when the user wants a human-readable artifact from a conversation, plan, approach, report, review, explainer, prototype, or custom editor instead of a long reply or Markdown file.

Rules:
1. Always write one standalone `.html` file with inline CSS/JS and no build step.
2. Start from the closest `templates/` file, then replace demo content with the user's content.
3. Default path: `artifacts/<short-slug>.html` unless the user gave a path; create parent dirs.
4. After writing, open it in the user's default browser and give the `file://` link in chat.
5. Chat reply stays short: link + one-line note.

Templates:

| Template | Use when |
|---|---|
| `01-exploration-code-approaches.html` | Compare code approaches side by side when direction or tradeoff is unclear. |
| `02-exploration-visual-designs.html` | Compare visual/layout directions before choosing one. |
| `03-code-review-pr.html` | Review a PR or diff with annotations, severity, and jump links. |
| `04-code-understanding.html` | Explain an unfamiliar module, package, call graph, or hot path. |
| `05-design-system.html` | Show design tokens, colors, type, spacing, and reusable UI rules. |
| `06-component-variants.html` | Review one component across variants, states, sizes, and intents. |
| `07-prototype-animation.html` | Tune motion/animation with sliders or live controls. |
| `08-prototype-interaction.html` | Prototype a small clickable flow across screens. |
| `09-slide-deck.html` | Turn a thread, plan, or report into an arrow-key presentation. |
| `10-svg-illustrations.html` | Create editable SVG figures, diagrams, or visual explanations. |
| `11-status-report.html` | Produce weekly/project status with highlights, slips, chart, and next steps. |
| `12-incident-report.html` | Write an incident/postmortem timeline with logs and follow-up checklist. |
| `13-flowchart-diagram.html` | Draw a process, pipeline, or workflow with clickable step details. |
| `14-research-feature-explainer.html` | Explain how a repo feature works with snippets, flow, FAQ, and gotchas. |
| `15-research-concept-explainer.html` | Teach a concept with interaction, glossary, comparison, and examples. |
| `16-implementation-plan.html` | Create implementation plan with milestones, data flow, mockups, risks, code snippets. |
| `17-pr-writeup.html` | Create reviewer-facing PR writeup: motivation, before/after, file tour, focus areas. |
| `18-editor-triage-board.html` | Build a drag/drop editor for prioritizing, bucketing, or triaging items. |
| `19-editor-feature-flags.html` | Build a constrained config/flag editor with dependency warnings and copy diff. |
| `20-editor-prompt-tuner.html` | Build a prompt/template tuner with live preview, variables, and copy output. |