CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. Use when writing, reviewing, or refactoring React/Next.js code involving components, Next.js pages, Server Components, Server Actions, data fetching, bundle size, rendering behavior, or performance improvements.

Quality

87%

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

SKILL.md
Quality
Evals
Security

Quality

Content

86%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 an exemplary lean index: minimal token cost, a clear lookup workflow, and a priority list that mirrors the reference guide's actual section structure, with correct one-level-deep disclosure into a single 81KB reference file. The small residual gaps are the lack of a worked example and no guidance for the no-matching-section case.

Suggestions

Add one worked micro-example of the workflow (e.g., 'task: slow page → search "1. Eliminating Waterfalls" → apply rule 1.4') to make the guidance fully concrete and lift actionability.

Add a fallback step to the Workflow for when no matching section is found in the reference (e.g., 'if no section matches, fall back to the Table of Contents at the top of the guide'), closing the workflow's only validation gap.

Optionally include the exact search command pattern (e.g., grep for the section heading) so the search step is copy-paste executable.

DimensionReasoningScore

Conciseness

The body is ~25 lean lines: a one-line purpose statement, a 4-step workflow, a numbered priority list of terse category keywords, and a two-item reference section. It assumes Claude's competence, explains nothing Claude already knows, and every token earns its place — a direct match for the 'lean and efficient' anchor.

5 / 5

Actionability

For an instruction/navigation skill the guidance is concrete and executable: 'Search references/full-guide.md for the matching section or rule heading', 'Read only the relevant section', and an explicit priority ordering that maps to the guide's actual section headings (verified: sections 1–8 of full-guide.md match the 8 listed categories). It stops short of 5 because no concrete example or search command illustrates the loop (e.g., a sample grep or how to apply a matched rule), leaving minor gaps rather than fully copy-paste-ready guidance.

4 / 5

Workflow Clarity

The 4-step Workflow is a clear, coherent sequence (identify area → search the reference → read the relevant section → prioritize high-impact work). The destructive/batch validation cap does not apply since this is a read-only lookup skill, but it stays at 4 rather than 5 because there is no checkpoint for the failure case (what to do when no matching section or rule heading is found) — a minor validation gap rather than an explicit feedback loop.

4 / 5

Progressive Disclosure

Scored against the actual bundle: one reference file (references/full-guide.md) exists, is referenced explicitly by path, and is exactly one level deep. The body signals it clearly ('do not read the whole file by default'), the Priority Order doubles as a table of contents matching the guide's top-level headings, and no content that belongs in the reference is inlined. This is the 'clear overview with well-signaled one-level-deep references' pattern at its best.

5 / 5

Total

18

/

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 states its niche (Vercel's React/Next.js performance guidance) and pairs it with an explicit, trigger-rich 'Use when' clause covering concrete technical areas. It uses third person and avoids fluff; the only softness is that the capability statement is a single 'guidelines' phrase rather than several discrete concrete actions.

DimensionReasoningScore

Specificity

Names the domain ('React and Next.js performance optimization guidelines from Vercel Engineering') and specific activities ('writing, reviewing, or refactoring React/Next.js code') plus concrete technical surfaces (Server Components, Server Actions, bundle size, data fetching). It falls short of a 5 because the 'what' is stated as generic 'guidelines' rather than multiple discrete concrete actions, and above a 3 because it enumerates several specific technical areas with minor coverage gaps.

4 / 5

Completeness

Explicitly answers both: what — 'React and Next.js performance optimization guidelines from Vercel Engineering' — and when — 'Use when writing, reviewing, or refactoring React/Next.js code involving...' with a concrete list of trigger conditions. This matches the anchor-5 example structure of clear what plus an explicit 'Use when' clause with concrete trigger phrases; a 4 would require the when to be less specific, which it is not.

5 / 5

Trigger Term Quality

Good natural keyword coverage: 'React', 'Next.js', 'components', 'data fetching', 'bundle size', 'rendering', 'performance improvements', 'Server Components', 'Server Actions' — phrases users would actually say. Not a 5 because common variations and synonyms are missing (e.g., 're-render', 'hydration', 'SSR', '.tsx'), but it clearly exceeds the 'some relevant keywords but missing common variations' level of a 3.

4 / 5

Distinctiveness Conflict Risk

A clear niche (Vercel-sourced React/Next.js performance) with distinct triggers that would not fire for unrelated skills. Minor overlap risk remains with general React style guides or generic web-performance skills, which keeps it below the 'clear niche with minimal conflict risk' of a 5 but above the broader-overlap anchors of 3 and below.

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

langbot-app/langbot-new-api

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.