How do I install the Execution Form Handling skill?

Run npx skillmds@latest add deankelly751/execution-form-handling in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Execution Form Handling safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Execution Form Handling?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Execution Form Handling free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Execution Form Handling?

DeanKelly751 (@deankelly751) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Execution Form Handling by deankelly751

Name: Execution Form Handling
Author: DeanKelly751

Execution Form Handling

Design and implement forms with validation, error states, and accessible submission flows. Covers validation strategy, error messaging, multi-step forms, and optimistic submission. Use when building forms or reviewing form implementations.

DeanKelly751 Updated Sep 21, 2026

File contents

Form Handling

Purpose

Step-by-step guidance for building forms that are usable, accessible, and robust.

Workflow

Step 1: Design Validation Strategy

Timing	Use for	Example
On blur	Individual field validation	Email format
On change	Real-time feedback (sparingly)	Password strength
On submit	Cross-field validation, server validation	"Passwords must match"

Step 2: Error Messaging

Place errors adjacent to the field (not only at top of form)
Use aria-describedby to associate error with field
Use aria-invalid="true" on invalid fields
Messages should state what's wrong AND how to fix it
Use aria-live="polite" for dynamically appearing errors

Step 3: Implement Submission

Disable submit button during submission (with loading indicator)
Handle server validation errors — map to specific fields
On success: clear form or navigate, show confirmation
On failure: preserve all entered data, focus first error field

Step 4: Multi-Step Forms

Show progress indicator
Allow back-navigation without data loss
Validate per-step before advancing
Save state (consider URL state or session storage)

Checklist

All fields have visible labels (not just placeholders)
Required fields marked (asterisk + aria-required)
Validation errors associated via aria-describedby
Tab order is logical
Submit via Enter key works
Loading state prevents double submission
Server errors mapped to specific fields where possible
Form preserves data on submission failure

Related Skills

frontend/knowledge-accessibility — accessible form patterns
frontend/knowledge-state-management — form state approaches

---name: execution-form-handlingdescription: Design and implement forms with validation, error states, and accessible submission flows. Covers validation strategy, error messaging, multi-step forms, and optimistic submission. Use when building forms or reviewing form implementations.---# Form Handling## PurposeStep-by-step guidance for building forms that are usable, accessible, and robust.## Workflow### Step 1: Design Validation Strategy| Timing | Use for | Example ||--------|---------|---------|| On blur | Individual field validation | Email format || On change | Real-time feedback (sparingly) | Password strength || On submit | Cross-field validation, server validation | "Passwords must match" |### Step 2: Error Messaging- Place errors adjacent to the field (not only at top of form)- Use `aria-describedby` to associate error with field- Use `aria-invalid="true"` on invalid fields- Messages should state what's wrong AND how to fix it- Use `aria-live="polite"` for dynamically appearing errors### Step 3: Implement Submission1. Disable submit button during submission (with loading indicator)2. Handle server validation errors — map to specific fields3. On success: clear form or navigate, show confirmation4. On failure: preserve all entered data, focus first error field### Step 4: Multi-Step Forms- Show progress indicator- Allow back-navigation without data loss- Validate per-step before advancing- Save state (consider URL state or session storage)## Checklist- [ ] All fields have visible labels (not just placeholders)- [ ] Required fields marked (asterisk + aria-required)- [ ] Validation errors associated via aria-describedby- [ ] Tab order is logical- [ ] Submit via Enter key works- [ ] Loading state prevents double submission- [ ] Server errors mapped to specific fields where possible- [ ] Form preserves data on submission failure## Related Skills- `frontend/knowledge-accessibility` — accessible form patterns- `frontend/knowledge-state-management` — form state approaches

Frequently asked questions