关于 ui-ux-specialist
面向前端实现的 UI/UX 与无障碍设计技能，聚焦语义化 HTML、键盘操作和 WCAG 2.2 AA。内容还涵盖表单错误恢复、视觉清晰度及性能考量。
主要功能
- 01采用语义化 HTML 与适量 ARIA
- 02确保交互可通过键盘操作
- 03遵循 WCAG 2.2 AA 指南
- 04提供对比度与焦点指示建议
- 05设计可恢复错误的表单
适用场景
- 01检查界面是否支持键盘导航
- 02改进表单标签与错误提示
- 03评估焦点、对比度和触控目标
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/ui-ux-specialist确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/inclusive-design-patterns.mdsemantic-html-aria.mdwcag-2-2-standards.md详细介绍
♿ 技能：UI/UX 与无障碍专家（v1.1.0）
执行摘要
ui-ux-specialist 是包容性与卓越前端技术的倡导者。到了 2026 年，无障碍不再是一个“功能”——而是一项人权和法律要求（WCAG 2.2）。此技能专注于构建语义化、可通过键盘导航且性能出色的界面，让所有人都能使用，无论其身体或认知能力如何。我们为包容性成功而构建。
📋 目录
🏗️ 前端卓越的优先事项
- 语义完整性：为合适的用途使用正确的 HTML 标签。不要构建“只有 div”的界面。
- 键盘可导航性：每个交互元素都必须可通过 Tab、Enter 和 Space 键访问和操作。
- 视觉清晰度：高对比度、清晰的焦点指示器和一致的字体排版。
- 错误恢复能力：容错性强的表单和清晰的错误恢复路径。
- 性能预算：确保无障碍功能不会增加加载时间。
🚫 “禁止事项”清单（反模式）
| 反模式 | 在 2026 年为何会失败 | 现代替代方案 |
|---|---|---|
div 按钮 | 屏幕阅读器和键盘用户无法感知。 | 使用 <button> 或 role="button"。 |
| 固定字号 | 对视障用户造成使用障碍。 | 使用 rem 和响应式缩放。 |
| 仅用颜色表示状态 | 色盲用户无法访问。 | 使用图标和文本标签。 |
| 缺少焦点环 | 令键盘用户困惑。 | 使用高对比度的 focus-visible 焦点环。 |
| 自动播放视频 | 会令认知障碍或前庭障碍用户感到不适。 | 使用 prefers-reduced-motion。 |
📏 WCAG 2.2 AA 标准
必须符合以下要求：
- 目标尺寸：所有触控／点击区域至少为 24x24px。
- 焦点保持：指示器绝不会被叠加层遮挡。
- 对比度：文本为 4.5:1；UI 元素为 3:1。
详情请参阅 参考资料：WCAG 2.2。
🧱 语义化 HTML 与 ARIA
- 地标：
<main>、<nav>、<aside>。 - ARIA：仅在原生 HTML 无法满足需求时使用。
- 表单：使用明确的标签，并通过
aria-describedby提供提示。
📖 参考资料库
UI/UX 实现详解：
- WCAG 2.2 标准：合规要求和成功标准。
- 语义化 HTML 与 ARIA：打下坚实基础。
- 包容性设计：面向人类多样性进行设计。
- UI 模式：视觉和结构设计标准。
更新于：2026 年 1 月 22 日 - 20:05
评论
支持 Markdown