Skills
.Work. You
Rest

TUI Design System

Community

Cohesive UI patterns for Textual TUI apps

Design & Creative#typography#navigation#design-system#tui#textual#ux-patterns#theme-and-layout
Authorbenmaier
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Visual language and UX patterns unify Textual TUI applications, reducing design drift and onboarding time across the project.

Core Features & Use Cases

  • Theme & Layout: standardizes theme, alignment, container dimensions, and chrome usage.
  • Accent Blocks: applies consistent left-border accents and surface backgrounds to interactive elements.
  • Checkboxes: provides consistent checkbox styling and keyboard navigation behavior.
  • Navigation: defines arrow key bindings and Tab behavior to ensure predictable focus management.
  • Typography: prescribes step indicators, labels, hints, errors, and dividers for readability.
  • Buttons: uniform button styling with hover states and consistent sizing.
  • Patterns: collision detection and creation flow guardrails for robust UX.
  • Color Palette: monokai-inspired palette for main UI elements and feedback colors.

Quick Start

Follow these patterns when designing or updating Textual TUI screens to ensure consistent visuals and behavior.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: TUI Design System
Download link: https://github.com/benmaier/decision-agent-placeholder/archive/main.zip#tui-design-system

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.