用途:该技能为设计系统令牌的可访问性校验提供参考数据,覆盖颜色令牌对比度、焦点环合规与间距审计,供 design-system-auditor.agent.md 使用。
主要能力:给出 WCAG 对比度计算步骤(sRGB 通道线性化、相对亮度、对比度比值)及 JavaScript 实现;提供 HSL 转 Hex 转换,便于处理以 HSL 三元组存储的 CSS 变量令牌;列出 AA/AAA 阈值表(正文 4.5:1/7:1,大文本 3:1/4.5:1,UI 组件与焦点指示 3:1,占位文本 4.5:1,禁用态与品牌/装饰内容豁免);整理 Tailwind、shadcn/ui 与 Radix、MUI v5+、Chakra UI、Style Dictionary 的令牌路径;列出已知高风险失败令牌对与合规替换值;给出 Storybook addon-a11y 配置与 CI 运行方式;说明 WCAG 2.4.13 焦点外观要求与最小合规焦点环写法;提供令牌文件查找命令与严重级别分类。
使用方式:安装 Storybook 插件使用 npm install --save-dev @storybook/addon-a11y,测试运行器使用 npm install --save-dev @storybook/test-runner,CI 中可执行 npx storybook dev --port 6006 &、npx wait-on tcp:6006、npx test-storybook --ci。
适用场景:设计系统令牌审计、主题配色校验、焦点样式与触控目标检查。
限制:资料未提供该技能的安装方式、运行入口、收费与平台信息;部分阈值与豁免规则需结合具体 WCAG 版本判断。