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

78%

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

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-structured, lean reference catalog with clearly signaled categories, but it is undermined by zero executable code examples and references to rule files and AGENTS.md that are absent from the bundle. The inlined 70-rule list also blurs the overview/detail boundary progressive disclosure expects.

Suggestions

Ship the referenced bundle files: create rules/*.md for each rule and AGENTS.md so the "Read individual rule files" and "Full Compiled Document" navigation actually resolves.

Add at least a few concrete, copy-paste-ready code examples (correct vs. incorrect) inline for the highest-impact CRITICAL rules (e.g. async-parallel, bundle-barrel-imports) instead of deferring all examples to external files.

Trim the inlined 70-rule catalog to category summaries with counts and a handful of representative rules, moving the exhaustive list into AGENTS.md to keep SKILL.md a true overview.

DimensionReasoningScore

Conciseness

Per-line efficient with no concept over-explanation (it never explains what React/Promise.all is), but the full 70-rule catalog is inlined in the overview rather than deferred, leaving minor trimmable bulk.

4 / 5

Actionability

Rules name concrete APIs (Promise.all, next/dynamic, React.cache, useDeferredValue) but provide no executable code blocks — all code examples are deferred to external rule files, leaving guidance incomplete.

3 / 5

Workflow Clarity

Well-organized into prioritized categories for navigation, but there is no multi-step workflow or validation checkpoints; "How to Use" is a single unsequenced instruction to read other files.

3 / 5

Progressive Disclosure

Sections and references are clearly signaled, but the referenced files (rules/*.md and AGENTS.md) do not exist in the bundle and the entire 70-rule catalog is inlined rather than split out, undermining navigation.

3 / 5

Total

13

/

20

Passed

Description

87%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 and explicitly covers both capability and trigger conditions in third person, with good keyword coverage and a distinct niche. The only soft spot is action specificity, where broad verbs (writing/reviewing/refactoring) are less granular than ideal.

DimensionReasoningScore

Specificity

Lists several concrete actions — "writing, reviewing, or refactoring React/Next.js code" — tied to a specific domain, though the verbs are broader than the granular actions in the anchor 5 example.

4 / 5

Completeness

Explicitly states both what ("React and Next.js performance optimization guidelines from Vercel Engineering") and when ("This skill should be used when... Triggers on tasks involving...") with concrete trigger phrases, matching the anchor 5 pattern.

5 / 5

Trigger Term Quality

Good natural-term coverage ("React components, Next.js pages, data fetching, bundle optimization, or performance improvements"), but lacks synonyms and file extensions that would push it to anchor 5.

4 / 5

Distinctiveness Conflict Risk

A clear niche (React/Next.js performance from Vercel) with distinct, domain-scoped triggers and minimal overlap risk with unrelated skills.

5 / 5

Total

18

/

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

divaltor/starlight

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.