CtrlK
BlogDocsLog inGet started
Tessl Logo

react-best-practices

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

62

Quality

73%

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 ./plugins/react-best-practices/skills/react-best-practices/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

68%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 efficient, well-organized index of 57 prioritized rules with clear category structure and signaled references to deeper files. Its weaknesses are the absence of any inline executable code examples and the fact that the referenced per-rule and compiled-doc files are not actually present in the bundle.

Suggestions

Include at least one short inline code example for the highest-priority (CRITICAL) rules so the skill is actionable without relying on missing bundle files.

Ship the referenced files (rules/*.md and AGENTS.md) in the bundle, or remove the references if the detail is not provided, so signaled navigation resolves to real content.

Add a brief validation step for refactoring workflows (e.g., confirm builds/tests pass after applying a rule) to introduce a checkpoint into the otherwise reference-only content.

DimensionReasoningScore

Conciseness

A lean, dense rule index with one-line directives per rule, no over-explanation of concepts Claude already knows, and minimal padding; the only minor redundancy is the 'When to Apply' section restating triggers from the description.

5 / 5

Actionability

Each rule gives a concrete directive ('Use Promise.all() for independent operations', 'Import directly, avoid barrel files'), but there are no inline executable code examples, and the per-rule files that would contain them are not present in the bundle.

3 / 5

Workflow Clarity

The content is a well-organized prioritized reference catalog rather than a sequenced process, and the refactoring guidance includes no validation checkpoints, so it sits at the 'organized but no checkpoints' level.

3 / 5

Progressive Disclosure

The overview is clearly structured (priority table + categorized rule lists) with one-level-deep, well-signaled references to rules/*.md and AGENTS.md; it is kept from 5 because the referenced bundle files do not actually exist in the skill directory.

4 / 5

Total

15

/

20

Passed

Description

78%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 well-constructed description that clearly conveys both purpose and trigger conditions with concrete, natural-language keywords. It is tightly scoped to the React/Next.js performance niche with low conflict risk; the only soft spot is that the 'what' is framed as guidelines rather than a fully enumerated action list.

DimensionReasoningScore

Specificity

Names the domain and several concrete actions/contexts ('writing, reviewing, or refactoring React/Next.js code', 'data fetching, bundle optimization'), but the framing as 'guidelines' leaves minor gaps versus a fully enumerated capability list.

4 / 5

Completeness

Explicitly answers both 'what' (React/Next.js performance optimization guidelines) and 'when' ('This skill should be used when...', 'Triggers on tasks involving...'); the 'what' is slightly guideline-oriented rather than a crisp capability list, keeping it just below 5.

4 / 5

Trigger Term Quality

Good coverage of natural phrases users would say ('React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'performance improvements'), though it lacks synonyms or file-extension variants that would push it to 5.

4 / 5

Distinctiveness Conflict Risk

Clearly scoped to a distinct niche (React/Next.js performance optimization) with specific triggers and minimal overlap risk with other skills.

5 / 5

Total

17

/

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
secondsky/claude-skills
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.