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

Optimize this skill with Tessl

npx tessl skill review --optimize ./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 table of contents for React/Next.js performance rules but fails to provide actionable guidance on its own. The 45 rule names with one-line descriptions give no executable code or concrete examples, and all real content is deferred to external files that aren't included in the bundle. The priority categorization is a strength, but the skill body needs at least a few inline examples of the highest-impact patterns to be useful without the referenced files.

Suggestions

Add concrete, executable code examples for at least the top 3-5 highest-impact rules (e.g., async-parallel with Promise.all(), bundle-barrel-imports with correct import syntax) directly in the SKILL.md body.

Remove the 'When to Apply' section—Claude can infer when to apply React/Next.js performance rules from context; replace it with actionable quick-start examples.

Add a brief workflow section describing how to apply these rules during a code review or refactoring session, including validation steps (e.g., 'check bundle size before/after' or 'verify no waterfall regressions').

Either include the referenced bundle files (rules/*.md, AGENTS.md) or inline the most critical rule content so the skill is useful standalone.

DimensionReasoningScore

Conciseness

The content is reasonably organized but includes some unnecessary framing (e.g., 'Comprehensive performance optimization guide... maintained by Vercel' and the 'When to Apply' section which tells Claude things it can infer). The bulk of the content is a reference table/list which is efficient, but the 45-rule listing without actionable detail is borderline padding since the actual guidance lives in external files.

2 / 3

Actionability

The skill provides no executable code, no concrete examples, and no specific instructions—it's essentially a table of contents with rule names and vague one-line descriptions. All actual guidance ('detailed explanations and code examples') is deferred to external rule files that aren't provided in the bundle, making this skill body not actionable on its own.

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 workflow for applying these rules during a refactoring session, and no guidance on how to verify improvements—it's a reference index rather than a workflow.

2 / 3

Progressive Disclosure

The skill attempts progressive disclosure by referencing individual rule files (e.g., 'rules/async-parallel.md') and a compiled 'AGENTS.md', which is a reasonable structure. However, no bundle files are provided to verify these references exist, and the SKILL.md itself contains very little usable content—it's almost entirely a pointer to other files, making the overview too thin to be useful standalone.

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 its purpose and when to use it, with good trigger terms for the React/Next.js performance domain. Its main weakness is that it describes the domain at a high level without listing specific concrete optimization techniques, and it could potentially conflict with other React/Next.js skills that aren't performance-focused.

Suggestions

Add specific concrete actions like 'Implements code splitting, optimizes images with next/image, configures caching strategies, reduces bundle size, applies React.memo and useMemo patterns'

Sharpen distinctiveness by emphasizing this is specifically about performance patterns (not general React/Next.js development), e.g., 'Use when the user mentions slow rendering, large bundles, Core Web Vitals, or performance profiling'

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 specific task types). Has an explicit 'Use when' equivalent and trigger guidance.

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', 'reviewing'. These are terms developers naturally use when seeking performance help.

3 / 3

Distinctiveness Conflict Risk

While it's specific to React/Next.js performance, 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
am-will/codex-skills
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.