Agent skill for building UIs with proper loading states, error handling, empty states, form UX, and graceful degradation.
Claude Code
$ npx -y skills add alper-dev/build-for-good-ux-skill --agent claude-code
Codex
$ npx skills add alper-dev/build-for-good-ux-skill -a codex
Cursor
$ npx skills add alper-dev/build-for-good-ux-skill -a cursor
Gemini CLI
$ npx skills add alper-dev/build-for-good-ux-skill -a gemini-cli
GitHub Copilot
$ npx skills add alper-dev/build-for-good-ux-skill -a github-copilot
OpenCode
$ npx skills add alper-dev/build-for-good-ux-skill -a opencode
Windsurf
$ npx skills add alper-dev/build-for-good-ux-skill -a windsurf
Based on the Build For Good UX video series by Katherine Gilligan (@synsation_). All principles are from her publicly available, free Instagram posts.
| 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 penalizing users |
| 🔘 | Button States & Accessibility | Default, hover, focus, pressed, loading, and disabled states |
| 🚫 | Disabled-Button Rule | Keep submit enabled with field jump unless blocker is completely obvious |
| 🎯 | Fitts's Law & Touch | Hit target padding, thumb reach, spacing, scroll-vs-tap conflict prevention |
# npm
npx skills add alper-dev/build-for-good-ux-skill
# yarn
yarn skills add alper-dev/build-for-good-ux-skill
# bun
bunx skills add alper-dev/build-for-good-ux-skill
If you find this useful, consider giving it a star. It helps others discover it.
Apache 2.0
Stars on GitHub
A development methodology for coding agents that makes the agent brainstorm before building, follow plans, run parallel work and finish branches in a disciplined way. You get fewer skipped steps and more consistent results from your coding assistant.
@obraHelps you take a change from a rough idea or bug report through to a tested, reviewed result, with each step handled by a focused skill. Its skills cover pinning down domain terms, designing module interfaces, diagnosing hard bugs, and reviewing changes against your repo's coding standards.
@mattpocockGives your coding agent a planning, testing and review routine to follow on every task. It plans before building, checks changes with tests, has a fresh reviewer look for regressions, and saves repeated wins as reusable skills.
@affaan-mDeveloper tools for working on the React codebase itself. Provides skills for extracting error messages, managing and debugging feature flags across release channels, running Flow type checks, and fixing lint and formatting issues before committing.
@facebookAgent skill for building UIs with proper loading states, error handling, empty states, form UX, and graceful degradation. Install it with the command on its page. It includes build-for-good-ux-skill. Its skills do not fire on their own yet. Free and open source.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it