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.

Quality

79%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.claude/skills/react-best-practices/SKILL.md

Quality

Content

71%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 a well-structured routing skill that excels at progressive disclosure and gives concrete, actionable pattern pointers. Its main weakness is conciseness: several inline rule summaries duplicate content that already lives in the referenced rule files.

Suggestions

Trim the long inline rule summaries (e.g. structure-complex-derived-logic, types-no-type-assertions) to one-line pointers, since the rule files hold the detail; this respects the token budget and reinforces progressive disclosure.

Move the duplicated dependent-query guidance currently inline under 'Client-Side Data Fetching' into the client-request-dedupe rule file, keeping only the headline pattern in SKILL.md.

Consider tightening the Quick Reference so each bullet is a single concrete action plus its rule-file tag, rather than a multi-clause explanation.

Dimension	Reasoning	Score
Conciseness	The body is mostly an efficient routing catalog (priority table, terse bullets with rule-file names), but several inline bullets (e.g. 'structure-complex-derived-logic', 'types-no-type-assertions') are long run-on summaries that duplicate detail the rule files already hold and could be trimmed.	3 / 5
Actionability	Provides concrete, executable patterns with specific APIs (Promise.all, startTransition, toSorted, content-visibility: auto, skipToken, querySelector<T>) plus runnable grep commands and rule-file pointers, with only minor gaps where a bullet stays high-level.	4 / 5
Workflow Clarity	A clear priority-ordered application sequence is present (numbered priority table, 'Apply First' critical patterns, then medium-impact) with lookup guidance (catalog + grep), but there are no explicit validation/feedback loops; acceptable since this is a non-destructive reference skill.	4 / 5
Progressive Disclosure	SKILL.md is a lean overview routing to one-level-deep references (the catalog file and the 26 verified rule files under references/rules/), with clear signaling via parenthetical rule names, a references section, and a per-category rule index with counts.	5 / 5
	Total	16 / 20 Passed

Description

87%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 strong: it clearly states what the skill does and gives explicit, natural-language trigger conditions tied to common React performance tasks. Its only weakness is that the named actions are generic activity verbs rather than sharply concrete capabilities.

Dimension	Reasoning	Score
Specificity	Names the domain ('React performance optimization guidelines') and several concrete activities ('writing, reviewing, or refactoring React code') plus trigger areas (data fetching, bundle optimization), but the 'actions' are activity types rather than distinct concrete capabilities, leaving minor gaps versus comprehensive coverage.	4 / 5
Completeness	Explicitly answers both what ('React performance optimization guidelines from Mastra Engineering') and when ('should be used when writing, reviewing, or refactoring React code... Triggers on tasks involving React components, data fetching, bundle optimization, or performance improvements') with concrete trigger phrases.	5 / 5
Trigger Term Quality	Includes natural terms users would say ('React code', 'React components', 'data fetching', 'bundle optimization', 'performance improvements') with good coverage, but misses common synonyms/extensions like 'perf', 're-renders', or file types, so not fully comprehensive.	4 / 5
Distinctiveness Conflict Risk	Occupies a clear React performance niche with distinct triggers (React components, data fetching, bundle optimization) unlikely to fire for unrelated skills, minimizing conflict risk.	5 / 5
	Total	18 / 20 Passed

Validation

100%

Warnings & errors only

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

Reviewed: about 18 hours ago

Table of Contents

Discovery Implementation Validation

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.