# react-ui-patterns

Provides practical React interface conventions for handling loading states, empty collections, and network failures. Guides the assistant when building async components.

- skill · `type=skill` · Claude Code · 281 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/react-ui-patterns
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/react-ui-patterns

## What it does

This skill teaches Claude Code strict conventions for asynchronous React interfaces. It stops the agent from flashing spinners whenever cached information already exists on the screen. For predictable layouts, the guidelines demand skeleton placeholders, reserving spinners for button clicks or modal dialogs.

The instructions enforce an explicit error hierarchy alongside mandatory empty views for lists. Silently ignoring errors in catch blocks is forbidden. Crucially, buttons must lock during pending network requests to stop duplicate submissions. The skill also enforces visible user feedback for every triggered mutation.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill development/react-ui-patterns
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill react-ui-patterns -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/react-ui-patterns/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/react-ui-patterns/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/react-ui-patterns/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/react-ui-patterns/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates react-ui-patterns
```

2. **Manually: put the files in place**
- File: `.github/skills/react-ui-patterns/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/react-ui-patterns
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/react-ui-patterns/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/react-ui-patterns

## When to use it
- prevent spinner flicker when cached records are present
- assign skeleton loaders and spinners to appropriate UI contexts
- disable submit triggers during active mutations
- design informative empty states for search and collections

## Example prompts
- Build an order list component with proper skeleton, error fallback, and an empty state
- Create a profile edit form that disables the submit trigger while pending and alerts on failure
- Refactor the data loading view so background refetches do not trigger a full spinner

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 804 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md