artifact-preview
Installation
SKILL.md
Artifact preview
Present an artifact as a readable, self-contained HTML review surface. The source Markdown remains authoritative. When the owning skill requires rendered evidence, the preview also presents that evidence without pretending prose is pixels or motion.
Produce the preview
After writing a durable Markdown artifact, or after any later source change once its preview exists:
- Compute the source file's SHA-256 digest.
- Create or refresh
<basename>.preview.htmlbeside the source file. - Build a review header containing the artifact title, source path, source status value verbatim when present (otherwise
not declared), and digest; add a table of contents for multi-section documents.- Include the review scope supplied by the owning skill. Use its honest label, such as content-structure review, visual direction board, or animatic review. State what the page validates and distinguish semantic claims from rendered evidence.
- Render frontmatter as metadata and every Markdown heading section as semantic HTML: headings, paragraphs, lists, tables, code blocks, and safe links. Preserve approval state, open checks, evidence links, stable IDs, and lineage fields that affect review. A raw-source appendix is optional; a
<pre>dump is not the primary review surface.- For a visual direction board, include the owning skill's rendered 16:9 proof states at inspectable size and identify their project revision and scene/state IDs.
- For an animatic review, provide playback and seeking for the owning skill's timeline plus inspectable start, intermediate, boundary, and end states. Inline the review runtime and media, or package them in the host's supported self-contained representation.
- Label the page as derived review material.
- Use one self-contained HTML file with inline CSS and optional inline JavaScript. It must need no server, build step, network request, external font, stylesheet, script, image, or other local file. Rendered images and media may be embedded as
data:resources. - Treat source text as data and escape it before inserting it into HTML.