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

91%

Does it follow best practices?

Impact

96%

1.07x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Evaluation results

100%

15%

Refactor a Buggy Task Management Component

Effect anti-patterns avoidance

Criteria

Without context

With context

No derived state Effect

100%

useMemo for expensive calc

100%

No event logic in Effect

100%

No parent notification Effect

100%

No Effect chains

100%

No linter suppression

100%

Updater function usage

100%

key prop for state reset

100%

Derived value in render

100%

Effects used for external sync only

50%

100%

Without context: $0.3570 · 1m 29s · 18 turns · 25 in / 5,467 out tokens

With context: $0.5066 · 1m 43s · 23 turns · 280 in / 5,212 out tokens

88%

Build a Real-Time Chat Room Component

Effect dependencies and cleanup

Criteria

Without context

With context

Options object inside Effect

80%

useEffectEvent for theme/config

50%

useEffectEvent for callback prop

20%

100%

Connection cleanup

100%

Event listener cleanup

100%

Ignore flag for fetch

90%

100%

No didInit ref guard

100%

No linter suppression

100%

Updater function in Effect

100%

Minimal dependency arrays

100%

Without context: $0.3779 · 1m 54s · 17 turns · 24 in / 6,755 out tokens

With context: $0.6197 · 2m 58s · 20 turns · 25 in / 10,014 out tokens

100%

Build an Interactive Ingredient Checklist with Smart Focus

Refs and custom hooks patterns

Criteria

Without context

With context

Ref for non-render value

100%

No ref.current in render

100%

Ref callback with Map

100%

useImperativeHandle used

100%

Limited API exposed

100%

No useXxx without hooks

100%

No lifecycle hook abstractions

100%

Focused custom hooks

100%

Scroll in event handler

100%

Ref cleanup in callback

100%

Composition over prop drilling

100%

Without context: $0.4421 · 2m 6s · 23 turns · 29 in / 7,388 out tokens

With context: $1.3850 · 6m 47s · 42 turns · 79 in / 20,631 out tokens

Repository: NeverSight/skills_feed
Commit: 5342bca

Evaluated: 13 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Refactor a Buggy Task Management Component Build a Real-Time Chat Room Component Build an Interactive Ingredient Checklist with Smart Focus

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.