SuperAPI AI 工具集

terminal-ui

编程与开发

查看项目

更新于 10-15 14:00

技能介绍

用途

terminal-ui 是一套开发者体验(DevEx)指南,用于在使用 Ink(React for CLIs)和 Clack 提示库构建 TypeScript 终端用户界面(TUI)时提供性能与用户体验方面的最佳实践。它包含 42 条规则,分为 8 个类别,按影响程度排序,可用于指导自动化重构和代码生成。

适用时机

在以下场景中可参考这些指南:

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

规则类别(按优先级)

优先级 类别 影响 前缀
1 渲染与输出 CRITICAL render-
2 输入与键盘 CRITICAL input-
3 组件模式 HIGH tuicomp-
4 状态与生命周期 HIGH tuistate-
5 提示设计 MEDIUM-HIGH prompt-
6 用户体验与反馈 MEDIUM ux-
7 配置与 CLI MEDIUM tuicfg-
8 健壮性与兼容性 LOW-MEDIUM robust-

快速参考

1. 渲染与输出(CRITICAL)

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

2. 输入与键盘(CRITICAL)

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

3. 组件模式(HIGH)

  • 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. 状态与生命周期(HIGH)

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

5. 提示设计(MEDIUM-HIGH)

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

6. 用户体验与反馈(MEDIUM)

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

7. 配置与 CLI(MEDIUM)

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

8. 健壮性与兼容性(LOW-MEDIUM)

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

使用方式

阅读各个参考文件以获取详细说明和代码示例:

  • Section definitions:类别结构与影响级别
  • Rule template:添加新规则的模板
  • render-single-write:示例规则文件
  • input-useinput-hook:示例规则文件

完整编译文档

如需包含所有规则展开的完整指南,请参阅 AGENTS.md。