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.

60

Quality

70%

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%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 clean, token-efficient overview that correctly defers detail to referenced rule files, but the body carries no executable guidance itself and the referenced bundle files are missing, weakening both actionability and navigation.

Suggestions

Ship the referenced rules/*.md files (and AGENTS.md) in the bundle, or inline at least one concrete code example in SKILL.md so the body is independently actionable.

Add a short 'How to choose' workflow that maps a task to the relevant rule category and order of application, with a checkpoint to confirm the pattern fits before refactoring.

Verify that every path mentioned in the body (e.g. rules/architecture-avoid-boolean-props.md, AGENTS.md) exists in the bundle so references resolve.

DimensionReasoningScore

Conciseness

Lean overview that assumes Claude's React knowledge, avoids explaining what composition or compound components are, and lets every section earn its place; the table/list overlap is structural navigation, not padding.

5 / 5

Actionability

The body provides only a navigation map of rule names and prefixes with no executable code or concrete steps itself; the real actionable guidance is deferred to rule files that are not bundled here, leaving minimal concrete guidance.

2 / 5

Workflow Clarity

A discernible path exists (consult categories, read the relevant rule file, optionally AGENTS.md) but there is no sequenced workflow or guidance on selecting/combining rules, leaving checkpoints implicit.

3 / 5

Progressive Disclosure

The overview is appropriately thin and well-sectioned with one-level-deep references to rules/*.md and AGENTS.md, but those referenced files are absent from the bundle, so navigation does not resolve to real files.

3 / 5

Total

13

/

20

Passed

Description

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

A well-constructed description that pairs a concrete statement of capability with explicit, natural trigger guidance for activation. It distinguishes itself clearly while remaining concise and free of fluff.

DimensionReasoningScore

Specificity

Lists several concrete actions/scenarios ("refactoring components with boolean prop proliferation", "building flexible component libraries", "designing reusable APIs") with only minor coverage gaps; not a comprehensive enumeration of distinct capabilities so not a 5.

4 / 5

Completeness

Explicitly answers both what ("React composition patterns that scale") and when with concrete trigger clauses ("Use when refactoring...", "Triggers on tasks involving..."), matching the top anchor.

5 / 5

Trigger Term Quality

Strong natural developer vocabulary ("compound components", "render props", "context providers", "component architecture") covering common phrasings; missing synonyms/file extensions that would push it to 5.

4 / 5

Distinctiveness Conflict Risk

Clear niche with specific React-composition triggers and low conflict risk, but it could still overlap with a general React or component-design skill, keeping it just below the minimal-conflict anchor.

4 / 5

Total

17

/

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.

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.