Agent skill

opentui-design

Comprehensive toolkit for designing and implementing CLI applications with OpenTUI and SolidJS. Use when building CLI screens/components, debugging input handling, implementing screen navigation, handling mouse events, or optimizing CLI performance.

View SKILL.md on GitHub Repository
Stars 5
Forks 2

Install this agent skill to your Project

npx add-skill https://github.com/akiojin/skills/tree/main/cli-opentui/skills/opentui-design

SKILL.md

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.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

akiojin/skills

inkjs-design

Ink.js (React for CLI) design and implementation guide. Use when: (1) Creating or modifying Ink.js components (2) Implementing Ink-specific hooks (useInput, useApp, useFocus) (3) Handling emoji/icon width issues (string-width workarounds) (4) Building terminal-responsive layouts (5) Managing multi-screen navigation (6) Implementing animations (spinners, progress bars) (7) Optimizing performance (React.memo, useMemo) (8) Handling keyboard input and shortcuts (9) Testing CLI UI (ink-testing-library)

5 2
Explore
akiojin/skills

speckit-require

GitHub Spec Kit (https://github.com/github/spec-kit) を使って要件定義や仕様作成（仕様策定・仕様書作成・仕様設計を含む）を新規作成または既存仕様へ追記し、spec.md/plan.md/tasks.mdまで生成・更新する。要件定義、要件追加/変更、TDD前提の要件整理、仕様の明文化、Spec Kitのspecify/clarify/plan/tasksフロー実行が求められるときに使用。

5 2
Explore
akiojin/skills

speckit-update

GitHub Spec Kit (https://github.com/github/spec-kit) のベースバージョン更新やテンプレート/スクリプト同期を行うための手順。Spec Kitの更新、上流リリースとの差分適用、templates/commands/scriptsの取り込み、ローカル運用（日本語化・ブランチ非操作・SPEC-[UUID8桁]）の維持が必要なときに使用する。

5 2
Explore
akiojin/skills

gh-fix-ci

Backward-compatible wrapper skill. The current workflow is `gh-fix-pr`.

5 2
Explore
akiojin/skills

gh-pr-check

Check GitHub PR status with the gh CLI, including unmerged PR detection and post-merge new-commit detection for the current branch.

5 2
Explore
akiojin/skills

gh-fix-issue

Analyze a GitHub Issue to extract error context, stack traces, file references, and cross-references. Classify the issue, search the codebase for relevant files, produce a structured Issue Analysis Report, and propose a concrete fix plan. Post progress updates to the issue.

5 2
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results