zukai
Web Component runtime that turns agent output into styled HTML pages you actually want to read.
Ask your agent to explain a system architecture, review a diff, or compare a plan against the codebase. Instead of ASCII art and box-drawing tables, it generates a self-contained HTML page using <zk-*> Web Components and opens it in your browser.
> draw a diagram of our authentication flow
> /diff-review
> /plan-review ~/docs/refactor-plan.md
The agent writes semantic HTML like <zk-card variant="hero"> and <zk-diagram>. The runtime handles all styling, theming, animations, Mermaid zoom/pan, and slide navigation. The agent never writes raw CSS.
Why zukai
Token efficiency. The previous version loaded 17,000-31,000 tokens of CSS references per generation. zukai loads ~1,400. That's a 92-95% reduction in skill context cost.
No AI slop. The design system is derived from tw93/Kami - warm parchment palette, single accent color, Charter serif, whisper shadows. An anti-slop checklist is enforced before every page is delivered.
One script, zero build steps. A single zukai.js file defines 15 Custom Elements, 4 themes, a Mermaid zoom/pan engine, and a full slide deck system. Include it via <script> tag and compose with semantic HTML.
Install
| Harness | Install |
|---|
| Claude Code | Marketplace plugin |
| Pi | pi install or legacy installer |
| Codex CLI | Copy to ~/.codex/skills/zukai |
| OpenCode | Copy to ~/.config/opencode/skill/zukai |
| Cursor | Add the supplied .mdc rule from configs/cursor/ |
| OpenClaw | Use the AGENTS guidance from configs/openclaw/ |
Claude Code (marketplace)
/plugin marketplace add sanurb/zukai
/plugin install zukai@zukai-marketplace
Commands are namespaced as /zukai:command-name.
Pi
pi install git:github.com/sanurb/zukai
Or from a local checkout:
git clone --depth 1 https://github.com/sanurb/zukai.git
pi install ./zukai
Legacy installer (copies files instead of package management):
curl -fsSL https://raw.githubusercontent.com/sanurb/zukai/main/install-pi.sh | bash
Other harnesses
Clone the repo and copy plugins/zukai/ to your harness's skill directory. See configs/ for harness-specific guidance files.
Commands
| Command | What it does |
|---|
generate-web-diagram | Diagram for any topic |
generate-visual-plan | Implementation plan with state machines and code |
generate-slides | Magazine-quality slide deck |
diff-review | Before/after architecture comparison with code review |
plan-review | Plan vs codebase with risk assessment |
project-recap | Mental model snapshot for context-switching |
fact-check | Verify a document against actual code |
share-page | Deploy an HTML page to Vercel |
Components
The agent composes pages from 15 semantic elements. No classes, no divs, no inline styles.
<zk-page theme="parchment">
<h1>Authentication Flow</h1>
<p class="subtitle">OAuth2 + JWT architecture</p>
<zk-card variant="hero">
<h2>Overview</h2>
<p>How users authenticate in our system.</p>
</zk-card>
<zk-arrow label="then"></zk-arrow>
<zk-diagram>
graph TD
A[Login] --> B{Valid?}
B -->|Yes| C[Dashboard]
B -->|No| D[Error]
</zk-diagram>
<zk-grid cols="3">
<zk-kpi value="247" label="Lines Changed" trend="+18%" trend-direction="up"></zk-kpi>
<zk-kpi value="12" label="Files" trend-direction="up" trend="+3"></zk-kpi>
<zk-kpi value="98%" label="Coverage"></zk-kpi>
</zk-grid>
</zk-page>
Full catalog
