How does it handle terminal color limitations?

The skill defines a semantic color system that maps UI functions to color slots, ensuring your interface degrades gracefully from True Color down to 16-color ANSI.

Can this skill help with responsive terminal designs?

Yes, it provides strategies for handling terminal resizing, including proportional splits, priority collapse for smaller screens, and minimum size gating.

Which TUI frameworks does this skill support?

The TUI Design System is framework-agnostic, providing universal design patterns compatible with Ratatui, Ink, Textual, Bubbletea, and custom terminal toolkits.

What layout paradigms are included?

It includes Miller Columns, Persistent Multi-Panels, Widget Dashboards, Drill-Down Stacks, IDE Three-Panel layouts, and Overlay/Popup patterns.

Does it provide guidance on keyboard shortcuts?

It outlines a four-layered keyboard design philosophy, covering universal keys, Vim-style motions, mnemonic actions, and advanced power-user commands.

TUI Design System

Name: TUI Design System
Author: hyperb1iss

byhyperb1iss

•

Herramientas de Diseño

Provides comprehensive design patterns and architectural guidance for building sophisticated, keyboard-centric terminal user interfaces across any TUI framework.

The TUI Design System skill empowers developers to create professional-grade terminal interfaces by providing a framework-agnostic set of patterns for layout, navigation, and visual styling. Whether you are building a system monitor, a Git client, or a data browser, this skill guides you through selecting the right layout paradigm—such as Miller Columns or Widget Dashboards—and implementing robust keyboard interaction models, responsive terminal behaviors, and semantic color systems. It ensures your terminal applications achieve spatial consistency and high information density while remaining accessible to both beginners and power users.

Características Principales

01Architectural blueprints for 7 distinct TUI layout paradigms including Miller Columns and Multi-panel views.

02Semantic color system definitions that ensure visual hierarchy across ANSI, 256-color, and True Color terminals.

03Layered keyboard interaction design strategies ranging from universal shortcuts to advanced Vim-style motions.

04Responsive design strategies for graceful terminal resizing and minimum size constraint management.

051 GitHub stars

06Best practices for focus management, modal dialogs, and real-time search/filtering workflows.

Casos de Uso

01Creating hierarchical data browsers or file managers using Miller Columns and drill-down navigation stacks.

02Designing complex DevOps or Git clients with persistent multi-panel layouts and contextual footers.

03Building real-time system monitoring dashboards using widget-based layouts and high-density characters.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hyperb1iss/hyperskills tui-design

For use in Claude.ai and ChatGPT

Download Skill