---
name: html-review-artifact
description: Produce safe, self-contained HTML review artifacts from canonical project sources.
---

# HTML Review Artifact

Use this skill when a human needs to scan, compare, inspect, or interact with a rich generated view.

## Default Constraints

- Generate one self-contained `.html` file.
- Use inline CSS only by default.
- Prefer CSS/HTML interaction: radio tabs, details/summary, anchor navigation, and inline SVG states.
- Do not use inline JavaScript. The reviewed inline-JS lane is reserved until manifest metadata, CSP/checker support, and human approval requirements are implemented together.
- Do not load external scripts, fonts, images, analytics, or network resources.
- For Mermaid, C4, UML-style, and architecture diagrams, embed pre-rendered inline SVG or static markup by default.
- Use Mermaid, Vega-Lite, Observable Plot, D3, Graphviz, Apache ECharts, RAWGraphs, and Chart.js as source/spec or generation-time renderers only. Do not load their browser runtimes in the generated HTML.
- Prefer `artifact-infographic` JSON fences or manifest `infographics` entries for non-model charts and graphs so the review page can regenerate static SVG/HTML panels.
- For product, business, data, research, UX, and mockup review, render the source into a visual surface such as a dashboard, evidence board, state board, journey map, schema map, or high-fidelity prototype.
- For discovery, planning, and research intended for human review, produce an infographic-style HTML surface with summary metrics, charts or diagrams, evidence/freshness panels, source links, and clear review verdicts.
- For UI and customer-facing workflow review, prefer high-fidelity states with realistic copy, data density, errors, loading states, and accessibility affordances.
- Label synthetic user, simulated customer, or agent-generated evidence separately from real user or customer evidence.
- Do not include secrets, tokens, credentials, private logs, or customer data.
- Link to the canonical source artifact and issue.
- Use semantic headings, landmarks, meaningful link text, and alt text for embedded images.

## Good Fits

- option comparisons
- PR walkthroughs
- architecture explainers
- incident and investigation reports
- visual evidence reviews
- prototype controls for design tuning
- product briefs and feature maps
- business assumption dashboards
- data dictionaries, schema maps, and metric definitions
- research claim-evidence boards
- high-fidelity UX mockups and interaction state boards

## Poor Fits

- canonical decisions
- source-controlled specs intended for diffs
- short handoff notes
- CLI-only workflows
- artifacts that would need live credentials or authenticated pages

## Output Checklist

- source path and generated path are named
- manifest entry uses `reviewRequired: true` when a human HTML surface is expected
- artifact family and owner agent are named
- visual hierarchy supports scanning
- layout works at mobile and desktop widths
- source, evidence strength, assumptions, and freshness are visible
- all external links are explicit
- no external runtime dependency exists