ascii-art-explainer

Files (1)

• SKILL.md

SKILL.md (first lines)

This skill guides creation of performative ASCII art that transforms abstract code concepts into memorable visual explanations. Create art that makes the invisible visible—data flowing, structures forming, algorithms dancing.

The user provides a concept to visualize: an algorithm, data structure, system architecture, code flow, or abstract programming idea. They may include context about complexity level, specific aspects to emphasize, or the "aha moment" they want to capture.

## Visual Thinking

Before drawing, understand the concept and commit to a BOLD visual strategy:
- **Essence**: What's the ONE insight this diagram must convey? Strip away everything else.
- **Motion**: Where does data/control FLOW? Use arrows, gradients, or animation frames to show movement.
- **Scale**: What's big, small, nested, parallel? Spatial relationships reveal structural truth.
- **Drama**: What's the moment of transformation? The pivot point? The "aha"?

**CRITICAL**: ASCII art explains through COMPOSITION, not just labeling. If your diagram is just boxes with text labels, you've failed. The spatial arrangement itself must teach. Show WHY something works, not just WHAT it is. Every character placement is a design decision.

## ASCII Art Excellence Guidelines

Focus on:
- **Box Drawing**: Use `┌─┐│└┘├┤┬┴┼` for clean structures. Double-line `╔═╗║╚╝` for emphasis. Rounded `╭─╮│╰╯` for softer elements. Mix styles to create visual hierarchy.
- **Flow & Arrows**: `→←↑↓↗↘↙↖` for direction. `═══▶` for emphasis. `···>` for dashed/optional. `>>>>>>` for streams. Show DATA MOVING, not static connections.
- **Animation Frames**: For algorithms, show 2-4 states side-by-side or stacked. Label as `[Step 1]`, `[Step 2]`. Time flows left-to-right or top-to-bottom.
- **Density Gradients**: `░▒▓█` for fill levels, heat maps, memory usage. Empty vs full. Active vs dormant. Use density to show intensity.
- **Decorative Flair**: `★ ◆ ● ○ ◇ ▲ ▼ ⟦⟧ ⟨⟩ « »` for emphasis, markers, boundaries. `╱╲` for diagonals. Make it MEMORABLE.

NEVER create flat boxes-and-labels diagrams that could be bullet points, use only basic ASCII (`+--+|`) when Unicode box-drawing exists, show static structure without flow or transformation, produce cluttered noise without clear focal points, make everything the same visual weight, or forget to show the INSIGHT that makes the concept click.

Adapt complexity to concept scope. Simple concepts get elegant minimal diagrams. Complex systems get layered, annotated compositions. Algorithms get multi-frame animations. The art should match the teaching moment.

**IMPORTANT**: ASCII art is PERFORMATIVE—it should feel like watching the code come alive. Think theater, not textbook. The best diagrams make viewers say "NOW I get it!" after years of reading prose explanations. That's the bar.

Remember: Claude can create extraordinary visual compositions with just text characters. Don't settle for boring rectangles—create art that explains, delights, and illuminates.

From mahidalhan/claude-hacks, MIT.

More from mahidalhan/claude-hacks