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.

68

Quality

82%

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

SKILL.md
Quality
Evals
Security

Quality

Content

65%

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

The body is a well-organized, concise quick-reference catalog of 45 prioritized rules, but it lacks executable code examples, has no validation-checkpoint workflow, and its single progressive-disclosure pointer references an AGENTS.md file that is absent from the bundle. Actionability and workflow clarity are the main weak spots.

Suggestions

Add small, copy-paste-ready code snippets for the highest-impact rules (e.g., async-parallel with Promise.all, bundle-dynamic-imports with next/dynamic) directly in the quick reference, since the body currently only names APIs without examples.

Provide the referenced AGENTS.md bundle file (or fix/remove the broken link) so the progressive-disclosure pointer resolves to real expanded content.

Add a brief apply-and-verify workflow — e.g., identify the relevant category by priority, apply the rule, then verify with a performance check — with an explicit validation checkpoint rather than only a priority table.

DimensionReasoningScore

Conciseness

The body is a terse catalog of rule names plus one-line summaries (e.g., "async-parallel - Use Promise.all() for independent operations") with no padding or explanations of concepts Claude already knows; it is not level 2 because nearly every line earns its place as a useful quick-reference index rather than including unnecessary explanation.

3 / 3

Actionability

It names concrete APIs/techniques ("Use Promise.all()", "Use React.cache()", "Use next/dynamic") but provides no executable code examples in the body, deferring all detail to AGENTS.md; it is above level 1 because specific APIs are named, but below level 3 because nothing is copy-paste ready and key details are missing.

2 / 3

Workflow Clarity

A priority table and "When to Apply" section provide ordering and scenarios, but there is no sequenced apply-and-verify workflow with validation checkpoints; it is above level 1 because a priority sequence exists, but below level 3 because checkpoints/feedback loops are absent and the simple-skill exception does not apply to a 45-rule catalog.

2 / 3

Progressive Disclosure

The body is a lean overview with a clearly signaled one-level pointer to [AGENTS.md](AGENTS.md), but that referenced file does not exist in the bundle (no AGENTS.md, references/, scripts/, or assets/ present); the signaling pattern would score 3, but the missing target file breaks the disclosure promise, capping it at level 2.

2 / 3

Total

9

/

12

Passed

Description

100%

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 states the domain and concrete actions, provides explicit "use when" and "Triggers on" guidance, uses natural trigger terms, and carves out a distinct niche. It closely matches the rubric's good-overall examples.

DimensionReasoningScore

Specificity

Names multiple concrete actions ("writing, reviewing, or refactoring React/Next.js code", "data fetching, bundle optimization") rather than vague language, matching the anchor that lists several specific actions; it is above level 2 because the actions are concrete and enumerated, not just a domain plus a few actions.

3 / 3

Completeness

Explicitly answers both what ("React and Next.js performance optimization guidelines from Vercel Engineering") and when ("This skill should be used when..." plus "Triggers on tasks involving..."); it is not level 2 because the trigger guidance is explicit, not merely implied.

3 / 3

Trigger Term Quality

Includes natural terms users would actually say — "React components", "Next.js pages", "data fetching", "bundle optimization", "performance improvements" — giving good coverage; it is not level 2 because common variations are present rather than only a single relevant keyword.

3 / 3

Distinctiveness Conflict Risk

Occupies a clear niche (Vercel React/Next.js performance) with distinct triggers unlikely to fire for unrelated skills; it is above level 2 because the scope is specific rather than broadly overlapping with general code or document skills.

3 / 3

Total

12

/

12

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 1 missing

Warning

Total

15

/

16

Passed

Repository
CloudAI-X/claude-workflow-v2
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.