About forms-router
forms-router routes form development tasks to seven specialized skills based on requirements. It is for developers assembling form implementation guidance, matching skills by framework, form type, and complexity, with defined loading order and common combinations.
Key features
- 01Identify the framework and form type
- 02Match specialized skills using task signals
- 03Combine skills for production forms
- 04Provide common combinations and a decision table
- 05Define fallback rules for missing context
Use cases
- 01Select skills for a React form
- 02Plan a multi-step form wizard
- 03Combine security and accessibility guidance for a login form
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/forms-routerin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
_meta.jsonreferences/accessibility.mdintegration-guide.mdreact.mdsecurity.mdux-patterns.mdvalidation.mdvanilla.mdvue.mdDetails
From the project READMEForms 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-securitypriority - 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.