106 lines
2.6 KiB
Markdown
106 lines
2.6 KiB
Markdown
---
|
|
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 |
|