CtrlK
BlogDocsLog inGet started
Tessl Logo

react-component-performance

Diagnose slow React components and suggest targeted performance fixes.

57

Quality

66%

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 ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/react-component-performance/SKILL.md

The canonical home for this skill is react-component-performance in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Quality

Content

78%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-crafted skill with strong actionability through concrete before/after code examples and specific profiling instructions. The workflow is clear with validation steps, though it could benefit from explicit rollback guidance. The progressive disclosure is adequate but limited—only one external reference is mentioned and it cannot be verified against bundle files.

Suggestions

Provide the referenced `references/examples.md` file or remove the reference to avoid a dead link, and consider splitting the checklist or profiling steps into a separate reference file for better progressive disclosure.

Add explicit rollback guidance in the workflow (e.g., 'If profiling shows no improvement or regression, revert the change before trying the next optimization').

DimensionReasoningScore

Conciseness

The content is efficient and avoids explaining basic React concepts. The before/after code examples are well-justified and earn their tokens. Minor verbosity in the checklist section where some items could be more terse (e.g., 'verify dependency arrays; avoid effects that re-run on every render' explains something Claude knows).

4 / 5

Actionability

Provides fully executable before/after TSX code examples for three common patterns, specific profiling steps with tool names and thresholds (~16ms), and a concrete checklist. The code is copy-paste ready and covers the most common performance scenarios.

5 / 5

Workflow Clarity

The workflow has a clear sequence from reproduction through validation, with an explicit profiling validation step (step 6) and a dedicated 'Profiling Validation Steps' section with a feedback loop ('apply one optimization at a time, re-record, and compare'). Minor gap: the main workflow doesn't explicitly state what to do if validation shows no improvement (rollback guidance).

4 / 5

Progressive Disclosure

References `references/examples.md` for concrete refactor examples, which is good progressive disclosure. However, no bundle files are provided, so the reference is unverifiable. The inline content is reasonably sized but the checklist + patterns + profiling steps could arguably be split into separate files for better organization. The single reference is somewhat buried at the end.

3 / 5

Total

16

/

20

Passed

Description

53%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 clearly identifies its domain (React performance) with two concrete but high-level actions. Its main weaknesses are the absence of a 'Use when...' clause and the lack of specific trigger terms and synonyms that users would naturally use when seeking React performance help. Adding explicit trigger guidance and more specific capability details would significantly improve skill selection accuracy.

Suggestions

Add a 'Use when...' clause with trigger terms like 'slow React app', 're-renders', 'React performance', 'optimize component', 'laggy UI', or 'React profiler'.

Expand the capability list with specific techniques: e.g., 'identify unnecessary re-renders, recommend memoization (useMemo, useCallback, React.memo), optimize context usage, and reduce bundle size'.

Include natural synonyms and variations users might say, such as 'optimize', 'speed up', 'rendering issues', or 'React lag'.

DimensionReasoningScore

Specificity

Names the domain (React components) and describes two actions (diagnose slow components, suggest performance fixes), but lacks specifics about what kinds of fixes or diagnostic methods (e.g., memoization, profiling, re-render analysis, useMemo, useCallback).

3 / 5

Completeness

Has a clear 'what' (diagnose slow React components and suggest fixes) but completely lacks a 'when' clause or explicit trigger guidance, which per the rubric caps this dimension at 3.

3 / 5

Trigger Term Quality

Includes 'React components', 'slow', and 'performance fixes' which are relevant keywords, but misses common natural terms users would say like 're-render', 'lag', 'optimization', 'useMemo', 'useCallback', 'React profiler', or 'bundle size'.

3 / 5

Distinctiveness Conflict Risk

Fairly distinct by targeting specifically React performance issues, which narrows the scope well. Minor overlap risk with general React development skills or broader frontend performance skills, but the focus on 'slow components' and 'performance fixes' provides reasonable differentiation.

4 / 5

Total

13

/

20

Passed

Validation

90%

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

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

10

/

11

Passed

Repository
administrakt0r/AI-Agents-Safe-Coding-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.