mcpField
F
forms-router

forms-router

github.com/bbeierle12开发955 次安装1 天前更新
代码仓库

关于 forms-router

forms-router 根据任务需求，将表单开发工作路由到 7 个专门技能，供需要组合表单实现指南的开发者使用。它依据框架、表单类型和复杂度匹配技能，并规定加载顺序与常见组合。

主要功能

  1. 01识别框架和表单类型
  2. 02按信号匹配专门技能
  3. 03为生产表单组合多项技能
  4. 04提供常见任务组合与决策表
  5. 05为缺少信息的请求提供回退规则

适用场景

  1. 01为 React 表单选择相关技能
  2. 02规划包含多步骤的表单向导
  3. 03为登录表单组合安全与无障碍指导

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill forms-router

安装后在 Claude Code 中输入/forms-router确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

_meta.json
references/
accessibility.md
integration-guide.md
react.md
security.md
ux-patterns.md
validation.md
vanilla.md
vue.md

详细介绍

表单路由器

根据任务需求路由到 7 个专用技能。

路由协议

  1. 分类 — 确定框架和表单类型
  2. 匹配 — 应用下方的信号匹配规则
  3. 组合 — 生产环境表单至少需要 3-4 个技能
  4. 加载 — 编写代码前读取匹配的 SKILL.md 文件

快速路由

第 1 层：核心（始终包含）
需求技能信号
WCAG 合规、ARIAform-accessibility无障碍、ARIA、屏幕阅读器、键盘、焦点、a11y
Zod schema、时机form-validation验证、Zod、schema、错误、必填、模式
自动填充、CSRF、XSSform-security自动填充、密码管理器、CSRF、XSS、清理
第 2 层：框架
需求技能信号
React Hook Form / TanStackform-reactReact、useForm、RHF、TanStack、formState
VeeValidate / Vuelidateform-vueVue、VeeValidate、Vuelidate、v-model
无框架form-vanilla原生、纯 JS、原生、约束验证
第 3 层：增强型 UX
需求技能信号
向导、分组、条件逻辑form-ux-patterns多步骤、向导、渐进式、条件、步骤条

信号优先级

存在多个信号时：

  1. 明确的框架 — React/Vue/vanilla 决定第 2 层的选择
  2. 身份验证上下文 — 登录/注册会触发 form-security 优先
  3. 复杂度 — 向导/多步骤会触发 form-ux-patterns
  4. 默认规则 — 始终包含第 1 层的所有技能

常见组合

标准生产环境表单（4 个技能）
form-accessibility → WCAG, ARIA binding
form-validation → Zod schemas, timing
form-react → RHF integration
form-security → autocomplete attributes
安全身份验证表单（4 个技能）
form-security → autocomplete, CSRF (priority)
form-accessibility → focus, error announcements
form-validation → auth schema
form-react → controlled submission
多步骤向导（4 个技能）
form-ux-patterns → chunking, navigation
form-validation → per-step validation
form-accessibility → focus on step change
form-react → FormProvider context
无框架表单（3 个技能）
form-vanilla → Constraint Validation API
form-accessibility → manual ARIA
form-security → autocomplete

决策表

框架表单类型技能
React标准accessibility + validation + security + react
React身份验证security + accessibility + validation + react
React向导ux-patterns + validation + accessibility + react
Vue标准accessibility + validation + security + vue
Vue复杂accessibility + validation + ux-patterns + vue
无任意vanilla + accessibility + security

核心原则（所有技能）

Schema 优先：定义 Zod schema → 推断 TypeScript 类型
时机：及时奖励（有效时显示 ✓），延迟惩罚（仅在失焦时显示 ✗）
自动填充：身份验证表单中绝不能省略
分组：每个逻辑组最多包含 5-7 个字段

回退方案

  • 未指定框架 → 询问：“React、Vue 还是 vanilla JS？”
  • 复杂度不明确 → 从第 1 层技能和框架技能开始
  • 缺少上下文 → 默认使用 form-react（最常见）

参考

有关完整的接线模式和代码示例，请参阅 references/integration-guide.md。

评论

支持 Markdown