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.

74

Quality

93%

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

87%

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, actionable checklist that assumes Claude's React competence. Its one weakness is the Review Workflow, which sequences steps but lacks an explicit validation/verification checkpoint for the batched-edit step.

Suggestions

Add an explicit verification step to the Review Workflow after batching fixes, e.g. re-scan the edited files to confirm each flagged violation is resolved and no new issues were introduced.

Consider a 'Verify' checkpoint that re-runs the relevant lint rule (react-hooks/exhaustive-deps, etc.) after the batched edit to close the feedback loop.

DimensionReasoningScore

Conciseness

The body is a lean bullet checklist (e.g. 'One component per file — colocate helpers only if they are private to that component') with no explanations of React concepts Claude already knows, so every token earns its place; it is not 2 because there is no padded or unnecessary explanation.

3 / 3

Actionability

Guidance is concrete and specific — named lint rules ('react-hooks/exhaustive-deps'), exact type signatures ('React.MouseEvent<HTMLButtonElement>, not any'), and named patterns ('React.lazy + Suspense'); per the rubric's instruction-only scoring note, the absence of full executable code blocks is not penalized because the guidance is actionable.

3 / 3

Workflow Clarity

The Review Workflow lists a clear four-step sequence ('Scan recent TSX edits' → 'Flag any violations' → 'Suggest minimal fixes' → 'batch them into a single edit') but provides no explicit validation/verification checkpoint; since step 4 is a batch edit, the rubric caps batch operations without feedback loops at 2.

2 / 3

Progressive Disclosure

It is a single-file, single-purpose checklist with well-organized section headers and no nested or external references, so per the simple-skills note it scores 3 on organization alone; it is not 2 because content is appropriately organized rather than a monolithic wall.

3 / 3

Total

11

/

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 well crafted: third-person voice, explicit trigger guidance, and a concrete enumeration of the checklist's coverage areas. It cleanly satisfies the what/when requirement and uses natural React/TSX trigger terms.

DimensionReasoningScore

Specificity

Quotes 'run a condensed quality checklist covering component structure, hooks usage, accessibility, performance, and TypeScript patterns' — it enumerates multiple concrete review areas rather than vague language, matching the score-3 anchor that lists several specific concrete actions.

3 / 3

Completeness

It answers both 'what' (reviewer running a quality checklist over five named areas) and 'when' ('Triggers after editing multiple TSX components'), with an explicit trigger clause, so it is not capped at 2 for a missing 'Use when' clause.

3 / 3

Trigger Term Quality

Natural terms a user would say are well covered: 'React', 'TSX files', 'TSX components', 'best-practices', 'hooks', 'accessibility', 'performance', and 'TypeScript', matching the good-coverage score-3 anchor; it is not reduced to 2 because common variations are amply present.

3 / 3

Distinctiveness Conflict Risk

The React/TSX best-practices niche plus the 'after editing multiple TSX components' trigger form a clear, distinct scope unlikely to fire for non-React skills, matching the score-3 anchor; it is not 2 because it is more specific than a generic 'works with code' skill.

3 / 3

Total

12

/

12

Passed

Validation

87%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

metadata_field

'metadata' should map string keys to string values

Warning

Total

14

/

16

Passed

Repository
openai/plugins
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.