This skill should be used when the user is building or reviewing form validation, inline validation, auto-save vs explicit save patterns, form error messages, multi-step wizards, toggle switches, or input fields. Covers the "reward early, punish late" validation strategy and form UX best practices.
npx claudepluginhub oborchers/fractional-cto --plugin saas-design-principlesThis skill uses the workspace's default tool permissions.
Luke Wroblewski's landmark study established the baseline: inline validation produces a 22% increase in success rates, 42% faster completion, and 47% fewer eye fixations compared to submit-time validation.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Luke Wroblewski's landmark study established the baseline: inline validation produces a 22% increase in success rates, 42% faster completion, and 47% fewer eye fixations compared to submit-time validation.
The optimal strategy is to validate after the user leaves a field (on blur), never while typing.
Rules:
Start with explicit save as the default. Never mix auto-save and explicit save in a single form.
| Control Type | Save Behavior |
|---|---|
| Toggle switches | Save immediately (imperative controls, like flipping a light switch) |
| Text inputs, radio buttons, checkboxes | Explicit save via button |
If auto-save is used for text inputs:
Counterintuitive finding: Even with auto-save, keep the Save button. Users who have spent years learning that explicit saves are required experience genuine anxiety when the button disappears. The Save button provides psychological reassurance even when it does nothing the system wouldn't do automatically.
Every error message must tell the user what went wrong AND how to fix it.
| Bad | Good |
|---|---|
| "Invalid password" | "Insert a password of at least 8 characters" |
| "Error in field" | "Email must include an @ symbol" |
| "Validation failed" | "Phone number must be 10 digits, e.g. 555-123-4567" |
Placement rules:
When wizards work:
When wizards fail:
Wizard requirements:
Working implementations in examples/:
examples/validation-reward-early-punish-late.md — Blur-based validation with success/error states in React, Vue, and Svelteexamples/auto-save-vs-explicit-save.md — Settings form with immediate toggle saves and debounced text auto-saveWhen reviewing or building forms: