CtrlK
BlogDocsLog inGet started
Tessl Logo

react-best-practices

Client-side React performance optimization patterns.

57

Quality

65%

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 ./frontend/.claude/skills/react-best-practices/SKILL.md
SKILL.md
Quality
Evals
Security

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.

This is a well-built reference-style skill: token-efficient rule tables, concrete API-level directives, and clear category/impact organization. The main gaps are the absence of any code examples showing rules in context and no symptom-to-category diagnostic guidance for applying the catalog.

DimensionReasoningScore

Conciseness

The body is a lean table-per-category catalog: one key point per rule, no padding, no explanations of concepts Claude already knows (e.g., "RegExp hoisting is enforced by Biome (useTopLevelRegex)" is non-obvious and load-bearing). Every token earns its place, matching the lean-and-efficient anchor.

5 / 5

Actionability

Rules give concrete, executable directives with exact APIs ("`useState(() => expensive())` not `useState(expensive())`", "`setState(prev => ...)` to avoid stale closures"), but there are no complete copy-paste code examples. This is mostly executable guidance with minor gaps — anchor 4, not 5, which requires ready-to-run examples covering common cases.

4 / 5

Workflow Clarity

Activation Conditions plus CRITICAL/HIGH/MEDIUM/LOW impact tiers give a clear organizing structure, and no validation checkpoints are needed since the skill is non-destructive. It stops short of anchor 5 because there is no diagnostic flow — nothing tells Claude how to identify which category of rule applies to a given symptom (bundle bloat vs. re-render storm).

4 / 5

Progressive Disclosure

No bundle files exist and the body is cleanly sectioned by category with an overview line ("29 rules organized by category and impact"), which is good structure. It is not a 5 because at ~77 lines of dense catalog covering 29 rules, the skill would benefit from offloading per-rule detail (examples, rationale) to one-level-deep reference files rather than inline key points.

4 / 5

Total

17

/

20

Passed

Description

48%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 concise and names a distinct, specific domain, but it stops at the domain label: no concrete capabilities and no "when to use" guidance. Adding an explicit trigger clause and one or two concrete actions would move it from adequate to strong.

Suggestions

Add an explicit activation clause, e.g., "Use when optimizing React app performance, debugging re-render issues, or reducing bundle size" — this lifts completeness and trigger-term quality simultaneously.

Name 1-2 concrete capabilities in the description (e.g., "memoization, code-splitting, and re-render prevention patterns") to raise specificity beyond a bare domain label.

Include natural user phrasings like "re-renders", "slow React app", or "bundle size" so the skill triggers on the words users actually say.

DimensionReasoningScore

Specificity

"Client-side React performance optimization patterns" names the domain (React, performance optimization) but lists no concrete actions, matching the anchor for naming a domain with minimal actions ("Processes PDF files"). It falls short of a 3 because no specific capability (e.g., memoizing components, code-splitting) is stated.

2 / 5

Completeness

The "what" is clear (client-side React performance optimization patterns), but there is no "Use when..." clause or equivalent trigger guidance, which the judging guidelines cap at 3. It is not a 4 because the "when" is entirely missing rather than merely imprecise.

3 / 5

Trigger Term Quality

"React", "performance optimization", and "client-side" are relevant keywords, but common natural phrases users would say ("re-renders", "slow component", "bundle size", "optimize my React app") are absent. This sits between anchor 3 (some relevant keywords, missing variations) and the fuller coverage of anchor 4.

3 / 5

Distinctiveness Conflict Risk

The phrase carves a clear niche (client-side React performance) with distinct trigger surface, though it could minorly overlap with general React development or web-performance skills. Mostly distinct with minor overlap risk matches anchor 4, short of the minimal-conflict clarity of anchor 5.

4 / 5

Total

12

/

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
redpanda-data/console
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.