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 strong skill description that clearly defines its scope around React composition patterns with specific, actionable trigger terms. It uses proper third-person voice, includes both 'Use when' and 'Triggers on' clauses, and names concrete patterns and scenarios that make it highly distinguishable from generic React or frontend 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 listing specific scenarios). | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: 'compound components', 'render props', 'context providers', 'component architecture', 'boolean prop proliferation', 'component libraries', 'reusable APIs', 'React 19'. These cover a good range of terms developers naturally use when dealing with React composition patterns. | 3 / 3 |
Distinctiveness Conflict Risk | Targets a clear niche — React composition and component architecture patterns specifically — with distinct triggers like 'boolean prop proliferation', 'compound components', 'render props'. This is unlikely to conflict with general React skills or other framework skills due to its focus on architectural patterns. | 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 primarily as a table of contents rather than a standalone instructional document. While it is well-organized with clear categorization and priority levels, it contains zero executable code examples and defers all actionable content to external files that aren't provided. The skill would benefit significantly from including at least one concrete before/after code example demonstrating the core pattern (e.g., boolean prop proliferation → compound component refactor).
Suggestions
Add at least one concrete before/after code example inline (e.g., showing a component with boolean prop proliferation refactored to use compound components) so the skill has standalone actionable value.
Include a brief step-by-step refactoring workflow with validation steps, e.g., '1. Identify boolean props → 2. Extract variants → 3. Create context provider → 4. Verify consumer components still render correctly'.
Remove or condense the 'When to Apply' section since it largely duplicates the skill description, and drop the 'Prefix' column from the table unless it serves a concrete purpose in the referenced files.
Provide the bundle files (rule files, AGENTS.md) or include key content inline so the skill is not entirely dependent on external references that may not exist.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is reasonably 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 entirely an index/catalog of rule names with brief descriptions. All actual actionable content is deferred to external rule files and AGENTS.md, leaving this file as a table of contents with no standalone utility. | 1 / 3 |
Workflow Clarity | There is a clear priority ordering and categorization of rules, and the 'How to Use' section gives a basic workflow (read individual rule files). However, there's no guidance on how to actually apply these patterns in a refactoring workflow—no sequencing of steps, no validation checkpoints for when refactoring components. | 2 / 3 |
Progressive Disclosure | The skill attempts progressive disclosure by referencing individual rule files and a compiled AGENTS.md, which is a good structure. However, since no bundle files are provided, we cannot verify these references exist. The skill itself contains almost no substantive content—it over-delegates, leaving the overview too thin to be useful on its own. | 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
b9c8ee0
- 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.