CtrlK
BlogDocsLog inGet started
Tessl Logo

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

62

Quality

73%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

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

SKILL.md
Quality
Evals
Security

Quality

Content

67%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.

A well-structured index-style SKILL.md that practices good progressive disclosure and stays lean, with clean prioritization of rules. Its weakness is actionability: the body defers all executable detail (code examples) to rule files, leaving only abstract one-liners in the main file, and its trigger/when sections duplicate the frontmatter description.

Suggestions

Inline one minimal incorrect/correct code pair for the highest-priority rule (architecture-avoid-boolean-props) so the core pattern is actionable without opening a rule file.

Fix the react19-no-forwardref bullet: it conflates two separate changes — forwardRef is replaced by ref-as-a-prop, while use() replaces useContext() — and the current wording implies use() is the forwardRef replacement.

Dedupe the "When to Apply" section against the frontmatter description (or replace it with a pointer to the priority table) to save tokens and remove repetition.

DimensionReasoningScore

Conciseness

The body is a lean ~75-line index with no padding and no explanation of concepts Claude already knows. Not 5: the "When to Apply" list restates the frontmatter description's triggers, and the priority table's category names are repeated verbatim as Quick Reference headings, so some tokens don't earn their place.

4 / 5

Actionability

Each rule carries a concrete do/don't directive ("Don't add boolean props to customize behavior; use composition", "Use children for composition instead of renderX props"), but the body itself contains no code examples despite the skill's purpose being code refactoring patterns, and "use composition" without an example is abstract. Key executable detail is entirely deferred to rule files, which is incomplete guidance in the body itself, matching the 'some concrete guidance but incomplete' anchor rather than 'mostly executable'.

3 / 5

Workflow Clarity

Navigation flow is unambiguous for a simple index skill: consult rules by category, "Read individual rule files for detailed explanations and code examples", then "For the complete guide with all rules expanded: AGENTS.md". Not 5 because the How to Use section shows only two example paths and never states the lookup convention for the other five rule files.

4 / 5

Progressive Disclosure

Textbook overview structure: priority table, one-line-per-rule quick reference, and clearly signaled one-level-deep references ("Read individual rule files...", "For the complete guide... AGENTS.md"). Not 5: the referenced paths (rules/*.md, AGENTS.md) are not present in the provided bundle, so the reference targets cannot be confirmed to exist.

4 / 5

Total

15

/

20

Passed

Description

78%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 description: explicit and specific 'when' guidance, natural trigger terms, and an explicit negative trigger that disambiguates a closely related skill. The main weakness is the 'what' half, which leans on the abstract headline "React composition patterns that scale" instead of concretely stating what the skill contains.

Suggestions

Replace or augment the abstract headline with a concrete 'what', e.g. "Provides 7 prioritized rules for replacing boolean props with compound components, context-based state, and explicit variants".

Add one or two common synonyms such as "prop drilling" or "children composition" to the trigger list to broaden natural-term coverage.

DimensionReasoningScore

Specificity

"refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs" names several concrete actions. Not 5 because the headline 'what' ("React composition patterns that scale") is abstract and the pattern actions (compound components, lifting state) appear only as triggers, not as things the skill does.

4 / 5

Completeness

Both parts are present and the 'when' is fully explicit with concrete trigger phrases ("Use when refactoring components with boolean prop proliferation..." plus "Triggers on tasks involving compound components, render props, context providers"). The 'what' relies on the vague headline "React composition patterns that scale" rather than concretely stating what the skill provides, so it does not clearly match the explicit-both anchor at 5.

4 / 5

Trigger Term Quality

"boolean prop proliferation", "compound components", "render props", "context providers", "component architecture", "React 19" are natural phrases users would say when needing this skill. A few common synonyms are missing (e.g. "prop drilling", "children composition", "headless components"), so it falls between the good and comprehensive anchors.

4 / 5

Distinctiveness Conflict Risk

Clear niche (composition architecture) with an explicit disambiguation clause: "Do NOT use for React/Next.js performance optimization (use react-best-practices instead)". Trigger terms (compound components, render props, boolean props) are distinct to this domain, so conflict risk is minimal.

5 / 5

Total

17

/

20

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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
tech-leads-club/agent-skills
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.