skills.rest
typemd
typemdOFFICIAL
Explore all skills by this author →
GitHub

lipgloss-layout

Calculate usable layout widths for lipgloss panels with borders.

9|2|Updated Mar 4, 2026
Search Tags:#layout#terminal#tui#lipgloss#panel#border#width
One-click install
npx skills add https://github.com/typemd/typemd --skill lipgloss-layout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lipgloss-layout
Source: https://github.com/typemd/typemd/tree/main/.claude/skills/lipgloss-layout
Command: npx skills add https://github.com/typemd/typemd --skill lipgloss-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Lipgloss v2 layout introduces border overhead that can confuse width/height calculations. This Skill clarifies how to compute usable content width from the total terminal width and demonstrates full-width and split-panel sizing to prevent gaps and overflow.

Core Features & Use Cases

  • Provides formulas for totalContent (usable width including borders) and contentWidth (usable internal width) for single-panel and two-panel layouts.
  • Demonstrates how to adjust widths for borders (e.g., 2px border) and validates with practical examples.
  • Use Case: design a responsive TUI with panels that fill the screen without gaps, even when borders are present.

Quick Start

Provide the usable full width and per-panel widths for a lipgloss layout given the terminal width and a 2-pixel border.

Frequently Asked Questions about lipgloss-layout

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

FAQPage Schema
How do I calculate lipgloss panel width to prevent gaps and overflow in a TUI?▼

You calculate lipgloss panel width by subtracting the border size from the total terminal width. This adjustment ensures your TUI panels fill the screen without gaps or overflow.

Why does my lipgloss split-panel layout leave gaps at the screen edge?▼

Lipgloss split-panel layouts leave gaps when border overhead is not subtracted from terminal width. You must account for border size when calculating per-panel widths to prevent gaps.

What is the difference between totalContent and contentWidth in lipgloss layouts?▼

In lipgloss layouts, totalContent is the usable width including borders, while contentWidth is the usable internal width excluding borders. These formulas ensure precise panel sizing without gaps.

How do I adjust terminal width for a 2-pixel border in lipgloss?▼

To adjust terminal width for a 2-pixel border in lipgloss, subtract the border size from the total width. This determines the exact content area for single and two-panel layouts.

Does lipgloss width include borders when rendering terminal panels?▼

Yes, lipgloss width includes borders when rendering terminal panels. You must apply lipgloss layout rules to determine border-adjusted dimensions and calculate the actual content area.

Related Skills

Explore More Software Engineering Skills→
JBonfimJBonfim

bubbletea

Prevent rendering and interaction defects in Bubbletea terminal user interfaces in Go.

Community
Intermediate
dotBeepsdotBeeps

dragon-parchment

Create and manage floating overlay panels for terminal user interfaces.

Community
Intermediate
mmmarxdrmmmarxdr
4

bubbletea-tui

Embed Bubble Tea terminal UIs in Daimon with single-root models and Lipgloss styling.

Community
Advanced
GGPromptsGGPrompts
6

bubbletea

Build Go terminal user interfaces with Bubble Tea and Lipgloss styling.

Community
Advanced