CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

95

1.02x
Quality

96%

Does it follow best practices?

Impact

95%

1.02x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

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

SKILL.md
Quality
Evals
Security

Quality

Content

92%

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

A tightly written, well-organized conceptual reference with concrete decision guidance and a clean overview structure. Its main weakness is that the 'Detailed Guidance' section links to bundle files that are not present, leaving the progressive-disclosure chain incomplete.

Suggestions

Add the referenced bundle files './anti-patterns.md' and './alternatives.md' (or remove the links) so the 'Detailed Guidance' references resolve to real content and the progressive-disclosure chain is complete.

Include a concrete executable example for the highest-value alternatives — e.g. the `key` prop reset pattern and `useMemo` for expensive derived values — so the guidance is copy-paste ready rather than pattern-level only.

Add a brief one-line note under each 'Detailed Guidance' link describing what the reader will find there, so the overview remains navigable even before the detail files are opened.

DimensionReasoningScore

Conciseness

Lean and token-efficient — a compact DO/DON'T table, a tight ASCII decision tree, and bullet lists with one inline example; it assumes Claude knows React rather than re-explaining it. It is not a 2 because the opening 'escape hatch' framing is the skill's thesis and earns its place rather than padding concepts Claude already knows.

3 / 3

Actionability

Provides concrete, specific guidance — names exact React primitives (useMemo, key prop, useSyncExternalStore, event handlers), routes each situation via the decision tree, and shows one worked example ('const fullName = firstName + ' ' + lastName'). It is not a 2 because, per the instruction-skill carve-out, the guidance is actionable and specific even though most alternatives are demonstrated at pattern level rather than with full code.

3 / 3

Workflow Clarity

A single-purpose, under-50-line skill whose decision tree sequences the logic clearly and is well-organized, meeting the simple-skill allowance for a 3. It is not a 2 because no destructive/batch operations are involved, so the missing-validation cap does not apply, and the routing is unambiguous.

3 / 3

Progressive Disclosure

The overview is concise and the 'Detailed Guidance' references are clearly signaled and one level deep, but the referenced files './anti-patterns.md' and './alternatives.md' do not exist in the bundle (no references/ directory or matching files), so the promised detail is not actually delivered. It is not a 3 because the disclosure chain is broken by dangling references, and not a 1 because the SKILL.md itself is well structured rather than a monolithic wall of text.

2 / 3

Total

11

/

12

Passed

Description

100%

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 concisely states what the skill covers and gives an explicit, natural-language trigger clause. It uses third-person voice and avoids vague fluff or over-claims.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization' and 'Teaches when NOT to use Effect and better alternatives' — matching the score-3 anchor for several specific concrete actions. It is not a 2 because the action coverage is comprehensive rather than partial, and the verb 'Teaches' is third person with no first/second-person voice to penalize.

3 / 3

Completeness

Clearly answers both 'what' ('React useEffect best practices from official docs') and 'when' with an explicit trigger clause ('Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization'). It is not a 2 because the 'when' guidance is explicit, not merely implied.

3 / 3

Trigger Term Quality

Natural developer-facing terms — 'useEffect', 'useState', 'data fetching', 'state synchronization', 'derived values' — give good coverage of what a user would actually say, matching the score-3 anchor. It is not a 2 because common variations are well represented rather than missing.

3 / 3

Distinctiveness Conflict Risk

Occupies a clear niche (React useEffect best practices) with distinct, React-specific triggers, making it unlikely to fire for unrelated skills. It is not a 2 because the scope is tightly bounded to useEffect rather than overlapping broadly with other skills.

3 / 3

Total

12

/

12

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 2 missing

Warning

Total

15

/

16

Passed

Repository
udecode/plate
Reviewed

Table of Contents

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.