What problem does it solve?
React UI development often suffers from inconsistent loading states, unclear error messaging, and ad-hoc data-fetching patterns across components. This Skill provides a cohesive set of patterns to standardize how loading, errors, skeletons, and data-fetching flows are implemented.
Core Features & Use Cases
- Loading State Patterns: show loading indicators only when there is no data, use skeletons for initial content, and avoid flashing spinners on refetch.
- Error Handling Patterns: surface errors clearly with retry options, reusable error components, and consistent messaging.
- Empty States & User Feedback: provide explicit empty states for lists and ensure buttons and forms reflect async status.
- Form Submissions & Interactions: robust patterns for form submission, validation feedback, and user notifications.
- Anti-Patterns & Best Practices: avoid showing spinners for cached data, never swallow errors, and favor explicit, actionable feedback.
Quick Start
Implement a reusable React UI pattern component that shows a skeleton during data fetch, an error state on failure, and a content view when data is ready.
