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.

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

The canonical home for this skill is vercel-react-best-practices in divaltor/starlight

SKILL.md
Quality
Evals
Security

Quality

Content

57%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 index of 70 rules, but it functions as a table of contents for a bundle that is not present: rules/*.md and AGENTS.md do not exist, leaving the skill without executable detail or a working navigation layer. The body alone gives terse pointers that are actionable for some rules but cryptic for others.

Suggestions

Ship the referenced bundle files (rules/*.md and AGENTS.md) or remove the pointers — the 'How to Use' and 'Full Compiled Document' sections currently navigate to files that do not exist.

Inline short executable code snippets for at least the CRITICAL rules (e.g., async-parallel with Promise.all, bundle-barrel-imports with direct imports) so the skill remains actionable even without the rule files.

Add an explicit step sequence in 'How to Use' (e.g., identify the task type → match it to a category by priority → open the rule file → apply the pattern) so the workflow is stated rather than implied, and briefly explain non-obvious APIs like 'better-all'.

DimensionReasoningScore

Conciseness

The body is an efficient index: terse one-liners like 'Use Promise.all() for independent operations' and 'Import directly, avoid barrel files' assume Claude's competence with no concept explanations. Minor trimming is possible (the priority table repeats category names that the section headers restate, and 'When to Apply' restates the frontmatter description), so it fits 'efficient; minor instances... that could be trimmed' rather than the lean 5 anchor.

4 / 5

Actionability

The rule inventory gives concrete direction ('Use Promise.all() for independent operations', 'Use next/dynamic for heavy components') but the body contains no executable code, commands, or examples — everything concrete is delegated to rule files ('Read individual rule files for detailed explanations and code examples'), and several one-liners are cryptic without them ('Use better-all for partial dependencies', 'Use Activity component for show/hide'). This matches 'some concrete guidance but incomplete; missing key details'; not 4 because there is no executable code or command in the body at all.

3 / 5

Workflow Clarity

A lookup flow is implied (task → priority table → category → rule file) via 'Rule Categories by Priority' and 'How to Use', but there is no explicit step sequence, no guidance on applying rules during a task (e.g., what to check first when reviewing code), and the core step (reading rule files) points to files that are not present. This fits 'sequence present but checkpoints missing or implicit'; not 2 because the rough flow and usage instructions are coherent.

3 / 5

Progressive Disclosure

The body itself is a well-signaled, one-level-deep index ('Read individual rule files...', 'For the complete guide with all rules expanded: AGENTS.md'), but the actual bundle contains no referenced files — no rules/ directory and no AGENTS.md exist, so every pointer is dangling and the disclosure structure resolves to nothing. Per the guideline to score against the actual bundle structure, this lands at 'some structure but could be better organized' rather than the 4-5 anchors that assume the referenced layer exists; not 2 because the in-body structure is clear and appropriately index-shaped.

3 / 5

Total

13

/

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 contains and when to use it, uses natural trigger terms, and stays in third person. Main weakness is the over-broad 'when writing... React/Next.js code' trigger, which risks firing on tasks unrelated to performance.

DimensionReasoningScore

Specificity

Names the domain ("React and Next.js performance optimization") and several specific actions ("writing, reviewing, or refactoring React/Next.js code", "data fetching, bundle optimization, or performance improvements"), matching the 'lists several specific actions; minor gaps' anchor. Not 5 because it never enumerates the concrete optimization capabilities (waterfalls, bundle size, re-renders, rendering); not 3 because it goes beyond 1-2 concrete actions. Voice is third person ('This skill should be used'), so no voice penalty applies.

4 / 5

Completeness

Explicitly answers what ("React and Next.js performance optimization guidelines from Vercel Engineering") and 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") with concrete trigger phrases, matching the top anchor.

5 / 5

Trigger Term Quality

Natural phrases users would say include "React components", "Next.js pages", "data fetching", "bundle optimization", and "performance improvements", giving good keyword coverage. Not 5 because common variations such as "speed up", "slow", "load times", or framework versions are missing; not 3 because coverage is broad rather than partial.

4 / 5

Distinctiveness Conflict Risk

Clear niche (React/Next.js performance from Vercel) with mostly distinct triggers, matching 'mostly distinct; minor overlap risk'. Not 5 because 'when writing, reviewing, or refactoring React/Next.js code' is broad enough to fire on any React coding task, overlapping general React/Next.js style skills even when performance is not in scope.

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

whimzyLive/nightshift-ai

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.