CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

64

Quality

76%

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

75%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This is a well-structured, concise skill that effectively serves as a routing layer to a detailed reference guide. Its main weakness is low actionability — it names performance patterns and categories but provides zero concrete code examples or specific before/after patterns, relying entirely on the external reference file for all executable guidance. The priority ordering is a valuable contribution that helps Claude triage work effectively.

Suggestions

Add 1-2 inline code examples for the highest-priority category (eliminating waterfalls), e.g., a before/after showing sequential fetches refactored to `Promise.all`.

Include specific section headings or search terms that map to each priority area in `references/full-guide.md` so Claude can locate content faster.

Add a brief verification step to the workflow, e.g., 'After applying changes, verify bundle size or rendering behavior improved using the relevant metric.'

DimensionReasoningScore

Conciseness

Every token earns its place. No unnecessary explanations of React, Next.js, or performance concepts. The skill assumes Claude knows these technologies and focuses purely on the workflow and priority ordering.

5 / 5

Actionability

The workflow steps are clear but entirely abstract — there are no concrete code examples, specific commands, or executable snippets. The priority list names patterns (e.g., 'barrel imports', 'Promise.all') but doesn't show what to do about them, deferring everything to the reference file.

3 / 5

Workflow Clarity

The 4-step workflow is clearly sequenced and logically ordered: identify area → search reference → read relevant section → prioritize by impact. However, there are no validation checkpoints or feedback loops (e.g., verifying the optimization actually improved performance). Since this is not a destructive/batch operation, the missing validation doesn't cap the score at 3, but it's still a gap.

4 / 5

Progressive Disclosure

Good structure: SKILL.md serves as a concise overview pointing to `references/full-guide.md` for details, with clear instructions to read only relevant sections. However, no bundle files were provided, so we cannot verify the reference file exists or that section headings match. The single-level reference pattern is well-signaled, but the lack of more specific navigation pointers (e.g., exact section names in the reference) is a minor gap.

4 / 5

Total

16

/

20

Passed

Description

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

This is a solid description that excels in completeness with a clear 'Use when' clause covering multiple trigger scenarios. The trigger terms are good but could include more synonyms and common variations. The main weakness is that the 'what' portion describes the skill as 'guidelines' rather than listing specific concrete optimization actions it can perform.

Suggestions

Add specific concrete actions the skill covers, e.g., 'Optimizes component re-renders, reduces bundle size, implements code splitting, configures lazy loading, improves hydration performance'

Include additional trigger term variations like 'RSC', 'SSR', 'hydration', 'code splitting', 'lazy loading', 'slow page', 'Core Web Vitals', 'LCP', 'CLS'

DimensionReasoningScore

Specificity

Names the domain (React/Next.js performance optimization) and mentions several areas (components, Server Components, Server Actions, data fetching, bundle size, rendering behavior) but these are categories rather than concrete actions. The actual actions are limited to generic terms like 'writing, reviewing, or refactoring'.

3 / 5

Completeness

Clearly answers both 'what' (React and Next.js performance optimization guidelines from Vercel Engineering) and 'when' (explicit 'Use when' clause with multiple concrete trigger scenarios covering writing, reviewing, refactoring, and specific technical areas).

5 / 5

Trigger Term Quality

Good coverage of natural keywords users would say: 'React', 'Next.js', 'Server Components', 'Server Actions', 'data fetching', 'bundle size', 'performance', 'rendering'. Missing some common variations like 'RSC', 'SSR', 'hydration', 'lazy loading', 'code splitting', or 'slow page load'.

4 / 5

Distinctiveness Conflict Risk

Fairly distinct with its focus on performance optimization specifically from Vercel Engineering, and the combination of React/Next.js narrows the scope. However, there could be minor overlap with general React coding skills or Next.js development skills that aren't performance-focused.

4 / 5

Total

16

/

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
langbot-app/langbot-new-api
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.