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

1. Clarity First – ASCII should clarify, not confuse
2. Consistent Styling – Use box-drawing characters consistently
3. Compact – Fit within 80-100 columns when possible
4. Status Indicators – Use emojis for visual interest: ✅ 🚧 📋 ⏳ ❌ ⭐
5. 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.