CtrlK
BlogDocsLog inGet started
Tessl Logo

react-composition-patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture.

87

1.43x
Quality

81%

Does it follow best practices?

Impact

99%

1.43x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

The canonical home for this skill is vercel-composition-patterns in vercel-labs/agent-skills

SKILL.md
Quality
Evals
Security

Quality

Content

72%

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 clean, token-efficient index that structures progressive disclosure well, but it delegates all executable guidance to rules/*.md and AGENTS.md files that are not present in the bundle, leaving it action-incomplete and its navigation non-functional. Adding the referenced rule files (or inlining minimal correct/incorrect code examples) would raise actionability and workflow_clarity.

Suggestions

Ship the referenced bundle files (rules/*.md and AGENTS.md) so the one-level-deep references resolve — currently every 'How to Use' path is a dead link.

Inline at least one compact incorrect-vs-correct code pair (e.g. for architecture-avoid-boolean-props) so the skill is actionable even before the detail files are read.

Add a one-line note clarifying how to choose between consulting a single rule file vs. the compiled AGENTS.md, giving the navigation sequence an explicit decision checkpoint.

DimensionReasoningScore

Conciseness

The body is lean and assumes Claude's competence — a four-line intro, a priority table, and one-line rule summaries — with no padding or explanation of React basics, matching the anchor-3 'lean and efficient; every token earns its place' example.

3 / 3

Actionability

The rule summaries give meaningful directional guidance ('Create explicit variant components instead of boolean modes', 'Use children for composition instead of renderX props'), but the body contains no executable code or commands and the detailed incorrect/correct examples are delegated to rules/*.md files that do not exist, leaving guidance concrete but incomplete — anchor 2 rather than 1 because the one-liners are themselves specific instruction, and rather than 3 because nothing here is copy-paste ready.

2 / 3

Workflow Clarity

'How to Use' describes a navigation sequence (read rule files -> each contains why/incorrect/correct/context), but the referenced rule files are absent so the sequence is not actually executable, and there are no checkpoints — fitting anchor 2 ('steps listed but... sequence present but checkpoints missing or implicit') rather than 3.

2 / 3

Progressive Disclosure

The structure is the textbook good pattern: a concise overview (priority table + quick reference) that points one level deep to per-rule files and a compiled AGENTS.md, with clearly signaled references and no monolithic wall of text, matching the anchor-3 'clear overview with well-signaled one-level-deep references' example. The referenced files are absent on disk, which is a packaging defect, but the disclosure structure itself is exemplary.

3 / 3

Total

10

/

12

Passed

Description

90%

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 well-crafted description with explicit 'what' and 'when' guidance and rich, natural trigger terms that occupy a distinct niche. Its only weakness is that the capability statement is somewhat abstract ('patterns that scale') rather than listing discrete concrete actions.

DimensionReasoningScore

Specificity

The description names the React composition domain and several concrete scenarios ('refactoring components with boolean prop proliferation', 'building flexible component libraries', 'designing reusable APIs'), but the 'what it does' half is abstract ('composition patterns that scale') rather than enumerating distinct concrete actions, so it stops short of the anchor-3 'multiple specific concrete actions' bar.

2 / 3

Completeness

Both halves are explicit: the 'what' ('React composition patterns that scale') and the 'when' via two explicit trigger clauses ('Use when refactoring...', 'Triggers on tasks involving...'), satisfying the anchor-3 requirement for explicit triggers and avoiding the missing-'Use when' cap at 2.

3 / 3

Trigger Term Quality

It offers strong coverage of natural terms a React developer or agent would actually say — 'boolean prop proliferation', 'compound components', 'render props', 'context providers', 'component architecture' — matching the anchor-3 'good coverage of natural terms' example.

3 / 3

Distinctiveness Conflict Risk

It carves a clear niche (React composition architecture) with distinctive triggers unlikely to fire for unrelated skills, matching the anchor-3 'clear niche with distinct triggers; unlikely to conflict' example.

3 / 3

Total

11

/

12

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
secondsky/claude-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.