forms-router

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.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "forms-router" with this command: npx skills add bbeierle12/skill-mcp-claude/bbeierle12-skill-mcp-claude-forms-router

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.

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

Security

form-security

No summary provided by upstream source.

Repository SourceNeeds Review
General

gsap-react

No summary provided by upstream source.

Repository SourceNeeds Review
General

gsap-scrolltrigger

No summary provided by upstream source.

Repository SourceNeeds Review