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.

61

Quality

71%

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

Quality

Content

65%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 with excellent token discipline, but it functions only as a table of contents: the actual actionable detail is delegated to rule files that are not present in the bundle, and the usage workflow is left implicit. Fixing the broken references and adding minimal usage sequencing would lift the weakest dimensions.

Suggestions

Include the referenced rules/*.md files and AGENTS.md in the bundle (or correct their paths) so the body's references resolve — progressive_disclosure currently points at files that do not exist.

Expand "How to Use" into a short explicit sequence (e.g., 1. identify the task type in the priority table, 2. locate matching rule prefixes, 3. read the rule file before refactoring) so the workflow is stated rather than inferred.

Add one or two representative code snippets for the highest-priority rules (e.g., async-parallel with Promise.all) so the body offers executable guidance instead of headline-only directives.

DimensionReasoningScore

Conciseness

The body is a lean index: 57 rules each get a single one-line description with no explanations of concepts Claude already knows and no padding — every token (priority table, rule list, file pointers) earns its place.

5 / 5

Actionability

The rule one-liners are concrete directives ("Use Promise.all() for independent operations") but lack executable detail — e.g., "Use better-all for partial dependencies" references an undefined tool, and no code or commands appear in the body. This matches the anchor for some concrete guidance that is incomplete with key details missing.

3 / 5

Workflow Clarity

A usable but implicit sequence exists (consult the priority table, pick a category, read the rule file), yet "How to Use" is a single sentence with no explicit steps or checkpoints. At ~130 lines the simple-skill exception does not apply, so this sits at the anchor for a sequence that is present but with implicit structure rather than the clear-stepped anchor above.

3 / 5

Progressive Disclosure

The overview-plus-rule-files structure is well designed (clear sections, priority table, one-level-deep pointers), but the referenced files — rules/async-parallel.md, rules/bundle-barrel-imports.md, and AGENTS.md — do not exist in the bundle, so navigation fails exactly where disclosure should pay off. The score is capped below 4 because the references do not resolve to real files.

3 / 5

Total

14

/

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 strong description that clearly states both what the skill provides and when to use it, with explicit trigger phrases in third-person voice. Its main weaknesses are a somewhat generic capability statement ("performance optimization guidelines") and keyword coverage that misses a few natural performance-related synonyms.

DimensionReasoningScore

Specificity

"React and Next.js performance optimization guidelines" names the domain clearly but the capability itself is a single generic action ("to ensure optimal performance patterns"), matching the anchor for naming a domain with 1-2 actions that are not comprehensive.

3 / 5

Completeness

It explicitly answers what ("React and Next.js performance optimization guidelines from Vercel Engineering") and when ("This skill should be used when writing, reviewing, or refactoring React/Next.js code... Triggers on tasks involving...") with concrete trigger phrases, matching the top anchor exactly.

5 / 5

Trigger Term Quality

"React components, Next.js pages, data fetching, bundle optimization, or performance improvements" are natural phrases users would say, but common variations like "re-renders", "bundle size", or "slow page load" are missing, so it falls just short of comprehensive coverage.

4 / 5

Distinctiveness Conflict Risk

The React/Next.js performance niche is clear with distinct triggers, but "when writing, reviewing, or refactoring React/Next.js code" creates minor overlap risk with general React style or code-review skills.

4 / 5

Total

16

/

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
shep-ai/shep
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.