Skip to content
Development
Command

/add-multistep-form

Create a multi-step form wizard with progress tracking and validation.

shell
$ npx -y skills add LarouexNonprofitConsulting/larouex-fullstack-plugin --agent claude-code

Ships with larouex-fullstack-builder. Installing the plugin gets this command.

How it fires

How this command gets triggered: by you, by Claude, or both.

  • Fires itselfClaude auto-loads it when your prompt matches the work.
  • You can call itInvoke it directly when you want it.
  • Slash command/add-multistep-form

Context preview

What this command does when you run it.

Create a multi-step form wizard with progress tracking and validation.

Command definition

add-multistep-form.md

Create a multi-step form wizard with progress tracking and validation.

Generate:

  • Multi-step form component with step navigation
  • Progress indicator showing current step and completion
  • Step-by-step validation (validate before moving to next step)
  • Navigation buttons (Next, Previous, Submit) with proper states
  • Form state persistence across steps using React Hook Form or context
  • TypeScript types for each step's data
  • Step components for each form section
  • Review/summary step before final submission
  • Error handling per step with accessible messages
  • Mobile-responsive design with Bootstrap
  • Accessibility features (ARIA attributes, keyboard navigation, screen reader announcements)

Include save progress functionality, step skipping logic if applicable, and comprehensive form state management.

Read it on GitHub โ†—
Ships withlarouex-fullstack-builder

A comprehensive Claude Code plugin with 81 commands and 12 specialized AI agents for building modern, full-stack web applications with Next.js 15, Azure, Railway, Bootstrap, and TypeScript.

Get the whole plugin, auto-invoked