View files/directories OR generate visual explanations, slides, diagrams.
Universal viewer + visual generator. View existing content OR generate new visual explanations.
If invoked without arguments, use AskUserQuestion 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 |
Present as options via AskUserQuestion with header "Preview Operation", question "What would you like to do?".
/ck:preview <file.md> - View markdown file in novel-reader UI/ck:preview <directory/> - Browse directory contents/ck:preview --stop - Stop running server/ck:preview --explain <topic> - Generate visual explanation (ASCII + Mermaid + prose)/ck:preview --slides <topic> - Generate presentation slides (one concept per slide)/ck:preview --diagram <topic> - Generate focused diagram (ASCII + Mermaid)/ck:preview --ascii <topic> - Generate ASCII-only diagram (terminal-friendly)When processing arguments, follow this priority order:
--stop → Stop server (exit)--explain, --slides, --diagram, --ascii) → Generation mode. Load references/generation-modes.mdreferences/view-mode.mdTopic-to-slug conversion:
Multiple flags: If multiple generation flags provided, use first one; remaining treated as topic.
Placeholder {topic}: Replaced with original user input in title case (not the slug).
| Error | Action |
|---|---|
| Invalid topic (empty) | Ask user to provide a topic |
| Flag without topic | Ask user: "Please provide a topic: /ck:preview --explain <topic>" |
| Topic becomes empty after sanitization | Ask for topic with alphanumeric characters |
| File write failure | Report error, suggest checking permissions |
| Server startup failure | Check if port in use, try /ck:preview --stop first |
| No generation flag + unresolvable reference | Ask user to clarify which file they meant |
| Existing file at output path | Overwrite with new content (no prompt) |
| Server already running | Reuse existing server instance, just open new URL |
Parent plans/ dir missing | Create directories recursively before write |
The following sections are inlined from the skill's reference files for Cursor compatibility.
## Plan Context in hook injection){plan_dir}/visuals/{topic-slug}.mdplans/visuals/{topic-slug}.mdvisuals/ directory if it doesn't existMermaid Diagram Syntax:
When generating mermaid code blocks, use /ck:mermaidjs-v11 skill for v11 syntax rules.
Essential rules (always apply):
A["text with /slashes"]A["array[0]"]Use the appropriate template based on flag:
# Visual Explanation: {topic}
## Overview
Brief description of what we're explaining.
## Quick View (ASCII)
[ASCII diagram of component relationships]
## Detailed Flow
[Mermaid sequence/flowchart diagram]
## Key Concepts
1. **Concept A** - Explanation
2. **Concept B** - Explanation
## Code Example (if applicable)
[Relevant code snippet with comments]
# {Topic} - Visual Presentation
---
## Slide 1: Introduction
- One concept per slide
- Bullet points only
---
## Slide 2: The Problem
[Mermaid flowchart]
---
## Slide 3: The Solution
- Key point 1
- Key point 2
---
## Slide 4: Summary
Key takeaways...
# Diagram: {topic}
## ASCII Version
[ASCII architecture diagram]
## Mermaid Version
[Mermaid flowchart/graph]
[ASCII-only box diagram with legend]
node .claude/skills/markdown-novel-viewer/scripts/server.cjs \
--file "<generated-file-path>" --host 0.0.0.0 --open --foreground
Report:
visuals/ folder for future referenceIMPORTANT: Run server as Claude Code background task using run_in_background: true with the Bash tool.
The skill is located at .claude/skills/markdown-novel-viewer/.
If --stop flag is provided:
node .claude/skills/markdown-novel-viewer/scripts/server.cjs --stop
Run the markdown-novel-viewer server as CC background task with --foreground flag:
INPUT_PATH="<resolved-path>"
if [[ -d "$INPUT_PATH" ]]; then
node .claude/skills/markdown-novel-viewer/scripts/server.cjs \
--dir "$INPUT_PATH" --host 0.0.0.0 --open --foreground
else
node .claude/skills/markdown-novel-viewer/scripts/server.cjs \
--file "$INPUT_PATH" --host 0.0.0.0 --open --foreground
fi
Critical: When calling the Bash tool:
run_in_background: truetimeout: 300000 (5 minutes)After starting, report:
/tasks)CRITICAL: MUST display the FULL URL including path and query string. NEVER truncate to just host:port.
Note (Cursor): Script execution sections in this skill are Claude Code only. Cursor uses the instructions above. Run
.claude/skills/install.shin Claude Code to enable full capabilities.