CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

react-component-performance

Diagnose slow React components and suggest targeted performance fixes.

Quality

74%

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 ./skills/react-component-performance/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

85%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 strong, disciplined skill body: lean checklists, executable before/after React patterns, and an explicit profiling workflow with validation and feedback loops. Its only notable weaknesses are the duplicated validation guidance and code examples missing imports/type definitions.

Suggestions

Merge the validation guidance in Workflow step 6 with the 'Profiling Validation Steps' section to remove redundancy and save tokens.

Add import lines (or a one-line note that standard React imports are implied) and define or note the placeholder types so the code examples are copy-paste ready.

DimensionReasoningScore

Conciseness

The body is lean and assumes React competence (no explanation of hooks, memo, or what React is), with one minor trim opportunity: validation guidance appears twice (Workflow step 6 and the 'Profiling Validation Steps' section). This is efficient with minor redundancy rather than the every-token-earns-its-place ideal.

4 / 5

Actionability

Concrete before/after code for the common cases (ticking state, callback stability, derived data) plus a specific profiling procedure make the guidance mostly executable; minor gaps remain — code omits import statements and referenced types ('Item', 'RowProps', 'Order') are undefined, so it is not literally copy-paste ready.

4 / 5

Workflow Clarity

Six clearly sequenced steps with an explicit 'Validate' checkpoint, a dedicated profiling procedure (record, flamegraph, ranked chart, ~16 ms threshold, baseline comparison), and a feedback loop ('apply one optimization at a time, re-record, and compare against the baseline') — this matches the anchor for a clear sequence with explicit validation and feedback loops.

5 / 5

Progressive Disclosure

Well-sectioned overview with one clearly-signaled, one-level-deep reference ('Load references/examples.md when the user wants a concrete refactor example' — verified to exist), and content appropriately split between inline core patterns and the extended example file.

5 / 5

Total

18

/

20

Passed

Description

53%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, concrete, and appropriately third-person, clearly stating what the skill does. Its main weaknesses are the complete absence of 'when to use' trigger guidance and missing common trigger terms like 'optimize' or 're-renders'.

Suggestions

Add an explicit trigger clause, e.g. 'Use when the user asks to profile, optimize, or speed up a React component or reduce re-renders.'

Include natural trigger terms users actually say: 'optimize React', 'too many re-renders', 'laggy/janky component', 'React performance'.

Enumerate the key actions more fully (diagnose re-render hotspots, stabilize props/handlers, memoize, virtualize long lists) to lift specificity.

DimensionReasoningScore

Specificity

Names the domain ('React components') with two concrete actions ('Diagnose', 'suggest targeted performance fixes'), matching the anchor for 1-2 concrete actions without comprehensive coverage; it does not list several specific actions like re-render reduction, memoization, or virtualization.

3 / 5

Completeness

The 'what' is clear (diagnose and suggest fixes), but there is no 'Use when...' clause or equivalent explicit trigger guidance, which caps completeness at 3 per the judging guidelines; the 'what' is concrete, so it is above the vague-what anchor.

3 / 5

Trigger Term Quality

'slow React components' and 'performance fixes' are natural phrases users would say, but common variations and synonyms are missing ('optimize', 're-renders', 'laggy/janky React UI'), so coverage falls short of the good-coverage anchor.

3 / 5

Distinctiveness Conflict Risk

The React component performance niche is mostly distinct, with only minor overlap risk against closely related skills such as general profiling or web-performance skills; it lacks the explicit distinct trigger phrases that would justify a 5.

4 / 5

Total

13

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

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

Warning

Total

15

/

16

Passed

Repository

administrakt0r/AI-Agents-Safe-Coding-Skills

Path

skills/react-component-performance/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.