Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From Prism
Renders structured HTML documents with visual hierarchy using Vue components. Useful for architecture docs, decision records, and collapsible references.
npx claudepluginhub tommy0103/prismHow this skill is triggered — by the user, by Claude, or both
Slash command
/prism:prismThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
Generates self-contained HTML pages for technical diagrams, architecture reviews, diff reviews, plans, and comparisons. Renders complex tables as styled HTML instead of ASCII.
Create shareable HTML visual artifacts from markdown, plans, architecture docs, brainstorms, and other structured content. Prefer browser-viewable HTML first when it will materially improve clarity or sharing; otherwise fall back to terminal rendering. Triggers: visualize, mindmap, mind map, show me the structure, draw a map, make this clear, make this visual.
Create rich HTML documents for project specs, implementation plans, design exploration, RFCs, and brainstorming. Use whenever the user asks for a spec, plan, RFC, design doc, brainstorm, or wants to explore approaches/options/alternatives — even when they don't explicitly say "HTML". Strongly prefer HTML over markdown for any planning artifact longer than a screen, especially when the artifact will be shared with reviewers or fed back to the agent for implementation.
Share bugs, ideas, or general feedback.
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.
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.
template.html file containing only the Vue template content — no <!DOCTYPE>, no <html>, no <script>.node prism/build.js template.html index.html
index.html includes the Vue runtime, all components, and all styles inline.The build script auto-detects the document language from a <!-- lang: zh-CN --> 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.
Read references/principles.md for the full version with examples. Key rules:
<hr> between sections.<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.<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.<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.<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.<p-code>, <p-source>, or inline <code>. Never paraphrase.<p-file-list>.<p-checklist> with specific scenario names.<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.##, no - bullets.:items="[...]".For detailed props, slots, and examples, read the .md file next to each component in src/components/.
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
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.
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.