CtrlK
BlogDocsLog inGet started
Tessl Logo

react-best-practices

Client-side React performance optimization patterns.

59

Quality

67%

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

86%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 content is a lean, well-organized reference catalog of concrete React performance patterns with clear impact categorization and activation guidance. It is highly concise and well-structured; the only minor gap is that patterns are stated as key points rather than complete copy-paste examples.

DimensionReasoningScore

Conciseness

The body is lean tables of rules with no concept explanations or padding, assuming Claude already knows React; every line earns its place.

5 / 5

Actionability

It gives concrete, executable patterns (React.lazy + Suspense, setState(prev => ...), useState(() => expensive()), .toSorted()) but presents them as inline key points rather than complete copy-paste code blocks, leaving minor gaps.

4 / 5

Workflow Clarity

As a reference catalog it is well-organized by impact (CRITICAL/HIGH/MEDIUM/LOW) with clear activation conditions rather than a multi-step process; organization is clear but it lacks an explicit process sequence or validation checkpoints.

4 / 5

Progressive Disclosure

Content is split into clearly labeled category sections with well-organized tables and no external bundle files needed, making navigation easy within a single self-contained file.

5 / 5

Total

18

/

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 names a clear, distinct niche but is thin on concrete actions and lacks any 'Use when...' trigger guidance. Specificity and completeness are the main weaknesses; trigger coverage is adequate but not comprehensive.

Suggestions

Add a 'Use when...' clause listing concrete trigger scenarios, e.g. 'Use when fixing component re-render issues, reducing bundle size, or optimizing useEffect/useMemo patterns.'

Name concrete actions in the description rather than the generic word 'patterns', e.g. 'Memoize expensive computations, code-split heavy components, and minimize hook dependencies.'

Include a few natural trigger synonyms users actually say (re-renders, bundle size, slow components) to broaden trigger-term coverage.

DimensionReasoningScore

Specificity

The phrase 'Client-side React performance optimization patterns' names the domain but provides only minimal/generic actions (no concrete actions like 'memoize', 'code-split', or 'reduce re-renders' are stated).

2 / 5

Completeness

It states a clear 'what' (client-side React performance optimization patterns) but provides no 'when'/Use-when trigger clause, which caps completeness at 3 per the rubric.

3 / 5

Trigger Term Quality

It includes relevant natural keywords ('React', 'performance', 'optimization') but misses common variations a user would say ('re-renders', 'bundle size', 'useMemo/useEffect').

3 / 5

Distinctiveness Conflict Risk

'React performance optimization' is a specific niche with low conflict risk against unrelated skills, with only minor overlap against closely related React skills.

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.

Validation16 / 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.