skills.rest
nthplusio
nthplusioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

opentui-layout

Compose terminal UI layouts using a Yoga-based Flexbox model.

Updated Aug 23, 2026
Search Tags:#layout#responsive#yoga#flexbox#terminal-ui#opentui
One-click install
npx skills add https://github.com/nthplusio/functional-claude --skill opentui-layout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: opentui-layout
Source: https://github.com/nthplusio/functional-claude/tree/main/plugins/opentui-dev/skills/opentui-layout
Command: npx skills add https://github.com/nthplusio/functional-claude --skill opentui-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

## What problem does it solve? OpenTUI Layout System enables developers to construct flexible, well-ordered terminal interfaces using a Yoga-based Flexbox model, translating web-like layout concepts to character-cell terminals.

## Core Features & Use Cases

  • Flex container properties like flexDirection, justifyContent, alignItems, flexWrap, and gap enable precise row/column layouts.
  • Flex item properties such as flexGrow, flexShrink, and flexBasis support responsive sizing within terminal UIs.
  • Common patterns: header/content/footer, two-column dashboards, sidebars, and grid-like arrangements.
  • Use Case: Build a terminal dashboard with a persistent left navigation rail and a resizable main panel.

### Quick Start Install and import the OpenTUI layout library. Create a root layout with flexDirection='row' to arrange a sidebar and content area, then use width and flexGrow to control panel sizes. For example, place a 24-column sidebar and a remaining flexible main panel, adjust with gap for spacing, and add header and footer sections as separate full-width rows.

Frequently Asked Questions about opentui-layout

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

FAQPage Schema
How do I create responsive terminal layouts that adapt to different window sizes?▼

Responsive terminal layouts adapt to varying window sizes by using a Yoga-based Flexbox model. You apply properties like flexGrow and flexBasis to ensure UI components predictably resize across different terminal dimensions without manual coordinate calculations.

What is the best way to structure a terminal dashboard with a sidebar and main panel?▼

The best way to structure a terminal dashboard is setting flexDirection to 'row' to arrange a fixed-width sidebar and a flexible main panel. You apply flexGrow to the main panel so it consumes remaining space, ensuring a persistent layout.

Can I use Flexbox properties like justifyContent and alignItems in a command-line interface?▼

Yes, you can use Flexbox properties in a command-line interface by applying justifyContent, alignItems, flexWrap, and gap within a Yoga-based layout model. This translates web-like layout concepts directly to character-cell terminals for precise component placement.

Does OpenTUI support flexWrap and gap for terminal UI components?▼

OpenTUI supports flexWrap and gap for terminal UI components. These flex container properties allow you to control row and column spacing, wrap overflowing items, and maintain predictable spacing between rendered elements in character-cell terminals.

How do I control the sizing of flex items in a terminal UI?▼

You control the sizing of flex items in a terminal UI by applying flexGrow, flexShrink, and flexBasis properties. These dimensions dictate how components expand or contract within flex containers, ensuring responsive sizing across varying terminal widths.

When do I need a Flexbox model for terminal UI development?▼

You need a Flexbox model for terminal UI development when building dashboards, editors, or CLI tools that require predictable, responsive component placement. It solves complex arrangement challenges like header/content/footer structures and two-column layouts without manual positioning.

Related Skills

Explore More Software Engineering Skills→
msmpsmsmps

opentui

Build terminal user interfaces with OpenTUI components and layouts.

Community
Advanced
Mahaboob26Mahaboob26

using-streamlit-layouts

Structure Streamlit apps using sidebars, columns, containers, and dialogs.

Community
Intermediate
amanmprojectsamanmprojects

opentui-react

Build interactive terminal UIs with React-style components and OpenTUI hooks.

Community
Advanced
josemartinrodriguezmortalonijosemartinrodriguezmortaloni

opentui

Develop terminal user interfaces with declarative React and SolidJS patterns.

Community
Advanced