Agent skill

terminal-ui-design

Use when creating CLI tools, terminal user interfaces (TUI), or any command-line applications. Load for terminal UI design, ASCII art, color schemes, box drawing characters, and polished terminal output. Also use for refactoring boring CLIs into distinctive experiences.

View SKILL.md on GitHub Repository
Stars 7
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/ingpoc/SKILLS/tree/main/terminal-ui-design

SKILL.md

Terminal UI Design

Create distinctive, production-grade terminal interfaces with intentional aesthetics. Don't just print text—craft an experience.

Quick Start

Before coding, choose a bold aesthetic direction:

Style Vibe Colors Borders
Cyberpunk Neon, futuristic Hot pink #ff00ff, cyan #00ffff, purple #1a0a2e Block █▀▄
Amber Terminal Vintage CRT #ffb000 on black Double ╔═╗
Minimalist Zen Clean, focused Nord palette, cool blues Rounded ╭─╮
Retro Mainframe Corporate, formal Green on black ASCII-only +-+
Synthwave 80s nostalgia Purple, pink gradients Heavy ┏━┓
Monochrome Brutalist Stark, bold Single color + intensity Heavy ┏━┓

Pick ONE direction and execute it with precision.

Design Thinking Checklist

Question Decision Point
Purpose What problem? Who uses it? What workflow?
Tone Pick extreme: cyberpunk, zen, retro, maximalist, playful
Constraints Python Rich, Go bubbletea, Rust ratatui, ANSI codes?
Differentiation What makes this UNFORGETTABLE?

Box Drawing & Borders

Choose borders that match your aesthetic:

Single:     ┌─────┐ │   └─────┘  Clean, modern
Double:     ╔═════╗ ║   ╚═════╝  Bold, formal, retro
Rounded:    ╭─────╮ │   ╰─────╯  Soft, friendly
Heavy:      ┏─────┓ ┃   ┗─────┛  Strong, industrial
Dashed:     ┄┄┄┄┄┄ ┆              Light, airy
ASCII:      +-----+ |   +-----+  Retro, universal
Block:      █▀▀▀▀█ ▄   ▀▀▀▀▀    Chunky, brutalist

Pro tip: Use decorative corners: ◆ ◈ ✦ ⬡ ◢◣◤◥

Color Strategies

Strategy When to Use Technique
ANSI 16 Universal compatibility Classic palette, craft unique combos
256-color Rich but portable Gradients, subtle variations
True color Modern terminals Full spectrum, smooth transitions
Monochrome Elegant constraint Single color, vary intensity

Create atmosphere:

  • Background color blocks for sections
  • Gradient fills: ░▒▓█
  • Semantic color (avoid cliché red=bad, green=good)
  • Reverse video for emphasis
  • Dim for secondary, bold for primary

Typography

The terminal is ALL typography:

Technique Effect Example
ASCII art headers Dramatic intro figlet style banners
Text weight Hierarchy Bold, dim, normal
Decoration Emphasis Underline, italic, strikethrough
Letter spacing Headers H E A D E R
Case Voice ALL CAPS headers, lowercase body
Unicode symbols Richness → • ◆ ★ ⚡ λ ∴ ≡ ⌘ ✓ ✗
Custom bullets Personality ▸ ◉ ✓ ⬢ › instead of - 
Block:    ███████╗██╗██╗     ███████╗
Slant:    /___  / / // /     / ____/
Small:    ╔═╗┌─┐┌─┐
Minimal:  [ HEADER ]

Layout & Spatial Composition

Break free from single-column output:

Element Usage
Panels & Windows Distinct regions with borders
Columns Side-by-side information
Tables Aligned data, Unicode table chars
Whitespace Generous padding, breathing room
Density Match purpose—dense dashboards, sparse wizards
Hierarchy Visual distinction: primary, secondary, chrome
Asymmetry Off-center titles, weighted layouts

Motion & Animation

Element Examples
Spinners ⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏, ⣾⣽⣻⢿⡿⣟⣯⣷
Progress bars ▓░, █▒, [=====> ], ◐◓◑◒
Typing effects Character-by-character reveal
Transitions Wipe effects, fade with color intensity
Live updates Streaming data, real-time charts

Data Display

Type Technique
Sparklines ▁▂▃▄▅▆▇█ inline mini-charts
Bar charts Horizontal bars with block chars
Tables Smart sizing, alternating rows, aligned nums
Trees ├── └── │ hierarchies
Status ● green, ○ empty, ◐ partial, ✓ complete
Gauges [████████░░] with percentage

Decorative Elements

Dividers:   ───── ═════ •••••• ░░░░░░ ≋≋≋≋≋≋
Sections:   ▶ SECTION, [ SECTION ], ─── SECTION ───, ◆ SECTION
Textures:   · ∙ ░ patterns for backgrounds
Icons:       (if Nerd Fonts available)

Anti-Patterns to Avoid

❌ Avoid ✅ Instead
Plain unformatted text Styled output with intent
Default colors Cohesive palette
Generic [INFO] prefixes Styled prefixes with icons
Simple ---- dividers Unicode dividers ───── ═════
Walls of text Structured panels and sections
Generic progress Creative spinners and bars
Boring help Formatted, aligned help text
Inconsistent spacing Precise alignment

Library Quick Reference

Language Libraries
Python Rich, Textual, curses, prompt_toolkit
Go Bubbletea, Lipgloss
Rust Ratatui
Node.js Ink, Blessed, cliui
Pure ANSI escape codes

ANSI Escape Codes

\x1b[1m       Bold
\x1b[3m       Italic
\x1b[4m       Underline
\x1b[31m      Red foreground
\x1b[38;2;R;G;Bm  True color (RGB)
\x1b[2J       Clear screen
\x1b[H        Cursor home

Implementation Pattern

  1. Choose aesthetic first (cyberpunk, zen, retro, etc.)
  2. Define palette (2-3 colors + background)
  3. Select border style (single, double, rounded, block)
  4. Create reusable components (panel, table, status)
  5. Apply consistently across all output

Resources

File When to Load
references/box-drawing.md Need border character reference
references/ansi-codes.md Need escape code reference
references/color-palettes.md Need pre-defined palettes

Exit Criteria (Code Verified)

  • Output has intentional aesthetic (not generic)
  • Cohesive color palette used throughout
  • Borders and typography match chosen style
  • No plain text without formatting
  • Anti-patterns avoided

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

ingpoc/SKILLS

scroll-storyteller

Use when creating interactive scroll-based storytelling experiences with mouse-following spotlight effects, animated SVG art, and the Anthropic design language. Load for explainer pages, product showcases, visual narratives, or any content needing immersive scroll storytelling with organic shapes and smooth animations. Supports GSAP-powered or lightweight CSS-only animations.

7 0
Explore
ingpoc/SKILLS

enforcement

Use when implementing hooks that BLOCK invalid actions, creating quality gates for state transitions, or enforcing tested:true verification. Load when designing enforcement mechanisms. Uses exit code 2 to block, JSON permissionDecision:deny, or updatedInput modification. Rules are instructions; hooks are enforcement.

7 0
Explore
ingpoc/SKILLS

async-programming-skill

This skill provides async/await patterns and best practices for concurrent programming

7 0
Explore
ingpoc/SKILLS

postgresql-skill

This skill provides PostgreSQL-specific patterns for database design, optimization, and transaction management

7 0
Explore
ingpoc/SKILLS

token-efficient

Use when processing 50+ items, analyzing CSV/log files, executing code in sandbox, or searching for tools. Load for data processing tasks. Achieves 98%+ token savings via in-sandbox execution, progressive disclosure, and pagination. Supports heredocs for multi-line bash.

7 0
Explore
ingpoc/SKILLS

mcp-builder

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

7 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results