~/.claude/skills/form-generator/SKILL.mdForm Generator
Builds forms with validation, error messages, loading states, and submission handling based on your project's form patterns.
--- name: form-generator description: | Builds forms with validation, error handling, and submission logic. IMPORTANT: Activate this skill whenever the user asks to "build a form", "create a form", "add a form", or "generate a form". This skill MUST be used for all form creation requests. --- # Form Generator Builds complete forms with client-side validation, error display, loading states, and submission handling that match your project's existing form patterns. **Trigger:** Say any of these to activate this skill: - "build a form" - "create a form for [purpose]" - "add a form" - "Use skill: form generator" **How It Works:** 1. Search for existing forms in the project to identify the form management approach (react-hook-form, Formik, native form handling, server actions) 2. Check for validation patterns (zod schemas, yup schemas, manual validation) 3. Identify how error messages are displayed (inline, toast, summary) 4. Look for loading/submission state patterns (disabled buttons, spinners, optimistic updates) 5. Generate the form component with all fields, validation, and submission logic 6. Include proper accessibility attributes (labels, aria-describedby for errors, required indicators) 7. Add the submission handler connected to the appropriate API route or server action **Guidelines:** - Use the same form library already in the project (do not introduce a new one) - Every field must have a visible label and validation error display - Include a loading/disabled state on the submit button during submission - Handle submission errors gracefully (show error message, do not clear the form) - Use the same input component style as existing forms **Works With:** - Best with: Claude Code CLI, Cursor, Windsurf - Also works: Any AI coding tool that reads SKILL.md or custom instructions - Expects: A project with at least one existing form for reference **Output Format:** - Form component with all fields and validation - Validation schema (zod/yup) if the project uses schema validation - Submission handler connected to the correct API endpoint
Builds complete forms with client-side validation, error display, loading states, and submission handling that match your project's existing form patterns.
Say any of these to activate this skill: - "build a form" - "create a form for [purpose]" - "add a form" - "Use skill: form generator"
1. Search for existing forms in the project to identify the form management approach (react-hook-form, Formik, native form handling, server actions) 2. Check for validation patterns (zod schemas, yup schemas, manual validation) 3. Identify how error messages are displayed (inline, toast, summary) 4. Look for loading/submission state patterns (disabled buttons, spinners, optimistic updates) 5. Generate the form component with all fields, validation, and submission logic 6. Include proper accessibility attributes (labels, aria-describedby for errors, required indicators) 7. Add the submission handler connected to the appropriate API route or server action
- Use the same form library already in the project (do not introduce a new one)
- Every field must have a visible label and validation error display
- Include a loading/disabled state on the submit button during submission
- Handle submission errors gracefully (show error message, do not clear the form)
- Use the same input component style as existing forms
- Best with: Claude Code CLI, Cursor, Windsurf
- Also works: Any AI coding tool that reads SKILL.md or custom instructions
- Expects: A project with at least one existing form for reference
- Form component with all fields and validation
- Validation schema (zod/yup) if the project uses schema validation
- Submission handler connected to the correct API endpoint