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).

Quality

66%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./packages/skills-catalog/skills/(architecture)/react-composition-patterns/SKILL.md

The canonical home for this skill is vercel-composition-patterns in vercel-labs/agent-skills

Quality

Content

50%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a clean, well-organized rule catalog that assumes Claude's competence, but it is essentially an index: all actionable code and detail are deferred to rule files that are not bundled, leaving the skill unable to execute its guidance on its own.

Suggestions

Bundle the referenced rules/*.md files (and AGENTS.md) or inline at least one concrete incorrect-vs-correct code example per high-priority rule so the skill is actionable without missing files.

Add a short, sequenced 'How to apply' workflow with a validation/review checkpoint (e.g. identify the offending pattern -> apply the rule -> verify the refactor preserves behavior) instead of only describing file contents.

Trim the intro's marketing sentence ('These patterns make codebases easier for both humans and AI agents...') to tighten token efficiency.

Dimension	Reasoning	Score
Conciseness	The body is a lean index of rules with one-line summaries and assumes Claude's React knowledge; the only padding is the intro's closing marketing line ('make codebases easier for both humans and AI agents to work with as they scale'), which could be trimmed.	4 / 5
Actionability	The body provides only high-level hints (rule names plus one-line descriptions) and defers all concrete code/examples to rule files ('Read individual rule files for detailed explanations and code examples'), yet no executable code, commands, or specific steps appear in the body itself.	2 / 5
Workflow Clarity	A loose navigation process is implied (identify priority category -> read the rule file -> apply), and the 'How to Use' section describes what each rule file contains, but there is no sequenced workflow with checkpoints because the referenced rule files are not present to complete the loop.	3 / 5
Progressive Disclosure	Structure is well organized as an overview pointing one level deep to rule files and a compiled AGENTS.md, but the referenced paths (rules/architecture-avoid-boolean-props.md, rules/state-context-interface.md, AGENTS.md) do not exist in the bundle, so the clearly-signaled navigation leads to missing content.	3 / 5
	Total	12 / 20 Passed

Description

82%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, well-structured description that clearly states what the skill covers and when to use it, with an explicit boundary against a sibling skill. It is slightly stronger on trigger framing than on enumerating discrete concrete actions.

Dimension	Reasoning	Score
Specificity	Names the domain ('React composition patterns that scale') and several concrete scenarios ('refactoring components with boolean prop proliferation', 'building flexible component libraries', 'designing reusable APIs'), but these read as trigger use-cases rather than discrete concrete actions the skill performs, so coverage is not comprehensive.	3 / 5
Completeness	Clearly answers both what ('React composition patterns that scale') and when via explicit trigger clauses ('Use when refactoring...', 'Triggers on tasks involving...') with concrete trigger phrases, plus an explicit exclusion ('Do NOT use for React/Next.js performance optimization').	5 / 5
Trigger Term Quality	Good coverage of natural developer terms ('compound components', 'render props', 'context providers', 'component architecture', 'boolean prop proliferation', 'React 19') that a user would realistically say, though a few synonyms (e.g. slots, HOCs, composition) are absent.	4 / 5
Distinctiveness Conflict Risk	Occupies a clear niche (React composition/architecture) with distinct triggers and an explicit disambiguation against react-best-practices for performance work, minimizing the chance of triggering the wrong skill.	5 / 5
	Total	17 / 20 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: tech-leads-club/agent-skills
Path: packages/skills-catalog/skills/(architecture)/react-composition-patterns/SKILL.md
Commit: fe318be

Reviewed: 3 days ago

Table of Contents

Discovery Implementation Validation

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.