SkillFoxx

OpenTUI Skill

An OpenTUI reference for agents: decision trees, the Core, React and Solid APIs, layout, keys, animation and testing

  • 229 ★ on the repository
  • Last commit
  • MIT
Skill

Minimal access

Why this level

  • The skill consists of reference files and runs nothing; the `install.sh` script only copies them into the agent directories
All reasons and checks

msmps/opentui-skillAuthor:msmps

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/opentui-skill

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Minimal accessThe tool runs nothing and makes no network calls.

  • The skill consists of reference files and runs nothing; the `install.sh` script only copies them into the agent directories

This is third-party code. Review the repository files before installing.

What it does

The skill loads an OpenTUI reference, a platform for terminal user interfaces, whenever the task is a TUI. `SKILL.md` holds decision trees: pick a framework (Core, React or Solid), display content, take input, lay out the screen, animate, write tests and troubleshoot common failures. Details sit in `references/` folders by topic: the imperative Core API, the React and Solid reconcilers, components, Yoga and Flexbox layout, keyboard and declarative keymaps, animation, and a test renderer with snapshots. For OpenCode the installer also adds a `/opentui` command: `/opentui create a React TUI with keyboard navigation` loads the skill and drives the task. Among the critical rules in the skill: create projects with `create-tui`, put options before arguments, call `renderer.destroy()` instead of `process.exit()`, and style text in React and Solid with nested tags.

Who it is for. Developers of terminal interfaces on OpenTUI who ask an agent to write components, layout and key handling.

Good fit when

  • You need a new TUI on React or Solid, and the agent has to pick a fitting framework and the right project template
  • Hotkeys of different screens collide, and the layered scheme from the `keymap` reference would help
  • Text styles in React or Solid are not applied, and the skill has a walkthrough of that common mistake
  • The interface has to be covered with snapshot tests through the test renderer
  • The app hangs on exit, and the cause may be in the rules about `renderer.destroy()`

Not a fit when

  • The app is not a terminal one: the whole skill is about OpenTUI
  • There is neither Bun nor Node.js 26.4.0 with the `--experimental-ffi` flag: the native renderer will not start
  • You need a reference for another TUI library: the skill covers the OpenTUI platform only

Example request

Build a terminal task list on OpenTUI with React, navigate it with arrow keys and cover it with snapshot tests

Limitations

The skill is a snapshot of the OpenTUI docs from 27 August 2026 (upstream commit `fbd584b2`), so new platform features reach it with a delay. The runtime is Bun or Node.js 26.4.0 and newer with the `--experimental-ffi` flag for the native renderer. The `/opentui` command and the `install.sh` script target OpenCode; other agents get only the skill. The reference is in English and builds on examples for Core, React and Solid.

How to disable. Delete the `skill/opentui` folder from your agent skills directory (for example `.claude/skills/opentui`) and, if you installed it for OpenCode, the `opentui.md` command file from the commands directory.

FAQ

How do I install the skill in OpenCode together with the `/opentui` command?

For the current project run `curl -fsSL https://raw.githubusercontent.com/msmps/opentui-skill/main/install.sh | bash`. For all projects add `-s -- --global` after `bash`. Once installed the skill appears in the list of available ones, and the command loads it manually.

Which agents does `npx skills add` support?

The README names Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, Goose, OpenCode and Windsurf. The command installs the skill only, without `/opentui`.

What topics does the reference cover?

Three ways to work: imperative Core, React and Solid. Plus components (text, containers, input, code and diff, markdown, QR codes), layout, keyboard and `keymap`, timeline animation and snapshot testing.

How do I update the skill?

In OpenCode the `/opentui --update-skill` command pulls the latest version. For other agents repeat `npx skills add msmps/opentui-skill` or run `npx skills update`.

Where do I get a template for a new project?

The skill requires creating projects with `create-tui`, for example `bunx create-tui -t react my-app`. Options such as `-t` go before the project name; in the reverse order the command does not work.

Discussion

No questions or reviews yet.

Skills
Official

An OpenTUI documentation skill: the agent builds terminal UIs on Core, React or Solid and finds the right page by topic

SkillMinimal access13.8K

A plugin and skill for OpenCode that draft a skill, build eval queries, measure description trigger accuracy and improve it.

PluginExtended access194

Over 200 skills by stack and practice: React, Next.js, Rails, Rust, Python, debugging, TDD and UI review

SkillMinimal access225

CLI that turns an OpenAPI spec into an Agent Skill of markdown files an agent reads piece by piece, saving context.

CLIMinimal access342

An agent reference for cross-platform desktop apps that feel native: eight tenets, four layers, a WebView survival guide and a 75-item ship audit

SkillMinimal access2K

A set of 16 engineering skills for agents: Apple platform work, macOS packaging, React performance, code review and refactoring

SkillExtended access4K

README in short

The README describes in short sections the install, the `/opentui` command, the structure of installed files, the list of decision trees and the topic coverage. The end names the Cloudflare skills that inspired the project, the MIT license and the pin to the upstream commit.

README badge

Original SKILL.md

---
name: opentui
description: OpenTUI skill for building terminal user interfaces with the Core, React, or Solid APIs. Use for any TUI task including components, layout, keyboard and keymap handling, animations, and testing.
metadata:
   references: core, react, solid, components, layout, keyboard, keymap, animation, testing
---

# OpenTUI Platform Skill

Consolidated skill for building terminal user interfaces with OpenTUI. Use decision trees below to find the right framework and components, then load detailed references.

## Critical Rules

**Follow these rules in all OpenTUI code:**

1. **Use `create-tui` for new projects.** See framework `REFERENCE.md` quick starts.
2. **`create-tui` options must come before arguments.** `bunx create-tui -t react my-app` works, `bunx create-tui my-app -t react` does NOT.
3. **Never call `process.exit()` directly.** Use `renderer.destroy()` (see `core/gotchas.md`).
4. **Text styling requires nested tags in React/Solid.** Use modifier elements, not props (see `components/text-display.md`).

## How to Use This Skill

### Reference File Structure

Framework references follow a 5-file pattern. Cross-cutting concepts are single-file guides.

Each framework in `./references/<framework>/` contains:

| File | Purpose | When to Read |
|------|---------|--------------|
| `REFERENCE.md` | Overview, when to use, quick start | **Always read first** |
| `api.md` | Runtime API, components, hooks | Writing code |
| `configuration.md` | Setup, tsconfig, bundling | Configuring a project |
| `patterns.md` | Common patterns, best practices | Implementation guidance |
| `gotchas.md` | Pitfalls, limitations, debugging | Troubleshooting |

Cross-cutting concepts in `./references/<concept>/` have `REFERENCE.md` as the entry point.

### Reading Order

Report a problem