VividKit Crystal clear AI coding
VI
Choose Your Setup Get Started with AgentKit Continue with ClaudeKit Migrate from ClaudeKit to AgentKit Clean cutover from ClaudeKit What Is AgentKit? How AgentKit Works AgentKit Kits, Skills, Agents & Hooks AgentKit Runtime Support AgentKit Desktop App AgentKit Configuration AgentKit CLI Quick Reference AgentKit Skills Cheatsheet AgentKit Workflows AgentKit Statusline Update AgentKit CLI & Kits AgentKit Helper Clean reinstall of AgentKit AgentKit Troubleshooting What is ClaudeKit? ClaudeKit CLI Guide Command Finder Commands Cheat Sheet Workflow Recipes CLI Quick Reference Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Other coding tools How ClaudeKit Works Inside ClaudeKit Finding Your Unknowns Session Recovery Fix from Logs UI/UX Guide Accounts Switcher IDE Config Remote Control Codex App System Diagramming UI Review Gate Promotions Support VividKit

Quick Ref / Command

Marketing Kit

/ak:preview

Universal visual viewer

Universal viewer and visual generator for files, diagrams, slide decks, HTML explanations, visual diffs, plan reviews, and project recaps.

01

Choose Operation

02

Resolve Flags

03

View or Generate

04

Load References

Rule 01

Two primary input shapes: a file path for view mode, or a generation flag plus topic for new visuals.

Rule 02

--html composes with explanation, diagram, slides, diff, plan-review, and recap modes, but not terminal-only ASCII.

Rule 03

HTML output is self-contained with all CSS and JS inline and no server requirement.

Rule 04

Review modes gather real diff, plan, git, and codebase context before drawing conclusions.

Execution Map

Core lanes from input to output, aligned with the command's real execution path.

01

Start

Input, scope, route

  1. 1 Choose Operation With no arguments, ask the user to choose view, explain, slides, diagram, ascii, diff, plan-review, recap, or stop.
  2. 2 Resolve Flags Apply priority: --stop, --html, generation flags, HTML-only flags, visual routing, then path resolution.
02

Work

Agent / skill execution

  1. 3 View or Generate Existing paths enter view mode; topics with generation flags create a new explanation, deck, diagram, or ASCII output.
  2. 4 Load References For HTML output, read the required design, CSS, library, slide, and responsive-nav references by mode.
03

Verify

Gate, review, validation

  1. 5 Render Visual Generate Markdown, Mermaid, ASCII, or self-contained HTML with appropriate diagram and editorial visual engines.
  2. 6 Validate UX HTML pages must include light/dark theme toggle; Mermaid syntax should use the mermaidjs-v11 skill.
04

Close

Report, handoff, artifact

  1. 7 Open Output Save to the active plan visuals folder or fallback path, then open the result directly when applicable.

Output / publish flags

Only flags that change the artifact or publish it. Not the full option set.

--html

Self-contained HTML

Switch generation output to a single inline HTML file that opens directly in a browser.

Example

/ak:preview --html --diagram "Landing page funnel"
--no-editorial-visuals

Disable editorial engines

Disable both additive HTML editorial visual engines and use fallback rendering.

Example

/ak:preview --html --diagram "Launch flow" --no-editorial-visuals
--no-antv

Disable AntV Infographic

Disable only the AntV Infographic layer while leaving other eligible visual engines available.

Example

/ak:preview --html --recap "last week" --no-antv
--no-diagram-design

Disable diagram-design

Disable only the diagram-design layer and fall back to Mermaid or Chart.js where appropriate.

Example

/ak:preview --html --diagram "System map" --no-diagram-design

Modes / Routes

[path]

View a file or browse a directory.

Research:
Path
Review:
Unresolved reference
Validate:
Viewer opens
--explain

Generate a visual explanation with prose, ASCII, and Mermaid.

Research:
Topic
Review:
Empty topic
Validate:
Rendered explanation
--slides

Generate presentation slides, one concept per slide.

Research:
Topic
Review:
Weak deck purpose
Validate:
Deck opens
--diagram

Generate a focused architecture or concept diagram.

Research:
Topic
Review:
Invalid Mermaid
Validate:
Diagram renders
--ascii

Generate a terminal-friendly ASCII diagram.

Research:
Topic
Review:
--html conflict
Validate:
Readable terminal output
--diff [ref]

Create a visual diff review; HTML is implied.

Research:
Git diff
Review:
No git repo
Validate:
Diff page
--plan-review [plan-file]

Compare a plan file against the actual codebase; HTML is implied.

Research:
Plan + files
Review:
Missing plan
Validate:
Comparison page
--recap [timeframe]

Create a project context snapshot over a timeframe; HTML is implied.

Research:
Git history
Review:
No history
Validate:
Recap page
--stop

Stop the preview server and exit.

Research:
Server state
Validate:
Stopped

Sample Prompt

Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.

View file Recommended 
/ak:preview assets/reports/seo/launch-audit.md
Use when:
You want to view an existing Markdown or file output.
Expected:
The requested file opens in the preview viewer so the user can inspect rendered output immediately.
Explain 
/ak:preview --explain How our referral funnel works
Use when:
You need a visual explanation of a concept or system.
Expected:
Markdown explanation includes visual structure so the reader can follow sections, relationships, and decisions.
HTML slides 
/ak:preview --html --slides Launch narrative for investors
Use when:
You need a browser-ready slide deck.
Expected:
Self-contained HTML slide deck is generated with readable sections, navigation, and portable assets.
Plan review 
/ak:preview --plan-review plans/launch-plan.md
Use when:
You want to compare a plan with current files.
Expected:
HTML plan-vs-codebase comparison highlights alignment, gaps, and recommended next changes in one page.
Stop server 
/ak:preview --stop
Use when:
You need to stop the running preview server.
Expected:
Preview server is stopped cleanly so no background viewer process remains after inspection.
Diagram 
/ak:preview --diagram referral funnel stages
Use when:
You need a focused diagram instead of opening an existing file.
Expected:
Generates a diagram artifact for the topic and reports the output path without rewriting source files.
ASCII diagram 
/ak:preview --ascii referral funnel stages
Use when:
The diagram must stay readable in a terminal without HTML.
Expected:
Writes a terminal-readable ASCII diagram for the topic and skips the HTML preview path.
Diff review 
/ak:preview --diff main
Use when:
Current git changes need a visual review before handoff.
Expected:
Detects the diff against main and creates a review artifact covering changed files and decision context.
Session recap 
/ak:preview --recap 7d
Use when:
You need a visual recap of recent work over a timeframe.
Expected:
Collects the requested timeframe, generates a recap visual, and reports the artifact path.

Handled Scope

  • Choose Operation
  • Resolve Flags
  • View or Generate
  • Load References
  • Render Visual
  • Validate UX

Next