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 well-structured React patterns reference with abundant executable examples and clear decision trees. It is conciser than most pattern catalogs and uses one-level cross-links well, with only minor trimming and structural-split opportunities preventing top scores.

Dimension	Reasoning	Score
Conciseness	The body is a lean, code-driven catalog where most prose (e.g. 'Derived state in useEffect adds a render cycle') earns its place; minor over-explanation of mechanics Claude already knows (React.memo equality-check behavior) keeps it just below a 5.	4 / 5
Actionability	Provides copy-paste-ready TSX for the common cases (Cart derivation, RSC boundaries, useActionState forms, useDebounce, useOptimistic) plus concrete decision trees and a data-fetching matrix — fully executable guidance.	5 / 5
Workflow Clarity	Decision trees (state location) and the data-fetching matrix give clear sequenced guidance with no destructive/batch operations requiring validation caps; it is a reference catalog rather than a multi-step process, so it stops short of the explicit validate→fix→retry pattern that defines a 5.	4 / 5
Progressive Disclosure	No bundle files exist, but the body is well-sectioned and cross-links to sibling materials (rules/react/hooks.md, accessibility/SKILL.md, react-testing) are one level deep and clearly signaled; minor organization gaps (some catalog content could live in reference files) keep it at 4.	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, specific description that names concrete React 18/19 capabilities and provides an explicit 'Use when' trigger in third person. Minor gaps in trigger synonyms/file extensions and some overlap risk with sibling React skills keep it just below the top anchor on two dimensions.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete capabilities — 'hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition' — giving comprehensive coverage rather than a single domain label.	5 / 5
Completeness	Explicitly answers both 'what' (the enumerated React 18/19 patterns) and 'when' ('Use when writing or reviewing React components') with a concrete trigger phrase.	5 / 5
Trigger Term Quality	Includes natural terms a user would say ('writing or reviewing React components', hooks, Suspense, form actions, data fetching), but omits synonyms and file extensions like JSX/TSX/.tsx that would push it to a 5.	4 / 5
Distinctiveness Conflict Risk	The 'React 18/19 patterns' framing is a clear niche, but the broad trigger 'writing or reviewing React components' risks overlap with closely related sibling skills (react-performance, react-testing) referenced in the body.	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
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning
relative_links	Relative link issues: 8 suspicious	Warning

	Total	14 / 16 Passed

Repository: affaan-m/ECC
Path: .kiro/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.