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.

53

Quality

58%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./config/claude/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 primarily as a table of contents for 57 performance rules, organized by priority category. While the structure and categorization are well-thought-out, the skill provides almost no actionable content on its own—no code examples, no concrete patterns, and no validation steps. Without the referenced rule files in the bundle, this skill gives Claude very little to work with beyond rule names and one-line summaries.

Suggestions

Add at least one concrete, executable code example per category (e.g., a before/after for Promise.all() under async-parallel, or a next/dynamic import example under bundle-dynamic-imports) so the skill has standalone actionable value.

Include a brief workflow for applying optimizations: identify issue → apply pattern → verify improvement (e.g., check bundle size, measure render time), with specific verification commands or techniques.

Either provide the referenced bundle files (rules/*.md, AGENTS.md) or inline the most critical 5-10 rules with full code examples so the skill is useful without external dependencies.

Condense the rule listings—consider removing LOW priority categories or collapsing them into a single line reference, focusing the skill's token budget on the CRITICAL and HIGH impact rules with actual implementation details.

DimensionReasoningScore

Conciseness

The skill is mostly a reference catalog of 57 rules organized by category, which is useful but somewhat verbose. The priority table and 'When to Apply' section add modest value, and the rule listings are essentially a table of contents that could be more compact. However, it avoids explaining basic React/Next.js concepts Claude already knows.

2 / 3

Actionability

The skill provides no executable code, no concrete examples, and no specific implementation guidance. It is entirely a catalog of rule names with one-line descriptions, deferring all actual content to external rule files. Claude cannot act on 'async-parallel - Use Promise.all() for independent operations' without the referenced files.

1 / 3

Workflow Clarity

The priority ordering provides a clear sequence for which optimizations to tackle first, and the 'When to Apply' section gives reasonable triggers. However, there are no validation steps, no feedback loops, and no guidance on how to verify that optimizations were correctly applied or measure their impact.

2 / 3

Progressive Disclosure

The skill references individual rule files (e.g., 'rules/async-parallel.md') and a compiled 'AGENTS.md', which is good progressive disclosure structure. However, no bundle files are provided, so the references are unverifiable, and the main file is essentially just a table of contents with minimal standalone value—the balance between overview and detail is off.

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 term coverage for the React/Next.js performance domain. Its main weaknesses are the lack of specific concrete actions (it describes the domain rather than listing particular optimization techniques) and moderate overlap risk with other React/Next.js skills that aren't performance-focused.

Suggestions

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

Add a distinguishing clause like 'Do NOT use for general React component creation or Next.js routing setup that isn't performance-related' to reduce conflict risk with other React/Next.js skills.

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', 'Next.js', '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 optimization, it could overlap with general React coding skills, Next.js development skills, or generic performance optimization skills. The 'React components' and 'Next.js pages' triggers are broad enough to potentially conflict with non-performance-focused React/Next.js 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
freekmurze/dotfiles
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.