Can I create responsive layouts for different terminal sizes?

Absolutely. By using percentage-based widths, flex-grow, and flex-shrink properties, you can create TUIs that automatically scale to the user's terminal window size.

Can I overlay elements on top of each other?

Yes, the layout system supports absolute positioning within relative containers, allowing you to place components at specific coordinate offsets.

What units are used for dimensions and spacing in OpenTUI?

OpenTUI uses terminal units, where dimensions such as width, height, padding, and margins are measured in individual character columns and rows.

Does this skill support standard CSS Flexbox properties?

Yes, it implements core Flexbox properties like flexDirection, justifyContent, and alignItems via the Yoga engine, specifically adapted for terminal character cells.

OpenTUI Layout Manager

Name: OpenTUI Layout Manager
Author: nthplusio

bynthplusio

0•

Design Tools

Architects terminal user interfaces using a robust Yoga-based Flexbox layout system for precise component positioning and alignment.

The OpenTUI Layout skill empowers Claude to design and implement complex terminal user interfaces (TUI) using a familiar Flexbox model. Built on Facebook's Yoga engine, it translates web-standard layout concepts—such as justify-content, align-items, and responsive percentages—into terminal character cells. This skill is essential for developers building sophisticated command-line tools that require structured headers, sidebars, centered content, or dynamic grids, ensuring visual consistency and structural integrity across various terminal environments.

Key Features

01Advanced positioning support for absolute and relative component placement.

02Yoga-powered Flexbox implementation specifically for terminal environments.

03Comprehensive axis control including direction, alignment, and wrapping.

040 GitHub stars

05Precise spacing management using character-cell margins, padding, and gaps.

06Flexible dimensioning with fixed units, percentages, and min/max constraints.

Use Cases

01Designing responsive sidebars and structured headers for CLI dashboards.

02Building complex multi-column forms with perfectly aligned labels and inputs.

03Creating centered login screens or modal-like overlays within a terminal window.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nthplusio/functional-claude opentui-layout

For use in Claude.ai and ChatGPT

Download Skill