Terminal User Interface (TUI) performance and UX guidelines for TypeScript applications using Ink and Clack. This skill should be used when building CLI tools, interactive terminal prompts, or developer tooling with TUI components. Triggers on tasks involving TUI components, CLI prompts, terminal rendering, keyboard input handling, or developer tooling.
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.
Reference these guidelines when:
| 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- |
render-single-write - Batch Terminal Output in Single Writerender-overwrite-dont-clear - Overwrite Content Instead of Clear and Redrawrender-synchronized-output - Use Synchronized Output Protocol for Animationsrender-60fps-baseline - Target 60fps for Smooth Animationrender-partial-updates - Update Only Changed Regionsrender-escape-sequence-batching - Defer ANSI Escape Code Generation to Final Outputinput-useinput-hook - Use useInput Hook for Keyboard Handlinginput-immediate-feedback - Provide Immediate Visual Feedback for Inputinput-modifier-keys - Handle Modifier Keys Correctlyinput-isactive-focus - Use isActive Option for Focus Managementinput-escape-routes - Always Provide Escape Routestuicomp-box-flexbox - Use Box Component with Flexbox for Layoutstuicomp-text-styling - Use Text Component for All Visible Contenttuicomp-measure-element - Use measureElement for Dynamic Sizingtuicomp-static-for-logs - Use Static Component for Log Outputtuicomp-percentage-widths - Use Percentage Widths for Responsive Layoutstuicomp-border-styles - Use Border Styles for Visual Structuretuistate-useapp-exit - Use useApp Hook for Application Lifecycletuistate-cleanup-effects - Always Clean Up Effects on Unmounttuistate-functional-updates - Use Functional State Updates to Avoid Stale Closurestuistate-usecallback-stable - Stabilize Callbacks with useCallbacktuistate-usememo-expensive - Memoize Expensive Computations with useMemoprompt-group-flow - Use Clack group() for Multi-Step Promptsprompt-validation - Validate Input Early with Descriptive Messagesprompt-cancellation - Handle Cancellation Gracefully with isCancelprompt-spinner-tasks - Use Spinner and Tasks for Long Operationsprompt-custom-render - Build Custom Prompts with @clack/coreux-progress-indicators - Show Progress for Operations Over 1 Secondux-color-semantics - Use Colors Semantically and Consistentlyux-error-messages - Write Actionable Error Messagesux-next-steps - Show Next Steps After Completionux-intro-outro - Use Intro and Outro for Session Framingtuicfg-sensible-defaults - Provide Sensible Defaults for All Optionstuicfg-env-vars - Support Standard Environment Variablestuicfg-flags-over-args - Prefer Flags Over Positional Argumentstuicfg-help-system - Implement Comprehensive Help Systemtuicfg-json-output - Support Machine-Readable Output Formatrobust-tty-detection - Detect TTY and Adjust Behavior Accordinglyrobust-signal-handling - Handle Process Signals Gracefullyrobust-exit-codes - Use Meaningful Exit Codesrobust-terminal-restore - Always Restore Terminal State on Exitrobust-graceful-degradation - Degrade Gracefully for Limited TerminalsRead individual reference files for detailed explanations and code examples:
For the complete guide with all rules expanded: AGENTS.md