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.

66

1.15x
Quality

58%

Does it follow best practices?

Impact

66%

1.15x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

Fix and improve this skill with Tessl

tessl review fix ./skills/vercel-react-best-practices/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

35%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This skill functions as a well-organized index/table of contents for React and Next.js performance rules, but provides almost no actionable content on its own. It lists 45 rules by name and priority without any code examples, concrete patterns, or implementation details, making it nearly useless without the referenced bundle files. The structure and categorization are good, but the lack of even a single executable example or inline best-practice snippet significantly limits its value.

Suggestions

Add at least one concrete, executable code example per critical category (e.g., show a Promise.all() waterfall fix for async-parallel, a direct import vs barrel file example for bundle-barrel-imports) so the skill is actionable without reading external files.

Include a brief 'Quick wins' section with 3-5 copy-paste ready patterns for the highest-impact rules, rather than deferring everything to external rule files.

Add validation/verification guidance—e.g., how to measure bundle size before/after changes, how to check for waterfalls in the network tab, or how to profile re-renders—to improve workflow clarity.

Remove the 'When to Apply' section as it explains obvious triggers Claude can infer, and use that space for actionable content instead.

DimensionReasoningScore

Conciseness

The content is reasonably organized but includes some unnecessary padding like the 'When to Apply' section (Claude can infer when to use React/Next.js optimization rules) and the introductory paragraph. The rule listing is efficient as a reference table, but the sheer enumeration of 45 rules by name without actionable detail makes much of the content low-value in isolation.

2 / 3

Actionability

The skill provides no executable code, no concrete examples, and no specific implementation guidance. It is essentially a table of contents listing rule names and categories, deferring all actual instruction to external rule files. There is nothing copy-paste ready or directly usable.

1 / 3

Workflow Clarity

The priority ordering provides a clear sequence for which optimizations to tackle first, and the categorization is logical. However, there are no validation steps, no feedback loops, and no guidance on how to verify that an optimization was correctly applied—important for refactoring workflows.

2 / 3

Progressive Disclosure

The skill references external rule files (e.g., rules/async-parallel.md) and a compiled AGENTS.md, which is good structure. However, no bundle files were provided, so we cannot verify these references exist. The references are one-level deep and clearly signaled, but the main content is essentially just an index with no substantive quick-start content to stand on its own.

2 / 3

Total

7

/

12

Passed

Description

82%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

This is a solid description that clearly communicates both what the skill does and when to use it, with good trigger terms. Its main weaknesses are the lack of specific concrete actions (it describes the domain rather than listing particular optimization techniques) and potential overlap with general React/Next.js development skills. Adding specific actions and narrowing triggers would strengthen it.

Suggestions

Add specific concrete actions like 'implement code splitting, optimize images with next/image, configure caching strategies, lazy load components, reduce bundle size'

Narrow the trigger scope to reduce conflict risk—e.g., clarify that general React component writing without a performance focus should not trigger this skill

DimensionReasoningScore

Specificity

The description names the domain (React/Next.js performance optimization) and mentions some areas like 'data fetching, bundle optimization, performance improvements,' but doesn't list specific concrete actions (e.g., 'lazy load components, optimize images, implement code splitting, configure caching headers').

2 / 3

Completeness

Clearly answers both what ('React and Next.js performance optimization guidelines') and when ('when writing, reviewing, or refactoring React/Next.js code' plus explicit triggers on 'React components, Next.js pages, data fetching, bundle optimization, or performance improvements').

3 / 3

Trigger Term Quality

Good coverage of natural terms users would say: 'React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'performance improvements', 'refactoring'. These are terms developers naturally use when seeking performance help.

3 / 3

Distinctiveness Conflict Risk

While it specifies React/Next.js performance, it could overlap with a general React coding skill, a Next.js skill, or a generic performance optimization skill. The 'React components' trigger is broad enough to conflict with non-performance React skills.

2 / 3

Total

10

/

12

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
tibelf/ai_project_init
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.