tui-design

Design keyboard-first terminal user interfaces with layout and accessibility patterns.

2|Updated Apr 10, 2026
One-click install
npx skills add https://github.com/t0lab/harness-kit --skill tui-design-t0lab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tui-design
Source: https://github.com/t0lab/harness-kit/tree/main/.agents/skills/tui-design
Command: npx skills add https://github.com/t0lab/harness-kit --skill tui-design-t0lab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a comprehensive, framework-agnostic design system and checklist for building usable, keyboard-first terminal user interfaces that scale from simple overlays to full dashboards while remaining accessible, responsive, and performant.

Core Features & Use Cases

  • Layout paradigms: persistent multi-panel, Miller columns, drill-down stacks, widget dashboards, IDE three-panel, and overlays for clear spatial organization.
  • Interaction & accessibility: keyboard layering, focus management, contextual footers, help tiers, and accessibility rules (NO_COLOR, contrast, monochrome testing).
  • Visual & data patterns: semantic color slots with ANSI/256/truecolor fallbacks, braille/sparkline visualizations, block and box-drawing recipes, and animation/refresh guidelines for flicker-free rendering.
  • Operational checklists: resize & compatibility rules, anti-pattern validation, and production readiness tests for tmux/SSH/Windows/WSL use cases.
  • Use case example: design a monitoring dashboard that shows per-core CPU braille sparklines, process tables, and a detail pane with drill-down navigation while preserving keyboard-first workflows.

Quick Start

Ask the skill to design a responsive multi-panel terminal dashboard with keyboard-first navigation, accessible color slots, and braille sparklines for CPU and network metrics.

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 responsive terminal UI layout for a multi-panel dashboard?▼

Build responsive terminal UI layouts using persistent multi-panel, widget dashboard, or IDE three-panel paradigms with defined resize rules. This provides clear spatial organization and adaptability for high-density command-line dashboards across varying terminal window sizes.

What's the best way to implement keyboard-first navigation in a TUI application?▼

Implement keyboard-first navigation in TUI applications using keyboard layering, focus management, and contextual footers. This approach ensures spatial consistency and keyboard fluency for users navigating complex command-line interfaces without relying on a mouse.

How do braille sparklines work for terminal data visualization?▼

Braille sparklines render compact data visualizations directly in terminal UIs using Braille characters and block drawing recipes. They enable high-density, flicker-free rendering of metrics like CPU or network data within monitoring dashboards.

Does this TUI design system work with Ratatui, Textual, and Bubbletea frameworks?▼

Yes, this terminal UI design system applies framework-agnostic layout paradigms to Ratatui, Textual, Bubbletea, and Ink. It provides resize rules, semantic color slots, and accessibility checklists that integrate with these frameworks for production-ready command-line interfaces.

How do I handle color accessibility and NO_COLOR fallbacks in terminal interfaces?▼

Handle terminal UI color accessibility using semantic color slots with ANSI, 256, and truecolor fallbacks. Apply NO_COLOR support, contrast rules, and monochrome testing checklists to ensure command-line interfaces remain accessible across all terminal environments.

What are common anti-patterns and compatibility issues when building TUIs for tmux and SSH?▼

Common terminal UI anti-patterns include poor resize handling, flicker rendering, and inadequate keyboard focus management. Validate production readiness using compatibility checklists for tmux, SSH, Windows, and WSL to ensure stable command-line interface performance.