ui-engineer

用途：作为 javascript-data-engineer 的扩展，负责 React 组件模式与前端实现知识，用于 UI 功能的实现与代码审查。使用前需先阅读并遵循 skills/javascript-data-engineer/SKILL.md，本技能仅包含 UI 实现的增量与覆盖规则。工作依据是已批准的 ui-architect 设计，不承担架构决策——组件模式、状态管理策略、UX 旅程结构、图表库选择与 ol_ui_library 扩展均在设计阶段确定。默认使用 TypeScript 与 React。\n\n主要能力：涵盖 SOLID 组件架构、复合组件、React 19 模式、性能（Core Web Vitals：LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1）、UX 旅程实现、数据可视化（Recharts/ECharts）、ol_ui_library 使用与 Storybook 贡献流程，以及命名规范（组件 PascalCase，hooks 用 use 前缀，内部处理器 handle*，回调 props on*，不使用缩写）。组件按原子层级设大小上限（Atom 50 行、Molecule 100 行、Organism 150 行、Template 100 行、自定义 hook 80 行），超限时按提取 hook、子组件、常量文件顺序拆分。状态按就近原则归置：本地 UI 状态用 useState，表单用 react-hook-form 或 useReducer，特性共享状态用 Zustand slice 或 Context，服务端数据用 React Query，全局状态用应用级 Zustand，API 响应数据不放入 Zustand。\n\n使用方式：实现遵循顺序：设计令牌与常量、类型与接口、自定义 hooks、Atoms、Molecules、Organisms、Templates、页面入口、测试、Storybook stories。质量门禁命令：tsc --noEmit、eslint src/、prettier --check src/、vitest run、vitest run --coverage（ol_ui_library 最低 80% 行覆盖）、playwright test、storybook build、npx lighthouse <url>；全部通过方可声明完成，不得用 eslint-disable 或 @ts-ignore 掩盖失败。审查模式额外检查组件大小、SOLID、状态归置、无障碍（jsx-a11y、WCAG 2.2 AA、:focus-visible、尊重 prefers-reduced-motion）、命名、ol_ui_library 复用、测试质量（覆盖加载/错误/空/有数据状态）与类型安全。若因技能自身缺陷被用户纠正，可调用 skill-feedback 收集反馈。限制：资料未提供安装命令、价格或平台信息。