CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

react-best-practices

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Use when writing new React components or Next.js pages, implementing data fetching (client or server-side), or reviewing code for performance issues.

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/AI-Agents-Safe-Coding-Skills/skills/react-best-practices/SKILL.md

The canonical home for this skill is react-best-practices in administrakt0r/AI-Agents-Safe-Coding-Skills

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-conceived index-style skill body that appropriately keeps rule details out of the overview, but it is undermined by a duplicated filler 'When to Use' section, a verbatim repeat of the description, unlinked/broken file references, and the absence of any explicit workflow for applying the prioritized rules.

Suggestions

Delete the trailing duplicate '## When to Use' section (its filler sentence adds nothing) and drop the verbatim restatement of the description in the intro.

Replace the three-path code block with a clear pointer to the rules directory (e.g., 'See [rules/](rules/) for all 45 rule files, each with incorrect/correct examples') and ensure the referenced files actually ship in the bundle.

Add a short explicit workflow, e.g., 'When reviewing code: 1. scan for CRITICAL waterfall/bundle issues first, 2. consult the matching rule file, 3. verify the fix against its correct example'.

DimensionReasoningScore

Conciseness

The one-line rule index is lean and earns its tokens, but there is clear waste: the intro repeats the frontmatter description verbatim, and the document ends with a duplicated '## When to Use' section containing only the filler sentence 'This skill is applicable to execute the workflow or actions described in the overview.' That unnecessary padding places it at anchor 3 ('mostly efficient but includes some unnecessary explanation') rather than the trim anchor 4.

3 / 5

Actionability

The one-liners name concrete APIs ("Use Promise.all() for independent operations", "Use next/dynamic for heavy components", "Use React.cache() for per-request deduplication") but the body itself contains no executable code or concrete steps — it defers everything to rule files, and the referenced paths (rules/*.md, AGENTS.md) are not present in the bundle. Anchor 3 ('some concrete guidance but incomplete... missing key details') fits; anchor 4 would require mostly executable guidance in the body.

3 / 5

Workflow Clarity

There is a rough sequence — the priority table ranks categories by impact and 'How to Use' says to read rule files — but no explicit workflow for applying rules when writing or reviewing code, and no checkpoints. Anchor 3 ('sequence present but checkpoints missing or implicit') matches better than anchor 2 (the priority ordering and rule-file structure do give a defined path) and better than anchor 4 (no clear step-by-step process is given).

3 / 5

Progressive Disclosure

The design intent is good — SKILL.md as an index with details delegated to per-rule files — but references are not clearly signaled: they appear as three arbitrary paths in a code block (including the cryptic 'rules/_sections.md') rather than links or a directory pointer, and none of the referenced files (rules/, AGENTS.md) exist in the bundle. This lands on anchor 3 ('references present but not clearly signaled') rather than anchor 4.

3 / 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 with an explicit and specific 'Use when...' trigger clause covering three concrete scenarios. Its main weakness is that the 'what' rests on a single generic noun ('guide') padded with 'Comprehensive' rather than naming concrete capabilities.

Suggestions

Replace the buzzword 'Comprehensive' with 2-3 concrete capabilities, e.g. 'Eliminates request waterfalls, reduces bundle size, and optimizes re-renders in React and Next.js applications'.

Add high-traffic natural trigger terms users actually say, such as 'bundle size', 'slow rendering', or 'load times', to broaden keyword coverage.

DimensionReasoningScore

Specificity

The description names the domain concretely ("performance optimization guide for React and Next.js applications") but the stated capability is generic — "guide" plus the buzzword "Comprehensive" — with no concrete actions like 'eliminates waterfalls' or 'reduces bundle size'. This matches anchor 3 (domain plus 1-2 concrete actions, not comprehensive) better than anchor 2, since the target domain is precise rather than generic, but it is not the multi-action coverage of anchor 4.

3 / 5

Completeness

Both halves are explicit: what ("Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel") and when ("Use when writing new React components or Next.js pages, implementing data fetching..., or reviewing code for performance issues"). The 'when' clause lists three concrete trigger scenarios, matching the anchor-5 example pattern; anchor 4 would require the 'when' to be less explicit than it is.

5 / 5

Trigger Term Quality

Natural phrases users would say are present: "writing new React components or Next.js pages", "implementing data fetching (client or server-side)", "reviewing code for performance issues". A few common natural terms are missing (e.g., "bundle size", "slow renders", "optimizing load times"), so this is anchor 4 rather than the synonym-and-extension completeness of anchor 5.

4 / 5

Distinctiveness Conflict Risk

The React/Next.js performance niche is clear with distinct triggers (components, pages, data fetching, performance review), but "reviewing code for performance issues" overlaps with generic code-review or JavaScript-performance skills. Minor overlap risk with closely related skills places this at anchor 4 rather than the minimal-conflict anchor 5.

4 / 5

Total

16

/

20

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.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository

administrakt0r/AI-Agents-Safe-Coding-Skills

Path

plugins/AI-Agents-Safe-Coding-Skills/skills/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.