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.

58

Quality

68%

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

61%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-organized reference index that respects token budget and uses a sound overview-to-detail structure, but the body itself lacks executable code (deferring all examples to rule files) and the referenced detail files (rules/*.md, AGENTS.md) do not exist in the bundle, weakening both actionability and progressive disclosure.

Suggestions

Include 2-3 short executable code snippets for the highest-priority (CRITICAL) rules directly in the body so the overview is actionable without requiring the missing rule files.

Either ship the referenced rules/*.md and AGENTS.md bundle files or remove/soften the references to non-existent files so navigation does not lead to dead links.

Add a brief explicit workflow for applying the checklist (e.g., identify category → read rule → apply fix → re-check) with a verification step so reviewing multiple components has a clear sequenced process.

DimensionReasoningScore

Conciseness

The body is a lean rule index with one-line descriptions per rule and no padding or explanations of concepts Claude already knows; it is efficient with only minor trimmable phrasing in the intro and 'When to Apply' sections, sitting just below the fully lean 5 anchor.

4 / 5

Actionability

Each rule gives a concrete-ish hint (e.g., 'Use Promise.all() for independent operations') but the body contains no executable code examples — those are deferred to rule files — leaving guidance incomplete at the overview level, matching the 3 anchor of 'some concrete guidance but incomplete; missing key details'.

3 / 5

Workflow Clarity

A navigation path exists (priority table → quick reference → read rule files) but there is no explicit multi-step workflow and no validation checkpoints; for a reference catalog this is acceptable, but it matches the 3 anchor of sequence present with implicit/missing checkpoints rather than the clearly-sequenced 4 anchor.

3 / 5

Progressive Disclosure

Structure is well-designed (overview → impact-prioritized table → per-category index → one-level-deep pointers to rules/*.md and AGENTS.md) with clearly signaled references, but the referenced bundle files (rules/, AGENTS.md) are not present in the skill directory, a gap that keeps it below the 5 anchor.

4 / 5

Total

14

/

20

Passed

Description

75%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 solid, third-person description that clearly states both capability and an explicit trigger condition with specific coverage areas. It narrowly misses top marks because the trigger is event-oriented rather than phrased as a natural user request, and the action set is a single checklist rather than multiple distinct operations.

DimensionReasoningScore

Specificity

Names the domain ('React best-practices reviewer for TSX files') and a concrete action ('run a condensed quality checklist') covering five specific areas (component structure, hooks, accessibility, performance, TypeScript), but the action set is essentially a single checklist rather than multiple distinct operations, so it falls just below the comprehensive 5 anchor.

4 / 5

Completeness

Explicitly answers 'what' ('React best-practices reviewer ... run a condensed quality checklist covering ...') and 'when' ('Triggers after editing multiple TSX components'), satisfying the explicit-trigger requirement, but the 'when' could be more user-request-oriented ('Use when ...') rather than event-oriented, so it sits just below the 5 anchor.

4 / 5

Trigger Term Quality

Includes natural user-facing terms ('React', 'TSX files', 'best-practices', 'components', 'hooks', 'TypeScript') with good coverage, though common phrasings like 'code review' or 'review my React code' are absent, keeping it below the comprehensive 5 anchor.

4 / 5

Distinctiveness Conflict Risk

The React/TSX best-practices niche with specific coverage areas is mostly distinct with minimal conflict risk, though it could overlap with a generic code-review or linting skill, keeping it just below the clear-niche 5 anchor.

4 / 5

Total

16

/

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.

Validation14 / 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.