mcpField
O
opentui-design

opentui-design

github.com/akiojinDevelopment761 installsUpdated 34w ago
Repository

About opentui-design

A reference skill for building and troubleshooting CLI interfaces with OpenTUI and SolidJS. It covers component design, input and mouse behavior, navigation, state, testing, and performance.

Key features

  1. 01OpenTUI component patterns
  2. 02Keyboard input handling
  3. 03Mouse event guidance
  4. 04Multi-screen navigation
  5. 05SolidJS state and hooks
  6. 06Layout, testing, and performance

Use cases

  1. 01Building CLI screens and components
  2. 02Diagnosing input behavior
  3. 03Adding screen navigation
  4. 04Improving CLI responsiveness

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/akiojin/skills --skill opentui-design

After installing, type/opentui-designin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
component-patterns.md
hooks-guide.md
input-handling.md
mouse-handling.md
multi-screen-navigation.md
opentui-gotchas.md
performance-optimization.md
responsive-layout.md
state-management.md
testing-patterns.md

Details

From the project README

OpenTUI Design Skill

Description

Comprehensive toolkit for designing and implementing CLI applications with OpenTUI and SolidJS.

When to Use

  • Building new CLI screens or components with OpenTUI
  • Debugging input handling issues
  • Implementing screen navigation
  • Handling mouse events and limitations
  • Optimizing CLI performance

Key References

  • input-handling.md - Key input patterns and propagation prevention
  • mouse-handling.md - Mouse events and Selection API limitations
  • opentui-gotchas.md - Common issues and workarounds
  • component-patterns.md - Component structure and composition
  • multi-screen-navigation.md - Screen transition patterns
  • state-management.md - SolidJS state patterns
  • hooks-guide.md - OpenTUI hooks reference
  • performance-optimization.md - Performance best practices
  • responsive-layout.md - Terminal layout patterns
  • testing-patterns.md - Testing CLI components

Critical Knowledge

Key Propagation Prevention

When navigating between screens with Enter key, the same keypress can propagate to the new screen. Always use:

  1. key.preventDefault() at the source
  2. Initial frame delay at the destination
  3. focused prop control on interactive elements
SolidJS Reactivity

Never destructure props - always access via props.xxx to maintain reactivity.

Mouse Limitations

OpenTUI's Selection API (useSelectionHandler) does not reliably work. Set useMouse: false to allow OS-level copy, but this disables wheel scroll.

Comments

Markdown supported