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.
Install with Tessl CLI
npx tessl i github:secondsky/claude-skills --skill react-composition-patterns86
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
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 excels across all dimensions. It clearly defines the domain (React composition patterns), lists specific use cases and triggers, and uses natural terminology that React developers would actually use. The description is concise yet comprehensive, with explicit 'Use when' and 'Triggers on' clauses that make skill selection unambiguous.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'refactoring components with boolean prop proliferation', 'building flexible component libraries', 'designing reusable APIs'. Also names specific patterns: compound components, render props, context providers. | 3 / 3 |
Completeness | Clearly answers both what ('React composition patterns that scale') and when ('Use when refactoring components...', 'Triggers on tasks involving...'). Has explicit trigger guidance with specific scenarios. | 3 / 3 |
Trigger Term Quality | Includes natural keywords users would say: 'refactoring components', 'component libraries', 'reusable APIs', 'compound components', 'render props', 'context providers', 'component architecture'. These are terms React developers naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | Clear niche focused specifically on React composition patterns and component architecture. The specific triggers like 'boolean prop proliferation', 'compound components', 'render props' are distinct enough to avoid conflicts with general React or JavaScript skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
72%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill excels at organization and progressive disclosure, providing a clean overview that efficiently points to detailed resources. However, it sacrifices actionability by not including any concrete code examples in the main document—users must navigate to external files for actual implementation guidance. The skill would benefit from at least one inline before/after code snippet demonstrating a key pattern.
Suggestions
Add one concrete code example showing boolean prop proliferation vs. compound component pattern directly in the skill body
Include a brief workflow section describing the refactoring process: identify boolean props → choose pattern → implement → validate component API
Consider adding a 'Quick Example' section after 'When to Apply' with a minimal before/after code snippet for the most common pattern
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is lean and efficient, using tables and bullet points to convey information without explaining basic React concepts Claude already knows. Every section serves a clear purpose. | 3 / 3 |
Actionability | While the skill provides clear categorization and references to rule files, it lacks concrete code examples in the main document. The actual executable guidance is deferred to external files rather than shown inline. | 2 / 3 |
Workflow Clarity | The 'When to Apply' section provides clear triggers, and the priority table helps with sequencing decisions, but there's no explicit workflow for how to apply these patterns during refactoring or what validation steps to take. | 2 / 3 |
Progressive Disclosure | Excellent structure with a clear overview, well-organized quick reference, and one-level-deep references to individual rule files and the compiled AGENTS.md. Navigation is straightforward and clearly signaled. | 3 / 3 |
Total | 10 / 12 Passed |
Validation
87%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 14 / 16 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
body_output_format | No obvious output/return/format terms detected; consider specifying expected outputs | Warning |
body_steps | No step-by-step structure detected (no ordered list); consider adding a simple workflow | Warning |
Total | 14 / 16 Passed | |
- 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.