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.

62

Quality

72%

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

50%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 rule index that excels at progressive disclosure and conciseness, but the body itself is non-actionable — it lists rule names without code, concrete steps, or a sequenced workflow, pushing all executable guidance into (missing) external rule files.

Suggestions

Add at least 1-2 inline executable code examples (incorrect vs. correct) for the highest-priority CRITICAL rules so the skill is actionable without loading external files.

Provide a short sequenced workflow with a validation checkpoint for applying rules during a refactor (e.g., profile/measure -> apply -> re-verify), since the skill targets batch refactoring.

Clearly signal references as links (e.g., [rules/async-parallel.md](rules/async-parallel.md)) and ensure the referenced rules/ and AGENTS.md files actually exist in the bundle, since progressive_disclosure should be scored against the real bundle structure.

DimensionReasoningScore

Conciseness

The body is a lean rule index (names + one-line descriptions) that assumes Claude's competence and avoids explaining React concepts, though the static category table and the 'How to Use' section add a small amount of navigational padding that could be trimmed.

4 / 5

Actionability

The body provides only one-line rule summaries with no executable code, commands, or concrete steps; it describes rules rather than instructing how to apply them, deferring all actionable detail to unloaded rule files.

2 / 5

Workflow Clarity

A clear priority/category structure and a 'How to Use' pointer exist, but there is no sequenced workflow for applying the rules and no validation checkpoints for the batch refactoring operations the skill describes, capping clarity at 3.

3 / 5

Progressive Disclosure

Good one-level-deep structure: SKILL.md indexes rules by category and points to per-rule files (rules/*.md) and a compiled AGENTS.md, though the referenced paths are shown as plain code blocks rather than clearly signaled links, and the referenced bundle files do not actually exist in the bundle.

4 / 5

Total

13

/

20

Passed

Description

95%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, third-person description that clearly states what the skill does and when to use it with concrete trigger phrases. Minor gap: the 'what' lists task categories rather than enumerating the specific optimization actions the body contains.

DimensionReasoningScore

Specificity

Names the domain (React/Next.js performance) and several concrete actions ('writing, reviewing, or refactoring', 'data fetching', 'bundle optimization'), but the actions are framed as task categories rather than a comprehensive list of concrete operations, leaving minor coverage gaps.

4 / 5

Completeness

Explicitly answers both 'what' (React and Next.js performance optimization guidelines) and 'when' with a clear 'Triggers on...' clause listing concrete trigger scenarios.

5 / 5

Trigger Term Quality

Comprehensive natural trigger terms — 'React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'performance improvements' — map closely to phrases a user would naturally say when needing this skill.

5 / 5

Distinctiveness Conflict Risk

Clear niche — Vercel-authored React/Next.js performance — with distinct triggers (Next.js pages, bundle optimization, data fetching) that minimize conflict risk with other skills.

5 / 5

Total

19

/

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
whimzyLive/nightshift-ai
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.