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

69%

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

63%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 well-structured, token-efficient index whose guidance defers almost entirely to bundle files that are missing from the skill directory. The architecture of the disclosure is sound, but actionability and navigation collapse because the referenced rule files and AGENTS.md are not actually provided.

Suggestions

Ship the referenced bundle: create the rules/*.md files (each with why/incorrect/correct examples, as the body promises) and the compiled AGENTS.md, or remove the dangling references if the body is meant to stand alone.

Add a minimal copy-paste example of the core pattern (e.g., a boolean-prop component refactored into a compound component) so the body carries at least one piece of executable guidance on its own.

Fix the `react19-no-forwardref` entry: 'Don't use `forwardRef`; use `use()` instead of `useContext()`' merges two unrelated React 19 changes — split it into a no-forwardRef rule and a use()-instead-of-useContext rule, each stated precisely.

DimensionReasoningScore

Conciseness

The body is a lean index: one-line rule summaries, a priority table, and pointers, with no re-explanation of concepts Claude already knows. Not 5 because of redundancy — the 'When to Apply' list restates the frontmatter triggers, and the priority table and Quick Reference headings enumerate the same four categories twice.

4 / 5

Actionability

Guidance is mostly navigational ('Read individual rule files for detailed explanations and code examples') with no code or concrete refactor steps in the body; rule summaries like 'use composition' name the direction but not the how. The one inline directive 'Don't use `forwardRef`; use `use()` instead of `useContext()`' conflates two separate React 19 changes into one garbled line, which is misleading rather than executable.

3 / 5

Workflow Clarity

The usage path is discernible — check the priority table, find the rule ID in Quick Reference, read the rule file, or consult AGENTS.md for the full guide — and 'Each rule file contains' sets clear expectations for the bundle files. Not 5 because this sequence is implied by section layout rather than stated, and there is no guidance for applying rules during an actual refactor.

4 / 5

Progressive Disclosure

The design is right — a one-level-deep index with named rule files and a compiled AGENTS.md for the full document — but the referenced bundle files ('rules/architecture-avoid-boolean-props.md', 'rules/state-context-interface.md', 'AGENTS.md') do not exist in the skill bundle (no rules/, references/, scripts/, or assets/ directories are present), so the navigation promises are broken at runtime.

3 / 5

Total

14

/

20

Passed

Description

75%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 strong description with explicit, concrete 'Use when' triggers and authentic React domain vocabulary. Its main weakness is that the 'what' is expressed as a topic phrase rather than an explicit capability statement, and a few natural synonyms are absent.

DimensionReasoningScore

Specificity

Lists several specific activities — 'refactoring components with boolean prop proliferation', 'building flexible component libraries', 'designing reusable APIs', plus 'Includes React 19 API changes' — with minor gaps. Not 5 because the opening 'React composition patterns that scale' is a topic statement rather than a concrete verb-object capability like the top anchor's examples.

4 / 5

Completeness

Both parts are present: the 'what' ('React composition patterns that scale... Includes React 19 API changes') and an explicit 'when' ('Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs'). Not 5 because the 'what' is a noun phrase without an explicit statement of what the skill does (provide reference guidelines), so it could be more explicit.

4 / 5

Trigger Term Quality

Natural domain vocabulary a React user would actually say: 'boolean prop proliferation', 'compound components', 'render props', 'context providers', 'component architecture'. Not 5 because common synonyms such as 'prop drilling', 'component composition', or 'reusable components' are missing; not 3 because coverage is good and domain-specific rather than generic.

4 / 5

Distinctiveness Conflict Risk

A clear React composition-patterns niche with distinctive triggers like 'compound components' and 'render props'. Not 5 because 'component architecture' and 'designing reusable APIs' are broad enough to overlap with general architecture or API-design skills; not 3 because the majority of triggers are specific to this niche.

4 / 5

Total

16

/

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