react-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. Do NOT use for React/Next.js performance optimization (use react-best-practices instead).
77
71%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./packages/skills-catalog/skills/(architecture)/react-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 hits all the marks. It provides specific concrete actions, includes natural trigger terms developers would use, explicitly addresses both what and when, and even includes a negative boundary to prevent conflicts with related skills. The inclusion of the 'Do NOT use' clause is a best practice that further sharpens its distinctiveness.
| 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 for scaling, refactoring, building libraries, designing APIs) and 'when' (explicit 'Use when' clause with triggers, plus 'Triggers on' clause, and even a 'Do NOT use' negative boundary to prevent misuse). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms a developer would use: 'compound components', 'render props', 'context providers', 'component architecture', 'boolean prop proliferation', 'component libraries', 'reusable APIs', 'React 19'. These are terms developers naturally use when discussing composition patterns. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with a clear niche (composition patterns specifically) and explicitly differentiates itself from a related skill ('react-best-practices' for performance optimization). The 'Do NOT use' clause actively reduces conflict risk. | 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 with clear organization and references to detailed rule files, it provides zero concrete code examples or executable guidance in the skill body itself. A reader (or Claude) gains no actionable knowledge from this file alone—every piece of real content is deferred to external files.
Suggestions
Add at least one concrete before/after code example for the highest-priority pattern (e.g., architecture-avoid-boolean-props) showing the boolean prop anti-pattern and the composition solution.
Include a brief refactoring workflow: e.g., 1. Identify boolean prop proliferation, 2. Extract compound components, 3. Create context provider, 4. Verify consumers still work—with specific code snippets at each step.
Remove or condense the 'When to Apply' section since it duplicates the skill's trigger description, and use that space for actionable content instead.
| 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 what the skill description already covers. The priority table with prefix columns adds marginal value. | 2 / 3 |
Actionability | The skill provides no concrete code examples, no executable patterns, and no specific guidance on how to implement any of the listed patterns. It is entirely a table of contents pointing to other files, with abstract descriptions rather than actionable instructions. | 1 / 3 |
Workflow Clarity | The content provides a clear categorization and priority ordering of rules, which gives some workflow structure. However, there are no step-by-step processes for refactoring, no validation checkpoints, and no guidance on how to sequence applying these patterns during a refactor. | 2 / 3 |
Progressive Disclosure | The skill is well-structured as an overview/index with clear one-level-deep references to individual rule files and a compiled AGENTS.md. Navigation is straightforward with well-signaled categories and file paths. | 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
- tech-leads-club/agent-skills
- Commit
81e7e0d
- 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.