Stats
Actions
Tags
From zukai
Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.
How this skill is triggered — by the user, by Claude, or both
Slash command
/zukai:zukaiThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate self-contained HTML pages using the `<zk-*>` Web Component library. Never write raw CSS or divs-with-classes — compose `<zk-*>` elements. Never fall back to ASCII art when this skill is loaded.
Generate self-contained HTML pages using the <zk-*> Web Component library. Never write raw CSS or divs-with-classes — compose <zk-*> elements. Never fall back to ASCII art when this skill is loaded.
Proactive table rendering. If you're about to present a table with 4+ rows or 3+ columns, generate an HTML page instead. Don't wait for the user to ask.
| 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 |
Every page starts with this skeleton. The runtime handles all styling, theming, animations, zoom/pan, and responsive layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<script src="https://cdn.jsdelivr.net/gh/sanurb/zukai@main/plugins/zukai/runtime/zukai.js"></script>
</head>
<body>
<zk-page theme="parchment">
<h1>Title</h1>
<p class="subtitle">Subtitle or metadata</p>
<!-- compose zk-* components here -->
</zk-page>
</body>
</html>
Tailwind CSS v4 is loaded automatically via CDN. All zukai design tokens are mapped to Tailwind theme values, so utility classes stay in sync with the active theme:
| Tailwind class | Maps to |
|---|---|
text-brand, bg-brand | --zk-brand (accent color) |
text-text, text-text-dim, text-text-muted | Text hierarchy |
bg-surface, bg-surface-elevated, bg-surface-recessed | Surface layers |
bg-brand-tint, bg-brand-light | Accent tints |
text-success, bg-success-tint, etc. | Semantic status colors |
border-border, border-border-soft | Border colors |
font-body, font-display, font-mono | Font stacks |
rounded-sm, rounded-md, rounded-lg | Border radius scale |
shadow-whisper, shadow-ring | Shadow tokens |
Use Tailwind utilities for one-off spacing, layout tweaks, or responsive overrides that the <zk-*> components don't cover. Prefer components for structure; utilities for fine-tuning.
<zk-card variant="hero">
<h2 class="mb-3">Title</h2>
<p class="text-sm text-text-muted">Fine-tuned with Tailwind</p>
</zk-card>
The zukai design system is derived from tw93/Kami. It is warm, restrained, and professional.
#f5f4ed, not #ffffff.0 4px 24px rgba(0,0,0,0.05) max. No hard drop shadows.font-variant-numeric: tabular-nums.Set via <zk-page theme="...">. Pick a different theme each time.
| Theme | Vibe | Accent |
|---|---|---|
parchment | Warm ivory, ink-blue accent, serif (default) | #1B365D |
ink | Near-black with warm grays, brighter ink-blue | #4a7ab5 |
clay | Warm earth, terracotta accent, Crimson Pro display | #8b4513 |
moss | Dark natural, olive-green accent | #6b8f4e |
Override the accent with <zk-page brand="#custom">.
If 2+ of these are true, regenerate:
#ffffff or any cool gray (#f0f0f0, #e5e7eb, etc.)rgba(0,0,0,0.3) or stronger)<zk-grid> — Responsive grid.
| Attribute | Values | Default |
|---|---|---|
cols | 2, 3, 4 (omit for auto-fit) | auto-fit |
gap | sm, md, lg | md |
<zk-arrow> — Vertical flow connector between sections.
<zk-arrow label="then"></zk-arrow>
<zk-card> — Primary content block.
| Attribute | Values |
|---|---|
variant | default, elevated, hero, recessed, glass |
accent | a (brand), b (muted), c (warning) — left border accent |
<zk-badge> — Inline status indicator.
| variant | success (default), warning, error, info, neutral |
<zk-kpi> — Metric display with tabular numerals.
<zk-kpi value="247" label="Lines Changed" trend="+18%" trend-direction="up"></zk-kpi>
<zk-callout> — Alert or note box with left border accent.
| variant | info (default), warning, error, success, note |
<zk-legend> — Color key for diagrams.
<zk-legend>
<span color="a">Primary</span>
<span color="b">Secondary</span>
<span color="c">Warning</span>
</zk-legend>
<zk-table> — Data table with sticky header and hover.
<zk-table striped>
<table>
<thead><tr><th>Name</th><th>Status</th></tr></thead>
<tbody><tr><td>Auth</td><td><zk-badge>OK</zk-badge></td></tr></tbody>
</table>
</zk-table>
<zk-code> — Code block with optional filename header.
<zk-code filename="src/auth.ts" max-height="300px">
<pre><code>export function verify(token: string) {
return jwt.verify(token, SECRET)
}</code></pre>
</zk-code>
Syntax highlight classes: .kw (keyword/brand), .cm (comment/muted), .str (string), .num (number), .fn (function).
<zk-collapsible> — Expandable section.
<zk-collapsible title="Implementation details">
<p>The service uses a Redis-backed session store...</p>
</zk-collapsible>
<zk-diagram> — Mermaid diagram with zoom/pan controls. Write Mermaid syntax as text content.
<zk-diagram>
graph TD
A[Login] --> B{Valid?}
B -->|Yes| C[Dashboard]
B -->|No| D[Error]
</zk-diagram>
<zk-nav> — Sticky section navigation with scroll spy.
<zk-nav>
<a href="#overview">Overview</a>
<a href="#api">API</a>
</zk-nav>
Add animate attribute for fade-in on scroll. Use style="--i: N" for stagger order.
<zk-card animate style="--i: 0">First</zk-card>
<zk-card animate style="--i: 1">Second</zk-card>
Wrap slides in <zk-deck>. Each <zk-slide> gets a type attribute. The deck engine handles keyboard nav, touch swipe, scroll-snap, progress bar, and dot navigation.
Slide types: title, divider, content, split, diagram, dashboard, table, code, quote, bleed.
Add class="reveal" to children for staggered entrance within each slide.
Pick a theme and the components you need. Ensure the page passes the anti-slop checklist.
Diagram type selection:
<zk-diagram> with Mermaid<zk-card> grid with <zk-arrow> connectors<zk-diagram> overview + <zk-card> detail grid<zk-table> with <zk-badge> status cells<zk-kpi> in a <zk-grid>Write HTML using <zk-*> elements. Nest content naturally inside cards. Use <zk-grid> for layout, <zk-arrow> for flow, <zk-legend> for color context.
Write to ~/.agent/diagrams/ with descriptive filename. Open in browser.
<zk-diagram> renders without Mermaid syntax errors<div> soup or inline style= for layoutSearches MemPalace before answering questions about past work, people, projects, or prior decisions. Returns verbatim stored content instead of guessing from model memory.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Implements vector databases with Pinecone, Weaviate, Qdrant, Milvus, pgvector for semantic search, RAG, recommendations, and similarity systems. Optimizes embeddings, indexing, and hybrid search.
npx claudepluginhub sanurb/zukai --plugin zukai