react

React patterns with destructured props, compiler optimization, Effects, and Tailwind v4 syntax. ALWAYS use when using React.

Quality

65%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.agents/skills/react/SKILL.md

Quality

Content

77%

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

The body is highly actionable and well-sequenced with decision trees and validation checkpoints, and it avoids most generic preamble. Its main weakness is a monolithic structure with heavy internal redundancy and no progressive disclosure into separate reference files, even at 1200 lines.

Suggestions

Split long reference material (e.g., the Tailwind v4 syntax catalog and the data-attribute styling patterns) into separate files under references/ and link to them, leaving SKILL.md as a concise overview.

De-duplicate the manual-memoization rules, which appear in Requirements, React Compiler, and Effects, into one authoritative section referenced elsewhere.

Trim explanations of basic React semantics (e.g., that event handlers respond to interactions, that rendering must be pure) since Claude already knows these.

Dimension	Reasoning	Score
Conciseness	The body is dense and largely free of generic concept preamble, but it repeats the same guidance across overlapping sections (e.g., manual-memoization rules stated in Requirements, React Compiler, and again in Effects) and explains well-known React semantics ('Rendering must stay pure', 'Event handlers run in response to interactions'), so it is mostly efficient yet could be tightened.	2 / 3
Actionability	It provides numerous complete, copy-paste-ready TSX/CSS examples with concrete class names (e.g., 'bg-black/50', 'data-[state=open]:animate-in') and explicit do/don't patterns for memoization, useEffectEvent, and ref access, giving fully executable guidance.	3 / 3
Workflow Clarity	Multi-step decisions are explicitly sequenced with validation checkpoints — a 'Decision Tree' for derived state vs effects vs refs, a 'Red Flags - STOP Before Fixing' checklist, and a feedback-oriented 'Rationalization Table' — which matches the clear-sequence-with-checkpoints anchor.	3 / 3
Progressive Disclosure	The content is well-organized into sections but is a single monolithic 1200-line SKILL.md with no bundle files in references/scripts/assets; the internal anchor links point within the same file rather than to one-level-deep separate reference files, so structure exists but material that could be split stays inline.	2 / 3
	Total	10 / 12 Passed

Description

52%

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

The description identifies a focused niche (React with Tailwind v4, React Compiler, and Effects) but relies on a generic 'ALWAYS use when using React' trigger rather than explicit scenario-based guidance. It is specific enough to be recognizable yet broad enough to risk overlap with other React skills.

Suggestions

Replace the blanket 'ALWAYS use when using React' with explicit scenario triggers (e.g., 'Use when writing React components, optimizing re-renders with React Compiler, managing Effects, or applying Tailwind v4 utility syntax').

Name the concrete actions the skill performs (e.g., 'enforce destructured-props conventions, replace manual memoization, and apply Tailwind v4 renamed utilities') so specificity reaches the top anchor.

Include common user phrasings like hooks, components, JSX, useEffect, and Tailwind classes to broaden trigger-term coverage.

Dimension	Reasoning	Score
Specificity	The description names a domain (React) and several concrete capability areas ('destructured props, compiler optimization, Effects, and Tailwind v4 syntax'), but it enumerates topic buckets rather than the concrete actions a user wants performed, which is closer to the 'names domain and some actions' anchor than to a full list of specific actions.	2 / 3
Completeness	It states what the skill covers (React patterns across several areas) but the 'when' guidance is only a blanket 'ALWAYS use when using React' rather than explicit, scenario-based triggers, which per the guidelines caps completeness at 2 for a missing explicit 'Use when...' clause.	2 / 3
Trigger Term Quality	'React' and 'Tailwind v4' are natural terms a user would say, and 'useEffect' is implied via 'Effects', but coverage of common phrasings is partial — there is no mention of hooks, components, JSX, or 'use this when...' style triggers, so it lands at 'some relevant keywords but missing common variations'.	2 / 3
Distinctiveness Conflict Risk	The skill targets a clear niche (a specific React+Tailwind v4 rule set), but the trigger 'ALWAYS use when using React' is broad enough to overlap with any other React-oriented skill, so it is 'somewhat specific but could still overlap with similar skills'.	2 / 3
	Total	8 / 12 Passed

Validation

81%

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 — 13 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (1210 lines); consider splitting into references/ and linking	Warning
metadata_version	'metadata.version' is missing	Warning
metadata_field	'metadata' should map string keys to string values	Warning

	Total	13 / 16 Passed

Repository: udecode/plate
Path: .agents/skills/react/SKILL.md
Commit: 45116fd

Reviewed: about 13 hours 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.