Back to Details

forms-router

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Forms Router

表单路由工具

Routes to 7 specialized skills based on task requirements.
根据任务需求，可路由至7个专业技能模块。

Routing Protocol

路由规则

  1. Classify — Identify framework + form type
  2. Match — Apply signal matching rules below
  3. Combine — Production forms need 3-4 skills minimum
  4. Load — Read matched SKILL.md files before coding
  1. 分类 — 确定框架 + 表单类型
  2. 匹配 — 应用以下信号匹配规则
  3. 组合 — 生产环境表单至少需要3-4个技能模块
  4. 加载 — 编码前先阅读匹配的SKILL.md文件

Quick Route

快速路由

Tier 1: Core (Always Include)

核心模块（必选）

NeedSkillSignals
WCAG compliance, ARIA
form-accessibility
accessible, ARIA, screen reader, keyboard, focus, a11y
Zod schemas, timing
form-validation
validate, Zod, schema, error, required, pattern
Autocomplete, CSRF, XSS
form-security
autocomplete, password manager, CSRF, XSS, sanitize
需求技能模块信号关键词
WCAG合规、ARIA
form-accessibility
accessible, ARIA, screen reader, keyboard, focus, a11y
Zod schema、时机控制
form-validation
validate, Zod, schema, error, required, pattern
自动补全、CSRF、XSS防护
form-security
autocomplete, password manager, CSRF, XSS, sanitize

Tier 2: Framework

框架专属模块

NeedSkillSignals
React Hook Form / TanStack
form-react
React, useForm, RHF, TanStack, formState
VeeValidate / Vuelidate
form-vue
Vue, VeeValidate, Vuelidate, v-model
No framework
form-vanilla
vanilla, plain JS, native, constraint validation
需求技能模块信号关键词
React Hook Form / TanStack
form-react
React, useForm, RHF, TanStack, formState
VeeValidate / Vuelidate
form-vue
Vue, VeeValidate, Vuelidate, v-model
无框架
form-vanilla
vanilla, plain JS, native, constraint validation

Tier 3: Enhanced UX

增强UX模块

NeedSkillSignals
Wizards, chunking, conditionals
form-ux-patterns
multi-step, wizard, progressive, conditional, stepper
需求技能模块信号关键词
向导流程、分块、条件渲染
form-ux-patterns
multi-step, wizard, progressive, conditional, stepper

Signal Priority

信号优先级

When multiple signals present:
  1. Framework explicit — React/Vue/vanilla determines Tier 2 choice
  2. Auth context — Login/registration triggers 
    form-security
    priority
  3. Complexity — Wizard/multi-step triggers 
    form-ux-patterns
  4. Default — Always include all Tier 1 skills
当存在多个信号时：
  1. 框架明确指定 — React/Vue/原生JS决定框架专属模块的选择
  2. 认证场景 — 登录/注册场景优先触发
    form-security
  3. 复杂度 — 向导/多步表单触发
    form-ux-patterns
  4. 默认规则 — 始终包含所有核心模块

Common Combinations

常见组合

Standard Production Form (4 skills)

标准生产环境表单（4个模块）

form-accessibility → WCAG, ARIA binding
form-validation → Zod schemas, timing
form-react → RHF integration
form-security → autocomplete attributes
form-accessibility → WCAG、ARIA绑定
form-validation → Zod schema、时机控制
form-react → RHF集成
form-security → 自动补全属性

Secure Auth Form (4 skills)

安全认证表单（4个模块）

form-security → autocomplete, CSRF (priority)
form-accessibility → focus, error announcements
form-validation → auth schema
form-react → controlled submission
form-security → 自动补全、CSRF（优先级）
form-accessibility → 焦点管理、错误提示播报
form-validation → 认证schema
form-react → 受控提交

Multi-Step Wizard (4 skills)

多步向导表单（4个模块）

form-ux-patterns → chunking, navigation
form-validation → per-step validation
form-accessibility → focus on step change
form-react → FormProvider context
form-ux-patterns → 分块、导航
form-validation → 分步验证
form-accessibility → 步骤切换时的焦点管理
form-react → FormProvider上下文

Framework-Free Form (3 skills)

无框架表单（3个模块）

form-vanilla → Constraint Validation API
form-accessibility → manual ARIA
form-security → autocomplete
form-vanilla → 约束验证API
form-accessibility → 手动ARIA配置
form-security → 自动补全

Decision Table

决策表

FrameworkForm TypeSkills
ReactStandardaccessibility + validation + security + react
ReactAuthsecurity + accessibility + validation + react
ReactWizardux-patterns + validation + accessibility + react
VueStandardaccessibility + validation + security + vue
VueComplexaccessibility + validation + ux-patterns + vue
NoneAnyvanilla + accessibility + security
框架表单类型技能模块
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

Core Principles (All Skills)

核心原则（所有技能模块通用）

Schema-first: Define Zod schema → infer TypeScript types
Timing: Reward early (✓ on valid), punish late (✗ on blur only)
Autocomplete: Never optional for auth forms
Chunking: Max 5-7 fields per logical group
Schema优先：先定义Zod schema → 推导TypeScript类型
时机控制：正确输入即时反馈（✓ 验证通过），仅在失焦时提示错误（✗ 延迟惩罚）
自动补全：认证表单必须启用
分块原则：每个逻辑组最多5-7个字段

Fallback

Fallback机制

  • No framework stated → Ask: "React, Vue, or vanilla JS?"
  • Ambiguous complexity → Start with Tier 1 + framework skill
  • Missing context → Default to 
    form-react
    (most common)
  • 未指定框架 → 询问：“使用React、Vue还是原生JS？”
  • 复杂度不明确 → 从核心模块 + 框架专属模块开始
  • 上下文缺失 → 默认使用
    form-react
    （最常用）

Reference

参考资料

See 
references/integration-guide.md
for complete wiring patterns and code examples.
完整的集成模式和代码示例请查看
references/integration-guide.md
。