skills.rest
napisani
napisaniCOMMUNITY
Explore all skills by this author →
GitHub

tui-design

Guide terminal user interface design with patterns, layouts, and color systems.

10|1|Updated Jul 3, 2023
Search Tags:#data visualization#design patterns#tui design#interaction model#terminal user interface#layout paradigms#color design system
One-click install
npx skills add https://github.com/napisani/proctmux --skill tui-design-napisani
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tui-design
Source: https://github.com/napisani/proctmux/tree/main/.agents/skills/tui-design
Command: npx skills add https://github.com/napisani/proctmux --skill tui-design-napisani

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps users design and build high-quality terminal user interfaces (TUIs) by providing universal design patterns, layout paradigms, interaction models, and color design systems.

Core Features & Use Cases

  • TUI Design Patterns: Offers a collection of design patterns for TUIs, including Miller Columns, Persistent Multi-Panel, Drill-Down Stack, Widget Dashboard, and Overlay/Popup.
  • Layout Paradigms: Provides guidance on selecting the right layout paradigm for different types of applications, such as file managers, system monitors, and IDEs.
  • Interaction Model: Offers best practices for keyboard design layers, focus management, search and filtering, help systems, and dialogs and confirmations.
  • Color Design System: Guides on terminal color tiers, semantic color slots, visual hierarchy techniques, and accessibility requirements.
  • Data Visualization: Provides insights into character-resolution building blocks, common widgets, and spinner selection for data visualization in TUIs.
  • Animation & Motion: Discusses flicker-free rendering, animation best practices, and real-time updates for smooth TUI rendering.
  • Design Principles: Outlines seven design principles for creating effective TUIs, including keyboard-first design, spatial consistency, progressive disclosure, and async everything.
  • Anti-Patterns: Identifies common pitfalls in TUI design and provides solutions.
  • Compatibility Checklist: Ensures that the TUI is compatible with various terminal emulators and environments.

Quick Start

Start the tui-design skill to explore design patterns and best practices for building terminal user interfaces.

Frequently Asked Questions about tui-design

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

FAQPage Schema
What are the best design patterns for building a terminal user interface?▼

Terminal user interface design patterns include Miller Columns, Persistent Multi-Panel, Drill-Down Stack, Widget Dashboard, and Overlay/Popup structures. These paradigms help organize file managers, system monitors, and IDEs by establishing clear spatial layouts and navigation models.

How do I manage keyboard focus and interaction models in a TUI application?▼

TUI interaction models require layered keyboard design, explicit focus management, and integrated search and filtering. You should implement progressive disclosure for help systems and use dedicated dialogs and confirmations to prevent user input errors.

How do I design an accessible color system for terminal applications?▼

Accessible terminal color design systems utilize defined terminal color tiers and semantic color slots to establish visual hierarchy. Following accessibility requirements ensures text remains readable and interactive elements are distinguishable across different terminal emulators.

How can I achieve flicker-free rendering and smooth animation in a TUI?▼

Flicker-free rendering in terminal user interfaces is achieved by applying specific animation best practices and optimizing real-time updates. Properly managing character-resolution building blocks and spinner selection ensures smooth visual motion without screen tearing.

What are common anti-patterns and pitfalls when designing terminal user interfaces?▼

Common TUI anti-patterns include neglecting keyboard-first design, breaking spatial consistency, and ignoring async operations. Identifying these pitfalls and applying the seven core design principles helps resolve layout and interaction inconsistencies.

How do I ensure my TUI is compatible with various terminal emulators?▼

Terminal user interface compatibility is verified using a dedicated compatibility checklist. This process ensures your layout paradigms, color design systems, and interaction models function correctly across different terminal emulator environments.

Related Skills

Explore More Software Engineering Skills→
runpodrunpod
24

Ghostty Terminal Setup

Install and configure Ghostty terminal emulator with a Nerd Font on macOS.

Official
Basic
josemartinrodriguezmortalonijosemartinrodriguezmortaloni

opentui

Develop terminal user interfaces with declarative React and SolidJS patterns.

Community
Advanced
it-dainbit-dainb
1

evor-dashboard

Visualize Evor mission evolution via SSE streams from tree.json and telemetry.jsonl.

Community
Intermediate
AbrahamX3AbrahamX3
1

frontend-design

Design production-grade frontend interfaces with accessible, responsive layouts.

Community
Advanced