How do I apply bold or italic styles to text?

OpenTUI uses nested elements like , , and inside the component rather than using boolean props on the text tag itself.

Can I render code diffs with this skill?

Yes, the 'diff' component allows for unified or split mode rendering of code changes directly within the terminal interface.

How do I handle input in OpenTUI?

Interactive components like 'input' and 'textarea' must have the 'focused' attribute set to true to receive user keyboard input.

What is the difference between React and Solid syntax in OpenTUI?

React uses hyphens for multi-word components (e.g., ), while Solid uses underscores (e.g., ) for the same elements.

What border styles are supported for the Box component?

The Box component supports 'single', 'double', 'rounded', and 'heavy' border styles to define the visual container.

OpenTUI Component Library

Name: OpenTUI Component Library
Author: nthplusio

bynthplusio

0•

设计工具

Provides comprehensive documentation and implementation patterns for building terminal user interfaces using OpenTUI components.

This skill equips Claude with the specific knowledge required to build and debug terminal user interfaces (TUIs) using the OpenTUI framework. It provides detailed syntax for various components including text, boxes, inputs, and code viewers across both React and Solid frameworks. By understanding framework-specific naming conventions—such as using hyphens for React and underscores for Solid—and critical requirements like the focus attribute for interactive elements, this skill ensures Claude generates accurate, functional TUI code and complex layouts.

主要功能

01Implementation patterns for interactive elements like Select, Tab-Select, and Input

020 GitHub stars

03Framework-specific syntax mapping for React and Solid JS implementations

04Detailed configuration for layout containers like Box and ScrollBox

05Guidance on critical focus requirements and nested text modifiers

06Specialized rendering guides for code snippets, diffs, and ASCII fonts

使用场景

01Implementing interactive forms and selection lists for CLI tools

02Debugging layout and focus issues in existing OpenTUI applications

03Creating complex dashboard layouts within a terminal environment

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nthplusio/functional-claude opentui-components

For use in Claude.ai and ChatGPT

主要功能

01Implementation patterns for interactive elements like Select, Tab-Select, and Input

020 GitHub stars

03Framework-specific syntax mapping for React and Solid JS implementations

04Detailed configuration for layout containers like Box and ScrollBox

05Guidance on critical focus requirements and nested text modifiers

06Specialized rendering guides for code snippets, diffs, and ASCII fonts

使用场景

01Implementing interactive forms and selection lists for CLI tools

02Debugging layout and focus issues in existing OpenTUI applications

03Creating complex dashboard layouts within a terminal environment

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nthplusio/functional-claude opentui-components

For use in Claude.ai and ChatGPT