antigravity-claudekit/skills/ck-preview/SKILL.md

name, description

name	description
ck-preview	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

# 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 |