react-ui-patterns

Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.

Quality

66%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.claude/skills/react-ui-patterns/SKILL.md

Quality

Content

65%Weight 40%Scale 1-3

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A highly actionable, code-rich pattern reference that assumes Claude's intelligence and gives copy-paste examples. Its main weaknesses are redundancy between the main sections and the Anti-Patterns section, and a monolithic structure with no progressive disclosure to separate reference files.

Suggestions

Consolidate the Anti-Patterns section into the main sections (or trim it to only novel cases) to remove the duplicated loading/error/button examples and tighten conciseness.

Split the larger reference material (e.g. the ErrorState component API, the full form submission pattern) into a referenced file and link to it from a concise overview to improve progressive disclosure.

Add an explicit verify/retry checkpoint to the mutation and form-submission workflows so the workflow-clarity dimension reaches the top band.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean code with brief commentary and assumes Claude's competence, but the Anti-Patterns section largely restates the loading/error/button examples already shown, adding redundancy that could be tightened.	2 / 3
Actionability	It provides abundant executable TypeScript/TSX examples (e.g. the loading guard, ErrorState component, form submission) that are concrete and copy-paste ready, matching the level-3 anchor.	3 / 3
Workflow Clarity	A loading-state decision tree and a pre-completion checklist provide sequencing, but the skill is fundamentally a pattern catalog rather than a sequenced workflow with explicit validation checkpoints or fix-retry feedback loops.	2 / 3
Progressive Disclosure	Sections are well-organized with clear headers, but all content lives in a single ~285-line monolithic file with no one-level-deep references to split out detailed material, and it exceeds the under-50-line simple-skill exception.	2 / 3
	Total	9 / 12 Passed

Description

67%Weight 40%Scale 1-3

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A solid third-person description that clearly answers both what the skill covers and when to use it. It is held back from the top band by somewhat generic trigger terms and a lack of comprehensively enumerated concrete actions.

Dimension	Reasoning	Score
Specificity	Names the domain and several concerns ("loading states, error handling, and data fetching") and action gerunds ("building UI components, handling async data"), but stops short of a comprehensive list of concrete actions as the level-3 anchor requires.	2 / 3
Completeness	It explicitly states both what the skill does ("Modern React UI patterns for loading states, error handling, and data fetching") and when to use it ("Use when building UI components, handling async data, or managing UI states"), matching the level-3 anchor.	3 / 3
Trigger Term Quality	The "Use when building UI components, handling async data, or managing UI states" clause supplies relevant natural terms, but they are somewhat generic and miss common variations a user might actually say.	2 / 3
Distinctiveness Conflict Risk	The React-specific framing and UI-state focus give it a niche, but "UI components" and "UI states" are broad enough that it could overlap with general UI or form-handling skills.	2 / 3
	Total	9 / 12 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: ChrisWiles/claude-code-showcase
Path: .claude/skills/react-ui-patterns/SKILL.md
Commit: a95518f

Reviewed: 7 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.