CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

72

Quality

88%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

Quality

Discovery

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 an excellent skill description that clearly defines its scope (React 18+ development), lists concrete actions, and provides explicit trigger conditions with both 'Use when' and 'Invoke for' clauses. It includes rich, natural trigger terms spanning file types, frameworks, specific React features, and common developer tasks, making it highly distinguishable from other skills.

DimensionReasoningScore

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 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', 'rendering issues', 'class components', 'state management', 'Server Components', 'Suspense', 'useActionState', 'React 19'. These are terms developers naturally use when seeking React help.

3 / 3

Distinctiveness Conflict Risk

Highly distinctive with clear niche targeting React 18+/19 specifically, including framework-specific terms like 'Next.js App Router', 'useActionState', 'Server Components', and file extensions '.jsx'/'.tsx'. Unlikely to conflict with general JavaScript or other framework skills.

3 / 3

Total

12

/

12

Passed

Implementation

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 TypeScript examples and a well-structured workflow with validation feedback loops. The progressive disclosure structure is well-designed in theory but undermined by the absence of actual bundle files. Minor conciseness issues include redundant sections (role declaration, keyword list, 'When to Use' repeating the description) that could be trimmed.

Suggestions

Remove the 'Knowledge Reference' keyword list and the role declaration sentence — these add no actionable value and waste tokens.

Create the referenced bundle files (e.g., references/server-components.md, references/react-19-features.md) to fulfill the progressive disclosure promises made in the reference table.

Trim or remove the 'When to Use This Skill' section since it largely duplicates the skill description in the frontmatter.

DimensionReasoningScore

Conciseness

Generally efficient but includes some unnecessary sections like 'Knowledge Reference' which is just a keyword list Claude already knows, and the 'When to Use This Skill' section largely restates the frontmatter description. The role declaration ('Senior React specialist...') adds no value. However, the code examples and constraints are tight.

2 / 3

Actionability

Provides fully executable, copy-paste-ready TypeScript code examples for three key 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 reference files to keep the main skill leaner.

2 / 3

Total

10

/

12

Passed

Validation

100%

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

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
jeffallan/claude-skills
Reviewed

Table of Contents

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.