From mk
Generates visual artifacts: diagrams, slide decks, diff visualizations, and plan-rendering HTML in markdown or self-contained format. For explaining code, architecture, or git diffs without a live server.
How this skill is triggered — by the user, by Claude, or both
Slash command
/mk:previewWhen to use
Use when generating visual artifacts — markdown or self-contained HTML — for code, architecture, plans, or git diffs. Use --html --plan-review to RENDER a plan as HTML (display only, no critique). NOT for plan critique/scope review (mk:plan-ceo-review) or media generation (mk:multimodal).
This skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generates visual artifacts — markdown and self-contained HTML — for explaining code, drawing diagrams, building slide decks, visualizing diffs, and rendering plans for review.
Generates visual artifacts — markdown and self-contained HTML — for explaining code, drawing diagrams, building slide decks, visualizing diffs, and rendering plans for review.
No live server. No Python. Pure markdown + HTML + bash file operations. Output writes to tasks/plans/{active-plan}/visuals/ when an active plan exists; otherwise falls back to tasks/visuals/.
If invoked with no arguments, present available operations via AskUserQuestion. Header: "Preview Operation". Question: "What would you like to do?".
| Operation | Description |
|---|---|
--explain | Markdown visual explanation (ASCII + Mermaid + prose) |
--diagram | Markdown diagram (ASCII + Mermaid) |
--slides | Markdown presentation slides |
--ascii | Terminal-friendly ASCII diagram only |
--html --explain | Self-contained HTML explanation, opens in browser |
--html --diagram | HTML diagram with zoom/pan controls |
--html --slides | Magazine-quality HTML slide deck |
--html --diff | HTML diff visualization (KPI grid + file map + cards) |
--html --plan-review | HTML render of a plan for review meetings |
Recommended default: --explain or --html --explain.
/mk:preview --explain <topic> — visual explanation (ASCII + Mermaid + concepts)/mk:preview --diagram <topic> — focused diagram (ASCII + Mermaid)/mk:preview --slides <topic> — presentation slides (one concept per slide)/mk:preview --ascii <topic> — ASCII-only diagram (terminal-friendly)/mk:preview --html --explain <topic> — self-contained HTML explanation/mk:preview --html --diagram <topic> — HTML diagram with zoom/pan/mk:preview --html --slides <topic> — magazine-quality slide deck/mk:preview --html --diff [ref] — visualize a git diff. Default ref = main. Accepts branch, commit, range, PR number./mk:preview --html --plan-review [plan-file] — render a plan as HTML. Default = active plan from session-state/active-plan.--ascii does not combine with --html (terminal-only by design).
Priority order:
--html flag detected → set HTML output mode--explain, --diagram, --slides, --ascii) → load references/generation-modes.md--diff, --plan-review) → imply --html; load references/analytical-modes.mdAskUserQuestionTopic-to-slug:
Title placeholder {topic} uses the original input in title case, not the slug.
Multiple flags: if more than one generation flag is supplied, use the first; the rest become part of the topic string.
session-state/active-plan exists?
yes → value is absolute path?
yes → {value}/visuals/
no → tasks/plans/{value}/visuals/ (treated as slug)
no → tasks/visuals/
Detail and the bash detection snippet live in references/generation-modes.md → "Step 1 — Resolve output path". The fallback path is logged on stderr (warn:) so silent path mismatches surface immediately.
| Error | Action |
|---|---|
| Topic empty after sanitization | Ask user for an alphanumeric topic |
| Flag without topic | Ask user for the topic string |
| File write failure | Report the error; suggest checking disk space and permissions |
| Output path already exists | Overwrite without prompting |
--diff outside a git repo | Explain: "No git repository detected" |
--diff with PR number, no gh | Suggest installing gh from https://cli.github.com/ |
--plan-review with no plan file or active plan | Ask user for the plan path |
--html --ascii combination | Reject; suggest --html --diagram instead |
| Active-plan path absolute but missing | Log warning; fall back to tasks/visuals/ |
| Active-plan slug with no matching dir | Log warning; fall back to tasks/visuals/ |
Every mode reads its references BEFORE writing the output file.
| Mode | Always reads | Mode-specific |
|---|---|---|
--explain | references/generation-modes.md, references/mermaid-essentials.md | — |
--diagram | references/generation-modes.md, references/mermaid-essentials.md | — |
--slides | references/generation-modes.md, references/mermaid-essentials.md | — |
--ascii | references/generation-modes.md | — |
--html --explain | references/html-design-rules.md, mk:frontend-design/references/anti-slop-directives.md | template assets/architecture.html |
--html --diagram | references/html-design-rules.md, references/mermaid-essentials.md, mk:frontend-design/references/anti-slop-directives.md | template assets/mermaid-flowchart.html |
--html --slides | references/html-design-rules.md, mk:frontend-design/references/anti-slop-directives.md | template assets/slide-deck.html |
--html --diff | references/html-design-rules.md, references/analytical-modes.md, mk:frontend-design/references/anti-slop-directives.md | template assets/data-table.html, assets/architecture.html |
--html --plan-review | references/html-design-rules.md, references/analytical-modes.md, mk:frontend-design/references/anti-slop-directives.md | template assets/data-table.html, assets/architecture.html |
Templates in assets/ are out-of-band — they are not auto-Read; the agent reads the template only when generating the matching mode.
mk:ui-design-system — palette and typography selection (assets/colors.csv 160 rows, assets/typography.csv 73 rows). HTML modes vary palette per run.mk:frontend-design — anti-slop forbidden patterns. Cited via references/anti-slop-directives.md, not duplicated.mk:web-to-markdown — for users who want to view a generated markdown file in a browser, no server bundled here.mk:scout — for finding the right files to render in --html --plan-review..node class collision — Mermaid.js uses .node internally. Page-level .node CSS leaks into diagrams. Use .ve-card or any non-.node class on cards.<body> per references/html-design-rules.md. Missing toggle = incomplete output.session-state/active-plan is missing or unreadable, output writes to tasks/visuals/. Log the fallback on stderr so users notice; do not raise.--explain "</title><script>alert(1)</script>" MUST render as literal text. HTML-entity-encode < > & " ' in element and attribute contexts. See references/html-design-rules.md for context-by-context encoding rules.open/xdg-open.mk:cook may invoke --explain to communicate a complex implementation phasemk:plan-ceo-review consumes the same plan files; it CRITIQUES, this skill RENDERS — the boundary is intentionalnpx claudepluginhub ngocsangyem/meowkit --plugin mkGenerates self-contained HTML pages for technical diagrams, architecture reviews, diff reviews, plans, and comparisons. Renders complex tables as styled HTML instead of ASCII.
Create shareable HTML visual artifacts from markdown, plans, architecture docs, brainstorms, and other structured content. Prefer browser-viewable HTML first when it will materially improve clarity or sharing; otherwise fall back to terminal rendering. Triggers: visualize, mindmap, mind map, show me the structure, draw a map, make this clear, make this visual.
Create HTML visualizations from repository documentation, markdown files, plan folders, and user context. Generates maps, flows, diagrams, and recommendation views using Mermaid and custom CSS.