New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

React UI State Patterns

by ChrisWiles in ChrisWiles/claude-code-showcase

Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.

No licenceAuto-check passedFrontend & Design

Install React UI State Patterns

skills CLI
$ npx skills add ChrisWiles/claude-code-showcase --skill react-ui-patterns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ChrisWiles/claude-code-showcase react-ui-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ChrisWiles/claude-code-showcase.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/react-ui-patterns .claude/skills/react-ui-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
react-ui-patterns
GitHub stars
6.1k
Used in
7 other repos
Token cost
~1.6k tokens
SKILL.md length
238 words
Files
1
Skills in repo
6
Repo updated
First seen
Licence
None found

At a glance

Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.

  • Works in 5 steps: Never show stale UI - Loading spinners… → Always surface errors - Users must know… → Optimistic updates - Make the UI feel… → …
  • Building a data-fetching component that needs loading, error and empty states
  • SKILL.md covers Core Principles, Loading State Patterns, Error Handling Patterns and Button State Patterns, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

The skill starts from five principles: never show stale UI, always surface errors, update optimistically, reveal content progressively and degrade gracefully when only partial data exists. Its golden rule for loading is to show an indicator only when there is no data to display, so a refetch with cached data does not flash a spinner. A decision tree puts the error check first, and a table says to use skeletons for known content shapes such as lists, cards and initial page loads, and spinners for modal actions, button submissions and inline operations.

For errors it sets a hierarchy that runs from inline field-level messages for form validation, through toast notifications for recoverable problems, to an error banner for page-level problems where data is still partly usable. Errors must never be swallowed silently, and an error state component takes the error plus an optional retry callback. Buttons show a loading state and are disabled while an async operation runs, and every list or collection must have an empty state, including contextual ones such as search with no results.

When your agent uses it

  • Building a data-fetching component that needs loading, error and empty states
  • Fixing a spinner that flashes during a refetch
  • Making sure form submit buttons cannot be double-clicked
  • Reviewing a React screen for swallowed errors

Example prompts

  • “Add loading, error and empty states to the orders list component.”
  • “The spinner flashes every time the query refetches, so make it show only when there is no data.”
  • “Make the save button show progress and disable itself while the mutation runs.”
  • “Review this page for errors that are caught but never shown to the user.”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  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

What it can do on your machine

Read from SKILL.md and the folder at commit a95518f. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React UI State Patterns loads about 1.6k tokens when it runs. Until then it costs about 44 tokens; SKILL.md has 238 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~44
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Without a licence we can't republish the file, so here is its outline and opening line. It has 238 words (~1,617 tokens).

“Show loading indicator ONLY when there's no data to display.”

— opening of SKILL.md by ChrisWiles
name
react-ui-patterns

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .claude/skills/react-ui-patterns of ChrisWiles/claude-code-showcase.

Open the folder on GitHubat commit a95518f

Used in 7 other repositories

We found 23 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 7 other GitHub owners. This page covers the copy in ChrisWiles/claude-code-showcase, which our catalogue first saw on October 7, 2026.

Compare with similar skills

React UI State Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

React UI State Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React UI State Patterns this skillChrisWiles/claude-code-showcase6.1k7 repos~1.6kAutomated safety check: PassNone
Typescript Rulesshinpr/claude-code-workflows690—~1.8kAutomated safety check: PassMIT
React Router Developmentremix-run/react-router57k1 repos~1.5kAutomated safety check: PassMIT
React Frontend Development Guidelinesdiet103/claude-code-infrastructure-showcase10k2 repos~2.9kAutomated safety check: PassMIT
Moai Ref React Patternsmodu-ai/moai-adk1.2k—~1.8kAutomated safety check: PassApache-2.0
@pierre/diffs Code Renderingpierrecomputer/pierre6.2k2 repos~803Automated safety check: PassApache-2.0

Similar skills

  • Typescript Rules

    shinpr/claude-code-workflows

    React/TypeScript frontend development rules including type safety, component design, state management, and error handling.

    690 GitHub stars~1.8k tokensUpdated 6 days ago
    Frontend & DesignAuto-check passed

  • React Router Development

    remix-run/react-router

    Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

    57k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed

  • React Frontend Development Guidelines

    diet103/claude-code-infrastructure-showcase

    Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.

    10k GitHub starsUsed in 2 repos~2.9k tokens
    Frontend & DesignAuto-check passed

  • Moai Ref React Patterns

    modu-ai/moai-adk

    React/Next.js component design patterns, state management strategies, and project structure reference for frontend development.

    1.2k GitHub stars~1.8k tokensUpdated today
    Frontend & DesignAuto-check passed

  • @pierre/diffs Code Rendering

    pierrecomputer/pierre

    Guides an agent through using @pierre/diffs to render syntax-highlighted files and diffs, and to build editing and review surfaces in React or plain JavaScript.

    6.2k GitHub starsUsed in 2 repos~803 tokens
    DevelopmentAuto-check passed

  • Pierre Trees File Tree

    pierrecomputer/pierre

    Use when an app uses @pierre/trees to render or control a file tree, including React, vanilla JavaScript, SSR, web components, selection, search, rename, drag…

    6.2k GitHub stars~473 tokensUpdated today
    Frontend & DesignAuto-check passed

More from ChrisWiles/claude-code-showcase

  • Core Component Library Patterns

    ChrisWiles/claude-code-showcase

    Reference for building UI with a token-based core component library: spacing, color and typography tokens, Box, stacks, Text, Button, Input and Card, plus layout patterns.

    6.1k GitHub starsUsed in 7 repos~1.2k tokens
    Auto-check passed

  • Jest Testing Patterns

    ChrisWiles/claude-code-showcase

    Jest patterns for React Native style tests: TDD discipline, mock factory functions, module and GraphQL hook mocking, custom render helpers and anti-patterns to avoid.

    6.1k GitHub starsUsed in 7 repos~1.5k tokens
    Auto-check passed

  • Formik Form Patterns

    ChrisWiles/claude-code-showcase

    Shows how to build forms with Formik and Yup validation, including conditional rules, field helpers, GraphQL submission, edit forms and multi-step flows.

    6.1k GitHub starsUsed in 3 repos~2.1k tokens
    Auto-check passed

  • GraphQL Operations with Codegen

    ChrisWiles/claude-code-showcase

    Sets the rules for writing GraphQL queries and mutations in .gql files, running codegen, and using generated Apollo hooks with proper error and loading handling.

    6.1k GitHub starsUsed in 3 repos~1.5k tokens
    Auto-check passed

  • Systematic Debugging

    ChrisWiles/claude-code-showcase

    Applies a four-phase debugging routine that finds the root cause of a bug or failing test before any fix is written.

    6.1k GitHub starsUsed in 3 repos~1.2k tokens
    Auto-check passed

Works with

Categories

Questions about React UI State Patterns

What does React UI State Patterns do?

Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists. The skill starts from five principles: never show stale UI, always surface errors, update optimistically, reveal content progressively and degrade gracefully when only partial data exists. Its golden rule for loading is to show an indicator only when there is no data to display, so a refetch with cached data does not flash a spinner.

When should I use React UI State Patterns?

React UI State Patterns fits situations like: building a data-fetching component that needs loading, error and empty states; fixing a spinner that flashes during a refetch; making sure form submit buttons cannot be double-clicked; reviewing a React screen for swallowed errors.

How do I install React UI State Patterns in Claude Code?

Run `npx skills add ChrisWiles/claude-code-showcase --skill react-ui-patterns -a claude-code`. Or copy the skill folder (.claude/skills/react-ui-patterns in ChrisWiles/claude-code-showcase) into .claude/skills/react-ui-patterns in your project. Claude Code loads it when a task matches its description.

How do I install React UI State Patterns in Codex?

Run `npx skills add ChrisWiles/claude-code-showcase --skill react-ui-patterns -a codex`. Or copy the skill folder (.claude/skills/react-ui-patterns in ChrisWiles/claude-code-showcase) into .agents/skills/react-ui-patterns in your project. Codex loads it when a task matches its description.

Can I use React UI State Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ChrisWiles/claude-code-showcase --skill react-ui-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-ui-patterns, .gemini/skills/react-ui-patterns, .github/skills/react-ui-patterns and .opencode/skills/react-ui-patterns in your project.

What does React UI State Patterns need to run?

SKILL.md names no scripts, command-line tools or credentials: React UI State Patterns is instructions for the agent only.

Does React UI State Patterns access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is React UI State Patterns safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does React UI State Patterns use?

No licence was found for React UI State Patterns or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.

How many tokens does React UI State Patterns use?

About 1.6k tokens (SKILL.md is roughly 6.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to React UI State Patterns?

Skills that share tags, products or a category with React UI State Patterns: Typescript Rules (shinpr/claude-code-workflows, 690 stars), React Router Development (remix-run/react-router, 57k stars), React Frontend Development Guidelines (diet103/claude-code-infrastructure-showcase, 10k stars) and Moai Ref React Patterns (modu-ai/moai-adk, 1.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React UI State Patterns?

ChrisWiles (a GitHub user) maintains it in ChrisWiles/claude-code-showcase, which has 6,072 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on January 6, 2026.

Source: ChrisWiles/claude-code-showcase on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.