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.
81
71%
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 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 potential React-related skills.
| 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 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 component 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 |
Implementation
42%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill functions primarily as a table of contents rather than an actionable guide. While it excels at progressive disclosure and organization, it critically lacks any concrete code examples or executable guidance inline—Claude would need to read external files to gain any actionable knowledge. The content would benefit significantly from at least one inline before/after code example demonstrating the core pattern (e.g., boolean prop proliferation → compound component refactor).
Suggestions
Add at least one concrete inline code example showing the core anti-pattern (boolean props) and the preferred composition pattern, so the skill is actionable without requiring external file reads.
Include a brief decision workflow: 'When you see X, apply pattern Y' with specific code-level triggers (e.g., 'If a component has 3+ boolean props controlling rendering, refactor to compound components').
Remove or condense the 'When to Apply' section since it largely duplicates the skill description and the quick reference already implies usage contexts.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | 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 what the description already conveys. The priority table with prefix columns adds marginal value. | 2 / 3 |
Actionability | The skill contains no executable code, no concrete examples, and no specific patterns demonstrated inline. It is entirely a table of contents pointing to other files, describing rather than instructing. Claude would not know how to implement any of these patterns from this content alone. | 1 / 3 |
Workflow Clarity | There is a clear categorization and priority ordering of rules, and the 'How to Use' section provides a basic workflow (read rule files). However, there's no guidance on how to apply these patterns in sequence during a refactoring task, no validation checkpoints, and no decision tree for choosing between patterns. | 2 / 3 |
Progressive Disclosure | The skill is well-structured as an overview/index that points to individual rule files one level deep, with clear navigation. References are well-signaled with file paths, and there's a compiled document reference for the full guide. This is appropriate progressive disclosure. | 3 / 3 |
Total | 8 / 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
73140fc
- 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.