Claude Code 快速检查界面可用性
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/ux-review/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/ux-review/`，把核对后的文件保存为 `.claude/skills/ux-review/SKILL.md`。
- 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/ux-review`。
中文摘要
用短表列出组件中明显的无障碍、响应式、设计规范和状态问题，标明位置和修法。
SKILL.md 中文导读
可复现示例
活动过滤卡在窄屏有问题。示例 `{location:'FilterCard:12',width:520,viewport:360,label:'missing',state:'empty missing'}`。输入缺关联标签，清空结果后区域留白。工作步骤
- 检查指定组件的标签、窄屏布局、样式和加载或空结果状态。
- 把每个可观察的问题、所在位置和修法填写到短表。
验收方法
在问题表列出 `[width overflow, missing label, empty state]`，位置分别指向样式、输入和结果区。给出响应宽度、绑定输入标签、增加无结果提示三个修法。
GitHub 原文 · 更新日期
适用环境
Claude Code 可读取待查页面或组件。示例提供虚构的移动界面和已有设计约定。
常见问题
列表空白、表单标签缺失和窄屏溢出怎么汇报？
输出问题、位置和修法三列。说明影响出在哪个组件，给出对应的响应式、标签和状态修改。