🎨 Frontend Engineering · React Patterns

Design error, loading, and empty states first

Treat non-happy paths as features: skeleton loaders, typed errors, retry affordances, useful empties.

foundation~20 minFrontend EngineersFull-Stack DevelopersDesign Engineers

Steps

1For every data section, spec loading, error, empty, and partial states upfront
2Use skeletons matching final layout to avoid shift on load
3Differentiate recoverable errors (retry button) from fatal ones (support link)
4Write empty states as invitations: what this shows + how to populate it
5Surface partial failures inline instead of failing the whole page
6Add boundary components at route and widget level, logging with context

Common Pitfalls

▲Infinite spinner hiding a thrown error
▲Empty tables with zero guidance

Commands

Install with skills CLI

$ npx skills add aniruddhaadak80/skills --skill react-patterns-error-loading-states

Install globally

$ npx skills add aniruddhaadak80/skills --skill react-patterns-error-loading-states -g

Tags

#ux#resilience#frontend-engineering#react-patterns

Install this skill

$ npx skills add aniruddhaadak80/skills --skill react-patterns-error-loading-states -a opencode

SKILL.md

# Design error, loading, and empty states first

> Treat non-happy paths as features: skeleton loaders, typed errors, retry affordances, useful empties.

## When to Use This Skill

Treat non-happy paths as features: skeleton loaders, typed errors, retry affordances, useful empties.

## Steps

1. For every data section, spec loading, error, empty, and partial states upfront
2. Use skeletons matching final layout to avoid shift on load
3. Differentiate recoverable errors (retry button) from fatal ones (support link)
4. Write empty states as invitations: what this shows + how to populate it
5. Surface partial failures inline instead of failing the whole page
6. Add boundary components at route and widget level, logging with context

## Common Pitfalls

- Infinite spinner hiding a thrown error
- Empty tables with zero guidance

View source on GitHub ↗

Decide what renders on the server versus client in React Server Components to minimize JavaScript shipped.

🎨 Frontend Engineering·~30m

Open →

Colocate state where it is consumedfoundation

Choose between local state, lifted state, URL state, and stores by asking who needs the data and when.

🎨 Frontend Engineering·~25m