build-for-good-uxlisted
Install: claude install-skill alper-dev/build-for-good-ux-skill
# Build For Good UX
Based on Katherine Gilligan's public "Build For Good UX" series ([@synsation_](https://instagram.com/synsation_)). Use this as an implementation checklist for UI work, not as transcript notes.
## Core Principle
Good UI is how an app looks. Good UX is whether users understand what to do, what happened, what failed, and how to recover. AI-generated UI often covers only the happy path. Build the full experience.
Every screen needs these states:
| State | Required UX |
|---|---|
| Loading | Shows progress appropriate to wait time and scope |
| Success | Confirms the user's action worked |
| Error | Explains what happened, why, and next action |
| Empty | Explains why nothing is there and how to start or continue |
Good UX builds trust. Bad UX creates uncertainty, extra steps, and friction. Users leave and blame the product, not themselves.
## Required Workflow
When building or reviewing a UI, do this before considering the work complete:
1. Identify every user action and async data source.
2. Define loading, success, error, and empty states for each relevant screen or section.
3. Pick the loader based on scope and duration.
4. Place errors next to the thing that caused them unless the issue blocks the whole flow.
5. Ensure every action gives visible feedback.
6. Make each page section resilient when other sections load slowly or fail.
7. Use familiar patterns for the user's device, locale, and audience.
8. Reduce choice overload with grouping, curatio