CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

77

Quality

97%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

92%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.

The body is a well-structured overview: a validated workflow with genuine feedback loops, three executable reference patterns, concrete constraints, and a properly wired one-level-deep reference system verified against the actual bundle. The only weakness is mild token padding in the Knowledge Reference list, the duplicated When-to-Use bullets, and the attribution footer.

Suggestions

Delete or relocate the 'Knowledge Reference' section — a bare list of technology names (React 19, TanStack Query, Zustand, ...) provides no guidance and duplicates what the reference files cover; it can be dropped entirely.

Trim the 'When to Use This Skill' bullet list, which restates the frontmatter description's triggers, or merge it into the Reference Guide table's 'Load When' column so trigger guidance lives in one place.

Move the maintainer attribution and documentation links out of the instruction body into the YAML frontmatter metadata, where they already partially exist, to keep the body purely instructional.

DimensionReasoningScore

Conciseness

The body is largely efficient — complete code examples, terse MUST DO/MUST NOT constraints, a lean workflow — but a few sections could be trimmed: the "Knowledge Reference" paragraph ("React 19, Server Components, use() hook, Suspense, TypeScript, TanStack Query...") is a bare technology list with no guidance, the "When to Use This Skill" bullets largely restate the frontmatter description, and the maintainer-attribution footer is non-instructional. It is above anchor 3 ('some unnecessary explanation') because no space is spent teaching concepts Claude already knows; it is below anchor 5 because those padding sections exist.

4 / 5

Actionability

Three complete, copy-paste-ready TSX examples cover the most common cases (a Server Component page, a React 19 useActionState form, a custom hook with cleanup), backed by a concrete validation command (`tsc --noEmit`) and concrete constraints ("Use `key` props correctly (stable, unique identifiers)", "Never use array index as key for dynamic lists"). This matches anchor 5; the only blemish is a "perform server action or fetch" placeholder comment in one example, which is not enough to drop to anchor 4.

5 / 5

Workflow Clarity

The six-step Core Workflow is clearly sequenced with explicit validation checkpoints and feedback loops: "Run `tsc --noEmit`; if it fails, review reported errors, fix all type issues, and re-run until clean", "if new type errors are introduced, return to step 4", and "if any assertions fail, debug and fix before submitting", complemented by MUST DO/MUST NOT checklists. This matches anchor 5's 'explicit validation steps; feedback loops for error recovery; checklists'; the destructive/batch cap does not apply since this is implementation guidance, not a destructive operation.

5 / 5

Progressive Disclosure

The Reference Guide table clearly signals seven topic references with 'Load When' conditions, and all seven files (server-components.md, react-19-features.md, state-management.md, hooks-patterns.md, performance.md, testing-react.md, migration-class-to-modern.md) exist in the bundle with substantial content. References are one level deep, only key patterns are kept inline, and navigation is trivial — matching anchor 5.

5 / 5

Total

19

/

20

Passed

Description

100%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.

The description is exemplary: it pairs an explicit 'Use when' trigger clause with file extensions, framework synonyms, and React-version-specific terms, followed by five concrete third-person capability statements. It comprehensively covers what the skill does and when to invoke it with minimal conflict risk.

DimensionReasoningScore

Specificity

The description lists five concrete, distinct actions ("Creates components, implements custom hooks, debugs rendering issues, migrates class components to functional, and implements state management") — comprehensive coverage of the domain. It exceeds anchor 4 (which allows minor gaps) because creation, debugging, migration, state management, and invocation targets are all explicitly named in third-person voice.

5 / 5

Completeness

It explicitly answers both questions: "what" via the five concrete actions and "when" via the opening "Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups" plus a secondary "Invoke for..." clause. This mirrors the anchor 5 example's structure (concrete action list + explicit trigger phrase) exactly, so it is not anchor 4 (whose 'when' is less specific).

5 / 5

Trigger Term Quality

Natural trigger terms are comprehensive and include file extensions (".jsx or .tsx files"), version markers ("React 18+", "React 19"), framework synonyms ("Next.js App Router projects, or create-react-app setups"), and specific API names ("Server Components, Suspense boundaries, useActionState forms"). This matches anchor 5's bar of synonyms plus file extensions; nothing a user would naturally say when needing React help is missing.

5 / 5

Distinctiveness Conflict Risk

The niche is clearly delimited by file types, framework names, and React-specific APIs, so it is unlikely to fire for a non-React skill. Related skills (e.g., a testing or fullstack skill) would trigger on their own distinct terms; overlap risk is minimal, matching anchor 5's 'clear niche with distinct triggers' rather than anchor 4's 'minor overlap risk with closely related skills'.

5 / 5

Total

20

/

20

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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

Jeffallan/claude-skills

Path

skills/react-expert/SKILL.md

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.