How does the skill handle auto-save functionality?

It provides logic for saving on blur and after a 3-second debounce for text inputs, while recommending immediate saves for toggle switches and maintaining a 'Save' button for psychological reassurance.

What is the 'reward early, punish late' strategy?

It is a validation pattern where success states are shown immediately upon field exit (blur), but error messages are delayed until the user has finished their input to avoid interrupting their flow.

Does this skill support specific frontend frameworks?

Yes, the principles and patterns provided by this skill are framework-agnostic and include implementation guidance for React, Vue, and Svelte.

When should I use a multi-step wizard instead of a single page?

Wizards are recommended when steps are independent and sequential; if steps are interdependent, the skill suggests using a single scrollable page for better performance.

SaaS Form Design Patterns

Name: SaaS Form Design Patterns
Author: oborchers

byoborchers

•

Design Tools

Implements research-backed form UX best practices and validation strategies to increase completion rates and reduce user friction in SaaS products.

The Form Design skill equips Claude with specialized knowledge to build and review high-converting SaaS forms based on industry-leading UX research. It provides specific guidance on implementing the 'reward early, punish late' validation strategy—validating on blur rather than while typing—to prevent premature user anxiety. The skill also handles the psychological nuances of auto-save vs. explicit save patterns, multi-step wizard logic, and actionable error messaging. Use this skill to transform technical data entry into intuitive, conversational experiences that follow proven design systems and implementation patterns.

Key Features

01Reward early, punish late validation logic for optimized field-level feedback.

02Comprehensive form review checklist for auditing UI/UX consistency.

03UX-optimized multi-step wizard configurations with progress indicators.

04Actionable 'Fix It' error message patterns with precise placement rules.

059 GitHub stars

06Guidelines for hybrid auto-save and explicit save behavior based on control type.

Use Cases

01Refactoring complex onboarding wizards to reduce user drop-off and fatigue.

02Implementing real-time inline validation logic for secure registration and checkout forms.

03Auditing existing frontend code to ensure consistent save behaviors across different input types.

Key Features

01Reward early, punish late validation logic for optimized field-level feedback.

02Comprehensive form review checklist for auditing UI/UX consistency.

03UX-optimized multi-step wizard configurations with progress indicators.

04Actionable 'Fix It' error message patterns with precise placement rules.

059 GitHub stars

06Guidelines for hybrid auto-save and explicit save behavior based on control type.

Use Cases

01Refactoring complex onboarding wizards to reduce user drop-off and fatigue.

02Implementing real-time inline validation logic for secure registration and checkout forms.

03Auditing existing frontend code to ensure consistent save behaviors across different input types.