react-patterns

React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.

Quality

85%

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

Quality

Content

82%Weight 40%Scale 1-5

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

A dense, executable React patterns catalog with copy-paste code, decision trees, and well-organized cross-links. It is lean and actionable, with only minor room to tighten prose and split reference material into bundled files.

Dimension	Reasoning	Score
Conciseness	Code-forward and terse, assuming React competence ('React has no inheritance model for components'); length reflects breadth rather than padding, with only minor over-explanation that could be trimmed.	4 / 5
Actionability	Copy-paste-ready TSX for RSC server/client components, useActionState form actions, useOptimistic, and a useDebounce hook, plus a decision tree and data-fetching matrix covering the common cases.	5 / 5
Workflow Clarity	Decision trees and the data-fetching matrix give clear sequenced guidance with no destructive/batch operations requiring validation; checkpoints are implicit in the decision branches rather than explicit validate-fix-retry loops.	4 / 5
Progressive Disclosure	Well-organized sections with clearly signaled one-level cross-links (rules/react/hooks.md, sibling skills); no bundle files exist, and bulk reference material is inline rather than split into bundled files.	4 / 5
	Total	17 / 20 Passed

Description

88%Weight 40%Scale 1-5

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 strong, third-person description that pairs a comprehensive enumeration of concrete React capabilities with an explicit trigger clause. It is mostly distinct from sibling skills, with only minor overlap risk.

Dimension	Reasoning	Score
Specificity	Enumerates seven concrete capability areas (hooks discipline, server/client boundaries, Suspense + error boundaries, form actions, data fetching, state decision trees, a11y composition), matching the comprehensive-coverage anchor.	5 / 5
Completeness	Explicitly answers both what (the enumerated pattern list) and when ('Use when writing or reviewing React components') with a concrete trigger clause.	5 / 5
Trigger Term Quality	Natural phrases like 'writing or reviewing React components', 'React 18/19 patterns', and 'hooks' are present, but common synonyms/extensions a user might say (JSX/TSX, Next.js, .tsx) are absent.	4 / 5
Distinctiveness Conflict Risk	A clear React 18/19 niche with distinct triggers, but minor overlap risk with closely related sibling skills (react-performance, accessibility, frontend-patterns).	4 / 5
	Total	18 / 20 Passed

Validation

87%

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 — 14 / 16 Passed

Validation for skill structure

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning
relative_links	Relative link issues: 8 suspicious	Warning

	Total	14 / 16 Passed

Repository: affaan-m/ECC
Path: skills/react-patterns/SKILL.md
Commit: d8409a4

Reviewed: 1 day 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.