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.

82

Quality

77%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

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

Discovery

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 with good trigger coverage and clear when/what guidance. Its main weakness is the lack of specific concrete actions - it describes the domain well but doesn't enumerate the specific optimization techniques or patterns it teaches. The distinctiveness could be improved by emphasizing performance-specific triggers more strongly.

Suggestions

Add specific concrete actions like 'implement code splitting, optimize images, configure caching strategies, lazy load components' to improve specificity

Strengthen distinctiveness by adding performance-specific trigger terms like 'slow page load', 'bundle size', 'Core Web Vitals', 'render performance' to differentiate from general React/Next.js skills

DimensionReasoningScore

Specificity

Names the domain (React/Next.js performance) and mentions some areas (components, pages, data fetching, bundle optimization) but doesn't list concrete actions like 'lazy load components', 'implement code splitting', or 'optimize images'.

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' clause listing specific scenarios).

3 / 3

Trigger Term Quality

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

3 / 3

Distinctiveness Conflict Risk

While it specifies React/Next.js performance, it could overlap with general React skills or Next.js development skills. The performance focus helps but 'React components' and 'Next.js pages' are broad triggers that might conflict with non-performance React/Next.js skills.

2 / 3

Total

10

/

12

Passed

Implementation

72%

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

This skill excels as a well-organized reference index with excellent progressive disclosure and token efficiency. However, it functions more as a table of contents than actionable guidance—the actual executable examples and detailed instructions are delegated to external files, reducing immediate actionability. Adding 1-2 inline code examples for the most critical rules would significantly improve utility.

Suggestions

Add 1-2 inline executable code examples for the highest-priority rules (e.g., async-parallel with Promise.all, bundle-barrel-imports) to make the skill immediately actionable without requiring file lookups

Include a brief workflow section explaining how to approach optimization (e.g., 'Start with CRITICAL rules, measure impact, then proceed to HIGH priority')

DimensionReasoningScore

Conciseness

The content is lean and efficient, presenting 57 rules as a well-organized reference table without explaining basic React/Next.js concepts Claude already knows. Every section serves a clear purpose.

3 / 3

Actionability

While the rule names and categories are clear, the skill lacks executable code examples in the main document. It references external rule files for actual code, making the SKILL.md itself more of an index than actionable guidance.

2 / 3

Workflow Clarity

The 'When to Apply' section provides context for usage, and rules are prioritized by impact, but there's no explicit workflow for how to apply multiple rules, validate changes, or sequence optimization efforts.

2 / 3

Progressive Disclosure

Excellent structure with a clear overview, priority table, quick reference sections, and well-signaled one-level-deep references to individual rule files and the full AGENTS.md document.

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