Skills react-ui-patterns
📦

react-ui-patterns

Content revision r1 Safe ⚙️ External commands

Build Resilient React UI States

React interfaces often fail to show clear loading, error, empty, and submission states. This skill gives practical patterns for predictable async UI behavior.

Supports: Claude Codex Code(CC)
🥉 79 Bronze

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request
Review the Skillstore skill "react-ui-patterns" from https://skillstore.io/skills/chriswiles-react-ui-patterns.md and its manifest at https://skillstore.io/api/skills/chriswiles-react-ui-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/chriswiles-react-ui-patterns.md Signed manifest GET /api/skills/chriswiles-react-ui-patterns/manifest Signed lockfile GET /api/skills/chriswiles-react-ui-patterns/lockfile

Test it

Using "react-ui-patterns". A product list flashes a spinner during every background refetch.

Expected outcome:

The skill recommends showing existing product data during refetch and using a subtle refresh indicator only when useful.

Using "react-ui-patterns". A submit button stays active while a mutation is running.

Expected outcome:

The skill recommends disabling the button, showing a loading state, and surfacing completion or error feedback.

Using "react-ui-patterns". A search screen returns no results and displays a blank page.

Expected outcome:

The skill recommends a contextual empty state with search guidance and a clear next action.

Security Audit

Safe
v9 • 7/6/2026 Open versioned report

The static findings are false positives caused by Markdown code fences and React component examples in SKILL.md. No executable scripts, shell commands, prompt injection, credential access, or malicious intent were found.

1
Files scanned
290
Lines analyzed
0
Review items
0
False positives ignored

Risk Factors

⚙️ External commands (27)
SKILL.md:22-31 SKILL.md:31-33 SKILL.md:33-36 SKILL.md:36-40 SKILL.md:40-53 SKILL.md:53-68 SKILL.md:68-73 SKILL.md:73-79 SKILL.md:79-97 SKILL.md:97-101 SKILL.md:101-118 SKILL.md:118-124 SKILL.md:124-132 SKILL.md:132-138 SKILL.md:138-152 SKILL.md:152-160 SKILL.md:160-171 SKILL.md:171-175 SKILL.md:175-190 SKILL.md:190-194 SKILL.md:194-227 SKILL.md:227-233 SKILL.md:233-239 SKILL.md:239-243 SKILL.md:243-256 SKILL.md:256-260 SKILL.md:260-268
No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.
Audited by: codex View Audit History →
Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report
Security Assessment

Copy report link

https://skillstore.io/skills/chriswiles-react-ui-patterns/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/chriswiles-react-ui-patterns/security.svg)](https://skillstore.io/skills/chriswiles-react-ui-patterns?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/chriswiles-react-ui-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/chriswiles-react-ui-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/chriswiles-react-ui-patterns.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
Academic citations (APA · BibTeX · CFF)

APA citation

ChrisWiles. (2026). react-ui-patterns security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/chriswiles-react-ui-patterns/audits/9

BibTeX citation

@techreport{chriswiles-chriswiles-react-ui-patterns-2026, author = {ChrisWiles}, title = {react-ui-patterns security audit report (audit version 9)}, institution = {Skillstore}, year = {2026}, number = {9}, url = {https://skillstore.io/skills/chriswiles-react-ui-patterns/audits/9}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "react-ui-patterns security audit report (audit version 9)" version: "unspecified" type: report authors: - name: "ChrisWiles" date-released: "2026-07-06" url: "https://skillstore.io/skills/chriswiles-react-ui-patterns/audits/9" identifiers: - type: other value: "skillstore:chriswiles-react-ui-patterns:audit:9" description: "Skillstore immutable audit report identifier"

Compare variants

2 installable variants

Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.

Why this variant is first

Highest Skillstore Score
ChrisWiles Recommended Current

chriswiles-react-ui-patterns

Skillstore Score 79
Evidence Confidence High
Skillstore usage 11
Updated

2026-08-21

sickn33

sickn33-react-ui-patterns

Skillstore Score 77
Evidence Confidence High
Skillstore usage 9
Updated

2026-08-21

Skillstore Score

Why this score Evidence Confidence: High
55
Architecture
85
Maintainability
87
Content
70
Community
91
Spec Compliance

What You Can Build

Stabilize Data Fetching Views

Use the patterns to avoid stale spinners, missing empty states, and unclear retry paths in React screens.

Review Async UI Requirements

Apply the checklist when reviewing loading, error, and empty states before release.

Standardize Product Form Feedback

Use the form and button patterns to keep submissions clear, disabled, and recoverable.

Try These Prompts

Check A Component 
Review this React component using the react-ui-patterns skill. Identify missing loading, error, empty, and button states.
Improve A Data View 
Refactor this data fetching view with the react-ui-patterns guidance. Preserve cached data during refetch and show clear recovery paths.
Design Form Submission States 
Design the async states for this form using react-ui-patterns. Include validation feedback, disabled submit behavior, success feedback, and failure recovery.
Audit A Workflow 
Audit this React workflow with react-ui-patterns. Produce a prioritized list of UI state gaps across loading, errors, empty data, and mutations.

Best Practices

  • Show loading indicators only when there is no useful data to display.
  • Surface every meaningful error with feedback and a recovery path.
  • Disable action triggers while async operations are in progress.

Avoid

  • Replacing cached content with a full spinner during background refetch.
  • Logging errors without showing any user-facing failure state.
  • Leaving submit buttons active during pending mutations.

Frequently Asked Questions

Does this skill generate complete React components?
No. It provides patterns and examples that help Claude, Codex, and Claude Code improve your components.
Can it help with GraphQL mutation states?
Yes. It includes mutation guidance for loading, success, error, and disabled submit states.
Does it replace a design system?
No. It complements a design system by defining state behavior and interaction expectations.
Is it limited to web React?
Most guidance applies to React UI work. Some list examples also fit React Native patterns.
Can it audit empty states?
Yes. It includes requirements for collection, search, and first-use empty states.
Does it run commands or install dependencies?
No. The skill is documentation only and contains no runnable scripts.

Developer Details

Author

ChrisWiles

License

MIT

Skillstore revision

r1

Version notice

The author did not declare a version.

Repository

https://github.com/ChrisWiles/claude-code-showcase/tree/main/.claude/skills/react-ui-patterns

Ref

dd4a3ef9f20ddf38830950b4bb713df96b431fd6

Maintenance freshness

7/18/2026

Usage

9 downloads · 188 views

File structure

📄 SKILL.md