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.

85

1.15x
Quality

79%

Does it follow best practices?

Impact

96%

1.15x

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.

The body is a well-organized, lean index of 70 concrete, API-level performance rules with a sensible priority taxonomy and consistent prefix-based file naming. Its main defect is that it delegates all detail to rules/*.md files and AGENTS.md that are not present in the skill bundle, leaving the progressive-disclosure layer dangling, and the 'How to Use' section stops short of an explicit lookup sequence.

Suggestions

Ship the referenced bundle files: create the rules/ directory with the per-rule .md files and the AGENTS.md compiled document (or remove the references) — currently 'rules/async-parallel.md', 'rules/bundle-barrel-imports.md', and 'AGENTS.md' are dangling paths with no files in the skill directory.

Replace the two example paths in 'How to Use' with an explicit lookup sequence, e.g.: 1) identify the task type against 'When to Apply', 2) pick the highest-priority matching category from the priority table, 3) open rules/<rule-prefix>.md for the incorrect/correct code examples, 4) verify the fix preserves behavior.

Trim the duplicated priority/impact information — the Priority/Impact columns in the table are repeated verbatim in the section headers ('(CRITICAL)', '(MEDIUM-HIGH)', etc.); keep it in one place to save tokens.

DimensionReasoningScore

Conciseness

The body is essentially a functional index: 70 rule names each with a one-line actionable summary (e.g., 'Use Promise.all() for independent operations', 'Use next/dynamic for heavy components'), with no padding or explanation of concepts Claude already knows. It matches anchor 4 ('Efficient; minor instances... that could be trimmed'): the priority/impact information is duplicated between the 8-row priority table and the section headers ('### 1. Eliminating Waterfalls (CRITICAL)'), and 'When to Apply' partially restates the frontmatter description. Not a 5 because of that duplication; not a 3 because nearly every line is a usable lookup entry, not verbosity.

4 / 5

Actionability

Each rule entry gives a concrete, API-level directive (e.g., 'Use React.cache() for per-request deduplication', 'Use LRU cache for cross-request caching', 'Use content-visibility for long lists', 'Use toSorted() for immutability'), and 'How to Use' gives explicit file paths to open for full code examples. This matches anchor 4 ('Mostly executable guidance; concrete code or commands with minor gaps'). Not a 5 because the body contains no code examples or commands itself — all executable detail is delegated to rule files; not a 3 because the one-liners are specific, actionable heuristics rather than vague direction.

4 / 5

Workflow Clarity

The usage flow is clear and unambiguous for a reference skill: 'When to Apply' scopes the task, the priority table tells the model which category matters most, rule prefixes make file lookup deterministic, and 'Read individual rule files for detailed explanations and code examples' states the action. This matches anchor 4 ('Clear sequence with most checkpoints present; minor validation gaps'). Not a 5 because 'How to Use' only lists two example paths rather than an explicit step sequence (identify task -> pick category by priority -> open rules/<prefix>.md), and there is no guidance on what to do when multiple rules conflict; not a 3 because this is a non-destructive lookup skill where the single action (consult index, open rule file) is unambiguous.

4 / 5

Progressive Disclosure

The design intent is right — a concise overview with one-level-deep, clearly signaled references ('Read individual rule files... rules/async-parallel.md', 'For the complete guide with all rules expanded: AGENTS.md'). However, scored against the actual bundle structure, none of the referenced files exist: there is no rules/ directory, no AGENTS.md, and no references/, scripts/, or assets/ directories at all. Every piece of detailed content is delegated to files that are not shipped, so navigation dead-ends. This matches anchor 3 ('Some structure but could be better organized; references present but not clearly signaled') in effect: the structure is present but the reference layer is broken. Not a 4/5 because well-signaled references only count when the referenced files are actually present in the bundle; not a 2 because the SKILL.md itself is well organized with clear sections and a consistent prefix-based naming convention.

3 / 5

Total

15

/

20

Passed

Description

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

The description is strong: it explicitly states what the skill provides and when to use it, with natural trigger phrasing ('writing, reviewing, or refactoring React/Next.js code', 'data fetching', 'bundle optimization', 'performance improvements') and a well-bounded niche. The only gap is that the concrete capabilities of the guideline set (the rule categories) are summarized generically as 'performance optimization' rather than enumerated.

DimensionReasoningScore

Specificity

Quotes: 'React and Next.js performance optimization guidelines from Vercel Engineering', 'writing, reviewing, or refactoring React/Next.js code', 'data fetching, bundle optimization, or performance improvements'. It names the domain plus several concrete application areas (writing, reviewing, refactoring, data fetching, bundle optimization), matching anchor 4 ('Lists several specific actions; minor gaps in coverage'). Not a 5 because it never states the concrete capabilities the skill provides (e.g., eliminating waterfalls, re-render optimization, bundle analysis rules); not a 3 because more than 1-2 concrete actions are named.

4 / 5

Completeness

Quotes: what — 'React and Next.js performance optimization guidelines from Vercel Engineering'; when — 'This skill should be used when writing, reviewing, or refactoring React/Next.js code... Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.' Both what and when are explicitly and concretely answered with trigger phrases, matching anchor 5 exactly. A 4 would require the 'when' to be less explicit; here it is fully specified.

5 / 5

Trigger Term Quality

Quotes: 'React components, Next.js pages, data fetching, bundle optimization, or performance improvements', 'writing, reviewing, or refactoring React/Next.js code'. These are natural phrases users would say, matching anchor 4 ('Good keyword coverage; a few natural terms missing'). Not a 5 because common variations like 'bundle size', 'optimize renders', 're-renders', 'slow app', or 'hydration' are absent; not a 3 because coverage goes well beyond a couple of generic keywords and includes the most likely trigger phrasing.

4 / 5

Distinctiveness Conflict Risk

Quotes: 'React and Next.js performance optimization guidelines', 'Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization'. This is a clear niche (Vercel-maintained React/Next.js performance rules) with distinct, domain-specific triggers and minimal conflict risk with unrelated skills, matching anchor 5. Not a 4 because the scope is tightly bounded to React/Next.js performance rather than overlapping broadly with general web or code-review skills.

5 / 5

Total

18

/

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
1weiho/open-slide
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.