---
name: ck-preview
description: Generate visual explanations, diagrams, slides, or ASCII art for any topic. Use when explaining complex code, visualizing architecture, creating presentation slides, or producing terminal-friendly diagrams.
---

# Preview — Visual Generator

Generates visual explanations, diagrams, slides, and ASCII art. Saves output to the active plan's `visuals/` folder.

## When to Use

- Explaining complex code patterns or architecture
- Generating Mermaid diagrams for data flow or system design
- Creating presentation slides for step-by-step walkthroughs
- Producing terminal-friendly ASCII diagrams

## Don't Use When

- Topic is simple enough to explain in plain text
- User wants to view an existing file (read it directly)

## Generation Modes

| Flag | Output |
|------|--------|
| `--explain <topic>` | Visual explanation: ASCII + Mermaid + prose |
| `--slides <topic>` | Presentation: one concept per slide |
| `--diagram <topic>` | Focused diagram: ASCII + Mermaid |
| `--ascii <topic>` | ASCII-only, terminal-friendly |

## Output Location

1. If active plan context exists → save to `{plan_dir}/visuals/{topic-slug}.md`
2. No active plan → save to `plans/visuals/{topic-slug}.md`
3. Create `visuals/` directory if it doesn't exist

**Topic-to-slug:** lowercase, spaces/special chars → hyphens, max 80 chars.

## Templates

### --explain
```markdown
# Visual Explanation: {topic}
## Overview
[Brief description]
## Quick View (ASCII)
[ASCII diagram]
## Detailed Flow
```mermaid
sequenceDiagram
    A->>B: Request
    B-->>A: Response
```
## Key Concepts
1. **Concept** - Explanation
```

### --slides
```markdown
# {Topic} - Visual Presentation
---
## Slide 1: Introduction
- One concept per slide
---
## Slide 2: The Problem
```mermaid
flowchart TD
    A[Problem] --> B[Impact]
```
---
```

### --diagram
```markdown
# Diagram: {topic}
## ASCII Version
[ASCII art]
## Mermaid Version
```mermaid
flowchart TB
    A --> B
```
```

### --ascii
```
┌──────────────────────────┐
│      {Topic} Overview    │
│  [Input] → [Process] → [Output]  │
└──────────────────────────┘
```

## Mermaid Syntax Rules

Use `ck-mermaidjs-v11` skill for v11 syntax. Essential rules:
- Quote node text with special characters: `A["text with /slashes"]`
- Escape brackets in labels: `A["array[0]"]`

## Error Handling

| Error | Action |
|-------|--------|
| Empty topic | Ask user to provide a topic |
| Flag without topic | Ask: "Please provide a topic: `--explain <topic>`" |
| Invalid path | Suggest checking permissions |