Mastering Terminal UI Development with the write-tui Skill

Where this fits

You're building an AI agent that needs to extend a terminal UI—say, adding a new slash command to kimi-code or tweaking the streaming render. Without a map, you'd dig through hundreds of files guessing at architecture and conventions. The write-tui skill gives your agent the exact blueprint: where components live, how the coordinator delegates logic, and the normative dialog design rules. It turns a risky refactor into a guided task.

Why agents benefit

• Avoids architectural blind spots – The skill explains the KimiTUI coordinator pattern, so your agent knows not to sprinkle state logic into components but to use controllers.
• Enforces hard constraints – It points to AGENTS.md for rules like printable-key decoding and no chalk named colors, preventing subtle bugs.
• Routes features correctly – Instead of guessing where a new dialog or theme belongs, the agent gets explicit placement guidance, saving trial-and-error.
• Applies the dialog spec – The normative DESIGN.md self-check list ensures your agent's UI changes match interaction and visual standards without human review.
• Streamlines test placement – The skill tells you where tests go, so your agent writes them in the right spot and keeps the suite coherent.

Practical scenarios

Adding a new slash command

Your agent needs to implement /compact in the TUI. The skill reveals the command registry location, how to wire it into the coordinator, and where to put the command's logic test.

Customizing the theme system

You want to support a dark mode toggle. The skill explains the theme mechanics—how colors are defined and applied—so your agent can extend the theme map without breaking existing components.

Fixing a dialog focus bug

A selector dialog misbehaves on arrow keys. The skill points to the dialog interaction spec, so your agent can align the key handling with the normative behavior and add a regression test.

Add it to your agent workflow

Install the skill with one command and let your agent load it before touching TUI code:

npx skills add wangyuahn/nori-code --skill write-tui

Then, in your agent's prompt, reference the skill: "Use the write-tui skill to understand the architecture before modifying the dialog component." The skill will guide your agent through DESIGN.md and the module boundaries automatically.

Compare before adopting

Before committing, compare against alternatives: check the repository's commit frequency and open issues to gauge maintenance freshness. Look for other TUI-focused skills or agent guides, and assess whether the skill's architecture matches your codebase's actual structure—it's built for apps/nori-code, so it's most valuable if you work in that exact tree.

Why it is worth tracking

With 13 stars, this skill is early but focused. Its value lies in codifying a specific, non-obvious codebase's conventions—something generic documentation rarely does. Track it if you plan to contribute to kimi-code or build agents that interact with terminal UIs. Revisit when the repo gains more contributors or the skill gets updated; the normative DESIGN.md alone makes it a reference worth having. For more agent skills, see OpenAgentSkill.