用途
该技能面向命令行界面(CLI)的交互与可读性设计,主要用于编写 CLI 安装脚本、配置向导、开发工具、后台任务执行展示、健康检查、部署日志以及交互式终端提示(选择、确认、文本输入)等场景。
主要能力
- 使用 @clack/prompts 构建交互式流程,包括 intro、outro、text、select、confirm,以及用 isCancel 处理取消。
- 使用 consola 输出结构化状态:consola.box 状态框、consola.start、consola.success、consola.error。
- 使用 picocolors 在 16 色 ANSI 调色板内着色,要求不输出原始十六进制或 256 色序列。
使用方式
资料给出的安装命令为:
npm install @clack/prompts consola picocolors
资料提供两个代码模式:
- 交互式配置流程(cli/interactive-flow.js):先调用 intro 显示标题,用 text 收集包名并按需校验空值,用 select 选择目标生态,用 confirm 做破坏性确认,所有交互在继续前都先处理 isCancel,取消时调用 cancel 并 process.exit(0)。
- 实时状态与层级日志(cli/status-logger.js):用 consola.box 展示引擎状态(活跃 worker 数、内存使用、协议),用 consola.start、consola.success 标记任务开始与完成。
执行要求:写完后必须在终端运行脚本,捕获 ANSI 与 Unicode stdout,检查字符单元对齐,包括列边缘、框线边界和标签间距;修正脚本并重新运行后才能视为完成。不要打开浏览器,也不要调用视觉验证。
适用场景
项目生成器、配置向导、后台任务监控、部署日志、健康检查等终端交互场景。
限制与约束
- 不用于 HTML 或 Canvas;终端任务不应加载 Quasar、PrimeVue 或 @vueuse/motion。若同一产品还有 GUI,GUI 属于另一条 @vue-design-system 路线。
- 不在 Vue 页面里伪造终端,除非用户明确要求用 GUI 展示日志;GUI 中的日志文本仍应来自产品数据组件,而不是嵌入 clack。
- 不要用无结构的 console.log 横幅替代 consola 状态输出。
- 每一步只问一个问题;必填文本为空时要校验;取消时以 0 退出。
- 需在完成后运行建议脚本 suggest_next_skill.py 获取下一步建议(资料给出命令:python .agents/skills/heyeddi/scripts/suggest_next_skill.py --current-skill cli-interface-design --project-root .)。
关于许可、收费、版本兼容范围等事实,资料暂未提供。