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

디자인 도구

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.

주요 기능

Implementation patterns for interactive elements like Select, Tab-Select, and Input
0 GitHub stars
Framework-specific syntax mapping for React and Solid JS implementations
Detailed configuration for layout containers like Box and ScrollBox
Guidance on critical focus requirements and nested text modifiers
Specialized rendering guides for code snippets, diffs, and ASCII fonts

사용 사례

Implementing interactive forms and selection lists for CLI tools
Debugging layout and focus issues in existing OpenTUI applications
Creating 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

Download Skill

GitHub

소개