bubble-tea-scaffolder
npx machina-cli add skill a5c-ai/babysitter/bubble-tea-scaffolder --openclawFiles (1)
SKILL.md
3.8 KB
Bubble Tea Scaffolder
Generate Bubble Tea TUI applications with Go and Elm architecture.
Capabilities
- Generate Bubble Tea project structure
- Create models with Init, Update, View
- Set up commands and messages
- Implement component composition
- Create styling with Lip Gloss
- Set up testing patterns
Usage
Invoke this skill when you need to:
- Build terminal UIs in Go
- Create interactive CLI with Elm architecture
- Implement complex TUI applications
- Set up Bubble Tea project structure
Inputs
| Parameter | Type | Required | Description |
|---|---|---|---|
| projectName | string | Yes | Project name |
| modulePath | string | Yes | Go module path |
| components | array | No | Component definitions |
Generated Patterns
Main Application
package main
import (
"fmt"
"os"
tea "github.com/charmbracelet/bubbletea"
)
func main() {
p := tea.NewProgram(initialModel(), tea.WithAltScreen())
if _, err := p.Run(); err != nil {
fmt.Printf("Error: %v", err)
os.Exit(1)
}
}
Model Definition
package main
import (
"github.com/charmbracelet/bubbles/list"
"github.com/charmbracelet/bubbles/textinput"
tea "github.com/charmbracelet/bubbletea"
"github.com/charmbracelet/lipgloss"
)
type model struct {
list list.Model
textInput textinput.Model
err error
quitting bool
}
func initialModel() model {
ti := textinput.New()
ti.Placeholder = "Enter search term..."
ti.Focus()
items := []list.Item{
item{title: "Option 1", desc: "First option"},
item{title: "Option 2", desc: "Second option"},
}
l := list.New(items, list.NewDefaultDelegate(), 0, 0)
l.Title = "Select an option"
return model{
textInput: ti,
list: l,
}
}
func (m model) Init() tea.Cmd {
return textinput.Blink
}
func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
switch msg := msg.(type) {
case tea.KeyMsg:
switch msg.String() {
case "ctrl+c", "q":
m.quitting = true
return m, tea.Quit
case "enter":
// Handle selection
return m, nil
}
case tea.WindowSizeMsg:
m.list.SetSize(msg.Width, msg.Height-4)
}
var cmd tea.Cmd
m.list, cmd = m.list.Update(msg)
return m, cmd
}
func (m model) View() string {
if m.quitting {
return "Goodbye!\n"
}
return lipgloss.JoinVertical(
lipgloss.Left,
m.textInput.View(),
m.list.View(),
)
}
List Item
package main
type item struct {
title string
desc string
}
func (i item) Title() string { return i.title }
func (i item) Description() string { return i.desc }
func (i item) FilterValue() string { return i.title }
Styles
package main
import "github.com/charmbracelet/lipgloss"
var (
titleStyle = lipgloss.NewStyle().
Bold(true).
Foreground(lipgloss.Color("205")).
MarginBottom(1)
selectedStyle = lipgloss.NewStyle().
Foreground(lipgloss.Color("170")).
Bold(true)
normalStyle = lipgloss.NewStyle().
Foreground(lipgloss.Color("252"))
helpStyle = lipgloss.NewStyle().
Foreground(lipgloss.Color("241"))
)
Dependencies
require (
github.com/charmbracelet/bubbletea v0.25.0
github.com/charmbracelet/bubbles v0.17.0
github.com/charmbracelet/lipgloss v0.9.0
)
Target Processes
- tui-application-framework
- dashboard-monitoring-tui
- interactive-form-implementation
Source
git clone https://github.com/a5c-ai/babysitter/blob/main/plugins/babysitter/skills/babysit/process/specializations/cli-mcp-development/skills/bubble-tea-scaffolder/SKILL.mdView on GitHub Overview
Generates a Bubble Tea-based Go application skeleton using the Elm architecture. It creates a project structure with models (Init, Update, View), commands and messages, component composition, Lip Gloss styling, and testing patterns to accelerate TUI development.
How This Skill Works
The scaffold produces a Go module with a main app wired to an Elm-style model, Init, Update, and View routines. It includes patterns for a Main Application, Model Definition, List Item, and Styles, and supports component composition and styling via Lip Gloss, along with testing scaffolds.
When to Use It
- When building terminal user interfaces in Go with Bubble Tea
- When creating interactive CLIs that follow the Elm architecture
- When you need a reusable project structure for TUI apps
- When you want list, input, and styled components via Lip Gloss
- When preparing testing patterns for TUI components
Quick Start
- Step 1: Provide projectName, modulePath, and optional components to scaffold
- Step 2: Run the Bubble Tea scaffolder to generate the project skeleton
- Step 3: Implement Init/Update/View, add components, and style with Lip Gloss
Best Practices
- Define a clear model, Init, Update, and View cycle and keep side effects isolated in commands
- Modularize components (models, items, and styles) for reuse
- Leverage Lip Gloss styling for consistent theming and layout
- Handle user input via well-defined Msg types and predictable updates
- Incorporate testing patterns early (Init/Update/View tests) to guard behavior
Example Use Cases
- Terminal dashboards showing live metrics
- Interactive forms with search and selection
- Menu-driven CLIs with navigation and actions
- Search-driven UIs with real-time filtering
- Status monitoring and control panels
Frequently Asked Questions
Add this skill to your agents