Build For Good UX Skill — Design skill for Claude Code
Agent skill for building UIs with proper loading states, error handling, empty states, form UX, and graceful degradation.
How to install Build For Good UX Skill
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open alper-dev/build-for-good-ux-skill and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Build For Good UX Skill does
Agent skill for building UIs with proper loading states, error handling, empty states, form UX, and graceful degradation.
Alternatives in Design
- Design Dna — Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visu 624 ★
- New Module — Create a new LaraDashboard module with proper structure, CSS prefixing, hooks, menu, and CLAUDE.md 407 ★
- Design AR Overlay — Design an AR overlay interface — anchor strategy, world tracking UI, scan states, confirmation overlays, and o 309 ★
README
An agent skill for building UIs that handle loading, success, error, empty, partial, familiar-pattern, and choice-heavy states with good UX.
Based on the **Build For Good UX** video series by [Katherine Gilligan](https://instagram.com/synsation_) ([@synsation_](https://instagram.com/synsation_)). All principles are from her publicly available, free Instagram posts.
What's Covered
| Topic | Details | |
|---|---|---|
| 🎨 | UI vs UX | Beautiful interface plus understandable behavior, recovery, and trust |
| ⬜ | Loading States | Skeleton screens, progress bars, spinners, optimistic UI |
| ⏳ | Spinner Timing | When to show what based on duration (<1s, 1-10s, >10s) |
| ⚠️ | Error States | Message quality, placement (inline, toast, modal) |
| ✅ | Success States | Action feedback, celebrations, subtle confirmations |
| 🌵 | Empty States | First impressions, search results, goal/achievement states |
| 📄 | Form UX | Inline validation, pre-filling, character counts, forgiving formats |
| 🧩 | Graceful Degradation | Independent sections, cached content, partial loading |
| 🧭 | Jakob's Law | Familiar patterns by device, locale, audience, and market |
| 🫙 | Hick's Law | Reduce decision complexity with grouping, filtering, curation, progressive disclosure |
| 👁️ | Progressive Disclosure | Show steps contextually without burying critical features behind tutorials |
| ⚙️ | Tesler's Law | Absorb complexity in code and system design instead of penalizin |
Related Skills
Error State Handling
A Claude Skill that enforces good error-state UX: every user-facing error must say what happened, why, and wha
Agent Tool Design
The Agent Tool Contract — 5 principles for designing tools agents call reliably: predictable signature, rich e
Microcopy
write ui microcopy including buttons, errors, empty states, forms
Nxt Page
Generates a Next.js App Router page with page.tsx, loading.tsx, and error.tsx. Auto-detects route conventions,
Kai
Activates Kai, Backend Engineer. Implements Express routes, services, API design, error handling, and server-s
Design Chatbot
Design a complete chatbot or conversational assistant UI — dialog flows, message bubbles, quick replies, typin
Related Agents
Phase2 Error Handling Strategist
Designs error taxonomy, fault tolerance patterns and graceful degradation. Use in Phase 2.
Error Boundary Architect
Use this agent when designing API error handling strategy, building typed error classes, creating consistent e
Copy Auditor
Scores the Copy pillar deeply against reference/copy-quality.md (CTAs, errors, empty states, loading, ARIA, al
