CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

vercel-react-best-practices

React performance optimization guidelines from Vercel Engineering for this React 18/Vite app. Use when the task explicitly concerns rendering performance, data-fetching cost, bundle size, or a performance review; skip for ordinary UI edits without a performance concern.

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

Quality

Content

53%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.

The body is a well-organized, token-efficient index of 57 rules across 8 prioritized categories, but as shipped it is only an index: all referenced detail files (rules/*.md, AGENTS.md) are absent from the bundle, so the skill delivers directives without executable examples or reachable depth. Distinctiveness of the catalog is good, yet actionability and the progressive-disclosure chain are undermined by the missing bundle files.

Suggestions

Ship the referenced `rules/*.md` files and `AGENTS.md` in the bundle, or inline the detail for the CRITICAL categories — every path the body points to (rules/async-parallel.md, rules/bundle-barrel-imports.md, AGENTS.md) is currently missing, so progressive disclosure dead-ends at the index.

Add at least one compact incorrect-vs-correct code example for the top-priority categories (Eliminating Waterfalls, Bundle Size) directly in SKILL.md so guidance remains actionable even when rule files are not loaded.

Include a short application workflow for the stated use cases (e.g., for a performance review: check priority 1–2 categories first, then verify with a bundle analyzer or React DevTools profiler) so the sequence has concrete checkpoints instead of ending at 'read the rule files'.

DimensionReasoningScore

Conciseness

The body is a lean catalog: 57 rules with one-line directives and no explanations of concepts Claude already knows (e.g., "`async-parallel` - Use Promise.all() for independent operations"). Minor duplication keeps it from anchor 5 — the priority/impact labels appear twice (the priority table and again in every Quick Reference header), and the "When to Apply" bullets echo the frontmatter description.

4 / 5

Actionability

Many one-liners name concrete APIs and techniques ("Use next/dynamic for heavy components", "Use React.cache() for per-request deduplication", "Use startTransition for non-urgent updates"), but the body contains no executable code or commands — the only code block is two file paths. Anchor 4 requires concrete code/commands with minor gaps; here the guidance is directive-level and the promised details ("Read individual rule files for detailed explanations and code examples") are unreachable since no rule files ship in the bundle.

3 / 5

Workflow Clarity

A navigation sequence is present (When to Apply → priority table → per-category rules → read rule files → AGENTS.md), but despite the intro claiming the rules are "prioritized by impact to guide automated refactoring and code generation", no workflow is given for actually applying rules in those tasks, and the drill-down step ("Read individual rule files") dead-ends because the referenced files are absent. It is above anchor 2 (the sequence is coherent and well-ordered) but below anchor 4 (steps are not fully executable and lack any checkpoints).

3 / 5

Progressive Disclosure

The design on paper is good — a clear overview with well-signaled, one-level-deep references ("rules/async-parallel.md", "For the complete guide...: `AGENTS.md`") — but every referenced path is missing from the bundle: no rules/ directory, no AGENTS.md, and no references/, scripts/, or assets/ exist. The disclosure chain breaks at the overview, leaving a catalog with no accessible depth, which is effectively the 'minimal usable structure' of anchor 2 rather than the working references of anchors 3–4.

2 / 5

Total

12

/

20

Passed

Description

78%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: third-person, concise, with an exceptionally explicit trigger clause that includes both concrete performance concerns and a skip boundary to avoid over-triggering. The main gap is that the capability statement stays generic ('guidelines') rather than naming the concrete optimization actions the skill covers.

DimensionReasoningScore

Specificity

The what-clause names the domain ("React performance optimization guidelines from Vercel Engineering") but lists no concrete actions, while the when-clause's areas ("rendering performance, data-fetching cost, bundle size") convey topical scope without enumerating what the guidelines actually do (e.g., eliminate waterfalls, memoize re-renders). It sits above the generic anchor 2 because of those concrete concern areas, but below anchor 4, which requires several specific actions.

3 / 5

Completeness

Both halves are explicit: the what ("React performance optimization guidelines from Vercel Engineering for this React 18/Vite app") and a concrete when ("Use when the task explicitly concerns rendering performance, data-fetching cost, bundle size, or a performance review") plus an explicit negative boundary ("skip for ordinary UI edits without a performance concern"). The when could not be more explicit, so the anchor-4 weakness ('when could be more explicit') does not apply.

5 / 5

Trigger Term Quality

Natural developer phrasing is well covered: "rendering performance", "data-fetching cost", "bundle size", "a performance review" — terms a user would plausibly say. It falls short of anchor 5 because common synonyms and variations (e.g., "slow", "laggy", "re-renders", "profiling", "optimize") are absent, but it clearly exceeds anchor 3's 'some relevant keywords, missing variations'.

4 / 5

Distinctiveness Conflict Risk

The niche is clear (React 18/Vite performance for this app) and the skip clause actively prevents false triggers on ordinary UI edits. Minor overlap risk remains with closely related skills — "a performance review" could also invoke a general code-review skill, and general React/web-performance skills share territory — which keeps it below anchor 5's 'minimal conflict risk'.

4 / 5

Total

16

/

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

dtyq/magic

Path

frontend/magic-web/.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.