Development
Plugin
build-for-good-ux-skill
Agent skill for building UIs with proper loading states, error handling, empty states, form UX, and graceful degradation
Plugin Signal47/100Fair
maintained70
capable14
documented71
adopted25
Install
$ npx -y skills add alper-dev/build-for-good-ux-skill --agent claude-code
What's inside
README
Based on the Build For Good UX video series by Katherine Gilligan (@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 |
Installation
# 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.
License
Apache 2.0
File tree
FAQ
build-for-good-ux-skill is a Claude Code plugin with 1 hand-picked skill for development work, indexed on Flowy. Install it with the command on its page. It includes build-for-good-ux-skill. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is build-for-good-ux-skill?
- Agent skill for building UIs with proper loading states, error handling, empty states, form UX, and graceful degradation
- How do I install build-for-good-ux-skill?
- Run these in Claude Code: npx -y skills add alper-dev/build-for-good-ux-skill --agent claude-code. Then prompt normally.
- Does build-for-good-ux-skill auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is build-for-good-ux-skill free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it