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.

59

Quality

68%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

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

53%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, token-efficient index of 67 rules with a clear priority structure, but it functions only as a pointer file: it contains no code examples itself and every detailed reference (rules/*.md, AGENTS.md) is missing from the bundle, leaving dead-end navigation. Fixing the bundle structure would raise actionability, workflow clarity, and progressive disclosure substantially.

Suggestions

Ship the referenced files: create rules/ (the 67 per-rule files with incorrect/correct code examples) and AGENTS.md, or remove the references and inline a few key incorrect/correct code pairs for the CRITICAL categories.

Add one compact executable example per CRITICAL category (e.g., a before/after Promise.all snippet) so the body carries actionable guidance even if rule files are not loaded.

Clarify the usage workflow: state how to locate a rule file for a given code pattern (e.g., 'match the code smell to a prefix, then read rules/<rule-id>.md') so the index step is unambiguous.

DimensionReasoningScore

Conciseness

The body is a lean rule index — one-line heuristics like "Use Promise.all() for independent operations" with no explanation of concepts Claude already knows, so it respects the token budget. Not 5 because the 'When to Apply' section duplicates the frontmatter description the agent already sees, and the intro sentence ('Comprehensive performance optimization guide... prioritized by impact') restates the priority table that follows.

4 / 5

Actionability

The one-line heuristics are concrete directives, but the body contains no executable code or commands, and the promised detail lives entirely in referenced files: "Read individual rule files for detailed explanations and code examples: rules/async-parallel.md" and "AGENTS.md" — none of which exist in the bundle, so the executable guidance is unreachable. Not 4 because concrete code/commands are missing entirely and the pointers are dead; not 2 because the inline heuristics themselves do give specific, usable direction.

3 / 5

Workflow Clarity

A rough sequence exists (apply per the When-to-Apply list → pick a category by the priority table → read the rule file for detail), but the key navigation step points to nonexistent paths (rules/*.md, AGENTS.md), and there are no validation checkpoints for verifying a rule applies to the code being changed. Not 4 because the main workflow step is broken; not 2 because the category-priority table does give a coherent, ordered entry point.

3 / 5

Progressive Disclosure

The design intent — SKILL.md as an overview with one-level-deep references to per-rule files and a compiled document — is right, but scoring against the actual bundle: no references/, scripts/, assets/, rules/, or AGENTS.md exist, so every reference in "Read individual rule files" and "Full Compiled Document: `AGENTS.md`" is a dead end and navigation is impossible. Not 3 because references are clearly signaled yet broken in practice, which makes the skill unusable as an index; not 1 because the SKILL.md itself is well-sectioned rather than a monolithic wall of text.

2 / 5

Total

12

/

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 that clearly and explicitly states both what the skill provides and when to use it, with natural trigger terms and a well-defined React/Next.js performance niche. Its only weaknesses are a slightly generic 'optimal performance patterns' phrase and a few missing natural trigger synonyms.

Suggestions

Replace 'ensure optimal performance patterns' with the concrete optimization areas users would name (e.g., 'eliminate request waterfalls, reduce bundle size, prevent unnecessary re-renders').

Add a few natural user phrasings as triggers, such as 'slow React app', 're-render issues', or 'bundle size', to broaden keyword coverage.

DimensionReasoningScore

Specificity

Names the domain ("React and Next.js performance optimization guidelines") and several concrete actions ("writing, reviewing, or refactoring React/Next.js code", "data fetching, bundle optimization"), with minor gaps — 'optimal performance patterns' is slightly generic. Not 5 because it stops short of enumerating the concrete optimization capabilities (e.g., eliminating waterfalls, bundle size, re-render optimization) and leans on the somewhat buzzwordy 'optimal performance patterns'; not 3 because multiple specific actions and trigger areas are explicitly listed.

4 / 5

Completeness

Explicitly answers both: 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" plus "Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements". Concrete trigger phrases match the score-5 anchor exactly; nothing is merely implied.

5 / 5

Trigger Term Quality

Good natural-term coverage: "React components, Next.js pages, data fetching, bundle optimization, performance improvements", plus "writing, reviewing, or refactoring". Not 5 because common user phrasings like 'slow rendering', 're-renders', 'app performance', or 'bundle size' are missing; not 3 because coverage goes well beyond one or two keywords and includes the verbs users actually use.

4 / 5

Distinctiveness Conflict Risk

Clear niche (React/Next.js performance, Vercel-specific) with distinct triggers, but "reviewing code for performance issues"-style phrasing overlaps with general React style-guide or code-review skills. Not 5 because it would co-trigger with a generic React best-practices skill; not 3 because the performance-only scope plus framework names keep it mostly distinguishable.

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
mediago-dev/mediago
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.