CtrlK
BlogDocsLog inGet started
Tessl Logo

react-development

Enforces React-specific patterns: functional components with hooks, TypeScript prop interfaces, CSS Modules co-location, React Testing Library behavioral tests. Use when creating React components, writing custom hooks, structuring component folders, applying RTL test patterns, or wiring TypeScript prop types. Trigger terms: React, .tsx, component, hook, RTL, jsx, useState, useEffect, prop interface

75

Quality

93%

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

SKILL.md
Quality
Evals
Security

Quality

Content

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

A tight, well-organized standards skill that respects the context window completely and includes an explicit verification gate, cross-referencing related skills appropriately. Its main weakness is the absence of worked examples and concrete commands, which leaves actionability and workflow recovery slightly short of top marks.

Suggestions

Add a minimal worked example under Conventions — a sample component with its `ComponentNameProps` interface and a paired RTL test — so the patterns are copy-paste ready instead of purely descriptive.

Show how to resolve and run the lint/typecheck/test/build commands (e.g., a one-line example of reading `.opencastle/project.instructions.md` and invoking the script) rather than only naming the slots.

Add a short error-recovery line to the Verification section (fix failures and re-run until all four checks exit zero) to close the workflow feedback loop.

DimensionReasoningScore

Conciseness

The body is ~20 lean lines of pure convention statements ("One component per file: `ComponentName.tsx`... co-located with `ComponentName.module.scss` and `ComponentName.test.tsx`", "`strict` stays enabled in `tsconfig.json`; no `as` casts") with zero explanation of concepts Claude already knows. Every token earns its place, matching the score-5 anchor; there is no padding to trim as score 4 would require.

5 / 5

Actionability

Guidance is concrete and executable in the main — specific file naming, export naming (`ComponentNameProps`), the strict/no-cast rule, and dompurify for sanitization — but there are no example snippets (no sample component skeleton, props interface, or RTL test) and the verification commands are deferred ("Resolve the exact commands via the **codebase-tool** slot") rather than given. This sits between the score-4 anchor (mostly executable with minor gaps) and score 5 (copy-paste ready examples covering common cases); the missing worked example keeps it at 4.

4 / 5

Workflow Clarity

There is a clear two-phase flow — apply Conventions, then "Lint, typecheck, test, and build must all exit zero" provides an explicit validation checkpoint — but no error-recovery loop (what to do when a check fails) and no explicit sequencing language. This matches the score-4 anchor (clear sequence, most checkpoints, minor validation gaps); score 5 would require explicit fix-and-retry feedback loops, and this is not a destructive/batch operation that would impose the cap at 3.

4 / 5

Progressive Disclosure

The skill is under 50 lines, has no bundle files (references/, scripts/, assets/ are absent), and the body is organized into three well-labeled sections (Conventions, Verification, Security) with only clearly signaled one-level pointers to other skills ("see **api-patterns**") and a project file (`.opencastle/project.instructions.md`). Per the rubric's simple-skill exception, this earns the score-5 anchor: well-organized sections with no need for external references.

5 / 5

Total

18

/

20

Passed

Description

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

An exemplary description: concrete third-person capability statement, an explicit 'Use when...' clause with concrete trigger phrases, and a comprehensive trigger-term list including file extensions and React-specific API names. It directly parallels the rubric's good examples in structure and quality.

DimensionReasoningScore

Specificity

"Enforces React-specific patterns: functional components with hooks, TypeScript prop interfaces, CSS Modules co-location, React Testing Library behavioral tests" lists multiple concrete capabilities covering the domain (components, props typing, styling, testing) with no vague padding. This matches the anchor for multiple specific concrete actions with comprehensive coverage, and exceeds the score-4 anchor only in coverage completeness, not in kind.

5 / 5

Completeness

It explicitly answers both: what ("Enforces React-specific patterns: functional components with hooks, TypeScript prop interfaces, CSS Modules co-location, React Testing Library behavioral tests") and when ("Use when creating React components, writing custom hooks, structuring component folders, applying RTL test patterns, or wiring TypeScript prop types"). Both are concrete and explicit, matching the score-5 anchor exactly; score 4 would need a weaker or less specific 'when' clause, which is not the case.

5 / 5

Trigger Term Quality

"Trigger terms: React, .tsx, component, hook, RTL, jsx, useState, useEffect, prop interface" covers natural user vocabulary plus a file extension (.tsx) and API-specific names (useState, useEffect). This mirrors the score-5 anchor pattern (e.g., "PDF files, PDFs, forms, document extraction, .pdf") — comprehensive coverage including synonyms and extensions; score 4 would require a noticeably missing common term, and none is evident.

5 / 5

Distinctiveness Conflict Risk

The niche is unambiguous React frontend work: .tsx, jsx, useState, useEffect, RTL, and hooks are React-exclusive signals, so it is unlikely to fire for a generic TypeScript or testing skill. It has a clear niche with distinct triggers and minimal conflict risk per the score-5 anchor; the only faint overlap is 'TypeScript prop types', which is not enough to drop to the score-4 'minor overlap risk' anchor.

5 / 5

Total

20

/

20

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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
monkilabs/opencastle
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.