CtrlK
BlogDocsLog inGet started
Tessl Logo

uinaf/react-ban-use-effect

Ban direct `useEffect` in React components. Use when writing, refactoring, or reviewing React code so derived state, data fetching, user actions, resets, and mount-only external synchronization use declarative replacement patterns instead of dependency-array choreography.

72

Quality

90%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

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 well-structured, actionable skill that provides clear workflow steps, a prioritized replacement ladder, and concrete enforcement guidance. Its main strengths are the explicit classification-before-editing workflow and the specific tooling references. Minor weaknesses include some verbosity in the enforcement and escape hatch sections, and the inability to verify referenced bundle files.

DimensionReasoningScore

Conciseness

Generally efficient but includes some unnecessary elaboration. The 'Allowed Escape Hatches' section explains wrapper rationale at length, and the 'Enforcement' section covers multiple lint tool scenarios in detail that could be tightened. However, it mostly avoids explaining concepts Claude already knows.

2 / 3

Actionability

Provides a concrete classification workflow, a prioritized replacement ladder, an executable code example for the mount-only wrapper, specific ESLint rule names (no-restricted-imports, no-restricted-syntax), and clear review guidance. The steps are specific and directly implementable.

3 / 3

Workflow Clarity

The 'Start Here' section provides a clear 5-step sequence: search → classify → replace → check alternatives → verify. Step 5 explicitly requires running lint/type/test gates as validation. The replacement ladder provides a clear priority ordering. The review enforcement section adds a feedback loop for code review contexts.

3 / 3

Progressive Disclosure

References to references/replacements.md, references/alternatives.md, and references/upstream.md are well-signaled and one level deep. However, no bundle files were provided, so these references are unverifiable. The main SKILL.md itself contains substantial inline content (enforcement details, escape hatch patterns) that could arguably be split out, though it's not egregiously long.

2 / 3

Total

10

/

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.

This is an excellent skill description that clearly defines a specific niche (banning direct useEffect in React), provides comprehensive trigger terms covering multiple scenarios, and includes both positive and negative selection criteria. The 'Do not use' clause is a particularly strong addition that minimizes conflict risk with other React-related skills.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions and scenarios: banning direct useEffect, writing/refactoring/reviewing/migrating React components, handling derived state, fetching, event reactions, resets, external sync, and adding lint/agent rules. Very detailed about what it does and doesn't do.

3 / 3

Completeness

Clearly answers both 'what' (ban direct useEffect in React code) and 'when' (explicit 'Use when...' clause with detailed trigger scenarios). Also includes a 'Do not use' clause that further clarifies boundaries, which is excellent for disambiguation.

3 / 3

Trigger Term Quality

Excellent coverage of natural terms: 'useEffect', 'React components', 'hooks', 'derived state', 'fetching', 'event reactions', 'refactoring', 'lint rules', 'no-direct-useEffect'. These are terms a developer would naturally use when dealing with this specific concern.

3 / 3

Distinctiveness Conflict Risk

Highly distinctive with a clear niche around the specific practice of banning direct useEffect. The 'Do not use' clause explicitly excludes ordinary React work and non-React code, making it very unlikely to conflict with general React skills.

3 / 3

Total

12

/

12

Passed

Validation

100%

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

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Reviewed

Table of Contents