forge-town/skills

forge_form-best-practice

Must follow when 创建或重构前端表单组件,确保表单结构、字段验证逻辑和状态管理遵循项目表单设计规范与组件化标准。

Installation

$ npx skills add forge-town/skills --skill forge_form-best-practice

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

Also in this package

Other skills from forge-town/skills · top by installs.

npx skills add forge-town/skills

Browse all from forge-town/skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 7
License LICENSE
Default branch main
Open issues 0
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,342 B
  • docs SUMMARY.md 190 B

History

  1. First recorded snapshot · 1 installs

SKILL.md

表单最佳实践

本 Skill 指导在 TypeScript + React + shadcn/ui + react-hook-form + Zod 架构下,编写符合规范的表单组件。

使用说明

  1. 阅读 [表单最佳实践指南](references/forge_form-best-practice-guide.md),了解"两棵树"模型与状态隔离原则
  2. 参考 [示例代码](best-practice-examples/CreateUserForm.tsx) 了解标准写法
  3. 使用 [检查清单](references/checklist.md) 验证生成或重构的表单组件

关键规范

  • react-hook-form 独立管理表单状态:禁止使用 useStateuseReducer 管理表单字段
  • 禁止与 zustand 直接绑定:表单是独立沙盒,仅在提交时通过副本对外输出数据
  • 字段必须通过 FormField 接入:使用 render={({ field }) => <Input {...field} />} 模式
  • 初始值深拷贝副本defaultValues 必须是原始数据的深拷贝,避免双向污染
  • Zod + zodResolver 校验:必须使用 Zod Schema 定义表单结构并集成到 useForm
  • 子组件通过 FormProvider 共享上下文:禁止逐层传递 controlregister