react-best-practices

React best-practices reviewer for TSX files. Triggers after editing multiple TSX components to run a condensed quality checklist covering component structure, hooks usage, accessibility, performance, and TypeScript patterns.

Quality

70%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Failed to scan

The risk profile of this skill

Fix and improve this skill with Tessl

tessl review fix ./skills/react-best-practices/SKILL.md

Quality

Content

47%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 catalog of 70 rules, but it functions as a reference index rather than actionable guidance: the referenced rule files and compiled AGENTS.md are missing from the bundle, and no actual review workflow or checklist procedure is described. The description's promise of a runnable checklist is not fulfilled by the content.

Suggestions

Add a step-by-step review workflow section describing how to actually run the checklist (e.g., which rule categories to check in priority order, how to report findings, and when to stop), since the description promises a review process the body never defines.

Ship the referenced bundle files (rules/*.md and AGENTS.md) or remove the broken references — as delivered, every pointer to detail ('Read individual rule files...', 'For the complete guide: AGENTS.md') leads to a nonexistent file.

Inline one or two concrete before/after code snippets for the CRITICAL categories (e.g., async-parallel, bundle-barrel-imports) so the highest-impact guidance is executable without the missing external files.

Dimension	Reasoning	Score
Conciseness	The 70 one-line rules are terse and assume Claude's competence with no padding ('Use Promise.all() for independent operations'), but the priority table partly duplicates the per-category section headers and impact labels, leaving minor trimmable content that keeps it below the 5-anchor.	4 / 5
Actionability	Rules are concrete named directives, but the body contains no code examples and defers all detail to 'rules/async-parallel.md' and 'AGENTS.md', which do not exist in the bundle, so key executable details are missing — matching the 3-anchor rather than the 4-anchor's minor gaps.	3 / 5
Workflow Clarity	Despite the description promising a 'condensed quality checklist', the body only lists when-to-apply contexts and a one-step pointer to read rule files; there is no sequence for conducting the review and no checkpoints, matching the 2-anchor (steps poorly defined) rather than the 3-anchor (steps listed).	2 / 5
Progressive Disclosure	References are clearly signaled ('Read individual rule files for detailed explanations and code examples', 'For the complete guide... AGENTS.md') but point to files absent from the bundle (no rules/ directory, no AGENTS.md, no references/scripts/assets), so navigation is broken — worse than the 3-anchor's merely unclear references.	2 / 5
	Total	11 / 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 that clearly states what the skill does and gives an explicit, concrete trigger condition, with good natural keyword coverage. Minor gaps: the capability is expressed as a single 'checklist' action, and common trigger variations like JSX are omitted.

Dimension	Reasoning	Score
Specificity	Names the domain (React/TSX review) and enumerates five concrete coverage areas ('component structure, hooks usage, accessibility, performance, and TypeScript patterns'), but the action itself is a single generic one ('run a condensed quality checklist'), which falls short of the multiple distinct concrete actions the 5-anchor requires.	4 / 5
Completeness	Explicitly answers both what ('React best-practices reviewer for TSX files... quality checklist covering...') and when ('Triggers after editing multiple TSX components') with a concrete, specific trigger clause, satisfying the 5-anchor; it is not the 4-anchor since the when-clause is already fully explicit.	5 / 5
Trigger Term Quality	Good natural keywords ('React', 'TSX files', 'hooks usage', 'accessibility', 'TypeScript') that users would plausibly say, but common variations like 'JSX' (despite pathPatterns covering .jsx) and 'code review' are missing, so it does not reach the 5-anchor's comprehensive synonym coverage.	4 / 5
Distinctiveness Conflict Risk	'React best-practices reviewer for TSX files' carves a clear niche, but it overlaps with generic code-review skills and other React/frontend linting skills, matching the 4-anchor (mostly distinct, minor overlap risk) rather than the 5-anchor's minimal conflict risk.	4 / 5
	Total	17 / 20 Passed

Validation

81%

Warnings & errors only

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

Validation — 13 / 16 Passed

Validation for skill structure

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning
metadata_field	'metadata' should map string keys to string values	Warning
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	13 / 16 Passed

Repository: vercel/vercel-plugin
Path: skills/react-best-practices/SKILL.md
Commit: 82fa491

Reviewed: 6 hours ago

Table of Contents

Discovery Implementation Validation

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.