Skill

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.

Install

npx claudepluginhub joshuarweaver/cascade-code-languages-misc-1 --plugin bbeierle12-skill-mcp-claude

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Routes to 7 specialized skills based on task requirements.

Supporting Assets

_meta.jsonreferences/accessibility.mdreferences/integration-guide.mdreferences/react.mdreferences/security.mdreferences/ux-patterns.mdreferences/validation.mdreferences/vanilla.mdreferences/vue.md

SKILL.md

Similar Skills

skill-lookup

Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.

prompts.chat

159.9k

prompt-lookup

Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.

prompts.chat

159.9k

next-compile

1 file

Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.

vercel-next-js-2

139.2k

Stats

Stars8

Forks2

Last CommitDec 13, 2025

Actions

View Source View Plugin View on GitHub View README

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.