메뉴
Render structured HTML documents with visual hierarchy — decisions, architecture flows, collapsible references, metrics, and charts.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| 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"}} |
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.