CtrlK
BlogDocsLog inGet started
Tessl Logo

react-expert

React expert for hooks, state management, Server Components, and performance optimization

49

Quality

53%

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

Fix and improve this skill with Tessl

tessl review fix ./crates/openfang-skills/bundled/react-expert/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%

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-organized, compact React best-practices reference with concrete API names and a hook signature, but it restates concepts Claude already knows and lacks any complete executable example or multi-step workflow with validation checkpoints.

Suggestions

Strip explanations of well-known React concepts (rules-of-hooks rationale, React.memo reference behavior, stale closures) and keep only the directive, e.g., 'Never call hooks conditionally or inside loops.'

Add at least one complete, copy-paste-ready code example (e.g., a full useDebounce implementation or a memoization before/after snippet) to lift actionability toward 3.

Where a process applies (e.g., diagnosing a re-render problem), provide a sequenced checklist with an explicit profiling/validation checkpoint.

DimensionReasoningScore

Conciseness

The body is compact and bullet-driven, but several bullets explain concepts Claude already knows (e.g., 'hooks must be called in the same order on every render to maintain React's internal state mapping', 'this defeats React.memo because references change every render', 'missing dependencies cause stale closures that lead to subtle bugs').

2 / 3

Actionability

It names concrete APIs (useState, useReducer, useMemo, useCallback, React.lazy, Suspense, forwardRef) and a hook signature ('function useDebounce<T>(value: T, delay: number): T'), but provides no complete executable code example, and some bullets are abstract principles ('Lift state up to the nearest common ancestor').

2 / 3

Workflow Clarity

Content is organized into clear sections (Key Principles, Techniques, Common Patterns, Pitfalls to Avoid), but there is no multi-step workflow, sequence, or validation checkpoint to evaluate, so it cannot reach the score-3 anchor.

2 / 3

Progressive Disclosure

At under 50 lines with no need for external references, the skill is self-contained and well-organized into clearly headed sections, satisfying the simple-skill progressive disclosure criterion.

3 / 3

Total

9

/

12

Passed

Description

50%

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 names a clear React niche with several specific sub-domains but relies on a role statement ('expert for') rather than concrete actions and omits any 'Use when' trigger guidance. Trigger terms are relevant but lack common variations, so every dimension lands at the mid anchor.

Suggestions

Add concrete action verbs and a 'Use when...' clause, e.g., 'Builds and refactors React apps using hooks, state management, and Server Components. Use when the user needs help with React hooks, re-renders, memoization, or Server Components.'

Include common natural trigger terms users actually say (useState, useEffect, useReducer, context, memoization, re-renders, Next.js Server Components) to broaden discoverability.

Sharpen distinctiveness by clarifying scope versus Next.js or general frontend skills within the trigger guidance.

DimensionReasoningScore

Specificity

The phrase 'React expert for hooks, state management, Server Components, and performance optimization' names specific React sub-domains but uses no concrete action verbs (only the role 'expert for'), so it identifies the domain and capability areas without comprehensive actions.

2 / 3

Completeness

It states what the skill covers ('hooks, state management, Server Components, and performance optimization') but has no 'Use when...' clause or equivalent explicit trigger guidance, which caps completeness at 2 per the judging guidelines.

2 / 3

Trigger Term Quality

Terms like 'React', 'hooks', 'state management', 'Server Components', and 'performance optimization' are natural phrases users say, but common variations (useState, useEffect, useReducer, Redux, context, memoization, re-renders) are absent.

2 / 3

Distinctiveness Conflict Risk

It is clearly React-focused, but 'Server Components' and general React topics could overlap with Next.js or broad frontend skills, and the lack of explicit triggers leaves moderate conflict risk.

2 / 3

Total

8

/

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
RightNow-AI/openfang
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.