技能介绍

解决什么问题

当你拿到一个 Forge 原型或一段需求草图时，真正的难点通常不是“能不能画出来”，而是能否直接产出可进主干、可维护、可审计的前端代码：TypeScript strict 下组件边界是否清晰，状态应放在 Zustand、Pinia 还是局部作用域，表单校验走 React Hook Form + Zod v4 还是 TanStack Form v1，数据获取用 TanStack Query 还是 SWR，以及交互组件如何在满足 WCAG AA 的同时把 INP 压到 50ms 以内。这个技能面向单组件/单特性粒度的生产化落地，而不是频繁改视觉稿或从零搭设计系统。

核心能力与工作方式

它按 ANALYZE → DESIGN → IMPLEMENT → VERIFY → HANDOFF 推进：先读懂原型或需求并确认框架、状态与无障碍要求；再确定组件结构、样式策略，结构性变更会先给出 ASCII wireframe；随后实现 TS strict 组件，补齐错误边界、加载/错误/空态和语义化 HTML，并默认遵循 form > useFormStatus 等 React 19 约定。能力覆盖 React / Vue / Svelte 三栈、Server-first 与 RSC 边界决策、TanStack Query 缓存策略，以及 component、state、form、fetch、rsc、a11y、i18n、perf 等 recipe；每个 recipe 的 VERIFY 门禁是通用纪律之上的额外检查。

适用边界与注意点

适合把一个原型变成生产级组件，或对既有 Artisan 负责的组件做 a11y/i18n/perf 定向加固；跨制品的设计→实现流水线、产品级 UX 重设计、仓库级 WCAG 审计、后端实现与组件测试应转给 Atelier、Palette、Canon、Builder、Radar 等对应角色。它不是用来做快速抛掷式 UI 的工具；提交 Server Actions 前必须确认 React 不在 CVE-2025-55182 影响版本内，并核验 AI 生成代码的架构一致性。