# Prism
> Render structured HTML documents with visual hierarchy — decisions, architecture flows, collapsible references, metrics, and charts.
- Skill: `tommy0103/prism` (Agent Skill, multi-file: 9 files)
- Install (CLI): `npx skillmds@latest add tommy0103/prism`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tommy0103/prism/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tommy0103 (https://skillmd.com/u/tommy0103)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tommy0103/prism
---
# 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
1. Write a `template.html` file containing **only** the Vue template content — no ``, no ``, no `