SKILL-019 SaaS UX and layout patterns Locked skill

Create / edit form pattern

Create and edit are the same form bound to a changeset; validate on change, again on submit, and guard navigation when the form is dirty.

01

What this skill helps you build

One reusable form that handles both creating and editing a record — with inline validation, a save/cancel footer, an unsaved-changes guard, and a clearly separated destructive zone.

The production takeaway

Create and edit are the same form bound to a changeset; validate on change, again on submit, and guard navigation when the form is dirty.

02

Inside this skill

The full skill expands these implementation areas with decisions, edge cases, prompts, tests, and framework-specific code.

SaaS UX and layout patterns
What this helps you build

A single, reusable form that powers both creating a new record and editing an existing one — the most common screen in any SaaS app. It gives the user inline validation while they

🔒
SaaS UX and layout patterns
When to use this

Reach for this pattern any time a user fills in or changes the fields of a record: a profile, a project, a billing plan, a workspace setting. Concretely, use it when you have: A "N

🔒
SaaS UX and layout patterns
The core idea

Create and edit are the same form. Both bind the UI to a single changeset or form object / validation schema . The only difference is whether that changeset wraps an empty record o

🔒
03

Unlock the full implementation

Paid access includes the complete skill body, implementation prompt, common mistakes, production checklist, and code examples where this skill includes them.