Agent Skills
返回列表
💻

前端生产级代码实现（React/Vue/Svelte）

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @org-02qudk26/1artisan。

技能介绍

问题

原型交付物常留下隐患：类型宽松、错误边界缺失、交互无法键盘操作、文案硬编码、数据请求写在 useEffect、敏感字段落在客户端，甚至依赖存在已知漏洞的 React 版本。前端组件若只完成视觉还原，往往还会带来权限检查分散、状态模式不一致、加载与失败状态不可用等生产问题。

工作方式

Artisan 以“一次转换一个原型、组件或功能”为核心边界，按 ANALYZE → DESIGN → IMPLEMENT → VERIFY → HANDOFF 执行。它优先读取 Forge 原型、设计方向或现有约束，再选择组件结构、状态管理、样式策略与数据获取方式。核心能力覆盖 React、Vue、Svelte 的生产组件实现：TypeScript strict、错误边界、Zustand / Pinia / Context、React Hook Form + Zod、TanStack Form、TanStack Query、SWR、Server Components / RSC、ARIA 与 WCAG 2.2 AA、t() + ICU + Intl 的 i18n 接线，以及列表虚拟化、动态导入、包体积审计等组件级性能处理。可用子命令包括 component、state、form、fetch、rsc、a11y、i18n、perf，默认进入组件构建流程。

边界与注意

它不替代产品级可用性重构、仓库级测试、动画设计或前后端性能治理：跨切面性能交给 Bolt，产品级 a11y 交给 Palette，仓库级 WCAG 交给 Canon，规模化 i18n 交给 Polyglot，API 交给 Builder，原型交给 Forge。使用前应确认 React / Next 版本已避开已知高危漏洞，避免把敏感数据写入客户端，并保证表单、加载、错误、空状态均有明确处理。

使用场景

  • 把 Forge 登录原型改成 React 组件，加入 Zod 校验、错误提示、加载和空态。
  • 将 Vue 订单页接入 TanStack Query，设计缓存策略、错误重试、骨架屏和空数据状态。
  • 为 Svelte 5 详情组件补 Runes、ARIA 标签、键盘导航和焦点恢复，满足 WCAG AA。
  • 把 SaaS 表格超 200 行的列表做虚拟化，动态导入非关键组件并审计路由包体积。

适合人员

  • 负责 SaaS 后台重构、需要把原型登录、表格、筛选组件改成生产级 React/Vue 组件的前端工程师。
  • 处理表单与权限流、希望统一 Zod 校验、错误提示、加载和空态的 B 端前端开发。
  • 负责 WCAG 整改、需要为现有组件补 ARIA、键盘路径、焦点管理和屏幕阅读器支持的可访问性工程师。
  • 维护 Svelte 5 仪表盘、需要整理 Runes、Pinia、i18n 和 RTL 布局的前端负责人。