Skip to content
Development
Skill

/bubbletea-code-review

Reviews BubbleTea TUI code for proper Elm architecture, model/update/view patterns, and Lipgloss styling. Use when reviewing terminal UI code using charmbracelet/bubbletea.

From plugin
beagle
85139 skills2 commands

Claude Code

$ npx -y skills add existential-birds/beagle --skill bubbletea-code-review --agent claude-code

SKILL.md

bubbletea-code-review.SKILL.md
name: bubbletea-code-review
description: Reviews BubbleTea TUI code for proper Elm architecture, model/update/view patterns, and Lipgloss styling. Use when reviewing terminal UI code using charmbracelet/bubbletea.

BubbleTea Code Review

Hard gates (sequence)

Advance only when each **pass condition** is objectively true (reduces false positives on `tea.Cmd` and unsubstantiated blocking claims):

| Gate | Pass condition | |------|----------------| | **G1 — Anti–false-positive** | You skimmed **NOT Issues** below **or** read [references/elm-architecture.md](references/elm-architecture.md) **before** recording a finding about `tea.Cmd` returns, value receivers on `Update`, or nested child `Update`. | | **G2 — Evidence for blocking / suspicious I/O** | Each Critical/Major finding names **file path + line** (or a short quoted snippet) showing the blocking call, `huh.Form.Run` in the wrong place, or other asserted anti-pattern—not a hypothetical. | | **G3 — Verification** | Before publishing review output, you applied the **[review-verification-protocol](../review-verification-protocol/SKILL.md)** to each proposed finding. |

Quick Reference

| Issue Type | Reference | |------------|-----------| | Elm architecture, tea.Cmd as data | [references/elm-architecture.md](references/elm-architecture.md) | | Model state, message handling | [references/model-update.md](references/model-update.md) | | View rendering, Lipgloss styling | [references/view-styling.md](references/view-styling.md) | | Component composition, Huh forms | [references/composition.md](references/composition.md) | | Bubbles components (list, table, etc.) | [references/bubbles-components.md](references/bubbles-components.md) |

CRITICAL: Avoid False Positives

**Read [elm-architecture.md](references/elm-architecture.md) first!** The most common review mistake is flagging correct patterns as bugs.

NOT Issues (Do NOT Flag These)

| Pattern | Why It's Correct | |---------|------------------| | `return m, m.loadData()` | `tea.Cmd` is returned immediately; runtime executes async | | Value receiver on `Update()` | Standard BubbleTea pattern; model returned by value | | Nested `m.child, cmd = m.child.Update(msg)` | Normal component composition | | Helper functions returning `tea.Cmd` | Creates command descriptor, no I/O in Update | | `tea.Batch(cmd1, cmd2)` | Commands execute concurrently by runtime |

ACTUAL Issues (DO Flag These)

| Pattern | Why It's Wrong | |---------|----------------| | `os.ReadFile()` in Update | Blocks UI thread | | `http.Get()` in Update | Network I/O blocks | | `time.Sleep()` in Update | Freezes UI | | `<-channel` in Update (blocking) | May block indefinitely | | `huh.Form.Run()` in Update | Blocking call |

Review Checklist

Architecture

  • [ ] **No blocking I/O in Update()** (file, network, sleep)
  • [ ] Helper functions returning `tea.Cmd` are NOT flagged as blocking
  • [ ] Commands used for all async operations

Model & Update

  • [ ] Model is immutable (Update returns new model, not mutates)
  • [ ] Init returns proper initial command (or nil)
  • [ ] Update handles all expected message types
  • [ ] WindowSizeMsg handled for responsive layout
  • [ ] tea.Batch used for multiple commands
  • [ ] tea.Quit used correctly for exit

View & Styling

  • [ ] View is a pure function (no side effects)
  • [ ] Lipgloss styles defined once, not in View
  • [ ] Key bindings use key.Matches with help.KeyMap

Components

  • [ ] Sub-component updates propagated correctly
  • [ ] Bubbles components initialized with dimensions
  • [ ] Huh forms embedded via Update loop (not Run())

Critical Patterns

Model Must Be Immutable

// BAD - mutates model
func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    m.items = append(m.items, newItem)  // mutation!
    return m, nil
}

// GOOD - returns new model
func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    newItems := make([]Item, len(m.items)+1)
    copy(newItems, m.items)
    newItems[len(m.items)] = newItem
    m.items = newItems
    return m, nil
}

Commands for Async/IO

// BAD - blocking in Update
func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    data, _ := os.ReadFile("config.json")  // blocks UI!
    m.config = parse(data)
    return m, nil
}

// GOOD - use commands
func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    return m, loadConfigCmd()
}

func loadConfigCmd() tea.Cmd {
    return func() tea.Msg {
        data, err := os.ReadFile("config.json")
        if err != nil {
            return errMsg{err}
        }
        return configLoadedMsg{parse(data)}
    }
}

Styles Defined Once

// BAD - creates new style each render
func (m Model) View() string {
    style := lipgloss.NewStyle().Bold(true).Foreground(lipgloss.Color("205"))
    return style.Render("Hello")
}

// GOOD - define styles at package level or in model
var titleStyle = lipgloss.NewStyle().Bold(true).Foreground(lipgloss.Color("205"))

func (m Model) View() string {
    return titleStyle.Render("Hello")
}

When to Load References

  • **First time reviewing BubbleTea** → [elm-architecture.md](references/elm-architecture.md) (prevents false positives)
  • Reviewing Update function logic → [model-update.md](references/model-update.md)
  • Reviewing View function, styling → [view-styling.md](references/view-styling.md)
  • Reviewing component hierarchy → [composition.md](references/composition.md)
  • Using Bubbles components → [bubbles-components.md](references/bubbles-components.md)

Review Questions

1. Is Update() free of blocking I/O? (NOT: "is the cmd helper blocking?") 2. Is the model immutable in Update? 3. Are Lipgloss styles defined once, not in View? 4. Is WindowSizeMsg handled for resizing? 5. Are key bindings documented with help.KeyMap? 6. Are Bubbles components sized correctly?

Read more
@existential-birds
Ships withbeagle

Image: NASA, Public Domain. Source Beagle is an Agent Skills marketplace: framework-aware code review, documentation, testing, architectural analysis, and git workflows for any compatible coding agent.

Stars on GitHub

Momentum

stars in total
85
Star history of existential-birds/beagle on GitHub, a chart by star-history.com

Other skills on beagle.

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills12d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc2w293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react3d252k
@facebook@facebookInstall Skill

Questions about bubbletea-code-review.

Which coding agents can use bubbletea-code-review?
bubbletea-code-review installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.