react-ui-patterns
Modern React UI patterns for loading states, error handling, and data fetching
by sickn33Free
Description
react-ui-patterns is an agent skill for React UI patterns covering loading states, error handling and data fetching. Its core principles are to never show stale UI, to always surface errors so users know when something fails, to make the interface feel instant with optimistic updates, to disclose content progressively as it becomes available, and to degrade gracefully, since partial data is better than none. Its golden rule for loading is to show a loading indicator only when there is no data to display, not whenever a request is in flight. Use it when you are building UI components that handle asynchronous data, or when you are deciding how a screen should behave while loading, after a failure, or while changes are being saved. It is part of the sickn33/agentic-awesome-skills repository on GitHub, which has about 47,600 stars. The listing shows it as free, and it has about 1,500 installs. Its security audits show passes from Gen Agent Trust Hub, Socket and Snyk. Install it with npx skills add https://github.com/sickn33/agentic-awesome-skills --skill react-ui-patterns.…
Highlights
- Loading states shown only when there is no data
- Errors always surfaced to users
- Optimistic updates
- Progressive disclosure
- Graceful degradation with partial data
Ratings & Reviews
No ratings yet
Be the first to rate react-ui-patterns.
People also visit
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy
react-ui-patterns FAQ
When should a loading spinner appear?
Only when there is no data to show, so the UI does not look stale or flicker.
What happens on failure?
The skill says errors must always be surfaced so users know something went wrong.
What is an optimistic update?
Showing the expected result immediately so the interface feels instant.
How do I install it?
Run npx skills add https://github.com/sickn33/agentic-awesome-skills --skill react-ui-patterns.
Is it checked for security?
Its security audits show passes from Gen Agent Trust Hub, Socket and Snyk.
What are the best react-ui-patterns alternatives?
Popular alternatives to react-ui-patterns include implement, brand-guidelines and canvas-design. See all react-ui-patterns alternatives