View files or generate visual explanations, slides, and diagrams. Use for code walkthroughs, architecture visualization, HTML/Markdown presentations.
user-invocable
true
when_to_use
Invoke for visual explanations, file previews, or diagrams.
category
utilities
keywords
["preview","visual","slides","diagrams","HTML"]
argument-hint
[path] OR [--html] --explain|--slides|--diagram|--ascii [topic] OR --html --diff|--plan-review|--recap
metadata
{"author":"agentkit","version":"1.2.0","attribution":"Visual self-review pattern for diagram output adapted from fireworks-tech-graph by yizhiyanhua-ai (MIT)","license":"MIT"}
Preview
Universal viewer + visual generator. View existing content OR generate new visual explanations.
Default (No Arguments)
If invoked without arguments, use ask_user capability to present available preview operations:
Operation
Description
(view)
View a file or directory
--explain
Generate visual explanation
--slides
Generate presentation slides
--diagram
Generate architecture diagram
--ascii
Terminal-friendly diagram
--stop
Stop preview server
--html --explain
Self-contained HTML explanation (opens in browser)
--html --diagram
Self-contained HTML diagram with zoom controls
--html --slides
Magazine-quality HTML slide deck
--html --diff
Visual diff review (HTML)
--html --plan-review
Plan vs codebase comparison (HTML)
--html --recap
Project context snapshot (HTML)
Present as options via ask_user capability with header "Preview Operation", question "What would you like to do?".
Usage
View Mode
/ak:preview <file.md> - View markdown file in novel-reader UI
Adding --html to any generation flag switches output from Markdown to a self-contained HTML file.
Output: Single .html file with all CSS/JS inline. Opens directly in browser — no server needed.
Location:{plan_dir}/visuals/{slug}.html (same plan-aware logic as markdown mode)
Browser open:open (macOS) / xdg-open (Linux) / start (Windows)
MANDATORY — Theme Toggle: Every HTML page MUST include a light/dark theme toggle button. See html-css-patterns.md → "Theme Toggle Button" for the exact CSS, HTML, and JS to include. Pages without the toggle are considered incomplete.
Reference Loading (HTML mode)
Before generating, agent MUST read these references:
Mode
Always read
Mode-specific
All HTML modes
html-design-guidelines.md
—
--explain
html-css-patterns.md, html-libraries.md
Template: architecture.html
--diagram
html-css-patterns.md, html-libraries.md
Template: mermaid-flowchart.html or architecture.html
Plan vs codebase comparison. Input: plan file path or detect from active plan context.
Data: read plan, read all referenced files, map blast radius, cross-reference assumptions.
Output: plan summary, impact dashboard, current vs planned architecture (paired Mermaid), change breakdown (side-by-side), dependency analysis, risk assessment, review cards, understanding gaps.
Visual language: blue=current, green=planned, amber=concern, red=gap.
--recap [timeframe] (implies --html)
Project context snapshot. Time window: shorthand (2w, 30d, 3m) or default 2w.
Data: project identity, git log, git status, decision context, architecture scan.
Output: project identity, architecture snapshot (Mermaid), recent activity, decision log, state KPI cards, mental model essentials, cognitive debt hotspots, next steps.
Style Strategy
Default: static anti-slop rules from html-design-guidelines.md (6 curated presets)
For --slides: consider invoking /ak:ui-ux-pro-max for richer style selection
Agent must vary aesthetics between consecutive HTML outputs (different font pair, palette)
