write-tui

Guides writing and modifying terminal UI components, dialogs, and themes in pythinker-code.

18|8|Updated Jun 17, 2026
One-click install
npx skills add https://github.com/PyModel/pythinker-code --skill write-tui-pymodel
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: write-tui
Source: https://github.com/PyModel/pythinker-code/tree/main/.agents/skills/write-tui
Command: npx skills add https://github.com/PyModel/pythinker-code --skill write-tui-pymodel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers working on the pythinker-code terminal UI need to know where new features belong, how the coordinator/controller architecture is organized, and which visual and interaction rules dialogs must follow, without reading the entire codebase. ## Core Features & Use Cases - Architecture orientation: Explains the PythinkerTUI coordinator, controllers (session events, streaming render, replay, auth), and the components directory layout. - Feature routing: Maps each feature type (slash commands, dialogs, tool renderers, config options, themes) to its correct source directory and test location. - Dialog design spec: Bundles DESIGN.md, the normative visual and keyboard-interaction spec for selectors, toggle lists, input fields, and tab bars. - Use Case: When adding a new provider selector dialog, follow the skill to place it in components/dialogs/, reuse SearchableList, and pass the DESIGN.md checklist before submitting. ## Quick Start Ask the agent to add a new slash command with a searchable selector dialog to the pythinker-code TUI following the write-tui skill.

Frequently Asked Questions about write-tui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new slash command to the pythinker-code TUI?

Declare and parse the command under src/tui/commands/, then add its execution entry in PythinkerTUI's slash-command handler section. Sink complex logic into utils or a focused component rather than the coordinator.

How do I create a searchable selector dialog in a terminal UI?

Place the component in components/dialogs/, reuse the SearchableList state machine for cursor, search, and paging, and mount it via mountEditorReplacement. Follow the DESIGN.md layout: top rule, title with optional search suffix, hint, list, bottom rule.

Where should new TUI feature code go in pythinker-code?

The feature type decides placement: SDK event handling goes in session-event-handler.ts, streaming render in streaming-ui.ts, dialogs in components/dialogs/, and config options in src/tui/config.ts. PythinkerTUI stays a thin coordinator.

Why are named chalk colors like chalk.red prohibited in this TUI?

The chalk-named-color-guard CI check enforces semantic tokens via chalk.hex(colors.<token>) so themes stay consistent across dark and light palettes. All colors must come from the ColorPalette tokens defined in theme/colors.ts.

How does keyboard input handling work with the Kitty protocol?

Character comparisons must use printableChar() from utils/printable-key.ts, enforced by the printable-key-guard CI check. Function keys like arrows and Enter use matchesKey(data, Key.*) instead of raw character checks.

When should logic not be added to PythinkerTUI directly?

PythinkerTUI is a coordinator and should not accumulate event-routing or rendering logic. Concrete event handling belongs in controllers like session-event-handler.ts, and pure helpers belong in utils or focused components.