form-builder
一个帮助AI智能体在React/TypeScript项目中构建生产级表单的Skill。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：form-builder。 它的用途是：一个帮助AI智能体在React/TypeScript项目中构建生产级表单的Skill。 完整的 Skill 内容见：https://321skill.com/skills/form-builder/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要创建一个用户注册表单，要求验证邮箱、密码强度，并处理提交状态。”，它会应用form-builder Skill，生成一个使用React Hook Form和Zod的完整组件，包含字段定义、验证规则、错误处理和加载状态逻辑。
介绍
form-builder Skill 旨在解决开发者在React/TypeScript项目中构建健壮、可维护表单时的重复劳动问题。它封装了React Hook Form的最佳实践、Zod验证模式以及表单状态管理逻辑，让开发者无需从零开始设计表单架构。
安装后，当您向AI助手提出创建表单、添加验证或实现多步骤流程等需求时，它会自动应用此Skill中的模式，生成结构清晰、类型安全且可直接运行的代码。
该Skill非常适合前端开发、全栈开发等角色，他们经常需要在项目中快速构建用户输入界面，并希望确保代码质量和开发效率。
使用建议：该Skill专注于“如何构建”，建议与负责合规性（如compliance-rules）和视觉设计（如design-guidelines）的Skill搭配使用，以覆盖表单开发的完整生命周期。
核心特点
该Skill并非简单的代码片段集合，而是提供了完整的、可组合的React Hook Form与Zod集成模式，并明确区分了表单构建与合规、设计等关注点，实现了职责分离。
注意事项
该Skill不提供UI组件、具体业务逻辑或数据提交后的处理实现，主要关注表单的构建模式和前端验证。
常见问题
这个Skill能帮我生成完整的UI界面吗？
不能，它专注于表单的逻辑结构、验证和状态管理，不包含具体的UI组件样式或布局。
它支持哪些验证库？
核心使用Zod进行类型安全的验证，并通过@hookform/resolvers与React Hook Form集成。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/form-builder/raw/index.md 读取 form-builder 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/form-builder/raw/index.md（查看排版版本）