skills.rest
lrstanley
lrstanleyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tui-design

Design terminal user interfaces with layout, input, state, and rendering guidance.

1|Updated Mar 27, 2026
Search Tags:#accessibility#keyboard navigation#layout design#tui#ratatui#terminal ui#terminal dashboard
One-click install
npx skills add https://github.com/lrstanley/skills --skill tui-design-lrstanley
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tui-design
Source: https://github.com/lrstanley/skills/tree/main/tui-design
Command: npx skills add https://github.com/lrstanley/skills --skill tui-design-lrstanley

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building terminal user interfaces involves many subtle failure modes: garbled Unicode widths, lost terminal state on exit, stale async results overwriting newer data, and shortcuts that fire while typing. This Skill provides structured design guidance for TUI layout, input handling, state management, terminal capability detection, and accessibility so these issues are addressed up front. ## Core Features & Use Cases - Layout and Pattern Selection: Match the user's workflow to layouts like multi-panel browsers, Miller columns, dashboards, or inline pickers, with responsive behavior rules for narrow and wide terminals. - Input, Focus, and State Guidance: Covers keyboard navigation, modal focus restoration, bracketed paste, async result correlation, and selection by stable identity rather than row index. - Terminal Capability and Rendering Policy: Handles NO_COLOR, true color detection, grapheme-aware truncation, escape-sequence sanitization, and terminal lifecycle restoration on exit or panic. - Use Case: When building a Ratatui dashboard in Rust or a Bubble Tea picker in Go, activate this Skill to get a checklist of layout invariants, input routing rules, and verification steps before writing widget code. ## Quick Start Ask the AI to design a terminal dashboard layout with keyboard navigation and color handling for your TUI project using this skill.

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?▼

Start from the user's repeated action: use persistent multi-panel layouts for browsing related lists, Miller columns for hierarchies, widget dashboards for monitoring, and inline pickers for single-value selection. Keep panel roles stable and focus visible, and collapse secondary panels on narrow terminals.

How do I handle keyboard input in a TUI application?▼

Route all input through a single owner and respect focus: printable keys must edit text fields rather than trigger global shortcuts like q or /. Support arrows, Enter, and Escape as baseline navigation, and restore prior focus when modals close.

Does NO_COLOR work with true color terminal detection?▼

Yes, but ordering matters: check a non-empty NO_COLOR environment variable before running color capability detection. Explicit application settings take precedence, and disabling color need not disable bold, underline, or layout structure.

Why does my TUI leave the terminal broken after exit?▼

The app failed to restore terminal state such as raw mode, alternate screen, cursor visibility, or mouse capture. Use a scoped lifecycle owner that restores everything on normal exit, errors, panics, and handled signals; note that SIGKILL cannot run cleanup.

How do I prevent stale async results from overwriting TUI state?▼

Tag each request with an identity tied to the active query or selected resource, and discard results that no longer match current state. Track selection by stable identity rather than row index so refreshes do not move the user's selection.

When should I not use a full-screen TUI?▼

Avoid full-screen interfaces when a simple inline picker or plain linear output suffices, or when screen-reader navigation requires a linear presentation. Added animation, icons, and modes should only appear when the task justifies them.

Related Skills

Explore More Software Engineering Skills→
Spectaculous-CodeSpectaculous-Code

core-ux-detective

Identify and define core user tasks and journeys into a JSON model.

Official
Advanced
mmgeorgemmgeorge
1

terminal-tui-debugging

Debug and verify interactive terminal UIs using PTY tests and Terminal MCP sessions.

Community
Intermediate
ricardodantasricardodantas
35

ratatui-themes

Provide reusable color themes for Rust ratatui terminal UIs.

Community
Intermediate
archibatearchibate
103

interactive-test

Guide terminal-based testing of GUI and TUI applications with Playwright or tmux.

Community
Intermediate