Terminal Ui
Install this when you are building TypeScript CLI or agent tools with Ink or Clack and need prioritized TUI performance and UX rules instead of guessing at terminal behavior.
Overview
Terminal-ui is an agent skill most often used in Build (also Ship perf, Build frontend) that supplies forty-two prioritized Ink and Clack TUI rules for TypeScript CLI and developer tooling.
Install
npx skills add https://github.com/pproenca/dot-skills --skill terminal-uiWhat is this skill?
- 42 DevEx rules across 8 categories, prioritized from CRITICAL rendering and input through robustness
- Ink (React for CLIs) and @clack/prompts patterns with `render-`, `input-`, `tuicomp-`, and `tuistate-` rule prefixes
- CRITICAL guidance on terminal rendering, flicker prevention, and keyboard handling
- Prompt design, UX feedback, CLI configuration, and compatibility guardrails for developer-facing tools
- Structured categories for automated refactoring and code generation against TUI codebases
- 42 rules across 8 categories
- 8 rule categories ordered by impact from CRITICAL to LOW-MEDIUM
Adoption & trust: 593 installs on skills.sh; 157 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are shipping an interactive CLI or Ink-based tool but lack a consistent rule set for rendering, input, prompts, and terminal UX, so the experience flickers, drops keystrokes, or feels amateur.
Who is it for?
Solo builders creating TypeScript CLIs, coding-agent sidecar tools, or internal dev utilities with Ink or Clack who want a checklist-driven quality bar before release.
Skip if: Teams building non-interactive batch scripts, GUIs only, or Python/Rich TUIs where Ink and Clack patterns do not apply.
When should I use this skill?
Building CLI tools, interactive terminal prompts, or developer tooling with TUI components; tasks involving TUI components, CLI prompts, terminal rendering, keyboard input handling, or developer tooling.
What do I get? / Deliverables
You apply categorized, impact-prioritized TUI rules so refactors and new CLI features align with stable rendering, solid keyboard handling, and developer-friendly prompts.
- TUI code refactored against render-, input-, tuicomp-, and related rule prefixes
- CLI prompt flows aligned with prompt- and ux- category guidance
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Interactive CLIs and agent-facing developer tools are built in the Build phase; this skill is shelved under agent-tooling because that is where solo builders wire prompts, Ink UIs, and keyboard flows into shipping tooling. Agent-tooling is the canonical shelf for skills that shape how coding agents and local CLIs feel to use—exactly where Ink and @clack/prompts projects live.
Where it fits
Scaffold a coding-agent setup wizard with @clack/prompts using prompt- and ux- category rules.
Lay out Ink components with tuicomp- and tuistate- patterns before wiring business logic.
Audit render- rules to stop full-screen redraw flicker before publishing the CLI.
Refine keyboard shortcuts and error feedback after early user reports on a shipped dev tool.
How it compares
Use this skill package for terminal-specific UX law, not a generic React web checklist or an MCP server integration.
Common Questions / FAQ
Who is terminal-ui for?
It is for indie and solo developers building interactive TypeScript terminal apps with Ink or @clack/prompts who want structured TUI guidance their agent can follow during implementation.
When should I use terminal-ui?
Use it during Build when adding CLI prompts or Ink screens; during Ship when tuning terminal performance and flicker; and whenever agent tooling needs keyboard and prompt UX reviewed before you ship.
Is terminal-ui safe to install?
It is documentation-style procedural knowledge with no runtime side effects; review the Security Audits panel on this Prism page before adding any skill to your agent workflow.
SKILL.md
READMESKILL.md - Terminal Ui
# DevEx Developer Experience TUI Best Practices Comprehensive developer experience guide for building TypeScript terminal user interfaces using Ink (React for CLIs) and Clack prompts. Contains 42 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation. ## When to Apply Reference these guidelines when: - Building CLI tools with interactive prompts using @clack/prompts - Creating React-based terminal UIs with Ink - Handling keyboard input and user interactions - Optimizing terminal rendering and preventing flicker - Designing developer-friendly CLI experiences ## Rule Categories by Priority | Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | Rendering & Output | CRITICAL | `render-` | | 2 | Input & Keyboard | CRITICAL | `input-` | | 3 | Component Patterns | HIGH | `tuicomp-` | | 4 | State & Lifecycle | HIGH | `tuistate-` | | 5 | Prompt Design | MEDIUM-HIGH | `prompt-` | | 6 | UX & Feedback | MEDIUM | `ux-` | | 7 | Configuration & CLI | MEDIUM | `tuicfg-` | | 8 | Robustness & Compatibility | LOW-MEDIUM | `robust-` | ## Quick Reference ### 1. Rendering & Output (CRITICAL) - `render-single-write` - Batch Terminal Output in Single Write - `render-overwrite-dont-clear` - Overwrite Content Instead of Clear and Redraw - `render-synchronized-output` - Use Synchronized Output Protocol for Animations - `render-60fps-baseline` - Target 60fps for Smooth Animation - `render-partial-updates` - Update Only Changed Regions - `render-escape-sequence-batching` - Defer ANSI Escape Code Generation to Final Output ### 2. Input & Keyboard (CRITICAL) - `input-useinput-hook` - Use useInput Hook for Keyboard Handling - `input-immediate-feedback` - Provide Immediate Visual Feedback for Input - `input-modifier-keys` - Handle Modifier Keys Correctly - `input-isactive-focus` - Use isActive Option for Focus Management - `input-escape-routes` - Always Provide Escape Routes ### 3. Component Patterns (HIGH) - `tuicomp-box-flexbox` - Use Box Component with Flexbox for Layouts - `tuicomp-text-styling` - Use Text Component for All Visible Content - `tuicomp-measure-element` - Use measureElement for Dynamic Sizing - `tuicomp-static-for-logs` - Use Static Component for Log Output - `tuicomp-percentage-widths` - Use Percentage Widths for Responsive Layouts - `tuicomp-border-styles` - Use Border Styles for Visual Structure ### 4. State & Lifecycle (HIGH) - `tuistate-useapp-exit` - Use useApp Hook for Application Lifecycle - `tuistate-cleanup-effects` - Always Clean Up Effects on Unmount - `tuistate-functional-updates` - Use Functional State Updates to Avoid Stale Closures - `tuistate-usecallback-stable` - Stabilize Callbacks with useCallback - `tuistate-usememo-expensive` - Memoize Expensive Computations with useMemo ### 5. Prompt Design (MEDIUM-HIGH) - `prompt-group-flow` - Use Clack group() for Multi-Step Prompts - `prompt-validation` - Validate Input Early with Descriptive Messages - `prompt-cancellation` - Handle Cancellation Gracefully with isCancel - `prompt-spinner-tasks` - Use Spinner and Tasks for Long Operations - `prompt-custom-render` - Build Custom Prompts with @clack/core ### 6. UX & Feedback (MEDIUM) - `ux-progress-indicators` - Show Progress for Operations Over 1 Second - `ux-color-semantics` - Use Colors Semantically and Consistently - `ux-error-messages` - Write Actionable Error Messages - `ux-next-steps` - Show Next Steps After Completion - `ux-intro-outro` - Use Intro and Outro for Session Framing ### 7. Configuration & CLI (MEDIUM) - `tuicfg-sensible-defaults