CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

60

Quality

70%

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 ./plugins/build-web-apps/skills/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.

The SKILL.md body is a well-organized, token-efficient index of 64 rules with a clear priority ordering, but it is only an index: every path to executable detail (rules/ files, AGENTS.md) is a dangling reference since none of those files exist in the bundle. As shipped, a consumer can see rule names and one-line summaries but cannot reach any code examples or explanations.

Suggestions

Ship the referenced rule files (rules/*.md) or remove the references — the body's core instruction 'Read individual rule files for detailed explanations and code examples' currently points to files that don't exist in the bundle.

Inline short incorrect/correct code pairs for the two CRITICAL categories (Eliminating Waterfalls, Bundle Size Optimization) in SKILL.md so the most impactful guidance is actionable even without the external files.

Reconcile the two parallel disclosure paths: either keep per-rule files and drop the AGENTS.md 'full compiled document' pointer, or keep AGENTS.md and drop the per-rule listing, so readers have one unambiguous route to the details. Also drop the 'When to Apply' section, which restates the frontmatter description.

DimensionReasoningScore

Conciseness

The body is a lean index: 64 rules as one-line entries, a priority table, and short sections — efficient overall. Not a 5 because the "When to Apply" section largely restates the frontmatter description, and the priority/impact columns in the table duplicate the impact labels repeated in each category header.

4 / 5

Actionability

The one-line rule summaries give concrete direction ("Use Promise.all() for independent operations", "Import directly, avoid barrel files"), but the body contains no code, commands, or examples — all executable detail is delegated to `rules/*.md` and `AGENTS.md`, which do not exist in the bundle. This matches the 3 anchor (some concrete guidance but incomplete, key details missing) rather than 4, which requires concrete code or commands with only minor gaps.

3 / 5

Workflow Clarity

There is a usable sequence — check "When to Apply", pick a category from the priority table, read the rule file — but the crucial step ("Read individual rule files", `rules/async-parallel.md`) points to files that are not present, so the workflow dead-ends. This sits at the 3 anchor (sequence present, checkpoints/gaps) rather than 4, where the sequence would be fully executable.

3 / 5

Progressive Disclosure

The structure is conceptually right — an overview with a priority table and one-level-deep references in a dedicated "How to Use" section — but the referenced bundle files (`rules/async-parallel.md`, `rules/bundle-barrel-imports.md`, `AGENTS.md`) do not exist in the bundle, and the parallel "Full Compiled Document" path (AGENTS.md expanding all rules) partially duplicates the per-rule structure. Clearly signaled but broken/ambiguous organization matches the 3 anchor.

3 / 5

Total

13

/

20

Passed

Description

83%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: explicit what-and-when structure with two concrete trigger clauses, natural trigger terms, and third-person voice. Only minor gaps — a few natural synonyms (bundle size, slow renders) are missing, and a generic React style guide could compete for the same triggers.

DimensionReasoningScore

Specificity

The description names the domain ("React and Next.js performance optimization") and several concrete application actions ("writing, reviewing, or refactoring React/Next.js code", "data fetching, bundle optimization"), matching the anchor for several specific actions with minor gaps (e.g., re-render/rendering optimization categories are folded into the generic "performance improvements"). It falls short of the 5 anchor because actions are framed as task contexts rather than enumerated capabilities, and short of nothing below since it clearly goes beyond 1-2 actions.

4 / 5

Completeness

Clearly answers both what ("React and Next.js performance optimization guidelines from Vercel Engineering") and when, with two explicit trigger clauses: "This skill should be used when writing, reviewing, or refactoring React/Next.js code" and "Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements". This matches the 5 anchor exactly; the 4 anchor requires the 'when' to be less explicit, which it is not.

5 / 5

Trigger Term Quality

Good natural keyword coverage: "React components", "Next.js pages", "data fetching", "bundle optimization", "performance improvements", "refactoring", "reviewing" — phrases users would naturally say. Not a 5 because common variations like "slow renders", "re-renders", "hydration", or "bundle size" are absent, though "performance improvements" partially covers them.

4 / 5

Distinctiveness Conflict Risk

Clear niche (React/Next.js performance) with distinct trigger phrases, but a general React style/coding-standards skill would also trigger on "writing React components", creating minor overlap risk. Better than the 3 anchor ('could still overlap with similar skills' broadly) because the performance focus is a distinct niche, but not the minimal-conflict clarity of the 5 anchor.

4 / 5

Total

17

/

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
openai/plugins
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.