tui-dialog

Implement modal dialogs and input routing for Bubble Tea v2 apps.

11|2|Updated Jan 3, 2022
One-click install
npx skills add https://github.com/hay-kot/dotfiles --skill tui-dialog
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tui-dialog
Source: https://github.com/hay-kot/dotfiles/tree/main/.ai/skills/tui-dialog
Command: npx skills add https://github.com/hay-kot/dotfiles --skill tui-dialog

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides structured guidance for implementing dialog and overlay systems in Bubble Tea v2 applications, covering modal patterns, command palettes, and composited overlays to improve in-app UX.

Core Features & Use Cases

  • Modal dialogs: implement focusable, keyboard-navigable dialogs that render above the main view.
  • Overlay rendering: use lipgloss compositors to dim the background and center the modal reliably across sizes.
  • Input routing: ensure modal input is processed before the main view to avoid bleed-through; supports common patterns like command palettes and confirm dialogs.
  • Use Case: in a chat app, show a confirm-dialog before deleting a message or a command palette to jump to commands quickly.

Quick Start

Integrate the tui-dialog guidance into your Bubble Tea v2 project to implement a centered modal with overlay rendering.

Frequently Asked Questions about tui-dialog

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

FAQPage Schema
How do I show a modal dialog in a Bubble Tea v2 app?

To show a modal dialog in Bubble Tea v2, use structured patterns for View, Update, and Overlay methods that render focusable, keyboard-navigable components above the main view with proper Z-index handling.

How do I handle input routing for overlays in a Bubble Tea TUI?

Input routing for overlays in a Bubble Tea TUI requires processing modal input before the main view to avoid key bleed-through, ensuring commands are captured by the active dialog before reaching underlying components.

What is the best way to center a modal overlay in a Golang TUI across different terminal sizes?

The best way to center a modal overlay in a Golang TUI is using lipgloss compositors to dim the background and center the modal reliably, applying responsive sizing patterns that adapt to varying terminal window dimensions.

Does the tui-dialog pattern support command palettes and confirm dialogs?

The tui-dialog pattern supports command palettes and confirm dialogs by providing structured guidance for implementing modal flows, enabling quick command jumps and deletion confirmations in Bubble Tea v2 apps.

Can I use lipgloss compositors to dim the background behind a TUI modal?

You can use lipgloss compositors to dim the background behind a TUI modal, creating a visual overlay effect that reliably centers the dialog and separates it from the main application view.