CtrlK
BlogDocsLog inGet started
Tessl Logo

vercel-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. Includes React 19 API changes.

79

1.19x
Quality

67%

Does it follow best practices?

Impact

100%

1.19x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

Fix and improve this skill with Tessl

tessl review fix ./skills/composition-patterns/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

35%

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

This skill functions as a table of contents rather than a skill document. While it is well-organized with clear categorization and priority levels, it contains zero actionable content—no code examples, no concrete patterns, no executable guidance. The entire value is deferred to external rule files and AGENTS.md that are not provided in the bundle, making the SKILL.md nearly useless on its own.

Suggestions

Add at least one concrete, executable code example for the highest-priority pattern (e.g., show a before/after of replacing boolean props with compound components).

Include a brief workflow for the most common use case (e.g., 'Steps to refactor a component with boolean prop proliferation') with specific actions rather than just rule references.

Provide inline summaries of key patterns (2-3 lines each with code snippets) so the SKILL.md has standalone value even without the referenced rule files.

Remove or condense the 'When to Apply' section since it largely duplicates information already conveyed by the skill's title and quick reference categories.

DimensionReasoningScore

Conciseness

The content is mostly efficient but includes some unnecessary framing (e.g., 'These patterns make codebases easier for both humans and AI agents to work with as they scale') and the 'When to Apply' section largely restates the description. The priority table with prefix columns adds structure but limited actionable value.

2 / 3

Actionability

The skill provides no concrete code examples, no executable commands, and no specific implementation guidance. It is entirely an index/catalog of rule names with brief descriptions, deferring all actual content to external rule files and AGENTS.md. There is nothing copy-paste ready or directly instructive.

1 / 3

Workflow Clarity

The content provides a clear priority ordering and categorization of rules, which gives some sense of sequence for applying patterns. However, there are no actual workflow steps, no validation checkpoints, and no guidance on how to proceed through a refactoring process—it's a reference index rather than a workflow.

2 / 3

Progressive Disclosure

The skill attempts progressive disclosure by referencing individual rule files and a compiled AGENTS.md, which is good structure. However, since no bundle files are provided, we cannot verify these references exist. The SKILL.md itself is almost entirely an index with virtually no standalone value—it over-delegates, providing too little content at the top level to be useful without the referenced files.

2 / 3

Total

7

/

12

Passed

Description

100%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

This is an excellent skill description that clearly defines its scope around React composition patterns with specific, actionable trigger terms. It includes both 'Use when' and 'Triggers on' clauses that provide comprehensive guidance for skill selection. The description is concise yet information-dense, uses proper third-person voice, and carves out a distinct niche that minimizes conflict with other React-related skills.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions and patterns: 'refactoring components with boolean prop proliferation', 'building flexible component libraries', 'designing reusable APIs', and names specific patterns like 'compound components, render props, context providers, component architecture'. Also mentions 'React 19 API changes'.

3 / 3

Completeness

Clearly answers both 'what' (React composition patterns that scale, including compound components, render props, context providers, React 19 API changes) and 'when' (explicit 'Use when' clause for refactoring, building libraries, designing APIs, plus a 'Triggers on' clause for specific pattern types).

3 / 3

Trigger Term Quality

Includes strong natural keywords users would say: 'refactoring components', 'boolean prop proliferation', 'component libraries', 'reusable APIs', 'compound components', 'render props', 'context providers', 'component architecture', 'React 19'. These cover a good range of terms a developer would naturally use when seeking help with React composition patterns.

3 / 3

Distinctiveness Conflict Risk

Occupies a clear niche focused specifically on React composition and architecture patterns. The specific mention of compound components, render props, boolean prop proliferation, and React 19 API changes makes it highly distinguishable from generic React or frontend skills.

3 / 3

Total

12

/

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
vercel-labs/agent-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.