lipgloss-layout

Name: lipgloss-layout
Availability: InStock
Author: TypeMD

Calculate usable layout widths for lipgloss panels with borders.

9|2|Updated Mar 4, 2026

Search Tags:#layout #terminal #tui #lipgloss #panel #border #width

Ready to run

npx skills add https://github.com/typemd/typemd --skill lipgloss-layout

💬 Prompt for ChatGPT / Claude Chat▼

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.