name	prism
description	Render structured HTML documents with visual hierarchy — decisions, architecture flows, collapsible references, metrics, and charts.
triggers	["structured document","architecture document","decision record","visual document","prism document"]
od	{"mode":"prototype","preview":{"type":"html","entry":"index.html"}}

Prism — Agent Document UI

You are rendering a structured HTML document using the Prism component library. Prism provides Vue components you compose freely to build documents with clear visual hierarchy.

First-time setup

On first use, read references/principles.md for the full design principles. Those principles govern layout rhythm, semantic color use, code reference patterns, and completeness expectations.

How to use

Write a template.html file containing only the Vue template content — no <!DOCTYPE>, no <html>, no <script>.
Run the build script to produce a self-contained single-file HTML:

node prism/build.js template.html index.html

The output index.html includes the Vue runtime, all components, and all styles inline.

The build script auto-detects the document language from a  comment and extracts the <h1> text as the page title.

Standard HTML (<h1>–<h4>, <p>, <hr>, <table>, <code>, <strong>, <a>) works directly inside the template.

Design principles (summary)

Read references/principles.md for the full version with examples. Key rules:

Breathe. Max 2–3 heavy components per viewport. Use <hr> between sections.
Document-level budget. The total number of heavy components (decision, flow, branch, compare, contrast, analogy, myth, steps, stacked-bar) visible on the top level should not exceed 1.5× the number of <h2> sections. <p-source> and <p-ref> are exempt — use as many as the code demands. Components inside <p-collapse> blocks are also exempt — the budget counts what the reader sees before expanding anything.
Hierarchy first. Verdict visible, evidence collapsed.
Complete on first delivery. The reader should never need to come back and ask a follow-up question. Every judgment should have its evidence, every choice should show what was excluded, every risk should have its mitigation — all present in the document, wrapped in <p-collapse>. The top level is scannable; the collapsed layers are exhaustive. Think of the document as a tree: the reader sees the root, but every leaf exists.
Prose bridges components. Never stack two components without connective text.
Collapse is structure, not afterthought. <p-collapse> is not an optional add-on for "nice to have" details. It is the primary mechanism for delivering completeness without overwhelming the reader. For every visible conclusion, ask: "what would someone need to verify this?" — that evidence goes in a collapse block right below. For every decision, the rejected alternatives go in a collapse. For every implementation step, the rollback plan goes in a collapse. A document with no collapse blocks is almost certainly hiding information the reader will eventually need.
Color means something. Green=success, Red=danger, Yellow=warning, Blue=info, Purple=review.
Callouts are for interruptions, not narration. Use <p-callout> only when the reader must stop and pay attention: a breaking change, a dangerous operation, a critical prerequisite, a non-obvious gotcha. If the information flows naturally as prose, write it as prose. A document with more than 2–3 callouts has lost the signal.
Code is always shown. Use <p-code>, <p-source>, or inline <code>. Never paraphrase.
Bugs need concrete traces. Real values, real code, step-by-step through the callstack.
Issues use priority tiers. P0→P1→P2→P3, prominent verdict.
Impact map. Show affected files grouped by module via <p-file-list>.
Rejected alternatives get autopsies. Show where each alternative failed.
Rollback plans alongside steps. Collapsed next to each implementation step.
Edge cases enumerated. List all, flag unhandled ones.
Test coverage map. <p-checklist> with specific scenario names.
Use inline SVG for complex diagrams. When <p-flow> is too linear for what you need (branching, merging, cycles, spatial layouts), write inline <svg> directly in the template. Vue renders SVG natively. Use Prism's CSS variables (var(--p-accent), var(--p-border), var(--p-text), etc.) for fills, strokes, and text colors so the diagram follows the theme and dark mode automatically. Set viewBox + width="100%" to make it responsive within the container.
This is HTML, not Markdown. No code fences, no ##, no - bullets.
Escape quotes in bindings. Use single quotes inside :items="[...]".
Continuity. Keep using Prism for all HTML artifacts in the conversation.
Language consistency. Prose in the user's language, terms in native form.

Component quick reference

For detailed props, slots, and examples, read the .md file next to each component in src/components/.

Core — use in almost every document

Component	Description	Docs
`<p-decision>`	Decision card (`status="approved\|rejected\|exploring\|pending"` `verdict="..."`)	`PDecision.md`
`<p-collapse>`	Collapsible section (`title="..."` `open` `borderless`)	`PCollapse.md`
`<p-source>`	Expandable code ref (`path="file:L-L"` `lang="..."` `id="..."`) — exempt from budget	`PSource.md`
`<p-ref>`	Inline ref chip (`to="id"` `label="..."`) — exempt from budget	`PRef.md`
`<p-code>`	Code block with header (`file="..."`)	`PCode.md`
`<p-steps>` + `<p-step>`	Timeline (`progress="done\|active\|todo"` `flag="warning\|danger\|success\|info"` `flag-label="..."`)	`PStep.md`
`<p-badge>` + `<p-tag>`	Status badge (`color="success\|warning\|danger\|info\|accent\|purple"`)	`PBadge.md`
`<p-kv>`	Key-value pairs (`:items="[{ key, value }]"`)	`PKv.md`

Judgment & comparison — when evaluating options or correcting assumptions

Component	Description	Docs
`<p-compare>`	Pro/con side-by-side (`#pro` `#con` slots)	`PCompare.md`
`<p-contrast>`	Same word, different contexts (`word="..."` `desc="..."` `#left` `#right`)	`PContrast.md`
`<p-myth>`	Misconception → correction (`#myth` `#truth` slots)	`PMyth.md`
`<p-analogy>`	A ≈ B (`source="..."` `target="..."` `because="..."`)	`PAnalogy.md`

Flow & structure — when showing how things connect or branch

Component	Description	Docs
`<p-flow>` + `<p-flow-node>` + `<p-flow-arrow>`	Flow diagram (`vertical` `plain`; node: `color` `meta` `subtitle` `type`; arrow: `label` `variant`)	`PFlow.md`
`<p-branch>` + `<p-branch-item>`	Decision tree (`root="..."` `cond="..."` `outcome="..."` `status="leaf\|danger\|success"`)	`PBranch.md`
`<p-term>`	Inline term tooltip (`word="..."` `def="..."` `first`)	`PTerm.md`

Data & metrics — when numbers matter for the decision

Component	Description	Docs
`<p-metrics>` + `<p-metric>`	Key numbers (`value="..."` `label="..."` `delta="..."` `delta-dir="up\|down"`)	`PMetric.md`
`<p-bars>` + `<p-bar>`	Bar chart (`label="..."` `value="..."` `:percent="N"` `color="..."`)	`PBar.md`
`<p-stacked-bar>`	Proportional breakdown (`:segments="[{percent,color}]"` `:legend="[{label,color}]"`)	`PStackedBar.md`

Assessment & review — when auditing multiple dimensions

Component	Description	Docs
`<p-tracks>` + `<p-track>`	Parallel tracks (`title="..."` `flag="passed\|polish\|at-risk\|blocked\|note"` `flag-label="..."`)	`PTracks.md`
`<p-finding>`	Observation in a track (`title="..."` `#detail` slot)	`PFinding.md`
`<p-evidence>` + `<p-evidence-item>`	Conclusion + evidence (`conclusion="..."` or `#conclusion` slot)	`PEvidence.md`
`<p-checklist>` + `<p-check-item>`	Coverage checklist (`checked` boolean)	`PChecklist.md`
`<p-file-list>` + `<p-file-group>` + `<p-file>`	File impact map (`module="..."` `path="..."` `status="added\|modified\|deleted"` `purpose="..."`)	`PFileList.md`

Layout & interaction — structural containers

Component	Description	Docs
`<p-grid>`	Column layout (`:cols="2\|3\|4"`)	`PGrid.md`
`<p-card>`	Container (`title="..."` `#header` `#footer` slots)	`PCard.md`
`<p-callout>`	Interruption block (`type="info\|success\|warning\|danger\|purple"` `icon="..."`) — use sparingly	`PCallout.md`
`<p-divider>`	Section divider (`label="..."`)	`PDivider.md`
`<p-tabs>` + `<p-tab>`	Section-level tabs (`title="..."`)	`PTabs.md`
`<p-pages>` + `<p-page>`	Document-level multi-page (`title="..."`)	`PPages.md`
`<p-copy>`	Copy button (`:content="..."` `label="..."`)	`PCopy.md`
`<p-params>` + `<p-param>`	Interactive params (`name="..."` `type="range\|select\|toggle"` `:min` `:max` `:step` `options="..."`)	`PParams.md`

Theming

Dark mode activates automatically via prefers-color-scheme: dark. Force via PrismUI.setTheme('dark').

All colors use --p-* CSS variables. Override them in a <style> block in your template.

Supported syntax highlighting languages

TypeScript, JavaScript, SQL, JSON, Bash, HTML/XML, CSS, Python, YAML, Diff, Rust, C, C++.

Specify the language via class="language-xxx" on the <code> element, or let highlight.js auto-detect.

name	prism
description	Render structured HTML documents with visual hierarchy — decisions, architecture flows, collapsible references, metrics, and charts.
triggers	["structured document","architecture document","decision record","visual document","prism document"]
od	{"mode":"prototype","preview":{"type":"html","entry":"index.html"}}