# HTML Artifacts

> Use HTML artifacts (instead of Markdown) in Claude Code to produce richer, more readable, and more shareable outputs for planning, code review/understanding, prototyping, and reporting.

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

---


## Instructions

Use HTML files as the primary output format when you need:

- **Richer layout** than Markdown (grids, columns, callouts).
- **Higher information density** while staying readable.
- **Shareable artifacts** you can revisit later (plans, explainers, reports).
- **Light interactivity** (e.g., simple controls, live previews) where it helps decision-making.

When prompting for an HTML artifact:

1. State the purpose of the artifact and who will read it.
2. Specify the desired structure (sections, grid layout, side-by-side comparisons).
3. Ask for legibility features (headings, spacing, summaries) and, when relevant, visual encoding (e.g., color-code findings by severity).
4. If the artifact is an editor, include an explicit export mechanism (e.g., “copy as JSON”, “copy as prompt”, “copy diff”).

Recommended workflow for larger tasks:

- Create multiple HTML files for different stages (brainstorm → option exploration → mockups → implementation plan).
- Start a fresh implementation session later and provide those files as context.
- Use a verification agent to read the files when you want a broader-context review.

For more detail and ready-to-reuse prompt patterns, see:
- `templates/prompt-patterns.md`
- `guides/html-artifacts-workflows.en.md`

## Examples

### 1) Side-by-side options exploration

Use when you want multiple approaches rendered in one place for comparison.

- Prompt: See `templates/prompt-patterns.md#options-exploration-grid`

### 2) PR review / code understanding explainer

Use when you want the diff rendered with annotations and severity.

- Prompt: See `templates/prompt-patterns.md#pr-review-html-explainer`

### 3) Purpose-built “throwaway editor” with export

Use when editing structured data is painful in plain text.

- Prompt: See `templates/prompt-patterns.md#throwaway-editor-with-export`

## Source

- https://claude.com/blog/using-claude-code-the-unreasonable-effectiveness-of-html