Claude Code optimize-ux：整理 React 加载反馈和可见焦点
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/optimize-ux/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/optimize-ux/`，把核对后的文件保存为 `.claude/skills/optimize-ux/SKILL.md`。
- 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/optimize-ux`。
中文摘要
检查现有 React 组件的异步状态、提示和键盘焦点，在项目具备动效组件时改善状态切换。
SKILL.md 中文导读
可复现示例
列表样例 ui-42 从远程加载课程。开始状态为 {loading: true}。失败时要明确提示“Could not load courses”，重试按钮需可用键盘定位。工作步骤
- 对照现有请求流程，核对正常、等待和失败时用户能得到的反馈。
- 按项目组件实现状态展示，并验证键盘焦点和错误恢复。
验收方法
保留原请求行为。等待时显示占位，失败时状态记录 {loading: false, message: 'Could not load courses', retryFocusable: true}。
GitHub 原文 · 更新日期
适用环境
在 Claude Code 中打开目标 React 项目。完整动效示例需要工程已有的 Framer Motion、React Router 与相应的 UI 组件。
常见问题
图标按钮既有悬浮提示还需语义名称吗？
需要。可见提示给鼠标操作补充说明，语义名称让辅助技术能够识别按钮；键盘焦点也应可见。