CtrlK
BlogDocsLog inGet started
Tessl Logo

jbvc/react-patterns

Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.

56

Quality

56%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

Quality

Discovery

32%

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 the domain (React) and lists topic areas but reads more like a tag list than a functional skill description. It lacks concrete actions describing what the skill does and entirely omits a 'Use when...' clause, making it difficult for Claude to know when to select this skill over others. Adding specific actions and explicit trigger conditions would significantly improve its utility.

Suggestions

Add a 'Use when...' clause with explicit triggers, e.g., 'Use when the user asks about React components, hooks like useState/useEffect, React performance optimization, or React with TypeScript.'

Replace the keyword list with concrete actions, e.g., 'Guides refactoring class components to functional components with hooks, optimizes re-renders using useMemo and useCallback, and applies TypeScript typing to React props and state.'

Include more natural trigger terms users would say, such as 'component', 'JSX', 'useState', 'useEffect', 'React app', 'functional component', '.tsx'.

DimensionReasoningScore

Specificity

Names the domain (React) and lists some areas (Hooks, composition, performance, TypeScript best practices), but these are categories rather than concrete actions. It doesn't describe what the skill actually does—e.g., 'refactor class components to hooks' or 'optimize re-renders with useMemo'.

2 / 3

Completeness

Partially addresses 'what' (modern React patterns) but is vague, and completely lacks a 'when' clause or any explicit trigger guidance for when Claude should select this skill. Per rubric guidelines, a missing 'Use when...' clause caps completeness at 2, and the 'what' is also weak, warranting a 1.

1 / 3

Trigger Term Quality

Includes some relevant keywords like 'React', 'Hooks', 'TypeScript', and 'performance' that users might mention, but misses common variations and natural phrases like 'useState', 'useEffect', 'component', 'JSX', 'React app', or 'functional components'.

2 / 3

Distinctiveness Conflict Risk

Specifying 'React' and 'Hooks' provides some distinctiveness, but the broad terms 'performance' and 'TypeScript best practices' could easily overlap with general TypeScript skills, general frontend skills, or general performance optimization skills.

2 / 3

Total

7

/

12

Passed

Implementation

50%

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

The skill is impressively concise and well-structured as a reference card, but it fundamentally lacks actionability—there are no code examples, executable patterns, or concrete implementations despite being about React coding patterns. It reads more like a cheat sheet of categories than a skill that teaches Claude how to write React code. The tables are efficient for classification but don't provide the concrete guidance needed to actually implement these patterns.

Suggestions

Add executable code examples for at least the most important patterns (e.g., a compound component example, a custom hook extraction, useActionState usage) to make the skill actionable rather than purely descriptive.

Include concrete before/after code snippets in the Anti-Patterns section to show what the bad pattern looks like and what the fix looks like.

Split detailed topics (TypeScript patterns, testing, performance) into separate reference files and link to them from the main skill to improve progressive disclosure.

Add a 'Quick Start' section at the top with a concrete, complete component example that demonstrates the core principles (composition, hooks, TypeScript) in action.

DimensionReasoningScore

Conciseness

The content is extremely lean, using tables throughout to maximize information density. It avoids explaining what React is, how hooks work fundamentally, or other concepts Claude already knows. Every section is tightly structured with minimal prose.

3 / 3

Actionability

The skill is entirely descriptive—tables of categories, principles, and guidelines—but contains zero executable code, no concrete examples, no specific commands, and no copy-paste ready patterns. For a skill about React patterns, the absence of any code examples is a critical gap.

1 / 3

Workflow Clarity

The optimization order in section 6 provides a clear sequence, and the state management selection gives decision guidance. However, there are no validation checkpoints, no feedback loops, and most sections are reference tables rather than actionable workflows.

2 / 3

Progressive Disclosure

The content is well-organized with numbered sections and tables, but it's a monolithic file with no references to external files for deeper dives. Given the breadth (10 major sections), topics like TypeScript patterns, testing, and performance could benefit from separate detailed files.

2 / 3

Total

8

/

12

Passed

Validation

90%

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

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

allowed_tools_field

'allowed-tools' contains unusual tool name(s)

Warning

Total

10

/

11

Passed

Reviewed

Table of Contents