Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
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)
