# 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.

- Skill: `dokhacgiakhoa/react-ui-patterns` (Agent Skill, multi-file: 14 files)
- Install (CLI): `npx skillmds@latest add dokhacgiakhoa/react-ui-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dokhacgiakhoa/react-ui-patterns/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Dokhacgiakhoa (https://skillmd.com/u/dokhacgiakhoa)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/dokhacgiakhoa/react-ui-patterns

---


# 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

## 🧠 Knowledge Modules (Fractal Skills)

### 1. [The Golden Rule](./sub-skills/the-golden-rule.md)
### 2. [Loading State Decision Tree](./sub-skills/loading-state-decision-tree.md)
### 3. [Skeleton vs Spinner](./sub-skills/skeleton-vs-spinner.md)
### 4. [The Error Handling Hierarchy](./sub-skills/the-error-handling-hierarchy.md)
### 5. [Always Show Errors](./sub-skills/always-show-errors.md)
### 6. [Error State Component Pattern](./sub-skills/error-state-component-pattern.md)
### 7. [Button Loading State](./sub-skills/button-loading-state.md)
### 8. [Disable During Operations](./sub-skills/disable-during-operations.md)
### 9. [Empty State Requirements](./sub-skills/empty-state-requirements.md)
### 10. [Contextual Empty States](./sub-skills/contextual-empty-states.md)
### 11. [Loading States](./sub-skills/loading-states.md)
### 12. [Error Handling](./sub-skills/error-handling.md)
### 13. [Button States](./sub-skills/button-states.md)