2d3cfb40bb
Add 11 source-only StyleSeed skills covering UI setup, page and pattern scaffolding, token management, accessibility review, UX flows, microcopy, audits, and feedback states. Also credit bitjaru/styleseed in the community contributors list so source attribution matches the new source_repo metadata. Fixes #478 Co-authored-by: sickn33 <sickn33@users.noreply.github.com>
2.2 KiB
name, description, category, risk, source, source_repo, source_type, date_added, author, tags, tools
| name | description | category | risk | source | source_repo | source_type | date_added | author | tags | tools | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ux-feedback | Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules. | design | safe | community | bitjaru/styleseed | community | 2026-04-08 | bitjaru |
|
|
UX Feedback
Overview
Part of StyleSeed, this skill ensures data-dependent UI does not stop at the happy path. It adds the four core feedback states every serious product needs: loading, empty, error, and success.
When to Use
- Use when a component or page fetches, mutates, or depends on async data
- Use when a flow currently renders only the success path
- Use when a card, list, or page needs better state communication
- Use when the product needs clear recovery and confirmation behavior
The Four Required States
Loading
Use skeletons that match the final layout. Avoid spinners inside cards unless the pattern genuinely requires them. Delay skeletons slightly to avoid flashes on fast responses.
Empty
Provide a friendly explanation and a next action. Zero values should still render meaningfully instead of disappearing.
Error
Use plain-language failure messages and always offer recovery where possible. Localize failures to the affected card or section if the rest of the page can still work.
Success
Use toasts or equivalent lightweight confirmation for completed actions. Add undo for reversible destructive changes.
Output
Return:
- The data-dependent areas identified
- The loading, empty, error, and success states added for each one
- Any reusable empty-state or toast patterns created
- Follow-up work needed for analytics, retries, or accessibility
Best Practices
- Match loading placeholders to the real layout
- Keep partial failure isolated whenever possible
- Make recovery obvious, not hidden in logs or developer tools
- Use success feedback sparingly but clearly