mcpField
A
ascii-progress-and-spinner

ascii-progress-and-spinner

github.com/full-stack-skills设计与 UI575 次安装4 周前更新
代码仓库

关于 ascii-progress-and-spinner

ascii-progress-and-spinner 是用于设计 ASCII 进度条和 Spinner 的技能，涵盖渲染规则与降级行为，适合需要兼顾交互式终端和重定向日志的输出。

主要功能

  1. 01确定进度条样式
  2. 02不确定进度 Spinner 样式
  3. 03TTY 单行刷新规则
  4. 04非 TTY 日志行降级
  5. 05可配置宽度与百分比显示
  6. 06纯 ASCII 样式选项

适用场景

  1. 01设计终端进度指示器
  2. 02在交互式输出中显示加载状态
  3. 03在重定向日志中报告进度

安装

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

$npx skills add https://github.com/full-stack-skills/ascii-skills --skill ascii-progress-and-spinner

安装后在 Claude Code 中输入/ascii-progress-and-spinner确认已加载。

包含的文件

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

LICENSE.txt
agents/
openai.yaml
examples/
styles.md
scripts/
demo.py

详细介绍

使用此技能的时机

关键触发规则

  • 仅当用户明确提及技能的确切名称：ascii-progress-and-spinner 时，才使用此技能。

触发短语包括：

  • “ascii-progress-and-spinner”
  • “使用 ascii-progress-and-spinner”
  • “用 ascii-progress-and-spinner 生成 ASCII 进度条”
  • “使用 ascii-progress-and-spinner 做 spinner / loading”

边界

  • 不要集成特定的 UI 框架；输出样式、刷新规则、降级协议和示例。
  • 必须涵盖：
    • 确定进度条
    • 不确定进度的 Spinner
    • 非 TTY / 重定向输出降级（输出日志行，不使用回车符更新）

如何使用此技能

输入
  • mode（determinate | indeterminate）
  • width（默认 40）
  • showPercent（默认 true）
  • showEta（可选）
  • multiTask（可选）
  • colorMode（none | ansi256，默认 none）
输出（必需）
  • progressBarStyles（至少 3 种）
  • spinnerStyles（至少 2 种）
  • renderRules（TTY 单行刷新 vs logLines）
  • fallbackRules（非交互 / 重定向输出）
建议的渲染规则
  • TTY（交互式）： 单行刷新（覆盖上一行），避免刷屏
  • 非 TTY（日志）： 输出日志行（不覆盖）。每行可包含任务名称和百分比。

脚本

  • scripts/demo.py：进度条和 Spinner 形状的本地演示

示例

  • examples/styles.md

质量检查清单

  1. 固定宽度（百分比字段固定宽度，以避免抖动）
  2. 日志模式便于 grep（不覆盖）
  3. 提供仅含 ASCII 字符的默认样式（避免宽度不明确的 Unicode 字符）

关键词

英文： ascii-progress-and-spinner, progress bar, spinner, loading, tty, non-interactive, log output, ascii 中文： ascii-progress-and-spinner, 进度条, Spinner, Loading, 终端, TTY, 日志降级, ASCII

常见陷阱（Gotchas）

  1. 版本兼容性： 注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
  2. 配置文件格式： 配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
  3. 环境变量： 确保所有必要的环境变量已正确设置，敏感信息不要硬编码
  4. 依赖冲突： 多版本共存时注意依赖冲突，使用 lock 文件锁定版本
  5. 性能陷阱： 大数据量场景下注意性能优化，避免 N+1 查询等常见问题

使用流程

步骤 1：环境准备

确保开发环境已安装必要的依赖和工具。

步骤 2：配置初始化

根据项目需求进行基础配置。

步骤 3：使用核心功能

按照示例代码实现核心功能。

步骤 4：测试验证

运行测试，确保功能正常。

步骤 5：部署上线

完成开发后进行部署和监控。

评论

支持 Markdown