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.

Syntax, arguments, subcommands

How to invoke the skill: syntax, positional arguments, shared options, then each subcommand with its own syntax and outcome.

Syntax

/ak:preview [path]

or

/ak:preview [--html] --explain|--slides|--diagram|--ascii <topic>

or

/ak:preview --html --diff|--plan-review|--recap [ref|plan-file|timeframe] [--no-antv|--no-diagram-design|--no-editorial-visuals]

or

/ak:preview --stop

Arguments

[path]

Existing path

File or directory to open in the Markdown viewer. It must resolve on disk; unresolvable text is not treated as a topic unless a generation flag is present.

/ak:preview plans/checkout/plan.md
<topic> Required

Visual topic

Non-empty subject for explanation, slides, diagram, or ASCII generation. Multiple generation flags use the first flag and fold the rest into this topic.

/ak:preview --diagram webhook lifecycle
[ref]

Diff reference

Optional branch, commit, range, HEAD, pull request, or default main comparison for --diff. PR refs require gh.

/ak:preview --html --diff main
[plan-file]

Plan file

Optional plan path for --plan-review. If omitted, the Skill uses active plan context when available.

/ak:preview --html --plan-review plans/checkout/plan.md
[timeframe]

Recap window

Optional recent-history window for --recap, such as 30d or 3m. Defaults to two weeks.

/ak:preview --html --recap 30d

Shared options

--stop

Stop viewer

Stop the running Markdown viewer server immediately. It does not generate or open a file.

/ak:preview --stop
--explain

Explanation mode

Generate a visual explanation with prose, ASCII, Mermaid, and optional code around a required topic.

/ak:preview --explain auth middleware chain
--slides

Slides mode

Generate a presentation-style artifact when slides are explicitly wanted.

/ak:preview --slides deployment pipeline
--diagram

Diagram mode

Generate a focused diagram and inspect the rendered result, not only the Mermaid syntax.

/ak:preview --html --diagram checkout architecture
--ascii

ASCII mode

Generate a terminal-friendly ASCII diagram. It is not supported with --html.

/ak:preview --ascii folder structure
--diff

Diff review mode

Generate an HTML visual review of a branch, commit, range, HEAD, PR, or default main comparison.

/ak:preview --html --diff main
--plan-review

Plan review mode

Generate an HTML comparison between a plan and the current codebase; requires a plan path or active plan context.

/ak:preview --html --plan-review plans/checkout/plan.md
--recap

Recap mode

Generate an HTML recent-project context snapshot from project identity, Git history, status, decisions, and architecture.

/ak:preview --html --recap 2w
--no-antv

Disable AntV

Disable AntV infographic alternates for this run while allowing other fallbacks.

/ak:preview --html --diff main --no-antv
--no-diagram-design

Disable diagram-design

Disable diagram-design SVG alternates for this run while keeping Mermaid or table fallbacks.

/ak:preview --html --diagram auth --no-diagram-design
--no-editorial-visuals

Disable editorial visuals

Disable all additive editorial visual layers for this run.

/ak:preview --html --recap 30d --no-editorial-visuals

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"

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