skills.rest
jhillyerd
jhillyerdCOMMUNITY
Explore all skills by this author →
GitHub

tui-dialog

Implement modal dialogs and overlays in Bubble Tea v2 applications.

57|Updated Jun 30, 2024
Search Tags:#go#modal#tui#lipgloss#overlay#bubble-tea#input-routing
One-click install
npx skills add https://github.com/jhillyerd/labcoat --skill tui-dialog-jhillyerd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tui-dialog
Source: https://github.com/jhillyerd/labcoat/tree/main/.opencode/skills/tui-dialog
Command: npx skills add https://github.com/jhillyerd/labcoat --skill tui-dialog-jhillyerd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bubble Tea-based terminal UIs often struggle with consistent modal dialogs and overlay rendering, input routing, and layered interfaces. This skill provides a structured approach to implementing modal dialogs, overlays, and command palettes with predictable patterns for UX and maintainability.

Core Features & Use Cases

  • Modal patterns (View, Update, Overlay) to compose layered interfaces
  • Command palettes, confirm dialogs, and input dialogs for common interactions
  • Correct input routing priority (modal first) and z-index overlay composition
  • Reusable overlay utilities using lipgloss/compositor for true background visibility

Quick Start

Start by wiring the tui-dialog skill into your Bubble Tea project and begin implementing modal components.

Frequently Asked Questions about tui-dialog

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

FAQPage Schema
How do I implement modal dialogs in a Bubble Tea Go TUI application?▼

Implement Bubble Tea modal dialogs by using structured patterns for View, Update, and Overlay composition to build layered interfaces with predictable input routing and z-index management.

What is the correct input routing order for overlays in Bubble Tea v2?▼

Correct input routing for Bubble Tea v2 overlays prioritizes modal components first, ensuring keystrokes reach the active dialog before the underlying application layer processes them.

How do I render overlays with transparent backgrounds using lipgloss?▼

Render transparent overlays by using reusable utilities built on the lipgloss compositor, which enables true background visibility when stacking modal components in your terminal UI.

Can I build command palettes and confirmation dialogs with Bubble Tea?▼

Build command palettes and confirmation dialogs in Bubble Tea using defined modal types that handle common interaction patterns while maintaining consistent z-index layering across the interface.

Why does my Bubble Tea overlay not receive keyboard input?▼

Bubble Tea overlays fail to receive keyboard input when input routing lacks proper priority ordering, requiring structured modal-first routing patterns to intercept and handle keystrokes correctly.

Does tui-dialog support test patterns for Go TUI modal components?▼

The tui-dialog skill specifies test patterns for Go TUI modal components, enabling reliable validation of overlay composition, input routing, and z-index management across Bubble Tea projects.

Related Skills

Explore More Software Engineering Skills→
hoangtran1411hoangtran1411
2

Go TUI with Bubble Tea

Create interactive terminal user interfaces in Go with Bubble Tea and Lipgloss.

Community
Intermediate
bytetalentbytetalent

Modal Dialog Action

Define reusable modal dialog components for overlay-based UI interactions.

Official
Intermediate
baphledbaphled
1

bubble-tea-expert

Guide Go TUI development with Bubble Tea's Elm Architecture and Lip Gloss styling.

Community
Intermediate
alxxpersonalalxxpersonal
12

charm-ultraviolet

Provide low-level Go terminal primitives for cell-level rendering and buffer management.

Community
Advanced