How does layout work in OpenTUI?

OpenTUI uses a Yoga-powered Flexbox system, allowing you to use familiar concepts like rows, columns, and wrapping to position elements in the terminal.

What is the recommended way to exit an OpenTUI application?

You should always use renderer.destroy() rather than process.exit() to ensure the terminal state is correctly restored and the screen is cleaned up.

Which frameworks does the OpenTUI skill support?

It supports three main approaches: the imperative Core API for maximum control, a React reconciler for declarative components, and a SolidJS reconciler for fine-grained reactivity.

Can I style text with standard props in React or Solid?

OpenTUI requires nested tags for styling (e.g., using specific modifier elements) rather than passing style props to ensure consistent terminal rendering.

Does OpenTUI support animations?

Yes, it includes a dedicated animation system for timeline-based animations, property transitions, and easing functions within the terminal.

OpenTUI Terminal Interface Builder

Name: OpenTUI Terminal Interface Builder
Author: connorads

byconnorads

•

디자인 도구

Builds sophisticated terminal user interfaces using core imperative APIs or React and SolidJS reconcilers.

The OpenTUI skill provides a comprehensive framework for developing high-performance terminal user interfaces (TUIs) with ease. It simplifies complex tasks like responsive Flexbox-based layouts, interactive component creation (inputs, selects, and textareas), and smooth animations. By supporting multiple paradigms—including an imperative Core API and declarative reconcilers for React and SolidJS—this skill helps developers choose the best workflow for their CLI tools. It also provides critical guidance on focus management, keyboard handling, and terminal rendering optimization using Bun and Zig.

주요 기능

01Advanced focus management and keyboard interaction handling

02Flexbox-style layout system for responsive terminal UI design

03Rich component library including code diff viewers and scrollable containers

04Support for Core, React, and SolidJS framework reconcilers

05Native build support using Zig with Bun runtime compatibility

062 GitHub stars

사용 사례

01Developing interactive command-line dashboards and data visualization tools

02Building custom terminal-based code editors and git diff viewers

03Creating developer utilities with complex navigation and rich text styling

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add connorads/dotfiles opentui

For use in Claude.ai and ChatGPT

Download Skill