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.28x
Quality

77%

Does it follow best practices?

Impact

72%

1.28x

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

71%Weight 40%Scale 1-5

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 index that defers detail to per-rule files as progressive disclosure intends. The main gaps are the unverified/missing bundle files behind its references and the absence of any stated process for how to traverse the rules when working on a task.

Suggestions

Ensure the referenced bundle actually ships with the skill (rules/ directory and AGENTS.md), or inline the handful of CRITICAL rules' key examples so the skill remains actionable when the files are absent.

Add a short 'How to apply' sequence: identify the task type (data fetching, rendering, bundle), look up the matching category by priority tier, then open the specific rule file — replacing the duplicated 'When to Apply' section that restates the description.

Drop the priority table or the per-category Quick Reference headers (they restate the same category/impact data) and expand too-terse entries like 'better-all' with a path to the relevant rule file.

DimensionReasoningScore

Conciseness

The body is a lean rule index: 62 rules as one-line name-plus-directive pairs ('async-parallel - Use Promise.all() for independent operations') with no padding or explanation of concepts Claude already knows. It falls short of anchor 5 because the priority table repeats the category/impact data that the Quick Reference section headers restate, and the 'When to Apply' section partially duplicates the frontmatter description.

4 / 5

Actionability

Most rules are immediately actionable directives with named APIs ('Use React.cache() for per-request deduplication', 'Use next/dynamic for heavy components', 'Use toSorted() for immutability'). As an index it deliberately defers detail to rule files, which is fine per the instruction-skill note, but a few entries are too terse to act on without reading the referenced file ('Use better-all for partial dependencies' names an unfamiliar library with no pointer), keeping it below anchor 5.

4 / 5

Workflow Clarity

As a single-purpose reference skill, the single action (consult rules by category, prioritized by the impact table) is unambiguous, and the 'How to Use' section explains the structure of each rule file with example paths. It misses anchor 5 because there is no stated sequence for applying the guide — e.g., whether to scan by priority tier or match rules to the task at hand — which the rubric reserves for skills with explicit sequenced workflows.

4 / 5

Progressive Disclosure

Structure is promising — an index body with one-level-deep, clearly signaled references ('rules/async-parallel.md', 'AGENTS.md') — but no bundle files exist alongside SKILL.md (no rules/ directory, references/, scripts/, or assets/), so the referenced paths cannot be verified and may not resolve. Per the guideline to score against the actual bundle structure, references that point at files not present in the bundle sit at anchor 3: structure present but not reliably navigable, and the inline 62-rule catalog does some of the work a real reference file should carry.

3 / 5

Total

15

/

20

Passed

Description

83%Weight 40%Scale 1-5

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: third-person, concrete domain, explicit 'should be used when' clause, and a dedicated trigger list. Its only weaknesses are mild genericity in 'optimal performance patterns' and a few missing natural synonyms in the trigger terms.

DimensionReasoningScore

Specificity

Names the domain ('React and Next.js performance optimization guidelines') and several concrete applications: 'writing, reviewing, or refactoring React/Next.js code', plus specific areas like 'data fetching, bundle optimization'. It stops short of anchor 5 because it describes what the guidelines cover rather than enumerating the concrete actions the skill performs (e.g., eliminating waterfalls, optimizing re-renders), and 'ensure optimal performance patterns' is slightly generic.

4 / 5

Completeness

Explicitly answers both questions: what ('React and Next.js performance optimization guidelines from Vercel Engineering') and when ('This skill should be used when writing, reviewing, or refactoring React/Next.js code', reinforced by a concrete trigger list). This matches the anchor-5 example structure of a clear what followed by explicit when-clauses.

5 / 5

Trigger Term Quality

Includes natural terms users would say: 'React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'performance improvements', 'refactoring'. Anchor 5 requires comprehensive coverage with synonyms and extensions; common phrasings like 'slow rendering', 're-renders', 'hydration', 'SSR', or 'bundle size' are absent.

4 / 5

Distinctiveness Conflict Risk

The React/Next.js performance niche is well-defined with distinct triggers (bundle optimization, data fetching, performance improvements), limiting conflict risk. Minor overlap remains with generic React style guides or code-review skills; anchor 5 is reserved for a narrow niche with essentially no overlap, whereas 'writing... React/Next.js code' is broad enough to fire alongside general React development skills.

4 / 5

Total

17

/

20

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.

Validation — 16 / 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.