CtrlK
BlogDocsLog inGet started
Tessl Logo

react-patterns

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

52

Quality

58%

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 ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/react-patterns/SKILL.md

The canonical home for this skill is react-patterns in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Quality

Content

61%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 body is a well-organized, concise reference of React patterns and decision tables, but it stays at the conceptual level with no executable code and no validation-gated workflows. Adding concrete code examples for the key patterns and a few verification checkpoints would meaningfully raise actionability and workflow clarity.

Suggestions

Add short executable code examples for the highest-value patterns (custom hook extraction, compound components, useActionState/useOptimistic) to move from concept to copy-paste-ready guidance.

Insert a validation or feedback checkpoint into the performance optimization workflow (e.g., 'Re-profile after each fix to confirm the bottleneck is resolved').

Trim rows that restate React basics Claude already knows (rules of hooks, props-down/events-up) to tighten token efficiency.

DimensionReasoningScore

Conciseness

The body is a lean, table-driven reference with no padding or concept explanations, but several rows restate basics Claude already knows ('Hooks at top level only', 'Props down, events up'), leaving minor trim opportunities.

4 / 5

Actionability

Decision tables (e.g., state management selection, optimization order) provide some concrete guidance, but there are no executable code examples or specific implementations to act on directly.

3 / 5

Workflow Clarity

The 'Optimization Order' section gives a numbered sequence, but workflows lack validation checkpoints or feedback loops; no multi-step process is clearly gated.

3 / 5

Progressive Disclosure

Content is organized into ten well-labeled sections with no nested references, but it is a single monolithic file with no bundle files to offload detail, so structure is good rather than exemplary.

4 / 5

Total

14

/

20

Passed

Description

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

The description clearly identifies the React domain and surfaces natural trigger terms, but it lists topics rather than concrete actions and omits any 'Use when' trigger guidance. Adding an explicit when-to-use clause and action-oriented verbs would lift completeness and specificity.

Suggestions

Add an explicit 'Use when...' clause naming concrete trigger phrases (e.g., 'Use when building React components, reviewing hook usage, or improving render performance').

Replace topic labels with concrete actions (e.g., 'Compose components, extract custom hooks, select state management, optimize renders') to raise specificity.

Include common synonyms or related terms users say (e.g., 'components', 'JSX', 're-renders', 'context') to broaden trigger coverage.

DimensionReasoningScore

Specificity

The description names the React domain and sub-areas ('Hooks, composition, performance, TypeScript best practices') but uses no concrete action verbs, only topic labels, matching the 'names the domain but actions are minimal or generic' anchor.

2 / 5

Completeness

A clear 'what' is stated ('Modern React patterns and principles') but there is no 'Use when...' clause or explicit trigger guidance, which caps completeness at 3 per the judging guidelines.

3 / 5

Trigger Term Quality

Natural user keywords are present ('React patterns', 'Hooks', 'composition', 'performance', 'TypeScript'), giving good coverage; it falls short of a 5 because no synonyms or broader variations are included.

4 / 5

Distinctiveness Conflict Risk

The React framing is a clear niche with distinct triggers, though the broad 'patterns and principles' scope leaves minor overlap risk with general TypeScript or frontend skills.

4 / 5

Total

13

/

20

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

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
administrakt0r/AI-Agents-Safe-Coding-Skills
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.