react-expert

Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components, implements custom hooks, debugs rendering issues, migrates class components to functional, and implements state management. Invoke for Server Components, Suspense boundaries, useActionState forms, performance optimization, or React 19 features.

Quality

88%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Quality

Content

77%

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

This is a solid React skill with excellent actionability through executable code examples and a well-structured workflow with proper validation loops. The main weaknesses are moderate verbosity in introductory/metadata sections that Claude doesn't need, and the complete absence of the 7 referenced bundle files which undermines the progressive disclosure strategy. The constraints section provides valuable, specific guardrails.

Suggestions

Remove or drastically shorten the 'When to Use This Skill' section and the introductory tagline — this information belongs in YAML frontmatter, not the body content.

Remove the 'Knowledge Reference' flat list at the bottom — Claude already knows these technologies and the list provides no actionable guidance.

Provide the referenced bundle files (e.g., references/server-components.md, references/react-19-features.md) so the progressive disclosure structure actually functions.

Dimension	Reasoning	Score
Conciseness	Generally efficient but includes some unnecessary content: the introductory line ('Senior React specialist with deep expertise...') adds no value, the 'When to Use This Skill' section largely restates what Claude can infer, and the 'Knowledge Reference' section at the bottom is a flat list of technologies Claude already knows. The code examples and constraints are well-targeted though.	2 / 3
Actionability	Provides fully executable, copy-paste-ready TypeScript/TSX code examples for three distinct patterns (Server Components, useActionState forms, custom hooks). The constraints section gives specific, concrete do/don't guidance. The workflow includes specific commands like `tsc --noEmit`.	3 / 3
Workflow Clarity	The core workflow has a clear 6-step sequence with explicit validation checkpoints: step 4 requires running `tsc --noEmit` and re-running until clean, step 5 loops back to step 4 if new type errors appear, and step 6 requires debugging failed assertions before submitting. This constitutes proper feedback loops for error recovery.	3 / 3
Progressive Disclosure	The reference table is well-structured with clear 'Load When' guidance, pointing to 7 separate reference files. However, no bundle files were provided, meaning none of these references actually exist. The inline content is reasonably sized but the constraints and output templates sections could potentially be in references. The structure is good in theory but unverifiable in practice.	2 / 3
	Total	10 / 12 Passed

Description

100%

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

This is a strong skill description that excels across all dimensions. It provides specific concrete actions, rich natural trigger terms covering the React ecosystem, explicit 'Use when' and 'Invoke for' clauses, and a clearly defined niche that distinguishes it from other frontend or JavaScript skills. The description is concise yet comprehensive, using proper third-person voice throughout.

Dimension	Reasoning	Score
Specificity	Lists multiple specific concrete actions: 'Creates components, implements custom hooks, debugs rendering issues, migrates class components to functional, and implements state management.' Also mentions specific technical features like Server Components, Suspense boundaries, useActionState forms, and performance optimization.	3 / 3
Completeness	Clearly answers both 'what' (creates components, implements hooks, debugs rendering, migrates class components, state management) and 'when' with explicit triggers ('Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups' and 'Invoke for Server Components, Suspense boundaries...').	3 / 3
Trigger Term Quality	Excellent coverage of natural terms users would say: 'React', '.jsx', '.tsx', 'Next.js App Router', 'create-react-app', 'custom hooks', 'Server Components', 'Suspense', 'useActionState', 'React 19', 'React 18+', 'state management', 'rendering issues'. These are terms developers naturally use when seeking React help.	3 / 3
Distinctiveness Conflict Risk	Clearly scoped to React 18+ ecosystem with distinct triggers like '.jsx/.tsx files', 'Next.js App Router', 'React 19 features', 'Suspense boundaries', and 'useActionState'. This is specific enough to avoid conflicts with general JavaScript, Vue, Angular, or other framework skills.	3 / 3
	Total	12 / 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 — 11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository: Jeffallan/claude-skills
Commit: e8be415

Reviewed: 4 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.