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.