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.

83

1.28x
Quality

82%

Does it follow best practices?

Impact

72%

1.28x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

65%

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

A well-organized, token-efficient rule catalog with a clear priority taxonomy, but it over-promises on bundle files that are missing, ships no executable examples in SKILL.md itself, and lacks an explicit validation-gated refactoring workflow.

Suggestions

Ship the referenced bundle files (rules/*.md with code examples and AGENTS.md) or remove the broken references, so the one-level-deep disclosure the body advertises actually exists.

Add at least one concrete before/after code example for the CRITICAL categories (waterfalls, bundle size) directly in SKILL.md so guidance is actionable without the missing rule files.

Add an explicit, checkpoint-gated workflow for refactoring (e.g. identify priority category -> apply rule -> verify build/tests pass -> proceed), since the skill targets batch refactoring of existing code.

DimensionReasoningScore

Conciseness

The body is a lean, one-line-per-rule catalog that assumes Claude's competence — it teaches no React/bundle concepts and pads nothing, so each token earns its place even at 62 entries.

3 / 3

Actionability

Rule entries give concrete prescriptions ('Use Promise.all() for independent operations', 'Import directly, avoid barrel files') but SKILL.md contains no executable code blocks; the promised copy-paste examples live only in the referenced (and absent) rule files, leaving guidance incomplete.

2 / 3

Workflow Clarity

The priority table (categories 1-8) implies an apply-order, but there is no explicit multi-step sequence and no validation/verification checkpoint for refactoring work, which caps clarity at 2.

2 / 3

Progressive Disclosure

Structure is clearly signaled (categories, Quick Reference, pointers to rules/*.md and AGENTS.md), but the referenced bundle files do not exist and the full 62-rule catalog is inlined rather than split, matching the 'content that should be separate is inline' anchor.

2 / 3

Total

9

/

12

Passed

Description

100%

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, third-person description that clearly states what the skill provides and when to use it, with natural trigger terms and a distinct, low-conflict niche. All four dimensions land at the top of the scale.

DimensionReasoningScore

Specificity

Names the domain (React/Next.js performance) and multiple concrete activities — 'writing, reviewing, or refactoring React/Next.js code', 'data fetching', 'bundle optimization', 'performance improvements' — matching the multiple-concrete-actions anchor.

3 / 3

Completeness

Explicitly answers both what ('React and Next.js performance optimization guidelines... to ensure optimal performance patterns') and when ('This skill should be used when... Triggers on tasks involving...'), with an explicit 'Use when'/trigger clause present.

3 / 3

Trigger Term Quality

Covers natural user phrasings — 'React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'performance improvements' — terms a user would actually say, with good variation coverage.

3 / 3

Distinctiveness Conflict Risk

The React/Next.js performance-optimization niche is specific with distinct triggers, unlikely to fire for unrelated skills; voice is third person with no first/second-person penalty.

3 / 3

Total

12

/

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
CherryHQ/cherry-studio
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.