mcpField
U
unicode-color-accessibility

unicode-color-accessibility

github.com/josiahsiegel设计与 UI5959 次安装19 周前更新
代码仓库

关于 unicode-color-accessibility

一项终端设计技能,帮助输出在不同 Unicode 字符、颜色、字体和辅助技术环境下保持清晰、易读且视觉正确。内容涵盖文本测量、颜色使用和非 TUI 替代方案。

主要功能

  1. 01处理 Unicode 宽度与字素簇
  2. 02测量时忽略 ANSI 控制序列
  3. 03语义化颜色与无颜色模式
  4. 04图形元素的 ASCII 回退
  5. 05键盘与屏幕阅读器替代方案

适用场景

  1. 01对齐含 Emoji 或中日韩文字的终端表格
  2. 02设计适用于明暗主题的颜色输出
  3. 03提供无障碍的非 TUI 命令流程

安装

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

$npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill unicode-color-accessibility

安装后在 Claude Code 中输入/unicode-color-accessibility确认已加载。

附带文件references/accessibility-fallbacks.mdreferences/text-measurement.md

详细介绍

Unicode、颜色、无障碍功能和非 TUI 降级方案

当终端输出必须在不同字体、区域设置、主题和辅助技术下保持视觉正确、易读、包容且稳健时,请使用此技能。

文本正确性规则

  • 显示宽度不等于字节长度、码点数量或用户感知的字符数量。
  • 光标移动和删除应以字素簇为单位进行。
  • 布局应在剥除 ANSI 控制序列后测量可打印文本。
  • 必须测试双宽字符、组合标记、表情符号序列、变体选择符和零宽连接符。
  • 默认将东亚模糊宽度视为窄字符,除非目标环境明确采用其他规则。

视觉设计规则

  • 使用语义角色:错误、警告、成功、信息、弱化、已选中、已聚焦、已禁用。
  • 不要仅用颜色表达含义;应配合文本、形状、图标或位置。
  • 为框线绘图、盲文图表、块元素、表情符号和私用区图标提供 ASCII 降级方案。
  • 不要假设用户使用 Nerd Fonts 或打过补丁的字体。
  • 支持浅色和深色背景、16 色、256 色、真彩色和无颜色模式。

颜色偏好

尊重用户和环境偏好:

  • NO_COLOR 会禁用非必要颜色。
  • 根据生态系统惯例,CLICOLOR、CLICOLOR_FORCE 和 FORCE_COLOR 可能会强制启用颜色。
  • TERM=dumb、非 TTY 输出和 CI 通常意味着使用纯文本输出,除非另有覆盖设置。
  • 提供 --color=auto|always|never、--plain 和 --ascii 等显式标志。

无障碍要求

  • 所有功能都必须支持键盘操作。
  • 焦点指示器必须清晰可见,不能仅依赖颜色。
  • 避免每秒闪烁超过 3 次。
  • 对于减少动态效果的需求、日志和 CI,应允许禁用旋转指示器、动画和实时区域更新。
  • 提供便于屏幕阅读器使用的替代方式:纯文本提示、按行处理的命令、--json、--plain,或有文档说明的 stdin/stdout 工作流。
  • 使用有意义的标签、稳定的排序和清晰可见的状态消息。

故障模式

症状可能原因修复方法
表格未对齐将字节长度或 ANSI 序列计入可见宽度使用支持 ANSI 的 wcwidth/字素测量方式
光标把表情符号拆开按码点移动按字素簇移动
边框显示异常字体或宽度不匹配提供 ASCII 模式并测试常见字体
错误仅以红色显示仅用颜色表达含义添加文本/图标/标签并检查对比度
屏幕阅读器无法使用全屏重绘网格提供非 TUI 模式和按行处理的流程

参考文件

  • references/text-measurement.md - Unicode 宽度、字素、表情符号、BiDi 和 ANSI 测量。
  • references/accessibility-fallbacks.md - 颜色策略、屏幕阅读器替代方案和包容性 UX 检查清单。

评论

支持 Markdown