tui-design-system

Provides framework-agnostic design patterns for building terminal user interfaces.

18|8|Updated Jun 17, 2026
One-click install
npx skills add https://github.com/PyModel/pythinker-code --skill tui-design-system-pymodel
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tui-design-system
Source: https://github.com/PyModel/pythinker-code/tree/main/.agents/skills/tui-design-system
Command: npx skills add https://github.com/PyModel/pythinker-code --skill tui-design-system-pymodel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing a terminal user interface involves many decisions — layout paradigm, keybindings, color system, data visualization, and motion — and getting any of them wrong produces an app that is confusing, inaccessible, or flickers on resize. This Skill provides a complete, framework-agnostic design vocabulary so those decisions follow proven patterns instead of guesswork. ## Core Features & Use Cases - Layout Paradigm Selector: Maps app types (file manager, git tool, monitor, SQL client) to proven layouts like Miller Columns, Persistent Multi-Panel, Drill-Down Stack, and Widget Dashboard. - Interaction & Color Systems: Defines keyboard design layers (L0–L3), focus management, search patterns, semantic color slots, and graceful degradation from true color down to 16 ANSI colors. - Validation Checklist: Ships an anti-patterns checklist covering resize crashes, contrast ratios, color-only signaling, and destructive-action confirmation. - Use Case: When building a Kubernetes CLI browser with Ratatui or Textual, use this Skill to select the Drill-Down Stack layout, define vim-style keybindings, and configure a semantic color theme that remains usable in 16-color terminals. ## Quick Start Use the tui-design-system skill to design the layout, keybindings, and color system for a terminal-based log viewer I am building with Textual.

Frequently Asked Questions about tui-design-system

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

FAQPage Schema
How do I choose a layout for a terminal user interface?

Match your app type to a proven paradigm: Miller Columns for file managers, Persistent Multi-Panel for git tools, Widget Dashboard for monitors, and Drill-Down Stack for hierarchical data like Kubernetes resources. The skill provides a selector table mapping app types to layouts.

What keybindings should a TUI application use?

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

Does this TUI guidance work with Ratatui, Ink, and Textual?

Yes, the patterns are framework-agnostic and apply to Ratatui, Ink, Textual, Bubbletea, or any TUI toolkit. They cover universal concerns like layout, focus management, and color tiers rather than library-specific APIs.

How do I make a TUI work in 16-color terminals?

Design the visual hierarchy to function in 16 ANSI colors first, then let true color enhance it. Detect color support via COLORTERM and TERM, respect NO_COLOR, and always reference semantic color slots instead of hardcoded hex values.

Why does my TUI flicker or break on terminal resize?

Flicker comes from repainting the whole screen each frame; use double buffering with diff-based updates and a frame budget. Resize breakage is avoided with constraint-based layouts, a minimum size gate around 80x24, and graceful SIGWINCH handling.