用途
本技能为 React/TypeScript 应用提供专业的 UI/UX 设计能力，适合在设计新功能、优化用户体验、解决用户问题或进行设计评审时使用。它是对通用 UX Designer 技能的扩展：通用技能负责设计思维流程、用户心理学、启发式评估和研究方法，而本技能专注于将这些原则落地到 React 的具体实现中。
主要能力
React 交互模式
- 使用 Framer Motion 实现微交互，包括复选框缩放动画、按钮按压反馈（whileTap/whileHover）、Toast 通知（入场与退场动画）。
- 加载状态：优先采用骨架屏（skeleton）而非旋转指示器，长操作使用进度指示条。
- 乐观 UI 模式：先更新界面，请求失败时回滚并提示错误。
React 无障碍模式
- 焦点管理：模态框打开时聚焦首个可聚焦元素，并在模态框内捕获 Tab 焦点，按 Escape 关闭。
- 键盘导航：自定义快捷键（如 ⌘K / Ctrl+K 打开命令面板）、列表中的方向键导航。
- 动效无障碍：通过 prefers-reduced-motion 媒体查询尊重用户的减少动效偏好。
表单 UX 模式
- React Hook Form 集成，配合 aria-invalid、aria-describedby 与内联错误提示。
- 内联验证策略：失焦时验证、聚焦时清除错误。
模态框与对话框模式
- 确认对话框：带 alertdialog 角色、aria-modal、aria-labelledby、aria-describedby 等无障碍属性的动画弹窗。
- 命令面板（⌘K 模式）：带 listbox/option 角色、自动补全提示的过滤式命令列表。
空状态与错误状态
- 空状态：图标、标题、描述与操作按钮。
- 错误状态：告警角色、错误信息与重试按钮。
React UX 检查清单
涵盖交互质量（即时反馈、加载状态、乐观更新、60fps 动画）、无障碍（键盘导航、焦点管理、减少动效偏好、ARIA 标签）、表单（内联验证、清晰错误信息、智能默认值、多步进度指示）。
使用方式
该技能以 SKILL.md 形式提供，安装与调用方式暂未提供。文档内包含大量可直接参考的 React/TypeScript 代码示例，覆盖动画、加载、无障碍、表单、弹窗等常见场景，且明确引用通用 UX Designer 技能、UX Principles 与 Design Patterns 共享文档作为延伸阅读。
适用场景
适用于 React 前端功能设计与评审、交互细节打磨、无障碍改进、表单体验优化以及空/错误状态设计。
限制
定价、平台支持情况与其他未在资料中提及的信息暂未提供。