CtrlK
BlogDocsLog inGet started
Tessl Logo

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

79

1.15x
Quality

79%

Does it follow best practices?

Impact

66%

1.15x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

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

The canonical home for this skill is vercel-react-best-practices in jarrodwatts/claude-code-config

SKILL.md
Quality
Evals
Security

Quality

Content

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

A well-structured index-style skill body: it stays lean, defers detail to rule files one level deep, and gives concrete per-rule directives with a sensible priority ordering. The main gaps are minor — the rule catalog duplicates the rule files' index function, navigation relies on the naming convention rather than explicit per-rule links, and the referenced bundle files could not be verified as present.

Suggestions

Link each rule ID directly to its file path (e.g., `async-parallel` → `rules/async-parallel.md`) or state the naming convention explicitly in 'How to Use', rather than showing only three example paths.

Trim the full 45-rule listing to the category table plus a few representative examples, letting the rules/ files serve as the complete index.

State a short explicit sequence in 'How to Use' (e.g., 1. match the task to a category, 2. read the applicable rule files, 3. apply the correct-code pattern) to make the consultation workflow fully explicit.

DimensionReasoningScore

Conciseness

The body is lean — a priority table, terse one-line rule descriptions ('Use Promise.all() for independent operations'), and pointers to detail files, with zero padding or explanation of concepts Claude already knows. Not a 5 because the full 45-rule quick-reference catalog duplicates the index function of the rules/ files and could be trimmed to categories plus examples.

4 / 5

Actionability

Each rule entry is a concrete, imperative directive ('Import directly, avoid barrel files', 'Use next/dynamic for heavy components'), and 'How to Use' gives explicit file paths and describes each rule file's structure. Not a 5 because no code or commands appear in the body itself — executing any rule fully depends on the referenced rule files, and only three example paths are shown.

4 / 5

Workflow Clarity

'When to Apply' and the priority-ranked category table give a clear consultation sequence (pick category by priority, read the rule file, apply incorrect→correct examples), and the skill is non-destructive so no validation checkpoints are required. Not a 5 because the steps are implied by structure rather than stated as an explicit sequence.

4 / 5

Progressive Disclosure

Good overview structure: the body is an index that defers detail to one-level-deep references ('rules/async-parallel.md', 'rules/_sections.md') plus a compiled 'AGENTS.md', clearly signaled under 'How to Use' and 'Full Compiled Document'. Not a 5 because only three example rule paths are listed (navigation relies on inferring the prefix naming convention), and the referenced rule files are not present in the bundle to verify.

4 / 5

Total

16

/

20

Passed

Description

83%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 strong description that clearly states what the skill provides and when to use it, with a concrete trigger list in third-person voice. Its only gaps are missing common synonym triggers (bundle size, re-renders) and slightly broad 'writing React code' coverage that could overlap with general React skills.

DimensionReasoningScore

Specificity

Names the domain ('React and Next.js performance optimization guidelines from Vercel Engineering') and several concrete actions/contexts — 'writing, reviewing, or refactoring React/Next.js code', 'React components, Next.js pages, data fetching, bundle optimization'. Falls short of a 5 because it never enumerates the actual capabilities (e.g., eliminating waterfalls, bundle-size rules) that the skill body clearly contains.

4 / 5

Completeness

Explicitly answers both: what ('React and Next.js performance optimization guidelines from Vercel Engineering') and when ('This skill should be used when writing, reviewing, or refactoring... Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements') with concrete trigger phrases. Not a 4 because the 'when' clause is already explicit and trigger-specific, not merely implied.

5 / 5

Trigger Term Quality

Good natural keyword coverage: 'React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'performance improvements' — phrases users would plausibly say. Not a 5 because common variations like 'slow rendering', 're-renders', 'hydration', 'SSR', or 'bundle size' are absent.

4 / 5

Distinctiveness Conflict Risk

Clear niche (Vercel-specific React/Next.js performance patterns) with distinct triggers, but 'writing... React components' is broad enough to overlap with general React development or linting skills, so minor overlap risk remains. Above a 3 because the performance/bundle/data-fetching framing is far more specific than 'works with document files'.

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

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
revokslab/ShipFree
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.