Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
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)
