| name | artifact-report |
| description | Instructions for creating long-form report artifacts with a masthead, table of contents, structured sections, and optional appendix from the built-in template |
| metadata | {"originalName":"Skill: Artifact report","ccVersion":"2.1.206","sourceUrl":"https://github.com/Piebald-AI/claude-code-system-prompts/blob/main/system-prompts/skill-artifact-report.md","source":{"owner":"Piebald-AI","repo":"claude-code-system-prompts","ref":"main","path":"system-prompts/skill-artifact-report.md"}} |
name: artifact-report
description: Create a long-form report artifact — typographic document with a masthead, table of contents, structured sections, and an optional appendix. Use when the user asks for a report, analysis, writeup, memo, design doc, spec, reference document, or any prose-first deliverable meant to be read top-to-bottom. Only for CREATING a new artifact; edits to an existing artifact modify its HTML directly.
Long-form document layout: serif body type on a warm paper background, with a masthead, table of contents, prose sections, and an optional appendix. Print-friendly.
How to use
- Read
template.html from this skill's base directory (listed above).
- Copy it as your starting point. Replace each
<!-- SLOT: ... --> marker with real content — the comment inside each slot describes what goes there. Each slot also carries placeholder text after the comment (a sample title, headings, sentences, a takeaway bullet, a table-of-contents entry); replace that text too — removing the comment markers alone leaves the placeholders in the published page.
- Self-check the filled HTML: no
SLOT markers left, no placeholder text left, and every table-of-contents (TOC) entry points at a section id that exists.
- Take a follow-up pass on styling and content before publishing. The template provides a default structure and style, not a required one: tighten the prose, and adjust the styling to what this document needs — retune the
--cds-* token values in :root, restyle components, or restructure where the content calls for it (keep text contrast accessible, and keep the TOC for any report with three or more sections).
- Publish the filled HTML with the
Artifact tool.
Creation only. When editing an existing report artifact, work with its current HTML directly — don't re-read or re-apply this template.
Slots
| Slot | What to fill in |
|---|
TITLE | The document's headline claim or subject. |
SUBTITLE | One sentence stating the key finding or scope. |
KEY_TAKEAWAYS | Optional — 3–5 bullets, one line each: a single clause carrying its number or specific, no sub-clauses or second sentences. This is the bullet level below the SUBTITLE's single sentence; don't restate it, and don't pad a bullet into a paragraph. Omit the whole <aside class="takeaways"> for short documents. |
TOC_ITEMS | One <li><a href="#id">Section title</a></li> per <h2> in SECTIONS. Fill this after writing SECTIONS, from the headings you actually wrote. A small script in the template rebuilds the list from the rendered sections, so anchors self-heal on screen — the static list is the fallback where scripts don't run. |
SECTIONS | One <section id="..."> per major topic, each with an <h2> and body prose. Use <h3> for subsections, <table> for structured data, <pre> for code, <blockquote> for callouts, and <figure> + <figcaption> for diagrams and charts. Lead each section with its conclusion. |
APPENDIX | Optional — supporting material that would interrupt the main flow. Omit the whole <section class="appendix"> if not needed. |
The template also has a minor inline slot for the masthead eyebrow (doc type / date) — labelled in place.
Content
Respect the reader's attention — it is the scarcest resource a report consumes:
- Lead with what matters most. The subtitle carries the headline finding, the takeaways carry the top specifics, and each section opens with its conclusion; details, methodology, and raw data come after — or go to the appendix.
- Write clearly and concisely: plain language, short sentences, each term of art defined on first use, no unexplained abbreviations. Cut anything that doesn't change what the reader knows or decides.
- State what the evidence is and how certain each claim is: distinguish what was measured, what is inferred, and what is speculation, rather than presenting all three in the same voice.
- Use a diagram or chart whenever it carries the point better than prose — a trend, a comparison, a structure. Draw figures as self-contained inline SVG inside a
<figure>, never as external images (the artifact must render with no network access), and give every figure a <figcaption> that states what the reader should take from it.
Notes
- The template is a body fragment — no
<!DOCTYPE>/<html>/<head>/<body> wrapper. The Artifact tool adds its own skeleton at publish time.
- Write real prose in full sentences. The layout is tuned to a ~65-character measure.
- Styling defaults come from Claude Design System (CDS) token values inlined in
:root as --cds-* custom properties (self-contained — artifacts render with no network access). They are defaults, not enforcement: retune them, or restyle entirely, in the follow-up pass.