TUI Design System

Standardize themes, layouts, typography, and color palettes for Textual TUI applications.

178|13|Updated Mar 19, 2026
One-click install
npx skills add https://github.com/pymc-labs/decision-lab --skill tui-design-system-pymc-labs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: TUI Design System
Source: https://github.com/pymc-labs/decision-lab/tree/main/.claude/skills/tui-design
Command: npx skills add https://github.com/pymc-labs/decision-lab --skill tui-design-system-pymc-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill standardizes the visual language and UX patterns for Textual TUI applications in dlab, ensuring consistency across all Textual TUI apps.

Core Features & Use Cases

  • Theme & Layout: Defines theme and layout standards for TUI screens.
  • Accent Blocks: Standardizes interactive elements with colored borders and backgrounds.
  • Navigation: Consistent navigation using arrow keys and tab behavior.
  • Typography: Defines typography standards for labels, descriptions, errors, and section dividers.
  • Buttons: Standardizes button appearance and hover effects.
  • Collision Detection: Handles potential conflicts with existing state.
  • Creation Flow: Standardizes long-running operations with progress updates and error recovery options.
  • Color Palette: Defines a consistent color palette for TUI applications.
  • Use Case: Use this Skill to create a consistent and user-friendly Textual TUI application in dlab.

Quick Start

Use the TUI Design System to style your Textual TUI application in dlab.

Frequently Asked Questions about TUI Design System

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

FAQPage Schema
How do I standardize visual design and UX patterns for Textual TUI applications?

To standardize Textual TUI applications, apply consistent themes, layouts, typography, and color palettes. This ensures a unified user experience across all Textual TUI apps by defining specific accent blocks, navigation behaviors, and button appearances.

What are the standard navigation and typography patterns for Textual TUI apps?

Standard Textual TUI navigation uses arrow keys and tab behavior for consistent movement. Typography standards define specific styles for labels, descriptions, error messages, and section dividers to maintain visual hierarchy.

Can I use this TUI design system to handle long-running operations and state collisions?

Yes, the TUI design system handles long-running operations by standardizing progress updates and error recovery options. It also includes collision detection to manage and resolve potential conflicts with existing application state.

Does the Textual TUI design system define a specific color palette for UI elements?

Yes, the Textual TUI design system defines a consistent color palette for TUI applications. It standardizes interactive elements like accent blocks using specific colored borders and backgrounds for visual clarity.

When should I use a standardized TUI design system for my application?

Use a standardized TUI design system when you need to create a consistent and user-friendly Textual TUI application. It ensures unified visual language and UX patterns across multiple apps within the same ecosystem.

What is the best way to style interactive buttons in a Textual TUI?

The best way to style interactive buttons in a Textual TUI is to apply standardized button appearances and hover effects. This ensures consistent visual feedback and interaction behavior across all application screens.