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.

70

1.28x
Quality

63%

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

43%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.

The body is a well-organized, prioritized index of 62 rules with good token efficiency and clear categorization, but it provides no executable code itself and critically points to bundle files (rules/*.md, AGENTS.md) that do not exist, breaking progressive disclosure.

Suggestions

Ship the referenced bundle files (rules/async-parallel.md, rules/bundle-barrel-imports.md, AGENTS.md, etc.) so the 'Read individual rule files' and 'Full Compiled Document' pointers resolve — currently they are dead references.

Add a minimal executable correct/incorrect code snippet inline for at least the CRITICAL categories (Eliminating Waterfalls, Bundle Size) so the skill is actionable even before the rule files are consulted.

Include a brief refactoring workflow with a validation checkpoint (e.g., run the build/lint and confirm no new waterfalls after applying async-* rules) since this skill drives batch refactoring of existing code.

DimensionReasoningScore

Conciseness

The body is largely a dense rule index using compact one-line entries per rule, which is token-efficient and avoids explaining concepts Claude already knows; minor verbosity comes from the table and 'How to Use' section that restate what the index already shows.

4 / 5

Actionability

Guidance is high-level and descriptive only — each rule is a single terse phrase ('Move await into branches', 'Use Promise.all() for independent operations') with no executable code, commands, or concrete steps present in the body itself; the actual how-to is deferred to nonexistent files.

2 / 5

Workflow Clarity

Rules are categorized and prioritized in a clear table, giving a recognizable structure for selection, but there is no sequenced workflow or validation/checkpoints for refactoring (a batch operation); the simple-skill exception does not apply and the batch-operation cap is satisfied at 3.

3 / 5

Progressive Disclosure

The body is structured as an overview pointing to 'rules/*.md' rule files and 'AGENTS.md' for detail, which is the right shape — but none of those referenced bundle files actually exist in the skill directory, so the references are dead pointers leaving the reader with no reachable detail.

2 / 5

Total

11

/

20

Passed

Description

82%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, well-structured description that clearly states what the skill does and when to use it, with concrete natural trigger phrases scoped to React/Next.js performance. It is concise and avoids fluff, with only minor room for additional keyword synonyms.

DimensionReasoningScore

Specificity

Lists several concrete actions ('writing, reviewing, or refactoring React/Next.js code', 'data fetching', 'bundle optimization', 'performance improvements') with minor gaps; it names the domain and multiple specific activities rather than vague abstractions.

4 / 5

Completeness

Explicitly answers both 'what' ('React and Next.js performance optimization guidelines from Vercel Engineering') and 'when' ('Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements') with concrete trigger phrases.

5 / 5

Trigger Term Quality

Strong natural keyword coverage ('React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'performance improvements') that users would actually say; a few synonyms or variations are missing but coverage is good.

4 / 5

Distinctiveness Conflict Risk

Clearly scoped to React/Next.js performance optimization from Vercel, a distinct niche with minimal conflict risk; minor overlap risk with general coding-review skills but triggers are well-targeted.

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.

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.