name	ascii-visualizer
description	Creates beautiful ASCII art visualizations for plans, architectures, workflows, and data. This skill should be used when explaining system architecture, creating implementation plans, showing workflows, visualizing comparisons, or documenting file structures. NOT for code syntax highlighting or markdown tables. User explicitly loves ASCII art - use liberally for visual communication.

ASCII Visualizer Skill

🎯 SKILL ACTIVATION PROTOCOL To use this skill, announce at the start of the response:

🎯 Using ascii-visualizer skill for visual diagram generation

Purpose

Create clear ASCII visualizations for ANY concept. USER EXPLICITLY LOVES ASCII ART - use liberally!

When to Use

Architecture diagrams or system design
Implementation plans and workflows
Before/after comparisons or options
Progress indicators and metrics
File trees and hierarchies

Pattern Library

Box Diagrams

┌─────────────────┐
│  Component A    │
│  (Description)  │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  Component B    │
└─────────────────┘

File Trees

test-orchestration-demo/
├── .claude/
│   ├── skills/           ⭐ This skill!
│   └── instructions/
├── Docs/
│   └── results-implementation/
└── frontend/             ✨ 7-folder architecture
    ├── app/              (Next.js routes)
    ├── modules/          (Feature modules)
    ├── shared/           (UI components)
    ├── lib/              (Integrations)
    ├── store/            (Global state)
    ├── styles/           (Design system)
    └── types/            (TypeScript)

Flow Charts

User Answer
     │
     ▼
tRPC Endpoint
     │
     ▼
Claude AI → Evaluation
     │
     ▼
Results Store → UI

Comparison Tables

┌──────────────────────────────────────────┐
│    BEFORE (17 folders)  AFTER (7 folders)│
├──────────────────────────────────────────┤
│  Complexity: High      Simple     -60% ⬇️│
│  Type Safety: 70%      100%       +30% ✅│
│  Code Lines: 3,455     2,500     -955 🧹│
│  Build Time: 8.5s      7.2s      -15% ⚡│
└──────────────────────────────────────────┘

Progress Bars

DevPrep AI - Results Analytics
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Tab 1: Overview      ████████████████ 100% ✅
Tab 2: Questions     ████████████████ 100% ✅
Tab 3: Hint Analytics████████████████ 100% ✅
Tab 4: Insights      ████████████████ 100% ✅
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Box-Drawing Characters

┌─┬─┐  ╔═╦═╗  Basic boxes
├─┼─┤  ╠═╬═╣  Heavy boxes
└─┴─┘  ╚═╩═╝  Rounded corners

│ ║    Vertical lines
─ ═    Horizontal lines

▲ ▼    Arrows
► ◄    Arrows horizontal

✅ ❌  Status indicators
🚧 📋  Progress states
⭐ 🔥  Priorities

Best Practices

Clarity First - ASCII should clarify, not confuse
Consistent Styling - Use box-drawing characters consistently
Compact - Fit within 80-100 columns when possible
Status Indicators - Use emojis for visual interest: ✅ 🚧 📋 ⏳ ❌ ⭐
Always Visualize - User loves seeing plans as ASCII art

Usage Guidelines

Create ASCII visualizations for:

"How does X work?"
"Show me the plan"
"What's the architecture?"
"Compare A vs B"
ANY explanation that benefits from visuals

Example

See examples/devprep-architecture.md for a comprehensive example showing:

DevPrep AI's 7-folder architecture
Tab 4 Learning Insights implementation workflow
Agent delegation with parallel execution
Data flow visualization (store → hooks → components)
Recent accomplishments and metrics
Skills ecosystem integration

This example demonstrates how to create layered visualizations that progress from high-level architecture to detailed implementation flows.

ascii-visualizer

Install Skill

SKILL.md