用途：当任务涉及 React 组件、Hook、Context、表单、列表、副作用或状态时启用，也用于排查组件过度重渲染、effect 循环、状态应放在何处等问题。不适合框架级 Server/Client Component、数据缓存、路由决策（改用 $specsfy-specialist-nextjs），也不适合选择现成视觉组件库。
流程：先阅读 INTERFACE.md 与规格中的界面部分，确认屏幕、信息流、字段、校验、打开方式与可见状态；若材料缺失，退回 UX/UI 设计技能，不得用空组件替代既有界面。确认 React 版本、渲染器、框架、项目约定与测试策略；若 .specsfy/STACK.md 未声明 React 则不应实施。建模可见状态（nominal、loading、empty、error、stale、optimistic）及其触发事件与数据归属；设计职责与 props 精简的组件树，优先用组合（children、slots）而非大量布尔标志；状态放在最近能解决它的拥有者，渲染期派生值而非用 useEffect 同步；effect 仅用于同步外部系统。先实现 HTML 语义与键盘导航，再写可观测行为的测试；仅在存在真实性能症状时（profiler、生产指标）才测量并进行 memo。最后在 INTERFACE.md 记录每个块的职责、文件、props、事件、状态、无障碍与消费屏幕。
约定：组合优先；Laravel + React 场景用 shadcn/ui 作 primitives、ReUI 作免费组合；不要把 prop 复制进 state，不用 useEffect 计算可派生值；loading、empty、error、stale、success 应作为显式 UI 状态；列表使用来自数据的稳定 id 作 key；按变更频率拆分 Context；无测量不做 memo；按用户可观测行为测试。
反模式：用 effect 把 prop 同步进本地状态、effect 链、依赖数组不全并用 eslint-disable 掩盖过时闭包、单一“万能 context”、为修复 Hook 错误而滥用 "use client"。
验证：键盘遍历改动面，必要时以读屏器测试；为流程中每个状态及错误恢复编写测试；检查控制台 React 警告与 SSR hydration 警告；仅在具体性能假设下做 profiling/bundle 分析并附前后测量；无上述证据不得宣称“可访问”或“高性能”。
相关技能：$specsfy-specialist-reui、$specsfy-specialist-astro、$specsfy-specialist-shadcn-ui、$specsfy-specialist-tailwind-css、$specsfy-specialist-nextjs、$specsfy-specialist-react-ui-components、$specsfy-specialist-ui-design、$specsfy-specialist-typescript、$specsfy-specialist-web-accessibility。更多细节见 references/standards.md。