skills.rest
JBonfim
JBonfimCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tui-design

Designs keyboard-first terminal user interfaces with layouts, colors, and responsive behavior.

Updated May 15, 2026
Search Tags:#keyboard navigation#tui#focus management#layout patterns#terminal ui#dashboard widgets#color accessibility
One-click install
npx skills add https://github.com/JBonfim/skill-developer --skill tui-design-jbonfim
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tui-design
Source: https://github.com/JBonfim/skill-developer/tree/main/.agents/skills/tui-design
Command: npx skills add https://github.com/JBonfim/skill-developer --skill tui-design-jbonfim

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you design terminal user interfaces that are usable, keyboard-friendly, and visually consistent across TUI frameworks and terminal capabilities.

Core Features & Use Cases

  • TUI layout patterns: Choose and apply proven paradigms such as persistent multi-panels, Miller columns, drill-down stacks, widget dashboards, IDE-style three-panel layouts, and overlay popups.
  • Interaction model & navigation: Define keyboard layers, focus management, search/filter behavior, context-sensitive help, and safe dialogs.
  • Color & accessibility systems: Implement graceful degradation across 16 ANSI, 256-color, and truecolor, using semantic color slots and ensuring the UI remains usable without color.
  • Responsive rendering rules: Handle terminal resizing safely with minimum-size gates and strategies like proportional splits and breakpoint modes.
  • Visual character & widget guidance: Use correct box-drawing styles, high-density data characters (braille blocks/sparklines), and rendering techniques to reduce flicker.

Quick Start

Use the tui-design skill to design a keyboard-first terminal dashboard with a persistent multi-panel layout, accessible focus handling, and a semantic color palette that degrades cleanly to 16-color terminals.

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 UI with keyboard navigation and focus management?▼

To design a terminal user interface with keyboard navigation, define keyboard layers and focus management to ensure keyboard-first interaction. Apply proven layout paradigms like multi-panels and drill-down stacks to maintain consistent navigation across widgets.

What's the best way to handle terminal UI color accessibility and NO_COLOR support?▼

Terminal UI color accessibility requires semantic color tiering across 16 ANSI, 256-color, and truecolor capabilities. Implement semantic color slots and ensure the interface remains fully usable without color by supporting the NO_COLOR standard.

Does tui-design work with Ratatui, Textual, and Bubbletea frameworks?▼

Yes, tui-design works with Ratatui, Textual, Bubbletea, and Ink frameworks. It provides guidance for creating layouts, navigation, dashboards, and widgets using established interaction and rendering patterns across these common toolkits.

How do I prevent flickering when rendering terminal dashboards and widgets?▼

Prevent flickering in terminal dashboards by applying flicker-free rendering guidance and using correct visual character techniques. This includes proper box-drawing styles and high-density data characters like braille blocks for smooth widget updates.

How do I handle responsive resizing for terminal user interfaces?▼

Handle responsive terminal resizing by implementing minimum-size gates and proportional split strategies. Use breakpoint modes to safely adjust terminal user interface layouts when the terminal window dimensions change dynamically.

Related Skills

Explore More Design & Creative Skills→
t0labt0lab
2

tui-design

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

Official
Advanced
wcyganwcygan
1

ratatui-tui-builder

Build terminal user interfaces with ratatui and crossterm.

Community
Intermediate
constructive-ioconstructive-io

inquirerer-cli

Develop interactive command-line interfaces with inquirerer, appstash, and yanse.

Official
Intermediate
chipermanchiperman

fixing-accessibility

Fix accessibility issues in web UI components with ARIA and keyboard navigation.

Community
Basic