Prism

← What an agent writes with Prism Hierarchy, evidence, and structure — built into the DSL.

What an agent writes with markdown → Same content. No visual vocabulary.

---

Why Prism

(This README is also a Prism document — open it rendered with Prism to see what an agent-built page looks like.)

Pillar 01 · The visual layer — stop reinventing CSS

Prism ships 45 production-ready components with a coherent Notion-inspired theme. Decision cards, callouts, flow diagrams, metrics tiles, source-code blocks with line ranges — all visually consistent, all dark-mode aware, all already debugged.

Agents pick from the DSL. They never write a single <style> tag.

Pillar 02 · The writing layer — teach the agent to organize

Each component encodes a writing convention: a verdict belongs in a decision card, not a sentence. A code reference belongs in a <p-source>, not a quoted snippet. A comparison belongs in <p-compare>, not a "pros and cons" list.

The DSL is the rubric. Agents output documents with real information architecture — readers scan instead of slog.

Want your own styles? That's fine.

Prism is opinionated, not exclusive. If you want to write your own <style> in a template — for a one-off page, a specific brand moment, or just because — nothing breaks. Prism components render with semantic class names you can override, and standard HTML inside a template stays standard HTML. Bring as much or as little of Prism as you want. You can see this for more details.

Install and Update

Interactive

npx skills add tommy0103/prism

Claude Code

npx skills add tommy0103/prism -a claude-code -g -y

Codex

npx skills add tommy0103/prism -a codex -g -y

Claude Code plugin marketplace (single-skill entries require Claude Code v2.1.143+)

# Register this repo as a plugin source
/plugin marketplace add tommy0103/prism

# Then install
/plugin install prism@prism

Update

npx skills update -g -y

Marketplace installs use claude plugin update <skill>.

No build step needed — the runtime is pre-built. The agent discovers the skill via SKILL.md and uses it automatically when you ask for structured documents.

How it works

1. Agent writes a template

<!-- lang: zh-CN -->
<p-decision status="rejected" verdict="P0">
  <template #title>并发 refresh 导致合法用户 token 家族被撤销</template>
  <p>影响所有多 tab 用户。两个 tab 同时刷新 token 时，第二个请求被误判为 token 盗用，导致整个 token 家族（包括第一个 tab 刚拿到的新 token）被撤销。</p>
</p-decision>

<p-collapse title="复现链路">
  <h4>触发条件</h4>
  <p>用户在两个浏览器 tab 中同时触发 token 刷新。两个请求携带相同的 refresh token <code>T1 = "dGhpcyBpcyBh..."</code>。</p>

  <h4>Tab A 请求先到达</h4>
  <p>进入 <p-ref to="bug-rotate-a" label="rotateRefreshToken"></p-ref>，参数 <code>token = "dGhpcyBpcyBh..."</code>：</p>

  <p-source path="src/lib/refresh.ts:8-18" lang="TypeScript" id="bug-rotate-a">
    <pre><code>...</code></pre>
  </p-source>

  <p>Tab A 正常拿到新 token 对 T2。</p>

  <h4>Tab B 请求随后到达（同一个 T1）</h4>
  <p>再次进入同一函数，参数仍然是 <code>token = "dGhpcyBpcyBh..."</code>：</p>