react-useeffect

React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.

1.02x

Quality

82%

Does it follow best practices?

Impact

95%

1.02x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

The canonical home for this skill is react-useeffect in jarrodwatts/claude-code-config

Quality

Content

77%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 body is an exemplary lean overview with a strong quick-reference table and decision tree, but it under-delivers on two fronts: no executable code examples for the recommended alternatives, and both detailed-guidance references point to files missing from the bundle. Fixing the broken references and adding one or two short code examples would lift it substantially.

Suggestions

Create the referenced bundle files (anti-patterns.md and alternatives.md) or remove/inline the 'Detailed Guidance' links so navigation does not dead-end.

Add short executable examples for the key alternatives the table recommends — e.g., a useEffect data-fetch with AbortController cleanup, a useMemo derivation, and a key-prop reset — so the guidance is copy-paste ready.

Expand trigger coverage in the body's data-fetching row ('useEffect with cleanup OR framework') with one concrete framework pointer, since it currently hand-waves the most common Effect use case.

Dimension	Reasoning	Score
Conciseness	The ~50-line body is lean and efficient — a DON'T/DO quick-reference table, tight lists, and a decision tree with zero padding or explanation of React concepts Claude already knows. Every token earns its place, matching the top anchor.	5 / 5
Actionability	The quick-reference table and decision tree give concrete directional guidance ('useMemo', 'key prop', 'event handler directly') but the only code is one inline snippet ('const fullName = firstName + \' \' + lastName') — no executable useEffect-with-cleanup, useMemo, or key-prop examples, so guidance is concrete but incomplete.	3 / 5
Workflow Clarity	This is a simple single-purpose skill (decide whether an Effect is needed) and the Decision Tree makes that single decision unambiguous with clearly labeled branches, so the simple-skill exception applies and no multi-step workflow or validation is required.	5 / 5
Progressive Disclosure	The structure itself is good — a concise overview with clearly signaled one-level-deep pointers under 'Detailed Guidance' — but both referenced files ('[Anti-Patterns](./anti-patterns.md)', '[Better Alternatives](./alternatives.md)') do not exist in the bundle, so the promised detail is undelivered and navigation dead-ends.	3 / 5
	Total	16 / 20 Passed

Description

87%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 description: it is concise, written in third person, and explicitly covers both what the skill does and when to use it with natural trigger terms. The only gaps are a few missing synonyms ('hooks', 'side effects') and actions phrased somewhat generically ('best practices').

Dimension	Reasoning	Score
Specificity	Names the domain and several concrete capabilities ('Teaches when NOT to use Effect and better alternatives', 'data fetching, or state synchronization'), with only minor gaps — the actions are teaching-oriented rather than a fully enumerated list, so it stops short of anchor 5.	4 / 5
Completeness	Both what ('Teaches when NOT to use Effect and better alternatives') and when ('Use when writing/reviewing useEffect...') are explicitly stated with concrete trigger phrases, matching the top anchor rather than the anchor-4 case where 'when' is only partially explicit.	5 / 5
Trigger Term Quality	Includes natural terms users would actually say ('useEffect, useState for derived values, data fetching, or state synchronization') but omits common synonyms such as 'hooks' or 'side effects', so it fits 'good keyword coverage; a few natural terms missing' rather than comprehensive.	4 / 5
Distinctiveness Conflict Risk	'React useEffect best practices from official docs' carves out a clear niche with distinct triggers (useEffect, useState for derived values, state synchronization); overlap risk with other skills is minimal.	5 / 5
	Total	18 / 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
relative_links	Relative link issues: 2 missing	Warning

	Total	15 / 16 Passed

Repository: udecode/plate
Path: .agents/skills/react-useeffect/SKILL.md
Commit: babb3c2

Reviewed: 2 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.