Agent skill

terminal-ui-design

Create distinctive, production-grade terminal user interfaces with high design quality. Use this skill when the user asks to build CLI tools, TUI applications, or terminal-based interfaces. Generates creative, polished code that avoids generic terminal aesthetics.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/terminal-ui-design-eddiebe147-claude-settings

SKILL.md

Terminal UI Design Skill

Create distinctive, production-grade terminal user interfaces with high design quality. Generate creative, polished code that avoids generic terminal aesthetics.

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

  1. Purpose: What problem does this interface solve? Who uses it? What's the workflow?
  2. Tone: Pick an extreme aesthetic from the palette below
  3. Constraints: Technical requirements (Python Rich, Go bubbletea, Rust ratatui, Node.js blessed/ink, pure ANSI escape codes, ncurses)
  4. Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember about this terminal experience?

Choose a clear conceptual direction and execute it with precision. A dense information dashboard and a zen single-focus interface both work—the key is intentionality, not intensity.

Aesthetic Palette

Choose ONE and commit fully:

Aesthetic Character Colors Typography
Cyberpunk/Hacker Glitchy, dangerous, alive Hot pink #ff00ff, electric cyan #00ffff, deep purple bg Monospace with Unicode glitches
Retro Computing Nostalgic, warm, authentic Amber #ffb000 or green #00ff00 on black Chunky ASCII art
Minimalist Zen Quiet, focused, calming Muted grays, single accent color Generous whitespace, sparse
Maximalist Dashboard Dense, powerful, professional Information-coded colors Tight grids, compact
Synthwave/Neon 80s future, vibrant Magenta, cyan, purple gradients Stylized headers
Monochrome Brutalist Bold, stark, uncompromising Single color, white on black Heavy borders, blocks
Corporate Mainframe Professional, trustworthy Blue-gray, minimal color Clean tables, structured
Playful/Whimsical Fun, approachable, human Bright primaries, emojis Rounded corners, icons
Matrix-Style Code rain, digital, mysterious Green on black only Cascading characters
Military/Tactical Urgent, precise, no-nonsense OD green, amber warnings Grid coordinates, timestamps
Art Deco Elegant, geometric, luxurious Gold, black, cream Decorative frames
Vaporwave Dreamy, surreal, glitchy Pink, blue, purple pastels Japanese characters, waves

Box Drawing & Borders

Choose border styles that match your aesthetic:

Single line:    ┌─────────┐    Clean, modern
                │         │
                └─────────┘

Double line:    ╔═════════╗    Bold, formal, retro-mainframe
                ║         ║
                ╚═════════╝

Rounded:        ╭─────────╮    Soft, friendly, modern
                │         │
                ╰─────────╯

Heavy:          ┏━━━━━━━━━┓    Strong, industrial
                ┃         ┃
                ┗━━━━━━━━━┛

ASCII only:     +---------+    Retro, universal compatibility
                |         |
                +---------+

Block chars:    █▀▀▀▀▀▀▀▀█    Chunky, bold, brutalist
                █         █
                █▄▄▄▄▄▄▄▄█

Advanced techniques:

  • Asymmetric borders (double top, single sides)
  • Decorative corners: ◆ ◈ ✦ ⬡ ● ◢ ◣
  • Mixed styles for hierarchy (heavy for primary, light for secondary)

Color & Theme Implementation

ANSI 16 (Universal)

Black   Red     Green   Yellow  Blue    Magenta Cyan    White
\x1b[30m \x1b[31m \x1b[32m \x1b[33m \x1b[34m \x1b[35m \x1b[36m \x1b[37m
Bright: \x1b[90m through \x1b[97m

True Color (24-bit)

Foreground: \x1b[38;2;R;G;Bm
Background: \x1b[48;2;R;G;Bm

Signature Palettes

Cyberpunk:

Background: #1a0a2e (deep purple)
Primary:    #ff00ff (hot pink)
Secondary:  #00ffff (electric cyan)
Accent:     #ff6b6b (coral warning)

Amber Terminal:

Background: #000000
Primary:    #ffb000 (warm amber)
Dim:        #805800 (dark amber)
Bright:     #ffd966 (light amber)

Nord-Inspired:

Background: #2e3440 (polar night)
Primary:    #88c0d0 (frost blue)
Secondary:  #a3be8c (aurora green)
Accent:     #bf616a (aurora red)

Gradient Fills

Use block characters for gradients:

░▒▓█ — Light to solid
▁▂▃▄▅▆▇█ — Height progression (for charts)

Typography & Text Styling

Text Decorations

Bold:          \x1b[1m
Dim:           \x1b[2m
Italic:        \x1b[3m
Underline:     \x1b[4m
Strikethrough: \x1b[9m
Reverse:       \x1b[7m
Reset:         \x1b[0m

Header Styles

Block ASCII (figlet-style):

███████╗██╗██╗     ███████╗███████╗
██╔════╝██║██║     ██╔════╝██╔════╝
█████╗  ██║██║     █████╗  ███████╗
██╔══╝  ██║██║     ██╔══╝  ╚════██║
██║     ██║███████╗███████╗███████║
╚═╝     ╚═╝╚══════╝╚══════╝╚══════╝

Letter Spacing:

S T A T U S    R E P O R T

Section Markers:

▶ SECTION NAME
[ SECTION ]
─── SECTION ───────────────────
◆ SECTION ◆
═══ SECTION ═══════════════════

Unicode Enhancement

Replace boring characters with styled alternatives:

Instead of Use
- bullet ▸ › ◉ ⬢ ★ ⚡
* star ★ ⭐ ✦ ✧
> arrow → ➜ ⟶ ▶
[x] check ✓ ✔ ◉ ●
[ ] empty ○ ◯ ☐
... loading ⋯ ⠿ ···

Layout & Spatial Composition

Panel Layout Example

╭─── SYSTEM MONITOR ──────────────────────────────╮
│                                                  │
│  CPU  [████████████░░░░░░░░]  67%               │
│  MEM  [██████████████░░░░░░]  74%               │
│  DSK  [████░░░░░░░░░░░░░░░░]  23%               │
│                                                  │
├──────────────────────────────────────────────────┤
│  ▸ Process count: 847                            │
│  ▸ Uptime: 14d 7h 23m                            │
│  ▸ Load avg: 2.34 1.89 1.67                      │
│                                                  │
╰──────────────────────────────────────────────────╯

Column Layout

┌─ SERVERS ────────┐  ┌─ ALERTS ─────────┐
│                  │  │                  │
│ ● web-prod-1     │  │ ⚠ High CPU       │
│ ● web-prod-2     │  │ ✓ All healthy    │
│ ○ web-staging    │  │                  │
│                  │  │                  │
└──────────────────┘  └──────────────────┘

Hierarchy Principles

  • Primary: Bold, high contrast, prominent position
  • Secondary: Normal weight, slightly dimmed
  • Tertiary: Dim text, small, peripheral
  • Chrome: Borders, labels, decorations—should not compete with content

Motion & Animation

Spinners

python
# Braille dots
frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']

# Orbital
frames = ['◐', '◓', '◑', '◒']

# Line
frames = ['|', '/', '-', '\\']

# Dots
frames = ['⣾', '⣽', '⣻', '⢿', '⡿', '⣟', '⣯', '⣷']

# Moon phases
frames = ['🌑', '🌒', '🌓', '🌔', '🌕', '🌖', '🌗', '🌘']

Progress Bars

Standard:   [████████████░░░░░░░░]  60%
Minimal:    ████████████▒▒▒▒▒▒▒▒  60%
Fancy:      ⟨▰▰▰▰▰▰▱▱▱▱⟩  60%
Blocks:     █████████████░░░░░░░░  60%

Transitions

python
# Typing effect
for char in text:
    print(char, end='', flush=True)
    time.sleep(0.03)

# Wipe reveal (character by character per line)
for i, line in enumerate(lines):
    print(f"\x1b[{i+1};1H{line}")
    time.sleep(0.05)

Data Visualization

Sparklines

Inline chart: ▁▂▃▄▅▆▇█▇▆▅▄▃▂▁
Usage trend:  CPU ▂▃▅▇▆▃▂▁▂▄▆▇▅▃

Status Indicators

● Online     ○ Offline    ◐ Partial
✓ Success    ✗ Failed     ⟳ Pending
▲ Critical   ▼ Low        ● Normal

Tree Structure

├── src/
│   ├── main.py
│   ├── utils/
│   │   ├── helpers.py
│   │   └── config.py
│   └── tests/
│       └── test_main.py
└── README.md

Tables

┌──────────────┬─────────┬──────────┐
│ SERVICE      │ STATUS  │ LATENCY  │
├──────────────┼─────────┼──────────┤
│ api-gateway  │ ● UP    │   12ms   │
│ auth-service │ ● UP    │    8ms   │
│ db-primary   │ ○ DOWN  │    --    │
└──────────────┴─────────┴──────────┘

Library Quick Reference

Python: Rich

python
from rich.console import Console
from rich.panel import Panel
from rich.table import Table
from rich.progress import Progress
from rich.live import Live

console = Console()
console.print("[bold magenta]Hello[/] [cyan]World[/]")
console.print(Panel("Content", title="Title", border_style="green"))

Python: Textual (TUI Framework)

python
from textual.app import App
from textual.widgets import Header, Footer, Static

class MyApp(App):
    CSS = """
    Screen {
        background: #1a0a2e;
    }
    """
    def compose(self):
        yield Header()
        yield Static("Hello, World!")
        yield Footer()

Go: Bubbletea + Lipgloss

go
import (
    "github.com/charmbracelet/lipgloss"
    tea "github.com/charmbracelet/bubbletea"
)

var style = lipgloss.NewStyle().
    Bold(true).
    Foreground(lipgloss.Color("#FF00FF")).
    Background(lipgloss.Color("#1a0a2e")).
    Padding(1, 2)

Rust: Ratatui

rust
use ratatui::{
    prelude::*,
    widgets::{Block, Borders, Paragraph},
};

let block = Block::default()
    .title("Title")
    .borders(Borders::ALL)
    .border_style(Style::default().fg(Color::Cyan));

Node.js: Ink (React for CLI)

tsx
import { render, Box, Text } from 'ink';

const App = () => (
  <Box flexDirection="column" padding={1}>
    <Text bold color="magenta">Hello</Text>
    <Text color="cyan">World</Text>
  </Box>
);

render(<App />);

Pure ANSI Escape Codes

python
# Colors
print("\x1b[38;2;255;0;255mHot Pink\x1b[0m")
print("\x1b[48;2;26;10;46m\x1b[38;2;0;255;255mCyan on Purple\x1b[0m")

# Cursor control
print("\x1b[2J")         # Clear screen
print("\x1b[H")          # Home position
print("\x1b[5;10H")      # Move to row 5, col 10
print("\x1b[?25l")       # Hide cursor
print("\x1b[?25h")       # Show cursor

Anti-Patterns to Avoid

NEVER produce generic terminal output like:

❌ Plain unformatted text output
❌ Default colors without intentional palette
❌ Basic [INFO], [ERROR] prefixes without styling
❌ Simple "----" dividers
❌ Walls of unstructured text
❌ Generic progress bars without personality
❌ Boring help text formatting
❌ Inconsistent spacing and alignment
❌ Mixed border styles without purpose
❌ Color vomit (too many colors without hierarchy)

Design Checklist

Before finalizing any terminal UI:

  • Aesthetic chosen: One clear direction, executed fully
  • Color palette: Cohesive, 3-5 colors max
  • Typography hierarchy: Primary, secondary, tertiary distinction
  • Borders: Consistent style matching the aesthetic
  • Spacing: Intentional padding and margins
  • Status indicators: Styled, not default text
  • Loading states: Animated, themed spinners/progress
  • Error states: Styled, not generic red text
  • Empty states: Designed, not blank

Example: Complete Themed Interface

Cyberpunk System Monitor:

╔══════════════════════════════════════════════════════════════╗
║  ▓▓▓ NEURAL•LINK ▓▓▓  ◢◤ SYSTEM DIAGNOSTIC v2.7 ◢◤         ║
╠══════════════════════════════════════════════════════════════╣
║                                                              ║
║  ⟨ CORE METRICS ⟩                                            ║
║  ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄   ║
║                                                              ║
║  CPU ████████████████████░░░░░░░░░░ 67% ▲ 2.4GHz             ║
║  MEM ██████████████████████████░░░░ 84% ◆ 13.4/16GB          ║
║  NET ▁▂▃▅▆▇▅▃▂▁▂▄▆▇▅▃▂▁▂▃▅ IN: 847 MB/s                      ║
║                                                              ║
║  ⟨ ACTIVE PROCESSES ⟩                            [47 total]  ║
║  ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄   ║
║                                                              ║
║  PID     NAME              CPU    MEM    STATUS              ║
║  ─────────────────────────────────────────────────────       ║
║  1847    chrome            23%    1.2G   ● ACTIVE            ║
║  2394    node              12%    847M   ● ACTIVE            ║
║  0847    postgres           8%    2.1G   ● ACTIVE            ║
║  3721    backup_daemon      0%     47M   ○ IDLE              ║
║                                                              ║
╠══════════════════════════════════════════════════════════════╣
║  ◢ SYS OK ◣  │  ⚡ UPTIME: 14d 7h │  ▼ TEMP: 62°C  │  ⟳ 2.4s ║
╚══════════════════════════════════════════════════════════════╝

The terminal is a canvas with unique constraints and possibilities. Don't just print text—craft an experience.

Recommended Agent Skills

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

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results