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, rich natural trigger terms, explicit 'Use when' and 'Triggers on' clauses, and even a negative boundary to prevent conflicts with a related skill. The third-person voice is maintained throughout, and the description is concise yet comprehensive.
| 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, plus a 'Do NOT use' negative boundary). This is comprehensive. | 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 even includes an explicit negative boundary ('Do NOT use for React/Next.js performance optimization — use react-best-practices instead'), which directly reduces conflict risk with related 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 as a well-organized table of contents/index for React composition patterns, with good progressive disclosure and categorization. However, it provides essentially zero actionable content on its own—no code examples, no concrete patterns, no executable guidance. A reader (or Claude) gains no usable knowledge from this file alone without accessing the referenced rule files.
Suggestions
Add at least one concrete, executable code example for the highest-priority pattern (e.g., refactoring boolean props into compound components) so the skill provides immediate value without requiring file reads.
Include a brief before/after code snippet showing the core anti-pattern (boolean prop proliferation) and the preferred composition approach, making the skill actionable on its own.
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 the description. The priority table with prefix column adds marginal value. Could be tighter. | 2 / 3 |
Actionability | No concrete code examples, no executable guidance, no specific patterns demonstrated. The entire skill is an index/table of contents pointing to other files. Claude receives no actionable instruction from this content alone—it's entirely 'see elsewhere for details.' | 1 / 3 |
Workflow Clarity | The skill organizes rules by priority and provides a clear categorization scheme, but there's no workflow for how to apply these patterns (e.g., steps to refactor a component with boolean props). For a reference/index skill this is acceptable but not exemplary. | 2 / 3 |
Progressive Disclosure | Well-structured as an overview with clear one-level-deep references to individual rule files and a compiled AGENTS.md. Navigation is straightforward with categorized links and clear 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
906a57d
- 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.