CtrlK
BlogDocsLog inGet started
Tessl Logo

react-best-practices

React performance optimization guidelines from Mastra Engineering. This skill should be used when writing, reviewing, or refactoring React code to ensure optimal performance patterns. Triggers on tasks involving React components, data fetching, bundle optimization, or performance improvements.

63

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

This is a well-structured routing skill: a lean priority-ordered overview that delegates detail to a verified set of 26 canonical rule files with clear one-level-deep navigation and grep-based lookup. The only real weakness is density — several rule summaries are run-on sentences cramming multiple conditions into one bullet, and the trailing category list duplicates the priority table.

DimensionReasoningScore

Conciseness

The body assumes Claude knows React — no concept explanations — and delivers one-line rule bullets with rule-file slugs, e.g. "Use `Promise.all()` for independent async operations (`async-parallel`)". A few bullets are overloaded run-on sentences (e.g. `structure-complex-derived-logic`, `types-no-type-assertions`) and the closing 'Rule Categories' list repeats the priority table, so not quite every token earns its place.

4 / 5

Actionability

Directives are concrete and API-specific — `Promise.all()`, `startTransition`, `skipToken`, `toSorted()`, `content-visibility: auto` — each backed by a canonical rule-file slug, plus executable lookup commands ("grep -l \"Promise.all\" references/rules/"). Not copy-paste code, but as an instruction/routing skill the guidance is actionable with only minor gaps.

4 / 5

Workflow Clarity

The lookup workflow is explicit: check the priority table, scan the Quick Reference, then "Load only the relevant rule file when implementing or reviewing a specific pattern" via the catalog or grep. It is a reference/routing skill rather than a sequential process, and the recommended lookup order is implied rather than numbered, so it sits just below the explicit-checkpoint level of anchor 5.

4 / 5

Progressive Disclosure

Verified against the actual bundle: all 26 rule files claimed by the body exist in `references/rules/` under the exact slugs cited, and `references/react-best-practices-reference.md` is a real catalog. SKILL.md is a genuine overview with one-level-deep, well-signaled references ("Rule files are the canonical source..."), grep navigation, and a category index — easy navigation, content appropriately split.

5 / 5

Total

17

/

20

Passed

Description

70%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 has an explicit and well-formed trigger clause with natural keywords, and clearly separates what the skill is from when to use it. Its main weakness is specificity: it describes the deliverable as generic 'guidelines' without naming the concrete optimization capabilities the body actually covers.

Suggestions

Replace 'React performance optimization guidelines' with 2-3 concrete capabilities, e.g. 'Eliminates data-fetching waterfalls, cuts bundle size, and prevents unnecessary re-renders in React code'.

Add high-frequency natural trigger terms users actually say — 'React hooks', 're-renders', 'slow/laggy UI' — to broaden trigger coverage.

Narrow the trigger scope from 'writing... React code' to performance-oriented contexts (e.g. 'when reviewing or refactoring React code for speed, bundle size, or rendering behavior') to reduce overlap with general React style and testing skills.

DimensionReasoningScore

Specificity

"React performance optimization guidelines" names the domain, and the trigger clause scopes it to components, data fetching, and bundle optimization, but no concrete actions or deliverables are listed. It sits above anchor 2 ('names the domain but actions are minimal') on the strength of the named sub-areas, but cannot reach 4 without specific capabilities.

3 / 5

Completeness

Both parts are explicitly present: what ("React performance optimization guidelines from Mastra Engineering") and when ("Triggers on tasks involving React components, data fetching, bundle optimization, or performance improvements"). The 'what' is thinner than anchor 5 requires — it names the deliverable type but not concrete capabilities — so it does not clearly reach 5.

4 / 5

Trigger Term Quality

"writing, reviewing, or refactoring React code", "data fetching", "bundle optimization", "performance improvements" are natural phrases users would say. Missing common variations like "hooks", "re-renders", or "slow/laggy UI", so it falls short of the comprehensive-synonym coverage of anchor 5.

4 / 5

Distinctiveness Conflict Risk

"React performance optimization" plus "bundle optimization" establish a clear niche with distinct triggers. However, "when writing, reviewing, or refactoring React code" is broad enough to overlap general React style, linting, or testing skills, which keeps it below the minimal-conflict bar of anchor 5.

4 / 5

Total

15

/

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
mastra-ai/mastra
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.