form-design

Guide form design with validation, save patterns, error messages, and wizard principles.

28|3|Updated Feb 22, 2026
One-click install
npx skills add https://github.com/oborchers/fractional-cto --skill form-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: form-design
Source: https://github.com/oborchers/fractional-cto/tree/main/saas-design-principles/skills/form-design
Command: npx skills add https://github.com/oborchers/fractional-cto --skill form-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design and review forms that are intuitive, efficient, and minimize user errors, leading to higher completion rates and better user experiences.

Core Features & Use Cases

  • Validation Strategy: Implements "reward early, punish late" validation for immediate feedback and reduced frustration.
  • Save Patterns: Guides on when to use auto-save versus explicit save buttons, and how to handle them correctly.
  • Error Messaging: Ensures error messages are clear, actionable, and placed contextually.
  • Wizard Design: Provides best practices for multi-step forms to guide users through complex processes.
  • Use Case: Reviewing a new user registration form to ensure validation messages appear only after a field is left, and that error messages clearly state how to correct the input.

Quick Start

Review the current form design using the principles of reward early, punish late validation.

Frequently Asked Questions about form-design

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

FAQPage Schema
What is the best way to handle form validation for better user experience?

Form validation should follow a "reward early, punish late" strategy, providing immediate feedback to reduce frustration. This approach ensures validation messages appear only after a user leaves a field, guiding them efficiently without interrupting data entry.

How do I design a multi-step form wizard without losing user engagement?

Multi-step form wizards should break complex processes into manageable steps, utilizing best practices from Nielsen Norman Group research. This design minimizes user errors and cognitive load by guiding users sequentially through the required inputs.

When should I use auto-save versus explicit save buttons in web forms?

Auto-save works best for continuous data preservation, while explicit save buttons suit deliberate data submission. Choosing the correct pattern prevents data loss and aligns user expectations with the application's state changes.

How do I write effective error messages for application forms?

Effective error messages must be clear, actionable, and placed contextually near the relevant input field. They should explicitly state how to correct the input, ensuring users can immediately fix the mistake and proceed.

Does this form design guidance apply to both web and application user interfaces?

Yes, these form design principles optimize user experience for both web and application forms. The guidelines address universal interaction patterns like save mechanisms, validation, and multi-step wizard design across platforms.