react-best-practices

Provides React patterns for hooks, effects, refs, and component design. Covers escape hatches, anti-patterns, and correct effect usage. Must use when reading or writing React components (.tsx, .jsx files with React imports).

Quality

89%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

86%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-structured, actionable skill body with executable BAD/GOOD examples, a clear decision-tree workflow, and clean one-level-deep progressive disclosure. The only real lever is trimming repetition across the 'When NOT to use Effects' subsections.

Suggestions

Condense the five 'When NOT to Use Effects' subsections by collapsing repetitive BAD/GOOD scaffolding into a compact table or shared example, reducing token cost without losing the contrasts.

Add a one-line 'how to apply this during review' framing so the decision tree reads as a sequence with explicit checkpoints rather than a flat list.

Dimension	Reasoning	Score
Conciseness	Mostly lean code-driven guidance with minimal padding, but five near-identical BAD/GOOD subsection blocks could be condensed further, keeping it just below the leanest anchor.	4 / 5
Actionability	Every subsection provides complete, copy-paste-ready TSX/JSX with BAD and GOOD variants plus a concrete decision tree, fully covering the common cases.	5 / 5
Workflow Clarity	The 7-step decision tree gives a clear sequenced selection workflow; not a destructive/batch task so validation loops aren't required, but no explicit checkpoints cap it just below 5.	4 / 5
Progressive Disclosure	Overview body cleanly signals five one-level-deep references, each existing on disk with no further nesting — easy to navigate and appropriately split.	5 / 5
	Total	18 / 20 Passed

Description

92%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, specific description that covers what and when with concrete file-type triggers and a third-person voice. Only minor gap is limited synonym coverage for trigger terms.

Dimension	Reasoning	Score
Specificity	Names concrete pattern areas — 'hooks, effects, refs, and component design' and 'escape hatches, anti-patterns, and correct effect usage' — giving comprehensive coverage of the skill's scope.	5 / 5
Completeness	Explicitly answers both what ('Provides React patterns...') and when ('Must use when reading or writing React components (.tsx, .jsx files with React imports)') with concrete trigger phrases.	5 / 5
Trigger Term Quality	Includes natural terms users say ('React components', 'hooks', 'effects', 'refs') and file extensions (.tsx, .jsx), but misses common synonyms like 'React code' or 'frontend'.	4 / 5
Distinctiveness Conflict Risk	Clear React-specific niche with triggers tied to concrete file types (.tsx, .jsx with React imports), giving minimal overlap risk with other skills.	5 / 5
	Total	19 / 20 Passed

Validation

100%

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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: freekmurze/dotfiles
Path: config/claude/skills/react-best-practices/SKILL.md
Commit: 09219e0

Reviewed: about 3 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.