Agent skill · software engineering · aiskillstore
react-ui-patterns
Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.
Why this skill is useful
Provides specific React UI patterns for handling loading states, errors, and async data that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
React UI Patterns Core Principles 1. Never show stale UI - Loading spinners only when actually loading 2. Always surface errors - Users must know when something fails 3. Optimistic updates - Make the UI feel instant 4. Progressive disclosure - Show content as it becomes available 5. Graceful degradation - Partial data is better than no data Loading State Patterns The Golden Rule Show loading indicator ONLY when there's no data to display. Loading State Decision Tree Skeleton vs Spinner Use Skeleton When Use Spinner When ------------------- ------------------ Known content shape Unknown content shape List/card layouts Modal actions Initial page load Button submissions Content placeholders Inline operations Error Handling Patterns The Error Handling Hierarchy Always Show Errors CRITICAL: Never swallow errors silently. Error State Component Pattern Button State Patterns Button Loading State Disable During Operations CRITICAL: Always disable triggers during async operations. Empty States Empty State Requirements Every list/collection MUST have an empty state: Contextual Empty States Form Submission Pattern Anti-Patterns Loading States Error Handling Button States Checklist Before completing any UI component: UI States: [ ] Error state handled and shown to user [ ] Loading state shown only when no data exists [ ] Empty state provided for collections [ ] Buttons disabled during async operations [ ] Buttons show loading indicator when appropriate Data & Mutations: [ ] Mutations have onError handler [ ] All user actions have feedback (toast/visual) Integration with Other Skills graphql-schema: Use mutation patterns with proper error handling testing-patterns: Test all UI states (loading, error, empty, success) formik-patterns: Apply form submission patterns
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/react-ui-patterns