What problem does it solve? Most mockups and shipped screens only show the happy path, leaving empty, loading, error, and partial states undesigned — which reads as broken to users. This Skill provides a systematic five-state pass so every screen is fully specified before it ships. ## Core Features & Use Cases - Five-State Pass: Produces a state spec covering ideal, empty (first-use, user-cleared, no-results), loading, error, and partial states for any screen. - Feedback Channel Selection: Decision trees for choosing between validation, indicators, and notifications, plus rules for when confirmation dialogs are earned versus when undo is better. - Form & Validation Law: NN/g-grounded lint rules covering labels, placeholder prohibition, validation timing, error message anatomy (what happened, why, next step), and input preservation. - Use Case: A designer is about to hand off an appointments screen that only shows a full list. Run the five-state pass to deliver a complete spec: skeleton loading for 1–3s waits, a first-use empty state with a booking CTA, an offline error state with cached data and retry, and a single-item partial layout. ## Quick Start Ask the AI to run the five-state pass on your screen design and produce the full state spec including empty, loading, error, and partial states.
