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.

70

Quality

86%

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

72%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a well-structured, progressively-disclosed catalog of 26 rules with strong navigation and concrete actionable directives, though it is not a sequenced workflow and several inline descriptions are verbose. It appropriately defers detailed examples to per-rule files rather than padding the overview.

Suggestions

Tighten the longest inline rule descriptions (e.g. client-request-dedupe, testing-bdd-no-mocks, structure-complex-derived-logic) into shorter phrasing, moving nuance into the rule files to improve conciseness.

Reduce redundancy between the priority table, the Quick Reference sections, and the rule-category listing at the end so each rule's summary appears once.

If a typical usage flow exists (consult catalog → load rule file → apply → verify pattern applied), state it as a short numbered sequence so the workflow is explicit rather than implied by the routing aids.

DimensionReasoningScore

Conciseness

The body assumes Claude's competence (no basic-concept explanations) and mostly earns its tokens, but several inline rule descriptions are wordy run-on sentences (e.g. the dependent-query-params and testing bullets) that could be tightened, and the Quick Reference mildly duplicates the reference catalog.

2 / 3

Actionability

Provides concrete, specific directives naming exact APIs and clear do/don't patterns (e.g. `Promise.all()`, `toSorted()` over `sort()`, `content-visibility: auto`, animate SVG wrappers not elements); per the instruction-skill scoring note, the absence of inline code blocks is not penalized since the guidance is actionable rather than vague.

3 / 3

Workflow Clarity

Gives a clear priority-ordered routing guide (impact table, "When to Apply" list, grep-based lookup examples) so the right rule is easy to find, but it is a reference catalog rather than a sequenced procedure, with no explicit validation checkpoints or feedback loops.

2 / 3

Progressive Disclosure

Clear overview with well-signaled one-level-deep references: the body points to `references/react-best-practices-reference.md` and the 26 verified rule files in `references/rules/` (stems match every inline slug), with category prefixes and grep examples for easy navigation and no nested-reference chains.

3 / 3

Total

10

/

12

Passed

Description

100%

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 strong: it states the skill's purpose concisely, names concrete actions in a well-scoped domain, and provides explicit trigger guidance a user would naturally voice. It uses appropriate third-person voice with no over-claims or fluff.

DimensionReasoningScore

Specificity

Lists multiple concrete actions on a specific domain — "writing, reviewing, or refactoring React code" plus "data fetching, bundle optimization" — matching the anchor for several specific concrete actions rather than vague language.

3 / 3

Completeness

Explicitly answers both what ("React performance optimization guidelines from Mastra Engineering") and when ("This skill should be used when..." / "Triggers on tasks involving..."), so it is not capped at 2 by the missing-trigger guideline.

3 / 3

Trigger Term Quality

Includes natural terms users would actually say ("React components", "data fetching", "bundle optimization", "performance improvements") with good coverage of common phrasings, matching the high-coverage anchor.

3 / 3

Distinctiveness Conflict Risk

Occupies a clear niche (React performance optimization) with React-specific triggers (React components, data fetching, bundle optimization), making conflict with unrelated skills unlikely despite the mildly generic "performance improvements" phrase.

3 / 3

Total

12

/

12

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