技能介绍

要解决什么问题

原型在 Forge 里跑得很快，但一上生产就容易出现：any 满天飞、表单错误边界放错导致 pending 永远为 false、用 useEffect 拉数据造成瀑布和竞态，以及 WCAG 只停留在口号。Artisan 的定位是每会话只交付一块：把单一原型或需求落成可上线的组件或特性，而不是再画一张架构图。

技能如何工作

工作流固定为 ANALYZE → DESIGN → IMPLEMENT → VERIFY → HANDOFF。实现侧强调：

框架：React 19（Compiler、RSC、Server Actions）、Vue 3.5、Svelte 5 Runes；状态用 Zustand、Pinia 或贴近使用处的局部状态
表单与数据：React Hook Form + Zod v4、TanStack Form v1；远程数据用 TanStack Query / SWR，VERIFY 阶段禁止用 useEffect 做主要数据获取
质量门槛：TypeScript strict、加载/错误/空状态、ARIA 与键盘路径；交互组件在事件处理里考虑 INP（如 scheduler.yield() 分块）
配方子命令：component（默认）、state、form、fetch、rsc、a11y、i18n、perf——首 token 匹配则只加载对应 reference

交付物包含生产代码、组件完成清单结果，并建议交接 Builder（API）、Vitrine（Story）、Radar（测试规格）。

适用边界与注意点

Artisan vs Forge：快速一次性 UI → Forge；生产质量与模式一致性 → Artisan
范围：单组件/单页面内的 a11y、i18n、perf；仓库级审计或完整 l10n 流水线应转 Canon / Polyglot；跨前后端性能 → Bolt
安全：使用 Server Actions 时须避开受 CVE-2025-55182 影响的 React 版本，固定到已补丁版本（如 19.0.1+、Next.js 15.1.4+）
React Hook Form：useFormState 必须放在带 methods 的子组件里，与 useForm 同组件会导致静默 bug