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

84%

Does it follow best practices?

Impact

96%

1.07x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Quality

Content

77%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This is a strong, highly actionable React skill with excellent BAD/GOOD code comparisons that make anti-patterns immediately recognizable. The decision tree summary is a particularly effective addition. The main weakness is its length — at 300+ lines it could benefit from splitting detailed anti-pattern catalogs into separate reference files, and some sections cover patterns Claude already knows well (controlled/uncontrolled, composition).

Suggestions

Consider splitting the extensive anti-pattern sections (e.g., 'When NOT to Use Effects' with 6 sub-sections) into a separate EFFECT-ANTIPATTERNS.md reference file, keeping only the most critical 2-3 examples inline.

Remove or significantly trim sections on well-known React patterns like controlled vs uncontrolled components and composition over prop drilling, which Claude already understands deeply.

Dimension	Reasoning	Score
Conciseness	The skill is mostly efficient with good BAD/GOOD code comparisons, but it's quite long (~300+ lines) and some sections explain concepts Claude likely already knows well (e.g., controlled vs uncontrolled components, basic composition patterns). Some anti-pattern explanations could be more terse.	2 / 3
Actionability	Every section provides fully executable, copy-paste ready TSX/JSX code examples with clear BAD vs GOOD comparisons. The code is concrete, complete, and immediately usable — not pseudocode. The decision tree at the end provides clear, actionable guidance.	3 / 3
Workflow Clarity	For a patterns/best-practices skill (not a multi-step destructive workflow), the content is exceptionally well-sequenced. The decision tree at the end provides a clear workflow for choosing the right approach. Each section follows a consistent pattern of problem → bad solution → good solution, making the decision process unambiguous.	3 / 3
Progressive Disclosure	The content is well-organized with clear section headers, but it's a monolithic file with no references to supporting documents. Given its length (~300+ lines covering effects, refs, custom hooks, and component patterns), some sections like the extensive anti-pattern examples could be split into separate reference files. The cross-reference to typescript-best-practices at the top is good.	2 / 3
	Total	10 / 12 Passed

Description

92%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

This is a strong skill description that clearly identifies its domain (React development), lists specific capabilities (hooks, effects, refs, component design, escape hatches, anti-patterns), and provides explicit trigger conditions with file type indicators. The main weakness is that React is a broad enough domain that this could potentially overlap with more specialized React-related skills, though the file extension triggers help mitigate this.

Dimension	Reasoning	Score
Specificity	Lists multiple specific concrete areas: hooks, effects, refs, component design, escape hatches, anti-patterns, and correct effect usage. These are concrete, recognizable React concepts.	3 / 3
Completeness	Clearly answers both what ('Provides React patterns for hooks, effects, refs, and component design. Covers escape hatches, anti-patterns, and correct effect usage') and when ('Must use when reading or writing React components (.tsx, .jsx files with React imports)').	3 / 3
Trigger Term Quality	Includes strong natural keywords users would use: 'React', 'hooks', 'effects', 'refs', 'component', '.tsx', '.jsx', 'React imports'. These cover common terms developers naturally use when working with React.	3 / 3
Distinctiveness Conflict Risk	While it specifies React specifically, it could overlap with general frontend/JavaScript skills or broader component library skills. The file extension triggers (.tsx, .jsx) help but React is a broad domain that could conflict with more specialized React skills (e.g., React Router, React state management).	2 / 3
	Total	11 / 12 Passed

Validation

90%

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 — 10 / 11 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	10 / 11 Passed

Repository: freekmurze/dotfiles
Commit: ef5ffa0

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