CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

react-best-practices

Performance optimization for React applications — rendering, re-renders, data-fetching waterfalls, bundle size, and the JavaScript hot paths inside components. Use when the user mentions slow or janky renders, unnecessary re-renders, memoization (React.memo / useMemo / useCallback), lazy loading, code splitting, bundle size, request waterfalls, duplicate or repeated API requests, request deduplication, caching fetched data in localStorage, scroll or touch event listeners, laggy scrolling or typing, or asks to review, profile, or speed up React code. Not a general React authoring guide — for folder and layer structure use react-feature-sliced-design, for language and typing questions use typescript-development.

71

Quality

89%

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

SKILL.md
Quality
Evals
Security

Quality

Content

78%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 body is an exemplary progressive-disclosure index: a priority-ordered category table, one-line summaries of all 37 rules with per-rule impact labels, and verified one-level-deep references whose structure matches what the body promises. It is lean and actionable for navigation; the small deductions are for a repeated explanation of the impact field and the absence of any inline executable guidance.

DimensionReasoningScore

Conciseness

The body is a lean index — every rule gets a one-line summary and nothing explains concepts Claude already knows. Minor over-explanation remains: the `impact:` front-matter field is explained twice ("Each rule carries its own `impact:` value in the front matter..." and "Impact labels below are the `impact:` value from each rule file's front matter"), and the category-vs-impact justification paragraph could be trimmed slightly.

4 / 5

Actionability

Guidance is concrete and executable for an index document: exact rule file names with prefixes (`async-`, `bundle-`), per-rule impact labels for prioritization, and an explicit instruction to "work top-down when reviewing" and "Read individual files as needed". It stays at 4 rather than 5 because no executable steps or examples are inline — all actionable content is delegated to the reference files.

4 / 5

Workflow Clarity

A clear sequence is present: prioritize categories top-down by the priority table, then open the specific rule file indicated by prefix and impact. No validation checkpoints are included, but none are needed — this is an advisory/review skill with no destructive or batch operations, so the score-3 cap does not apply. It falls short of 5 because the workflow is a single ordering instruction rather than an explicit sequenced process with checkpoints.

4 / 5

Progressive Disclosure

Verified against the actual bundle: all 37 rule names quoted in the body exist as files in `references/`, exactly one level deep, and spot-checked files carry the promised structure (`impact:` front matter, explanation, incorrect/correct code pair, context). SKILL.md is a clean overview with well-signaled one-level references — a direct match for the score-5 anchor.

5 / 5

Total

17

/

20

Passed

Description

95%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.

A strong description: it states a precise niche (React performance optimization across named domains), provides an explicit and richly detailed 'Use when' trigger list with natural synonyms and API names, and actively disambiguates from sibling skills. The only minor gap is that the 'what' enumerates problem areas more than distinct concrete actions.

DimensionReasoningScore

Specificity

Concrete verbs appear ("asks to review, profile, or speed up React code") alongside enumerated focus areas ("data-fetching waterfalls, bundle size, memoization (React.memo / useMemo / useCallback), caching fetched data in localStorage"). The 'what' leans topical — a list of problem areas rather than a comprehensive set of distinct actions like the score-5 anchor — so it sits at 'several specific actions with minor gaps', not clearly one anchor above.

4 / 5

Completeness

Explicitly answers both questions: what ("Performance optimization for React applications — rendering, re-renders, data-fetching waterfalls, bundle size, and the JavaScript hot paths inside components") and when ("Use when the user mentions slow or janky renders..."). Both are concrete and explicit with trigger phrases, exactly matching the score-5 anchor.

5 / 5

Trigger Term Quality

Comprehensive natural phrasing with synonyms and API names users would actually say: "slow or janky renders", "unnecessary re-renders", "lazy loading", "code splitting", "request waterfalls", "duplicate or repeated API requests", "laggy scrolling or typing", "React.memo / useMemo / useCallback". Matches the score-5 anchor (synonyms plus specific API identifiers); nothing common is missing.

5 / 5

Distinctiveness Conflict Risk

Clear niche (React performance optimization) with explicit boundary carve-outs: "Not a general React authoring guide — for folder and layer structure use react-feature-sliced-design, for language and typing questions use typescript-development." Distinct triggers plus explicit disambiguation from sibling skills minimize conflict risk; it clearly matches the score-5 anchor rather than the score-4 'minor overlap risk' anchor.

5 / 5

Total

19

/

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

provectus/awos-recruitment

Path

registry/skills/react-best-practices/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.