mcpField
T
terminal-ui

terminal-ui

github.com/pproenca开发218840 次安装11 周前更新
代码仓库

关于 terminal-ui

面向使用 Ink 和 Clack 构建 TypeScript 终端界面的最佳实践技能，按优先级整理 CLI 开发与代码生成所需的规则，涵盖渲染、输入、提示和兼容性。

主要功能

  1. 01涵盖八类的 42 条规则
  2. 02Ink 终端界面模式
  3. 03Clack 提示设计
  4. 04键盘与状态处理
  5. 05渲染和终端兼容性

适用场景

  1. 01构建交互式 TypeScript CLI
  2. 02改进 Ink 界面渲染
  3. 03设计多步骤 Clack 提示

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/terminal-ui确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

AGENTS.md
metadata.json
README.md
assets/templates/
_template.md
references/
_sections.md
input-escape-routes.md
input-immediate-feedback.md
input-isactive-focus.md
input-modifier-keys.md
input-useinput-hook.md
prompt-cancellation.md
prompt-custom-render.md
prompt-group-flow.md
prompt-spinner-tasks.md
prompt-validation.md
render-60fps-baseline.md
render-escape-sequence-batching.md
render-overwrite-dont-clear.md
render-partial-updates.md
render-single-write.md
render-synchronized-output.md
robust-exit-codes.md
robust-graceful-degradation.md
robust-signal-handling.md
robust-terminal-restore.md
robust-tty-detection.md
tuicfg-env-vars.md
tuicfg-flags-over-args.md
tuicfg-help-system.md
tuicfg-json-output.md

详细介绍

DevEx 开发者体验 TUI 最佳实践

全面的开发者体验指南，介绍如何使用 Ink（适用于 CLI 的 React）和 Clack prompts 构建 TypeScript 终端用户界面。包含 8 个类别中的 42 条规则，并按影响力排序，以指导自动重构和代码生成。

适用场景

在以下情况下，请参考这些指南：

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

按优先级划分的规则类别

优先级类别影响前缀
1渲染与输出CRITICALrender-
2输入与键盘CRITICALinput-
3组件模式HIGHtuicomp-
4状态与生命周期HIGHtuistate-
5提示词设计MEDIUM-HIGHprompt-
6用户体验与反馈MEDIUMux-
7配置与 CLIMEDIUMtuicfg-
8稳健性与兼容性LOW-MEDIUMrobust-

快速参考

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. 稳健性与兼容性（低-中）
  • robust-tty-detection - 检测 TTY 并据此调整行为
  • robust-signal-handling - 妥善处理进程信号
  • robust-exit-codes - 使用有意义的退出代码
  • robust-terminal-restore - 退出时始终恢复终端状态
  • robust-graceful-degradation - 在功能受限的终端中优雅降级

使用方法

阅读各个参考文件，了解详细说明和代码示例：

完整编译文档

如需查看包含所有展开规则的完整指南：AGENTS.md

评论

支持 Markdown