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.

80

1.15x
Quality

70%

Does it follow best practices?

Impact

96%

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 ./.agents/skills/vercel-react-best-practices/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

50%

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 catalog of 70 rules across 8 priority categories with lean, concept-free one-line descriptions. Its main weakness is that the referenced detail files (rules/*.md and AGENTS.md) are absent from the bundle, so the progressive-disclosure design is broken and actionable code examples are missing.

Suggestions

Ship the referenced bundle files (rules/*.md and AGENTS.md) so the clearly signaled progressive-disclosure links resolve to real content; without them the SKILL.md overview points to nothing.

Add at least one small executable code example for the CRITICAL categories (Eliminating Waterfalls, Bundle Size) inline, since the rule files that would hold examples are not present.

Remove the redundancy between the priority table and the per-category section headers (e.g. drop the Impact/Prefix columns or the repeated section titles) to tighten token use.

DimensionReasoningScore

Conciseness

The body is a lean, concept-free rule index that assumes Claude's competence, but the priority table duplicates the per-category section headers (category name, impact, prefix), so it could be tightened and is not a clean 3.

2 / 3

Actionability

Each rule gives a concrete one-line directive (e.g. "async-parallel - Use Promise.all() for independent operations"), but there is no executable code in the body and the referenced code-example files (rules/*.md) do not exist, leaving key details missing.

2 / 3

Workflow Clarity

The priority table and "How to Use" section give a loose apply-by-impact sequence, but there is no explicitly sequenced workflow with checkpoints; the navigate-to-rule-file process is only implied.

2 / 3

Progressive Disclosure

The overview is well organized with clearly signaled references (rules/async-parallel.md, rules/bundle-barrel-imports.md, AGENTS.md), but none of those referenced files exist in the bundle, so the disclosure structure is incomplete and detailed rule content is only summarized inline.

2 / 3

Total

8

/

12

Passed

Description

90%

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 explicitly states what the skill provides and when to use it, with natural trigger terms and a distinct niche. The only weakness is that the skill's core capability is described as "guidelines" while the concrete actions listed are the user's tasks rather than the skill's own outputs.

DimensionReasoningScore

Specificity

It names the domain and several actions ("writing, reviewing, or refactoring React/Next.js code", "data fetching, bundle optimization"), but the skill's own capability is framed abstractly as "guidelines" and the listed actions describe user tasks rather than concrete skill outputs, so it is not a comprehensive 3.

2 / 3

Completeness

It clearly answers both what ("React and Next.js performance optimization guidelines from Vercel Engineering") and when, with explicit trigger clauses ("This skill should be used when...", "Triggers on tasks involving...").

3 / 3

Trigger Term Quality

Good coverage of natural terms a developer would say — "React components", "Next.js pages", "data fetching", "bundle optimization", "performance improvements" — matching the anchor for broad natural-term coverage.

3 / 3

Distinctiveness Conflict Risk

The React/Next.js performance niche sourced from Vercel with specific triggers (components, pages, data fetching, bundle optimization) is a clear, distinguishable scope unlikely to trigger the wrong skill.

3 / 3

Total

11

/

12

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
1weiho/open-slide
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.