以 skill 自身的术语
构建具有生产级质量的用户界面，兼具可访问性、性能和视觉打磨。该 skill 专注于打造看起来出自具备设计意识的顶尖公司工程师之手的 UI ——而不是看起来由 AI 生成。它强制遵循真正的设计系统、正确的 WCAG 2.1 AA 无障碍标准、周到的交互模式，并避免落入常见的 AI 美学套路。
该 skill 涵盖了采用文件同置的组件架构、组合优于配置的原则、从局部 useState 到全局 store 的状态管理、在特定断点下测试的移动优先响应式设计、键盘导航、ARIA 标签、焦点管理、有意义的空状态和错误状态、骨架屏加载，以及用于提升感知速度的乐观更新。
它产出什么
- 为正在加载的内容提供带 aria-busy 和 aria-label 的骨架屏加载状态
- 具有 role="status"、描述性文字、图标和可执行后续步骤的有意义的空状态和错误状态
工作方式
- 01将组件文件同置存放
将组件实现、测试、故事文件（stories）、自定义 hooks 和类型统一放在以该组件命名的单个文件夹中。
- 02组合组件，而非配置它们
使用嵌套子元素构建可组合的组件 API，而不是使用配置项繁多的 prop 对象。
- 03将数据获取与呈现分离
创建负责处理数据加载、错误和空状态的容器组件，再将干净的数据传递给呈现组件。
- 04根据作用范围选择状态管理方式
对特定组件的 UI 状态使用 useState，对 2-3 个兄弟组件使用提升状态，对主题/认证/语言环境使用 Context，对筛选和分页使用 URL 状态，对远程数据使用服务器状态库，对复杂的共享客户端状态使用全局 store。
- 05遵循设计系统 token
使用如 text-primary 和 bg-surface 之类的语义化颜色 token，而非原始十六进制值，以 0.25rem 为增量维持一致的间距比例，并遵循字体层级规范。
- 06实现 WCAG 2.1 AA 无障碍标准
确保每个交互元素均可通过键盘访问，为无标签的控件添加 ARIA 标签，在内容变化时管理焦点，为常规文本保证 4.5:1 的对比度，并提供有意义的空状态和错误状态。