TypeScript 终端 UI 开发指南：Ink 与 Clack 最佳实践，提升 CLI 开发者体验

terminal-ui by pproenca/dot-skills

244 周安装量

85 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/pproenca/dot-skills --skill terminal-ui

React TypeScript 命令行工具

🇨🇳中文介绍

DevEx 开发者体验 TUI 最佳实践

使用 Ink（用于 CLI 的 React）和 Clack 提示库构建 TypeScript 终端用户界面的综合开发者体验指南。包含 8 个类别共 42 条规则，按影响优先级排序，以指导自动化重构和代码生成。

何时应用

在以下情况下参考本指南：

使用 @clack/prompts 构建带有交互式提示的 CLI 工具
使用 Ink 创建基于 React 的终端 UI
处理键盘输入和用户交互
优化终端渲染并防止闪烁
设计开发者友好的 CLI 体验

按优先级排序的规则类别

优先级	类别	影响	前缀
1	渲染与输出	关键	`render-`
2	输入与键盘	关键	`input-`
3	组件模式	高

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

1. 渲染与输出（关键）

render-single-write - 在单次写入中批量处理终端输出
render-overwrite-dont-clear - 覆盖内容而非清除后重绘
render-synchronized-output - 对动画使用同步输出协议
render-60fps-baseline - 以 60fps 为目标实现流畅动画
render-partial-updates - 仅更新已更改的区域
render-escape-sequence-batching - 将 ANSI 转义码生成推迟到最终输出

2. 输入与键盘（关键）

input-useinput-hook - 使用 useInput 钩子处理键盘输入
input-immediate-feedback - 为输入提供即时视觉反馈
input-modifier-keys - 正确处理修饰键
input-isactive-focus - 使用 isActive 选项进行焦点管理
input-escape-routes - 始终提供退出途径

3. 组件模式（高）

tuicomp-box-flexbox - 使用 Box 组件配合 Flexbox 进行布局
tuicomp-text-styling - 使用 Text 组件处理所有可见内容
tuicomp-measure-element - 使用 measureElement 进行动态尺寸调整
tuicomp-static-for-logs - 对日志输出使用 Static 组件
tuicomp-percentage-widths - 使用百分比宽度实现响应式布局
tuicomp-border-styles - 使用边框样式构建视觉结构

4. 状态与生命周期（高）

tuistate-useapp-exit - 使用 useApp 钩子管理应用生命周期
tuistate-cleanup-effects - 卸载时始终清理副作用
tuistate-functional-updates - 使用函数式状态更新以避免闭包过时
tuistate-usecallback-stable - 使用 useCallback 稳定回调函数
tuistate-usememo-expensive - 使用 useMemo 记忆化昂贵计算

5. 提示设计（中高）

prompt-group-flow - 使用 Clack 的 group() 处理多步骤提示
prompt-validation - 尽早验证输入并提供描述性信息
prompt-cancellation - 使用 isCancel 优雅地处理取消操作
prompt-spinner-tasks - 对长时间操作使用 Spinner 和 Tasks
prompt-custom-render - 使用 @clack/core 构建自定义提示

6. 用户体验与反馈（中）

ux-progress-indicators - 对超过 1 秒的操作显示进度
ux-color-semantics - 语义化且一致地使用颜色
ux-error-messages - 编写可操作的错误信息
ux-next-steps - 完成后显示后续步骤
ux-intro-outro - 使用 Intro 和 Outro 框架化会话

7. 配置与 CLI（中）

tuicfg-sensible-defaults - 为所有选项提供合理的默认值
tuicfg-env-vars - 支持标准环境变量
tuicfg-flags-over-args - 优先使用标志而非位置参数
tuicfg-help-system - 实现全面的帮助系统
tuicfg-json-output - 支持机器可读的输出格式

8. 健壮性与兼容性（低中）

robust-tty-detection - 检测 TTY 并相应调整行为
robust-signal-handling - 优雅地处理进程信号
robust-exit-codes - 使用有意义的退出码
robust-terminal-restore - 退出时始终恢复终端状态
robust-graceful-degradation - 对功能受限的终端优雅降级

阅读单独的参考文件以获取详细解释和代码示例：

章节定义 - 类别结构和影响级别
规则模板 - 用于添加新规则的模板
render-single-write - 规则文件示例
input-useinput-hook - 规则文件示例

如需包含所有规则详情的完整指南，请查看：AGENTS.md

2026 年 1 月 20 日

🇺🇸English

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 - Provide Sensible Defaults for All Options
tuicfg-env-vars - Support Standard Environment Variables
tuicfg-flags-over-args - Prefer Flags Over Positional Arguments
tuicfg-help-system - Implement Comprehensive Help System
tuicfg-json-output - Support Machine-Readable Output Format

8. Robustness & Compatibility (LOW-MEDIUM)

robust-tty-detection - Detect TTY and Adjust Behavior Accordingly
robust-signal-handling - Handle Process Signals Gracefully
robust-exit-codes - Use Meaningful Exit Codes
robust-terminal-restore - Always Restore Terminal State on Exit
robust-graceful-degradation - Degrade Gracefully for Limited Terminals

How to Use

Read individual reference files for detailed explanations and code examples:

Section definitions - Category structure and impact levels
Rule template - Template for adding new rules
render-single-write - Example rule file
input-useinput-hook - Example rule file

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md

Weekly Installs

244

Repository

pproenca/dot-skills

GitHub Stars

First Seen

Jan 20, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

codex211

opencode207

gemini-cli202

github-copilot189

cursor180

claude-code169