tui-design

Design terminal user interfaces with layout paradigms, color systems, and keyboard interaction patterns.

10|1|Updated Jul 7, 2026
One-click install
npx skills add https://github.com/catalystctl/catcode --skill tui-design-catalystctl
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tui-design
Source: https://github.com/catalystctl/catcode/tree/main/.catalyst-code/skills/tui-design
Command: npx skills add https://github.com/catalystctl/catcode --skill tui-design-catalystctl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building terminal user interfaces often results in inconsistent layouts, undiscoverable keybindings, broken colors across terminals, and flickering rendering. This Skill provides a framework-agnostic design system covering layout paradigms, interaction models, color architecture, and data visualization so TUI applications work reliably across Ratatui, Ink, Textual, Bubbletea, and other toolkits. ## Core Features & Use Cases - Layout Paradigm Selection: Choose from seven proven layouts (multi-panel, Miller columns, drill-down stack, widget dashboard, IDE three-panel, overlay, header+list) matched to your application type. - Interaction & Keyboard Design: Four-layer keybinding system, focus management, search/filtering patterns, and three-tier help systems for progressive discoverability. - Color & Visual System: Semantic color slots, 16/256/truecolor tier handling, background layering, and accessibility requirements including NO_COLOR support. - Use Case: When building a git client TUI in Rust with Ratatui, use this Skill to select the persistent multi-panel paradigm, define semantic color slots that degrade to 16 ANSI colors, design vim-style keybindings with a contextual footer, and validate against the anti-pattern checklist before shipping. ## Quick Start Use the tui-design skill to design the layout, keybindings, and color scheme for a terminal dashboard showing CPU, memory, and process information.

Frequently Asked Questions about tui-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a terminal user interface layout?

Select a layout paradigm based on your application type: multi-panel for git/DevOps tools, Miller columns for file managers, widget dashboards for monitors, or drill-down stacks for hierarchical data. Keep panels in fixed positions so users build spatial memory.

What keybindings should a TUI application use?

Follow the lingua franca conventions: hjkl for movement, / for search, ? for help, : for command mode, q to quit, Enter to select, Tab to switch focus. Never bind Ctrl+C, Ctrl+Z, or Ctrl+\ since those belong to the terminal.

Does TUI color design work across different terminals?

Design for three tiers: 16 ANSI colors as the foundation, 256 colors as extension, and truecolor as enhancement. Detect support via COLORTERM and TERM, respect NO_COLOR, and ensure the interface remains usable in 16-color mode.

How do I prevent flickering in terminal UI rendering?

Use three layers together: double buffering that diffs frames and emits only changed cells, synchronized output via CSI 2026 escape sequences for atomic rendering, and batched writes combining all escape sequences into a single write call.

What are common TUI design mistakes to avoid?

The most frequent issues are colors breaking across terminals, flickering redraws, undiscoverable keybindings, and blocking the UI during operations. Test on multiple emulators, use double buffering, show contextual footers, and run all I/O asynchronously.

Is this TUI design guidance specific to Ratatui or Rust?

No, the patterns are framework-agnostic and apply to Ratatui, Ink, Textual, Bubbletea, and other TUI toolkits. It covers design principles like layout, color, and interaction rather than framework-specific APIs.