multi-step-form

Coordinate multi-step form creation and editing with per-step validation.

16|11|Updated Jun 12, 2025
One-click install
npx skills add https://github.com/liwoo/goravel-inertia-tw-starter --skill multi-step-form
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: multi-step-form
Source: https://github.com/liwoo/goravel-inertia-tw-starter/tree/main/.claude/skills/multi-step-form
Command: npx skills add https://github.com/liwoo/goravel-inertia-tw-starter --skill multi-step-form

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guide for building multi-step forms with sequential wizard creation and tab-based editing. Use when creating complex forms that span multiple sections or involve related entities.

Core Features & Use Cases

  • Create: sequential wizard with per-step validation gates and a single final submission.
  • Edit: tab-based interface allowing independent saves per section.
  • Use cases: forms that require cross-entity relationships or phased data collection.

Quick Start

Create a new multi-step form by following the architecture, step definitions, and useImperativeHandle patterns described above.

Frequently Asked Questions about multi-step-form

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a React multi-step form with per-step validation?▼

Build a React multi-step form by implementing a sequential wizard pattern with validation gates that block progression until each section is valid, culminating in a single final submission. This approach coordinates data collection across multiple form sections.

What is the best way to handle complex form edits across related entities?▼

Handle complex form edits across related entities using a tab-based interface that allows independent saves per section. This pattern manages cross-entity relationships by isolating section updates instead of requiring a full-form submission.

How do I expose child form state to a parent component in a React wizard?▼

Expose child form state to a parent component in a React wizard by using forwardRef and useImperativeHandle. This pattern allows the parent to trigger validation checks and access the child's data imperatively before advancing steps.

How do I normalize snake_case backend data for a React frontend form?▼

Normalize snake_case backend data for a React frontend form by transforming the data shape to camelCase across the client and backend. This ensures consistent property naming during multi-step form creation and editing workflows.

When should I use a wizard-create pattern versus tab-based edits for frontend forms?▼

Use a wizard-create pattern for sequential phased data collection with a single final submission, and tab-based edits for independent section saves. Choose based on whether your complex data-entry scenario requires guided steps or isolated updates.