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.

80

1.02x
Quality

70%

Does it follow best practices?

Impact

98%

1.02x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

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

Quality

Content

50%

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

The body is a well-organized catalog of 69 rules grouped into 8 prioritized categories, clearly signaling deeper reference files. It is held back by the absence of executable code in the body itself, the lack of a sequenced application workflow with checkpoints, and dangling references to rule files that do not exist in the bundle.

Suggestions

Add a short executable code snippet or two in SKILL.md (e.g. a Promise.all before/after for async-parallel) so the body is actionable on its own, not just an index.

Provide a brief sequenced workflow for applying the rules (identify the relevant category prefix -> open the rule file -> apply the pattern -> verify), with a validation/check step for refactors.

Create the referenced bundle files (rules/*.md and AGENTS.md) so the signaled progressive-disclosure references resolve, or move the inline 69-rule listing into them to slim SKILL.md.

DimensionReasoningScore

Conciseness

The body avoids explaining basic concepts Claude already knows and uses terse one-line rule descriptions, but it inlines all 69 rules and includes light padding ('maintained by Vercel', 'prioritized by impact to guide automated refactoring and code generation') that could be trimmed, so it is mostly rather than fully efficient.

2 / 3

Actionability

Each rule carries a concrete directive (e.g. 'Use Promise.all() for independent operations', 'Import directly, avoid barrel files'), but the body contains no executable code or commands — examples are deferred to the rule files — leaving the guidance concrete yet incomplete per the level-2 anchor.

2 / 3

Workflow Clarity

'When to Apply' and 'How to Use' give direction (consult the relevant rule file), but there is no sequenced application workflow with validation checkpoints; the process is implicit rather than an explicit numbered sequence, matching the level-2 'steps listed but checkpoints missing' anchor.

2 / 3

Progressive Disclosure

The overview is well-organized into categories and signals one-level-deep references ('Read individual rule files', 'Full Compiled Document: AGENTS.md'), but the referenced files (rules/*.md and AGENTS.md) are not present in the bundle and the full 69-rule listing is inline content that should live in those separate files, so structure is partial.

2 / 3

Total

8

/

12

Passed

Description

90%

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 capability and explicit trigger conditions with natural user terms and a distinct React/Next.js performance niche. The only weakness is that the stated capability is a single abstract 'optimization guidelines' phrase rather than several concrete, enumerated actions.

DimensionReasoningScore

Specificity

Names the domain ('React and Next.js performance optimization guidelines') and some actions ('writing, reviewing, or refactoring'), but does not list multiple distinct concrete capabilities the way the level-3 anchor ('Extract text and tables from PDF files, fill forms, merge documents') does; 'ensure optimal performance patterns' is abstract rather than a specific action.

2 / 3

Completeness

Explicitly answers both 'what' ('performance optimization guidelines from Vercel Engineering') and 'when' ('This skill should be used when writing, reviewing, or refactoring...' plus 'Triggers on tasks involving...'), satisfying the level-3 anchor for explicit triggers.

3 / 3

Trigger Term Quality

Includes natural terms a user would actually say — 'React components, Next.js pages, data fetching, bundle optimization, or performance improvements' — giving good coverage of common phrasings, matching the level-3 anchor's breadth.

3 / 3

Distinctiveness Conflict Risk

The React/Next.js performance niche with its specific trigger list is a clear, narrow domain unlikely to fire for unrelated skills, matching the level-3 'clear niche with distinct triggers' anchor.

3 / 3

Total

11

/

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
udecode/plate
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.