frontend-react-best-practices

React performance optimization guidelines. Use when writing, reviewing, or refactoring React components to ensure optimal rendering and bundle patterns. Triggers on tasks involving React components, hooks, memoization, or bundle optimization.

Quality

83%

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

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 content is a well-organized, highly actionable reference catalog of concrete React performance rules with executable examples. Its main weakness is progressive disclosure: every @rules/*.md reference points to a file that is not present in the bundle.

Suggestions

Provide the missing @rules/<rule>.md files (or a rules/ directory) so the one-level-deep references resolve; otherwise the overview implies detail that cannot be navigated to.

If the rule files are intentionally omitted, replace the @rules/... path references with a clear note that the inline examples are the full guidance, to avoid dangling references.

Tighten a few repeated Bad/Good inline comments and per-rule header lines to reduce boilerplate tokens where the contrast is already self-evident from the code.

Dimension	Reasoning	Score
Conciseness	The body is dense and assumes React competence (no concept tutorials or library intros), but the repeated Bad/Good comment boilerplate and per-rule @rules/ header lines leave a few tokens that could be trimmed, so it does not reach the 'every token earns its place' anchor.	4 / 5
Actionability	Nearly every rule ships a copy-paste-ready Bad/Good TSX/CSS/bash example (e.g. `npx svgo --precision=1 --multipass icon.svg`, `content-visibility: auto`), covering the common cases with executable guidance.	5 / 5
Workflow Clarity	As a well-organized reference catalog with severity-tagged categories and a 'When to Apply' section, navigation is clear and unambiguous; it is not a sequenced multi-step workflow, so it stops short of the validation-checkpoint anchor at 5.	4 / 5
Progressive Disclosure	The body signals one-level-deep references via @rules/<rule>.md for all 33 rules, but no rules/ directory or rule files actually exist, so those references are broken and the inlined examples cannot be navigated to deeper material — a structural gap that fits the 'some structure / references not fully functional' anchor.	3 / 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 the skill's purpose and provides explicit, natural trigger phrases scoped to React performance work. It falls just short of perfect specificity and trigger-term coverage by omitting a few common synonyms.

Dimension	Reasoning	Score
Specificity	Lists several concrete actions ("writing, reviewing, or refactoring React components", "optimal rendering and bundle patterns", "hooks, memoization, or bundle optimization") with only minor coverage gaps, matching the 'several specific actions; minor gaps' anchor rather than the 1-2 actions of score 3.	4 / 5
Completeness	It explicitly states both what ("React performance optimization guidelines... ensure optimal rendering and bundle patterns") and when ("Use when writing, reviewing, or refactoring React components... Triggers on tasks involving React components, hooks, memoization, or bundle optimization"), matching the concrete-both-what-and-when anchor.	5 / 5
Trigger Term Quality	Natural user terms like "React components", "hooks", and "memoization" are present, but common synonyms/extensions ("re-renders", "useMemo", "bundle size", file extensions) are missing, so it does not reach the comprehensive coverage of score 5.	4 / 5
Distinctiveness Conflict Risk	The React-scoped triggers (React components, hooks, memoization) carve a clear niche with minimal conflict risk against non-React skills; any minor overlap with general bundle-optimization skills does not push it below the clear-niche anchor.	5 / 5
	Total	18 / 20 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (540 lines); consider splitting into references/ and linking	Warning

	Total	15 / 16 Passed

Repository: modelscope/ms-agent
Path: .agents/skills/frontend-react-best-practices/SKILL.md
Commit: a56afcc

Reviewed: 2 days 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.