playbooks

home / skills / bbeierle12 / skill-mcp-claude / forms-router

forms-router skill

/skills/forms-router

This skill routes and combines core form skills for accessibility, validation, and security across React, Vue, or vanilla forms.

npx playbooks add skill bbeierle12/skill-mcp-claude --skill forms-router

Review the files below or copy the command above to add this skill to your agents.

Files (3)
SKILL.md
3.7 KB
---
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

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)
| 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.

Overview

This skill is a routing assistant for web form development that selects the right specialized form skills based on framework, form type, and signals. Use it to orchestrate accessibility, validation, security, UX patterns, and framework-specific implementations so you load the minimal, correct set of helpers for a production form. It’s a starting point that recommends 3–4 skills per project and enforces core principles like schema-first design and sensible chunking.

How this skill works

The router classifies the project by identifying the framework (React, Vue, or vanilla) and the form type (standard, auth, wizard, etc.). It then matches input signals (keywords or requirements) to a prioritized list of skills and combines them into a recommended bundle. Priority rules ensure framework-specific needs and security/auth contexts are handled first, while always including accessibility and validation by default.

When to use it

  • Beginning a new form project to determine which specialized skills to include
  • Refactoring an existing form to ensure accessibility, validation, and security are covered
  • Designing multi-step or conditional forms that need UX pattern guidance
  • Implementing auth-related forms where security and autocomplete handling are critical
  • Choosing framework-specific wiring (React Hook Form, VeeValidate, or native APIs)

Best practices

  • Always include Tier 1 skills: accessibility, validation, and security for production forms
  • Start schema-first: define a Zod (or equivalent) schema to drive validation and types
  • Prefer early validation feedback (validate on change) and avoid only validating on blur
  • Limit logical groups to 5–7 fields and chunk large forms into steps when needed
  • Respect signal priority: explicit framework signals determine the framework skill
  • When unclear, ask which framework (React, Vue, or vanilla) before coding

Example use cases

  • Standard React contact form → recommends accessibility + validation + react + security
  • Registration/login page → prioritizes security + accessibility + validation + framework skill
  • Multi-step onboarding wizard → recommends UX patterns + per-step validation + accessibility + framework integration
  • Plain JS survey → suggests vanilla APIs + manual ARIA handling + security for autocomplete
  • Vue complex form with conditional fields → routes to vue + validation + ux-patterns + accessibility

FAQ

What if the framework is not specified?

Ask the developer whether they want React, Vue, or vanilla; if still unknown, default recommendations lean toward React as the most common target.

How many skills should I include for a production form?

Aim for 3–4 skills: always include accessibility, validation, and security, plus one framework or UX-patterns skill as required by complexity.