CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

62

Quality

74%

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

Quality

Content

65%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 64 prioritized rules with concrete one-line directives, and the one-level-deep reference design is correct in principle. Its main weaknesses are the absent review workflow (no sequenced procedure for actually running the checklist) and the fact that every referenced detail file (rules/*.md, AGENTS.md) is missing from the bundle. Note also a scope mismatch: the frontmatter promises coverage of 'accessibility' and 'component structure', but the body is almost entirely performance optimization.

Suggestions

Add a short 'Running a review' workflow section that sequences the checklist: scan the changed TSX files, apply rules by priority tier, report findings grouped by category — giving the promised reviewer behavior an explicit procedure.

Ship the referenced detail files (rules/<rule-id>.md per category and AGENTS.md) in the bundle, or fix the paths, so the progressive-disclosure references resolve instead of dead-ending.

Reconcile the description/body scope: either add accessibility, component-structure, and TypeScript-pattern rules to the catalog or narrow the description to performance-focused review; also trim the duplicated priority table or the per-section headers.

DimensionReasoningScore

Conciseness

The body is mostly lean: each of the 64 rules is a single-line directive ('async-parallel - Use Promise.all() for independent operations') with no tutorials or explanations of concepts Claude already knows. It stays at 4 rather than 5 because of redundancy — the priority table ('Eliminating Waterfalls | CRITICAL | async-') repeats category/impact/prefix information already shown in each section header, and 'When to Apply' restates frontmatter trigger guidance.

4 / 5

Actionability

Most rules are concrete, executable directives ('Import directly, avoid barrel files', 'Use next/dynamic for heavy components', 'Hoist RegExp creation outside loops') that a reviewer can act on directly. It is not 5 because there are no code examples or detection heuristics inline, and the deeper actionable detail is delegated to rule files ('Read individual rule files for detailed explanations and code examples') — the catalog alone leaves minor gaps for the trickier rules.

4 / 5

Workflow Clarity

Navigation exists in rough order (When to Apply → prioritized rule catalog → How to Use), but the actual review workflow the description promises ('run a condensed quality checklist') is never sequenced: there is no procedure for scanning the edited files, which rules to apply first, how to report findings, or any checkpoint/feedback step. Not 2 because what structure is present is coherent and well-prioritized; not 4 because the core multi-step review process is undefined.

3 / 5

Progressive Disclosure

The intent is good — an overview with clearly signaled, one-level-deep references ('Read individual rule files for detailed explanations: rules/async-parallel.md', 'For the complete guide with all rules expanded: AGENTS.md'). However, scoring against the actual bundle: no rules/ directory, no AGENTS.md, and no references/, scripts/, or assets/ directories exist alongside SKILL.md, so every detailed reference dangles and navigation dead-ends. Not 4 because the referenced files are absent from the bundle.

3 / 5

Total

14

/

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: it names a specific domain, an explicit action, and a concrete trigger condition in third person, closely matching the good examples. Keyword coverage is good but could add a few more natural user phrasings, and the single-action framing leaves minor gaps versus comprehensive coverage.

DimensionReasoningScore

Specificity

Quotes: 'run a condensed quality checklist covering component structure, hooks usage, accessibility, performance, and TypeScript patterns' — a concrete action (run a checklist) over five named, specific areas. It stays at 4 rather than 5 because it describes essentially one action applied across areas rather than multiple distinct concrete actions (e.g., it never says what the reviewer outputs or how findings are reported).

4 / 5

Completeness

The 'what' is explicit ('React best-practices reviewer for TSX files... condensed quality checklist covering component structure, hooks usage, accessibility, performance, and TypeScript patterns') and the 'when' is an explicit trigger clause with concrete phrasing ('Triggers after editing multiple TSX components'). Not 4 because the trigger guidance is already specific and concrete, not merely present-but-imprecise.

5 / 5

Trigger Term Quality

Quotes: 'React best-practices reviewer for TSX files', 'editing multiple TSX components', 'hooks usage', 'accessibility', 'performance', 'TypeScript patterns' — natural terms a user would say when asking for a component review. Not 5 because some common user phrasings are missing (e.g., 'review my components', 'refactor', '.tsx extension') and there are no synonym variations.

4 / 5

Distinctiveness Conflict Risk

Quotes: 'React best-practices reviewer for TSX files' — a clear niche (React/TSX review) with distinct trigger conditions ('after editing multiple TSX components'). It is not 5 because it could overlap with generic code-review or general React development skills (the 'performance' and 'TypeScript' keywords are broad), though the TSX-review framing keeps conflict risk minor.

4 / 5

Total

17

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

metadata_field

'metadata' should map string keys to string values

Warning

Total

14

/

16

Passed

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.