lipgloss-layout

Official

Precisely compute lipgloss panel layouts.

Authortypemd
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: lipgloss-layout
Download link: https://github.com/typemd/typemd/archive/main.zip#lipgloss-layout

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.