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.

74

1.15x
Quality

70%

Does it follow best practices?

Impact

66%

1.15x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.claude/skills/vercel-react-best-practices/SKILL.md

The canonical home for this skill is vercel-react-best-practices in jarrodwatts/claude-code-config

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 rule catalog with clear prioritization, but it functions as an index to detail files that are not actually bundled, weakening actionability and navigation. Adding a brief selection workflow and ensuring referenced files exist would meaningfully raise quality.

Suggestions

Include the referenced bundle files (rules/*.md and AGENTS.md) or inline 1-2 representative executable code examples per CRITICAL category so the skill is actionable without missing dependencies.

Add a short numbered workflow for selecting and applying a rule (e.g. identify category by task -> pick highest-priority applicable rule -> read its file -> apply pattern -> verify no waterfall/bundle regression), with a verification checkpoint.

Resolve the broken references: either ship the rule files in the bundle or replace the dangling paths (rules/async-parallel.md, AGENTS.md) with content that is actually present.

DimensionReasoningScore

Conciseness

The body is a lean catalog of 45 rules with terse one-line blurbs and minimal over-explanation; the only real redundancy is the "When to Apply" section restating triggers already in the frontmatter, so it earns 4 rather than 5.

4 / 5

Actionability

Each rule names a concrete API or pattern (e.g. "Use Promise.all()", "Use React.cache()"), but no full executable code examples are present in the body and the referenced detail files (rules/*.md, AGENTS.md) are not bundled, leaving guidance incomplete.

3 / 5

Workflow Clarity

An implicit sequence exists (consult priority categories -> read the relevant rule file -> apply), but it is never made explicit as a numbered workflow and lacks any checkpoints or selection guidance for picking among 45 rules.

3 / 5

Progressive Disclosure

Structure and one-level-deep reference signaling are good (overview table + "How to Use" pointing to rule files), but the referenced files (rules/*.md, AGENTS.md) do not exist in the bundle, so navigation promised by the overview is broken.

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, well-structured description that clearly states both capability and trigger conditions in third-person impersonal voice. Minor improvements possible around trigger synonym coverage and sharper distinctiveness.

DimensionReasoningScore

Specificity

Lists several concrete actions ("writing, reviewing, or refactoring React/Next.js code") plus specific trigger domains ("React components, Next.js pages, data fetching, bundle optimization"), but the verbs are somewhat generic and coverage is not fully comprehensive, so it sits at 4 rather than 5.

4 / 5

Completeness

Explicitly answers both what ("React and Next.js performance optimization guidelines ... to ensure optimal performance patterns") and when ("This skill should be used when ...", "Triggers on tasks involving ...") with concrete trigger phrases.

5 / 5

Trigger Term Quality

Natural terms a user would say are well covered ("React components", "Next.js pages", "data fetching", "bundle optimization", "performance improvements"), but common synonyms like SSR, hydration, or rendering are absent, keeping it just below comprehensive.

4 / 5

Distinctiveness Conflict Risk

Clear niche (React/Next.js performance from Vercel Engineering) with distinct triggers, but broad "performance optimization" scope leaves minor overlap risk with general web-performance skills.

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
revokslab/ShipFree
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.