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
67%
Does it follow best practices?
Impact
100%
1.19xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/composition-patterns/SKILL.mdQuality
Discovery
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 a well-crafted skill description that clearly defines its scope around React composition patterns with specific, actionable triggers. It uses third person voice, names concrete patterns and use cases, and explicitly separates 'what' from 'when'. The inclusion of React 19 API changes adds further specificity and timeliness.
| Dimension | Reasoning | Score |
|---|---|---|
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 React 19 API changes) and 'when' with explicit triggers ('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'). | 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 patterns and component architecture. The specific triggers like 'boolean prop proliferation', 'compound components', 'render props', and 'context providers' are distinct enough to avoid conflicting with general React skills or other frontend skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
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 well-organized index/table of contents for React composition patterns but provides almost no actionable content on its own. It lacks any code examples, concrete refactoring steps, or executable guidance—everything is deferred to external rule files that aren't provided. The structure and prioritization are reasonable, but the body needs at minimum a quick-start example showing a before/after of the core pattern (e.g., boolean props → compound components).
Suggestions
Add at least one concrete before/after code example in the body showing the primary pattern (e.g., refactoring boolean props into compound components) so the skill is actionable without reading external files.
Include a brief step-by-step workflow for refactoring a component (e.g., 1. Identify boolean props, 2. Extract variants, 3. Create context provider, 4. Verify consumer components still work) with validation checkpoints.
Remove or condense the 'Prefix' column in the priority table and the 'When to Apply' section, which largely repeats the skill description and adds little value.
If bundle files exist, ensure they are provided for evaluation; if they don't exist yet, add at least one inline rule expansion (e.g., architecture-avoid-boolean-props) to make the skill self-contained enough to be useful.
| Dimension | Reasoning | Score |
|---|---|---|
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 the prefix column serves no clear purpose in the body itself. | 2 / 3 |
Actionability | The skill provides no concrete code examples, no executable guidance, and no specific patterns—it is essentially a table of contents pointing to external rule files. A developer or Claude reading only this file would not know how to implement any of the listed patterns. | 1 / 3 |
Workflow Clarity | The prioritized categories and rule listing provide a clear sequence for which patterns to consider first, and the 'When to Apply' section gives reasonable triggers. However, there is no workflow for actually applying these patterns (e.g., steps to refactor a component), no validation checkpoints, and no feedback loops for iterative refactoring. | 2 / 3 |
Progressive Disclosure | The skill references individual rule files and a compiled AGENTS.md, which is good progressive disclosure structure. However, since no bundle files are provided, we cannot verify these references exist. The body itself is almost entirely a table of contents with very little standalone value—it leans too heavily on external files without providing enough actionable content at the top level. | 2 / 3 |
Total | 7 / 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.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- vercel-labs/agent-skills
- Commit
4ec6f84
- 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.