forms-router

v2026.09.24

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.

GitHub
Install command
npx skhub add bbeierle12/forms-router
Markdown
SKILL.md

Forms Router

Routes to 7 specialized skills based on task requirements.

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

Quick Route

Tier 1: Core (Always Include)

NeedSkillSignals
WCAG compliance, ARIAform-accessibilityaccessible, ARIA, screen reader, keyboard, focus, a11y
Zod schemas, timingform-validationvalidate, Zod, schema, error, required, pattern
Autocomplete, CSRF, XSSform-securityautocomplete, password manager, CSRF, XSS, sanitize

Tier 2: Framework

NeedSkillSignals
React Hook Form / TanStackform-reactReact, useForm, RHF, TanStack, formState
VeeValidate / Vuelidateform-vueVue, VeeValidate, Vuelidate, v-model
No frameworkform-vanillavanilla, plain JS, native, constraint validation

Tier 3: Enhanced UX

NeedSkillSignals
Wizards, chunking, conditionalsform-ux-patternsmulti-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

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

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

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.

Discovery
Tags

No tags published for this skill.

Version
Latest version metadata

Version

v2026.09.24

Published

Sep 24, 2026

Category

Uncategorized

License

MIT

Source path

skills/forms-router

Default branch

main

Latest commit

32c91ff

Tree SHA

4500f9d