forms-router

by @Bbeierle12 in Development

# Install this skill:

npx skills add Bbeierle12/Skill-MCP-Claude --skill "forms-router"

Install specific skill from multi-skill repository

# Description

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.

# SKILL.md

name: forms-router
description: 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.

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:
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

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.

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚡ Amp 🚀 Antigravity 🤖 Claude Code 🦀 Clawdbot 📝 Codex ▶️ Cursor 🤖 Droid 💎 Gemini CLI 🐙 GitHub Copilot 🪿 Goose 📊 Kilo Code 🔧 Kiro CLI 💻 OpenCode 🦘 Roo Code 🌲 Trae 🏄 Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.