html-review-artifact

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