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).

1.07x

Quality

77%

Does it follow best practices?

Impact

96%

1.07x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./data/skills-md/0xbigboss/claude-code/react-best-practices/SKILL.md

Quality

Content

71%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 skill delivers a dense, well-organized catalog of actionable React patterns with BAD/GOOD code pairs and a closing decision tree. Its main weakness is progressive disclosure: it is a long single-file reference rather than an overview pointing to deeper materials.

Suggestions

Split the detailed Effect dependency and ref pattern sections into reference files (e.g., EFFECTS.md, REFS.md) and keep SKILL.md as a concise overview with one-level-deep links, raising progressive_disclosure.

Trim conceptual framing sentences (e.g., "Effects let you 'step outside' React to synchronize with external systems") since Claude already knows what effects are, to improve conciseness.

Add imports and minimal setup context to a few illustrative snippets so examples are fully copy-paste ready rather than partial patterns.

Dimension	Reasoning	Score
Conciseness	The body is dominated by tight BAD/GOOD code pairs with directive prose ("Never Suppress the Linter", "Always Clean Up Subscriptions") and little padding, though a few framing sentences like "Effects let you 'step outside' React" could be trimmed to reach a 5.	4 / 5
Actionability	Concrete, executable TSX examples cover the common cases comprehensively, but many snippets omit imports and full setup context, leaving minor gaps versus fully copy-paste-ready 5-level examples.	4 / 5
Workflow Clarity	Content is organized into clear sequenced sections (When to Use, When NOT to Use, Dependencies, Cleanup, Refs) culminating in a numbered Decision Tree that orders choices, giving a clear sequence with only minor validation-checkpoint gaps appropriate to a non-destructive guidance skill.	4 / 5
Progressive Disclosure	No bundle files exist and the ~565-line body is a single monolithic reference with good section headers, but it inlines detailed material that a SKILL.md overview would typically point out to separate reference files, so it is structured yet not split.	3 / 5
	Total	15 / 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.

The description clearly states both what the skill provides and when to use it, with concrete file-extension triggers and third-person voice. It is strong overall, with only minor gaps in keyword synonym coverage and a slight overlap risk with the TypeScript skill.

Dimension	Reasoning	Score
Specificity	Names the React domain plus several concrete scope areas — "hooks, effects, refs, and component design" and "escape hatches, anti-patterns, and correct effect usage" — giving broad but specific coverage rather than the maximally comprehensive action list of a 5.	4 / 5
Completeness	Explicitly answers both what ("Provides React patterns for hooks, effects, refs, and component design") and when ("Must use when reading or writing React components (.tsx, .jsx files with React imports)") with a concrete trigger phrase including file extensions.	5 / 5
Trigger Term Quality	"Must use when reading or writing React components (.tsx, .jsx files with React imports)" includes natural terms (React components) and file extensions (.tsx, .jsx), but omits common synonyms a user might say like "useEffect" or "React hooks."	4 / 5
Distinctiveness Conflict Risk	The .tsx/.jsx-with-React-imports trigger carves a clear niche with minimal conflict risk, though there is minor overlap with the related typescript-best-practices skill it explicitly pairs with.	4 / 5
	Total	17 / 20 Passed

Validation

93%

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

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (571 lines); consider splitting into references/ and linking	Warning

	Total	15 / 16 Passed

Repository: NeverSight/skills_feed
Path: data/skills-md/0xbigboss/claude-code/react-best-practices/SKILL.md
Commit: 2f57aec

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