CtrlK
BlogDocsLog inGet started
Tessl Logo

react

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

53

Quality

61%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

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

The canonical home for this skill is react in udecode/plate

SKILL.md
Quality
Evals
Security

Quality

Content

56%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 skill contains genuinely valuable, hard-to-find knowledge (Tailwind v4 migrations, React Compiler escape hatches, useEffectEvent limitations) delivered with concrete good/invalid example pairs and useful decision trees. But it duplicates large amounts of standard React documentation, is a 1,200-line monolith with no reference files, and has broken code fences that would render incorrectly.

Suggestions

Cut the React-docs restatement (Effects philosophy, Radix attribute catalogs, design-token explanation, 'Reactive Values and Reactive Logic') and keep only the project-specific rules and the Tailwind v3→v4 delta, which is the non-obvious material.

Split the body into one-level-deep reference files (e.g. references/tailwind-v4.md, references/effects.md, references/data-attributes.md) and keep SKILL.md as a short requirements overview with well-signaled links.

Fix the malformed code fences (four-backtick closers like ```` after three-backtick openers, stray <example>/<critical> wrapper tags, and collapsed indentation) so the examples render and remain copy-paste executable.

DimensionReasoningScore

Conciseness

At ~1,200 lines the body extensively restates React documentation Claude already knows — the Effects philosophy, 'Separating Events from Effects', Radix data-attribute catalogs, design-token explanations, and prose like 'Event handlers and Effects serve different purposes in React' and 'Design tokens are semantic CSS variables that separate theme, context, and usage'. Only the Tailwind v3→v4 migration mappings and the project-specific requirements are genuinely non-obvious; the rest is padded restatement, placing it at 'noticeably verbose; several unnecessary explanations or padded sections' rather than the severely padded anchor 1, since a meaningful core of project rules remains.

2 / 5

Actionability

Guidance is highly concrete: paired good/invalid code examples, exact utility replacements ('shadow-sm → shadow-xs', 'bg-(--brand-color)'), the dual-use pattern for useEffectEvent, and a decision tree. It stops short of a 5 because many examples are not copy-paste runnable — they reference undefined values (serverUrl, createConnection, buttonVariants), omit imports, and several code fences are broken (four-backtick closers after three-backtick openers) with mangled indentation that would break rendering.

4 / 5

Workflow Clarity

For a rules/patterns skill, sequencing is handled well: an up-front Requirements list, 'When to Add an Effect' / 'When _Not_ to Add an Effect' branches, a Red Flags stop-list, a Rationalization Table, and a decision tree give clear checkpoints for choosing the right pattern. It is not a 5 because there is no single coherent entry path through the four loosely-joined topics (Tailwind, component patterns, compiler, Effects) — the reader must infer which section applies to their task — and the migration guide's 'test thoroughly' step has no concrete verification command.

4 / 5

Progressive Disclosure

The body has real section structure and working internal anchor links, but it is a ~1,200-line monolith with no bundle files at all (references/, scripts/, assets/ are absent), so clearly separable material — the full Tailwind v4 syntax reference, the Radix/data-attribute catalog, and the two long Effects essays — is inlined in SKILL.md instead of being split into one-level-deep reference files. That matches 'some structure but could be better organized; content that should be separate is inline' rather than anchor 2, which requires no section headers.

3 / 5

Total

13

/

20

Passed

Description

67%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 compact, specific description with an explicit and correctly imperative 'Use when' clause. Its main weaknesses are a thin set of natural trigger synonyms (no 'hooks', 'useEffect', or 'components') and topic-list phrasing that stops just short of stating concrete actions.

Suggestions

Add natural trigger variations users would actually say, e.g. 'Use when writing React components, hooks, or Effects, or when the user mentions React, JSX/TSX, or Tailwind'.

Convert topic nouns into concrete actions to sharpen the 'what', e.g. 'Enforces destructured props, React Compiler idioms (no manual useMemo/useCallback), useEffectEvent patterns, and Tailwind v4 syntax'.

Clarify scope boundaries to reduce overlap with a dedicated Tailwind skill, e.g. noting Tailwind guidance applies within React component work.

DimensionReasoningScore

Specificity

The description lists several concrete, specific areas — 'destructured props, compiler optimization, Effects, and Tailwind v4 syntax' — each a real, identifiable capability rather than vague filler. It falls short of a 5 because these are topic nouns rather than enacted actions ('apply', 'write', 'migrate'), leaving minor gaps in coverage of what the skill actually does with each topic.

4 / 5

Completeness

Both parts are present: the 'what' ('React patterns with destructured props, compiler optimization, Effects, and Tailwind v4 syntax') and an explicit 'when' ('ALWAYS use when using React'). It is not a 5 because the trigger is a single broad condition — it names no Tailwind, hooks, or component-file triggers — and the 'what' is a terse topic list rather than concrete trigger phrases, matching the anchor where 'when' could be more explicit or specific.

4 / 5

Trigger Term Quality

'React', 'Tailwind v4', 'Effects', and 'destructured props' are relevant and reasonably natural, and 'ALWAYS use when using React' is a strong trigger phrase. However, common variations users actually say are missing: 'hooks', 'useEffect', 'components', 'JSX/.tsx', and 'memoization' — so it matches the 'some relevant keywords but missing common variations or synonyms' anchor rather than the good-coverage anchor above.

3 / 5

Distinctiveness Conflict Risk

The 'React' trigger carves out a clear niche that would not fire for non-React work, and the enumerated topics make it distinguishable from generic coding skills. There is minor overlap risk with closely related skills: the Tailwind v4 syntax coverage could collide with a dedicated Tailwind/CSS skill, mirroring the 'Works with PDF and Word document files' anchor.

4 / 5

Total

15

/

20

Passed

Validation

81%

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

CriteriaDescriptionResult

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
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.