tui-design
A Claude Skill for designing and building clean, professional, minimal terminal UI (TUI) applications and command-line tools — across Go, Rust, Python, and TypeScript.
Use it for greenfield builds, design reviews, refactors, library decisions, and "should I use Bubble Tea or Ratatui?"-class questions. Covers the universal patterns (layouts, color, keybindings, discoverability) plus per-ecosystem deep-dives for Bubble Tea, Ratatui, Textual, and Ink.
Install
Option A — Claude Code (plugin marketplace, recommended)
/plugin marketplace add gfargo/tui-design-skill
/plugin install tui-design@tui-design-marketplace
To update later when the skill improves:
/plugin marketplace update tui-design-marketplace
Option B — Vercel's npx skills (cross-agent, no Claude Code required)
If you use Cursor, Codex CLI, Gemini CLI, Aider, Windsurf, or want to install at the project level rather than globally:
# Install for Claude Code (default)
npx skills add gfargo/tui-design-skill
# Install globally (~/.claude/skills/) instead of project-local
npx skills add gfargo/tui-design-skill -g
# Install for a different agent
npx skills add gfargo/tui-design-skill -a cursor
npx skills add gfargo/tui-design-skill -a codex
# List skills installed via npx skills
npx skills list
# Update later
npx skills update tui-design
npx skills discovers this skill via the same marketplace.json used by Option A, so no extra setup is needed on the repo side.
Option C — Claude.ai (upload the .skill file)
- Download the latest
tui-design.skill from Releases (or build it yourself — see Build below).
- In Claude.ai, go to Settings → Customize → Skills → Upload skill and select the file.
- Toggle the skill on.
Skills require code execution to be enabled in your Claude.ai settings.
Option D — Claude Code (direct, without plugin marketplace)
mkdir -p ~/.claude/skills
cd ~/.claude/skills
git clone https://github.com/gfargo/tui-design-skill.git
ln -s tui-design-skill/plugins/tui-design/skills/tui-design tui-design
What the skill covers
The skill is structured so its top-level SKILL.md carries the universal principles and routes to per-topic reference files on demand. Total: ~3,900 lines across 9 files, but Claude only loads what's relevant to the current question.
Top-level (SKILL.md):
- Seven canonical TUI layouts (multi-panel, miller columns, drill-down stack, widget dashboard, IDE three-panel, overlay, tabbed-within-panel) — when to use each, what to avoid
- Visual hierarchy in monospace (color, weight, reverse video, borders, density)
- Color as a semantic system,
NO_COLOR, accessibility tradeoffs
- Cross-app keybinding conventions (
q, ?, /, Esc, hjkl, Tab, Ctrl+P, ...)
- The four non-negotiables: alt screen, panic-safe terminal restore,
SIGWINCH, SIGTSTP
- Decision flow for new TUI/CLI projects
- Review checklist for existing TUIs
References (loaded as needed):
ecosystem-go.md — Bubble Tea, Lipgloss, Bubbles, Huh, tview, gocui, Cobra, Wish, gum
ecosystem-rust.md — Ratatui, Crossterm, color-eyre panic safety, Cursive, clap, cliclack, async with Tokio
ecosystem-python.md — Textual (TCSS, reactive, workers, Pilot testing, textual serve), Rich, prompt_toolkit, Typer, questionary
ecosystem-typescript.md — Ink (used by Claude Code, GitHub Copilot CLI, Gemini CLI), @clack/prompts, @inquirer/prompts, OpenTUI, color-library tradeoffs, argparse comparison
cli-basics.md — clig.dev / 12-Factor / POSIX / XDG / sysexits synthesis for non-TUI CLIs
visual-patterns.md — deep dive on the 7 layouts, borders, color tiers, semantic tokens, density, tables, status bars, progress, theming
interaction-patterns.md — keybinding philosophies, focus management, the fzf/lazygit/k9s/helix patterns dissected, confirmation friction levels, undo/redo
exemplar-apps.md — case studies of lazygit, k9s, btop, fzf, helix, yazi, atuin, htop, Posting, Harlequin, Claude Code, starship, and others
When the skill triggers
Once installed, Claude will reach for this skill automatically when you ask about:
- Building a TUI or CLI ("build me a TUI for monitoring my docker containers")
- Reviewing or refactoring existing terminal UIs ("here's my Ratatui code, what's wrong with it?")
- Library / framework choices ("Bubble Tea vs Ratatui vs Textual vs Ink for a kanban app")
- Specific design questions ("how should I lay out a multi-pane git client", "should I support mouse")
- Naming a known TUI app as inspiration (lazygit, k9s, btop, helix, fzf, yazi, atuin)
- Phrases like "terminal app," "ncurses-style," "interactive shell tool," "CLI dashboard," "fzf-like picker"
Example prompts