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.

66

Quality

78%

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 ./skills/composition-patterns/SKILL.md

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

SKILL.md
Quality
Evals
Security

Quality

Content

57%

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

The overview is concise and cleanly organized, but it functions as an index with no executable guidance, and its progressive-disclosure structure is broken because none of the referenced rule files or the AGENTS.md document actually exist in the bundle.

Suggestions

Ship the referenced bundle files: create rules/architecture-avoid-boolean-props.md, rules/state-context-interface.md, and the other rule files plus AGENTS.md so the body's one-level-deep references resolve.

Add at least one concrete, executable code example (an incorrect-vs-correct snippet) directly in SKILL.md or ensure the linked rule files contain copy-paste-ready code, since the body currently offers no executable guidance.

Turn "How to Use" into a short sequenced workflow (e.g., identify the rule category by priority → read the matching rule file → apply the correct-pattern example) so the navigation becomes an actionable process.

DimensionReasoningScore

Conciseness

The ~75-line body is lean and assumes Claude's React knowledge — no explanation of basic concepts, with a tidy priority table and terse bullet lists where every token earns its place.

3 / 3

Actionability

The body is an index: it names rules with one-line directives ("Don't add boolean props; use composition") but provides no executable code, commands, or copy-paste examples, and the rule files it points to for concrete guidance do not exist.

2 / 3

Workflow Clarity

"How to Use" offers a loose navigation pattern (read individual rule files, each containing X) but there is no sequenced multi-step process and no validation/feedback checkpoints.

2 / 3

Progressive Disclosure

The body signals one-level-deep references to rules/*.md and AGENTS.md, but no rules/ directory and no AGENTS.md are present in the bundle — the referenced detailed materials are dead links, so the disclosure points to nothing.

1 / 3

Total

8

/

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.

A strong, well-structured description that concretely states capabilities and provides explicit "Use when"/"Triggers on" guidance with natural trigger terms. Voice is correctly third person and it stays concise without fluff.

DimensionReasoningScore

Specificity

Enumerates several concrete application scenarios — "refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs" — alongside the core capability "React composition patterns that scale", listing multiple specific concrete actions rather than vague claims.

3 / 3

Completeness

Clearly answers both "what" ("React composition patterns that scale") and "when" via explicit "Use when..." and "Triggers on..." clauses, satisfying the explicit-trigger requirement.

3 / 3

Trigger Term Quality

"Use when refactoring components...Triggers on tasks involving compound components, render props, context providers, or component architecture" provides good coverage of natural domain terms a user would actually say.

3 / 3

Distinctiveness Conflict Risk

A clear niche (React composition patterns + React 19 API changes) with distinct triggers; unlikely to fire for unrelated skills, though "component architecture" is somewhat broad.

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
zebbern/claude-code-guide
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.