用途
本技能用于构建和审查前端功能，围绕组件驱动设计、无障碍、性能和可维护性提供约束与检查。当用户要求构建或修改页面/组件、创建共享 UI 基础组件或设计令牌、修复无障碍、响应式或性能回归时使用。
主要能力
- 定义用户成果与交互状态（加载、空、错误、成功）。
- 在创建一次性组件之前，先识别可复用的基础组件。
- 使用语义化 HTML 和键盘无障碍实现。
- 确保跨断点的响应式行为。
- 通过 lint、测试和视觉检查进行验证。
使用方式
技能提供了一套工作流程：
- 定义用户成果和交互状态（加载、空、错误、成功）。
- 在创建一次性组件之前识别可复用的基础组件。
- 使用语义化 HTML 和键盘无障碍实现。
- 确保跨断点的响应式行为。
- 通过 lint、测试和视觉检查进行验证。
同时包含必需检查项：
- ARIA 使用最少且正确
- 焦点顺序保持
- 颜色对比度和点击目标可接受
- 包体积影响合理
- 关键用户路径有测试覆盖
决策框架：
- 优先选择在团队增长下仍能保持可维护性的最简单架构。
- 在实现前明确渲染、状态和 API 边界决策。
- 如果功能影响关键用户旅程，要求进行性能和可访问性检查。
- 如果引入依赖，需证明包体积和长期维护成本合理。
常见借口与反驳：
- “我们可以以后再优化。” -> 性能债务会迅速累积；现在就设定预算。
- “无障碍是润色。” -> 无障碍是核心行为，应与功能一起交付。
- “一个全局状态存储最简单。” -> 过度集中会增加耦合，减慢迭代。
证据包：
- 变更流程的 UX 状态覆盖（加载、空、错误、成功）
- 键盘、焦点和语义的无障碍检查
- 关键路由或交互的性能快照
- 关键用户路径的测试证据
退出标准：
- 工作流决策已记录且可实施
- 存在质量、可靠性和兼容性的验证证据
- 运维就绪和回滚预期明确
适用场景
- 构建或修改页面/组件
- 创建共享 UI 基础组件或设计令牌
- 修复无障碍、响应式或性能回归
限制
资料未提供关于收费、价格、平台支持、具体效果或详细使用步骤的更多信息。