Forms Router
Routes to 7 specialized skills based on task requirements.
Routing Protocol
- Classify — Identify framework + form type
- Match — Apply signal matching rules below
- Combine — Production forms need 3-4 skills minimum
- Load — Read matched SKILL.md files before coding
Quick Route
Tier 1: Core (Always Include)
| Need |
Skill |
Signals |
| 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 |
Tier 2: Framework
| Need |
Skill |
Signals |
| 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 |
Tier 3: Enhanced UX
| Need |
Skill |
Signals |
| Wizards, chunking, conditionals |
form-ux-patterns |
multi-step, wizard, progressive, conditional, stepper |
Signal Priority
When multiple signals present:
- Framework explicit — React/Vue/vanilla determines Tier 2 choice
- Auth context — Login/registration triggers
form-security priority
- Complexity — Wizard/multi-step triggers
form-ux-patterns
- Default — Always include all Tier 1 skills
Common Combinations
Standard Production Form (4 skills)
form-accessibility → WCAG, ARIA binding
form-validation → Zod schemas, timing
form-react → RHF integration
form-security → autocomplete attributes
Secure Auth Form (4 skills)
form-security → autocomplete, CSRF (priority)
form-accessibility → focus, error announcements
form-validation → auth schema
form-react → controlled submission
Multi-Step Wizard (4 skills)
form-ux-patterns → chunking, navigation
form-validation → per-step validation
form-accessibility → focus on step change
form-react → FormProvider context
Framework-Free Form (3 skills)
form-vanilla → Constraint Validation API
form-accessibility → manual ARIA
form-security → autocomplete
Decision Table
| Framework |
Form Type |
Skills |
| React |
Standard |
accessibility + validation + security + react |
| React |
Auth |
security + accessibility + validation + react |
| React |
Wizard |
ux-patterns + validation + accessibility + react |
| Vue |
Standard |
accessibility + validation + security + vue |
| Vue |
Complex |
accessibility + validation + ux-patterns + vue |
| None |
Any |
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
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)
Reference
See references/integration-guide.md for complete wiring patterns and code examples.
1---2name: forms-router3description: Router for web form development. Use when creating forms, handling validation, user input, or data entry across React, Vue, or vanilla JavaScript. Routes to 7 specialized skills for accessibility, validation, security, UX patterns, and framework-specific implementations. Start here for form projects.4---56# Forms Router78Routes to 7 specialized skills based on task requirements.910## Routing Protocol11121. **Classify** — Identify framework + form type132. **Match** — Apply signal matching rules below143. **Combine** — Production forms need 3-4 skills minimum154. **Load** — Read matched SKILL.md files before coding1617## Quick Route1819### Tier 1: Core (Always Include)20| Need | Skill | Signals |21|------|-------|---------|22| WCAG compliance, ARIA | `form-accessibility` | accessible, ARIA, screen reader, keyboard, focus, a11y |23| Zod schemas, timing | `form-validation` | validate, Zod, schema, error, required, pattern |24| Autocomplete, CSRF, XSS | `form-security` | autocomplete, password manager, CSRF, XSS, sanitize |2526### Tier 2: Framework27| Need | Skill | Signals |28|------|-------|---------|29| React Hook Form / TanStack | `form-react` | React, useForm, RHF, TanStack, formState |30| VeeValidate / Vuelidate | `form-vue` | Vue, VeeValidate, Vuelidate, v-model |31| No framework | `form-vanilla` | vanilla, plain JS, native, constraint validation |3233### Tier 3: Enhanced UX34| Need | Skill | Signals |35|------|-------|---------|36| Wizards, chunking, conditionals | `form-ux-patterns` | multi-step, wizard, progressive, conditional, stepper |3738## Signal Priority3940When multiple signals present:411. **Framework explicit** — React/Vue/vanilla determines Tier 2 choice422. **Auth context** — Login/registration triggers `form-security` priority433. **Complexity** — Wizard/multi-step triggers `form-ux-patterns`444. **Default** — Always include all Tier 1 skills4546## Common Combinations4748### Standard Production Form (4 skills)49```50form-accessibility → WCAG, ARIA binding51form-validation → Zod schemas, timing52form-react → RHF integration53form-security → autocomplete attributes54```5556### Secure Auth Form (4 skills)57```58form-security → autocomplete, CSRF (priority)59form-accessibility → focus, error announcements60form-validation → auth schema61form-react → controlled submission62```6364### Multi-Step Wizard (4 skills)65```66form-ux-patterns → chunking, navigation67form-validation → per-step validation68form-accessibility → focus on step change69form-react → FormProvider context70```7172### Framework-Free Form (3 skills)73```74form-vanilla → Constraint Validation API75form-accessibility → manual ARIA76form-security → autocomplete77```7879## Decision Table8081| Framework | Form Type | Skills |82|-----------|-----------|--------|83| React | Standard | accessibility + validation + security + react |84| React | Auth | security + accessibility + validation + react |85| React | Wizard | ux-patterns + validation + accessibility + react |86| Vue | Standard | accessibility + validation + security + vue |87| Vue | Complex | accessibility + validation + ux-patterns + vue |88| None | Any | vanilla + accessibility + security |8990## Core Principles (All Skills)9192**Schema-first**: Define Zod schema → infer TypeScript types 93**Timing**: Reward early (✓ on valid), punish late (✗ on blur only) 94**Autocomplete**: Never optional for auth forms 95**Chunking**: Max 5-7 fields per logical group9697## Fallback9899- **No framework stated** → Ask: "React, Vue, or vanilla JS?"100- **Ambiguous complexity** → Start with Tier 1 + framework skill101- **Missing context** → Default to `form-react` (most common)102103## Reference104105See `references/integration-guide.md` for complete wiring patterns and code examples.
aibot88