Skip to main content
affpapa.org
RU EN
skill

react-ui-patterns — Claude Code skill: what it does, how to install

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

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill development/react-ui-patterns
Open on GitHub

What react-ui-patterns 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.

What it helps with

  • 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 for the agent

  • 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

How to install react-ui-patterns

1claude-code-templates

npx claude-code-templates@latest --skill development/react-ui-patterns

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill react-ui-patterns -a claude-code

3Manually: put the files in place

~/.claude/skills/react-ui-patterns/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/react-ui-patterns/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about react-ui-patterns

How do I install react-ui-patterns in Claude Code?

Run npx claude-code-templates@latest --skill development/react-ui-patterns in your terminal. This imports the skill into your Claude Code setup.

What is react-ui-patterns used for?

It provides guidelines for handling UI states in React, focusing on async fetches, error presentation, and empty views. These conventions help Claude Code write resilient components without flashing spinners or swallowed exceptions.

When does the skill advise using skeletons over spinners?

Skeletons are recommended during initial page loads for layouts with a predictable structure, like cards or lists. Spinners are reserved for modal actions, inline tasks, and button submissions.

Similar skills

All skills for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set804

The whole set →
create-jtbd Generates a Jobs-to-be-Done analysis document for product features without technical implementation notes or time estimates. 290installs database-optimizer A Claude skill that digs into database bottlenecks: execution plans, indexes, N+1, caching and partitioning. Useful when queries are slow and the reason isn't obvious. 286installs sprint-planning This command builds a sprint plan from Linear or GitHub data, covering capacity, priorities, dependencies, and risks. 282installs husky Runs lint, build, types and tests step by step, fixing failures until the repo works again. Handy before you commit. 282installs sql-pro A skill that turns the agent into a SQL specialist: writes tricky queries, reads execution plans, picks indexes. Useful when a query is slow and the reason is not obvious. 281installs migration-guide Generates structured migration playbooks with rollback steps, breaking change diffs, and verification checklists. Useful when switching databases, frameworks, or cloud infrastructure. 281installs exploratory-data-analysis A Claude skill that identifies a scientific file's format and writes a markdown report on its structure, quality and next analysis steps. 279installs env-file-protection This hook stops Write calls aimed at .env* files, so an agent cannot overwrite your secrets by accident. One command adds it to Claude settings. 279installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor