CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

84

1.22x
Quality

82%

Does it follow best practices?

Impact

92%

1.22x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

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 with clear priority triage and a strong description-to-structure alignment. Its weaknesses are that all executable detail lives in rule files that are absent from the bundle, leaving the body itself without code examples, and the dangling references (rules/*.md, AGENTS.md) that cannot be followed.

Suggestions

Include the rules/*.md files (or at least a representative subset with full incorrect/correct code examples) in the bundle so the referenced paths resolve and the body's deferred guidance is actually reachable.

Add a brief inline code example for the two CRITICAL categories (e.g., one async-parallel and one bundle-barrel-imports snippet) so the highest-impact rules are actionable without loading external files.

Clarify the workflow for applying the rules during review/refactoring — e.g., a short checklist for scanning existing code for the highest-priority rule violations.

DimensionReasoningScore

Conciseness

The body is a lean index: a priority table and 58 rule entries, each a terse one-line directive (e.g., "async-parallel - Use Promise.all() for independent operations") with zero padding and no explanation of concepts Claude already knows. Every token earns its place as navigable structure rather than prose.

5 / 5

Actionability

Each entry is a concrete micro-directive ("Use next/dynamic for heavy components", "Hoist RegExp creation outside loops"), but the body contains no code examples and defers all executable detail ("Read individual rule files for detailed explanations and code examples") to rules/*.md files that are not present in the bundle. Hints are concrete yet incomplete without those files — matching anchor 3 (some concrete guidance but incomplete) rather than 4.

3 / 5

Workflow Clarity

Usage is clearly sequenced: "When to Apply" conditions, a priority-ordered category table to triage by impact, and a "How to Use" section describing what each rule file contains. Not 5 because there is no guidance on applying rules in a review/refactor pass (e.g., how to detect a violated rule in existing code) — but as a read-only reference skill there is no risky operation requiring validation checkpoints.

4 / 5

Progressive Disclosure

The structure itself is good — overview, category index, and clearly signaled one-level-deep references ("rules/async-parallel.md", "For the complete guide with all rules expanded: AGENTS.md"). However, no bundle files exist (no rules/ directory, no AGENTS.md, no references/scripts/assets), so the referenced paths do not resolve, undermining navigation. Per the rubric, progressive disclosure is scored against the actual bundle structure, capping this at 3.

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: it explicitly states what the skill provides and when to use it, with natural trigger terms users would actually say. Minor room to sharpen capability specificity (name the rule categories) and add a few more synonym triggers.

DimensionReasoningScore

Specificity

The description lists several concrete actions and application contexts — "performance optimization guidelines", "writing, reviewing, or refactoring React/Next.js code", "data fetching, bundle optimization" — naming the domain plus specific activities. It falls short of 5 because the capabilities remain at the guideline level without naming the concrete techniques it covers (e.g., eliminating waterfalls, re-render optimization).

4 / 5

Completeness

Both what and when are explicit: "React and Next.js performance optimization guidelines from Vercel Engineering" (what) and "This skill should be used when writing, reviewing, or refactoring... Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements" (when, with concrete trigger phrases). Voice is third-person throughout.

5 / 5

Trigger Term Quality

Good natural keyword coverage: "React components", "Next.js pages", "data fetching", "bundle optimization", "performance improvements" — phrases users would genuinely say. Not 5 because common variations users actually utter are missing (e.g., "slow rendering", "re-renders", "app speed", "memoization").

4 / 5

Distinctiveness Conflict Risk

A clear niche (React/Next.js performance from Vercel Engineering) with mostly distinct triggers, but generic tail terms like "performance improvements" create minor overlap risk with general JS-performance or React-style skills. Not 3 — the React/Next.js scoping is specific enough to mostly disambiguate.

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

Kiz8-Team/open-agents

Path

.agents/skills/vercel-react-best-practices/SKILL.md

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.