Does it support async operations in the terminal?

Yes, it includes patterns for command-based async tasks with caching to ensure the UI remains responsive during expensive computations.

How does this skill help with complex TUI state?

It provides patterns for explicit state management, separating UI state from data, and using a compositor pattern to delegate updates to sub-components.

Can I use this for vim-style CLI interfaces?

Absolutely. It covers visual mode state management, cursor tracking, and specialized keybinding logic for modal terminal interactions.

What framework does this TUI design skill focus on?

This skill specifically focuses on best practices for Bubbletea v2 and the wider Charm ecosystem for Go-based terminal development.

TUI Component Design Patterns

Name: TUI Component Design Patterns
Author: colonyops

bycolonyops

•

Design Tools

Provides standardized architectural patterns and best practices for building sophisticated terminal user interfaces with Bubbletea v2.

This skill equips Claude with specialized knowledge for architecting robust Terminal User Interfaces (TUIs) using the Go-based Bubbletea v2 framework and the Charm ecosystem. It focuses on the compositor pattern for modular UI construction, explicit state management to ensure testability, and async command handling for high-performance applications. By implementing these patterns, developers can create complex, interactive CLI tools that feature multi-pane layouts, vim-style navigation, and seamless external tool integrations while avoiding common pitfalls in terminal state synchronization.

Key Features

01Async Command-Based State Management

02Visual Mode and Selection Logic Implementation

03Component Hierarchy & Compositor Patterns

04External Tool & Editor Integration Patterns

05High-Performance Viewport & Scroll Management

0615 GitHub stars

Use Cases

01Building complex multi-pane terminal dashboards and session managers

02Implementing vim-style navigation and visual selection in CLI tools

03Managing expensive async operations like syntax highlighting in a TUI

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add colonyops/hive tui-component-design

For use in Claude.ai and ChatGPT

Download Skill