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.

77

1.43x
Quality

72%

Does it follow best practices?

Impact

99%

1.43x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/react-composition-patterns/skills/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

61%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, token-efficient index that practices what it preaches: the body stays lean and delegates detail to per-rule files one level deep. The weaknesses are that the body itself carries little directly actionable content (no inline code example) and the usage workflow is implicit rather than spelled out.

Suggestions

Add one compact inline before/after example (e.g., a boolean-prop <Modal isOpen> vs. composed <Modal><Modal.Header>...) so the body is immediately actionable without a file read.

Make the usage workflow explicit: 1. match the task against 'When to Apply', 2. pick rules by priority/category, 3. open the named rule file, 4. apply the correct pattern and re-check remaining rules.

Convert the rules/ paths into proper links and clarify when to read individual rules versus the full AGENTS.md compile to remove the navigation ambiguity.

DimensionReasoningScore

Conciseness

The body is a lean ~65-line index: a priority table, one-line rule summaries, and pointers to detail files, assuming Claude's competence throughout. Not a 5 because the 'When to Apply' list largely restates the frontmatter description and the 'How to Use' section repeats what the rule naming and file paths already convey — small trims are available.

4 / 5

Actionability

The rule one-liners are directive ("Don't add boolean props to customize behavior; use composition", "Use children for composition instead of renderX props"), which gives real guidance, but the body contains no executable code, commands, or before/after example — the actual code examples live entirely in the referenced rule files. This matches 'some concrete guidance but incomplete' rather than 'mostly executable'.

3 / 5

Workflow Clarity

The intended flow (check 'When to Apply', pick a category by priority, read the named rule files, consult AGENTS.md for the full guide) is discernible but never sequenced or prioritized into steps, and there is no guidance for applying rules during a refactor or review. The sequence is present but implicit with gaps, matching anchor 3; not a destructive/batch operation so no validation cap applies.

3 / 5

Progressive Disclosure

Good structure: an overview with a priority table, one-level-deep references to rules/*.md that are clearly signaled ("Read individual rule files for detailed explanations and code examples"), and a described contents contract for each rule file. Not a 5 because the referenced rule files and AGENTS.md are not present in the provided bundle to verify, the rule paths appear in a plain code block rather than as navigable references, and the dual paths (individual rules vs. the 'full compiled' AGENTS.md) leave navigation choice ambiguous.

4 / 5

Total

14

/

20

Passed

Description

70%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 solid, third-person description with explicit and well-chosen trigger language that clearly communicates when to use the skill. Its main weakness is that the 'what' is a domain label rather than a concrete capability statement, which keeps specificity and completeness in the mid-to-good range rather than excellent.

Suggestions

Replace the abstract opener with concrete capabilities, e.g., 'Refactor boolean-prop-heavy components into compound components, context-based state providers, and explicit variants' to raise specificity.

Trim the fluff phrase "that scale" and add natural synonyms such as 'prop drilling' or 'component API design' to broaden trigger coverage.

State the deliverable explicitly (e.g., 'Provides prioritized, named rules with incorrect/correct code examples') so the 'what' matches the quality of the 'when'.

DimensionReasoningScore

Specificity

"React composition patterns that scale" names the domain but is an abstract topic statement rather than a list of concrete capabilities; the only quasi-concrete action appears secondhand in the 'Use when refactoring components with boolean prop proliferation' clause. It sits between 'names the domain but actions are minimal' (2) and 'several specific actions with minor gaps' (4), so 3 fits best.

3 / 5

Completeness

Both parts are present: the 'when' is explicit with concrete triggers ("Use when refactoring components with boolean prop proliferation... Triggers on tasks involving compound components..."), and the 'what' is "React composition patterns that scale". Falls short of 5 because the 'what' is a single abstract phrase with light fluff ("that scale") rather than concrete capabilities, and short of anchor 3 because 'when' is explicit, not weakly implied.

4 / 5

Trigger Term Quality

Strong natural terms a developer would actually say: "boolean prop proliferation", "compound components", "render props", "context providers", "refactoring", "reusable APIs". Not a 5 because there are no synonyms/common variations for less expert phrasing (e.g., 'prop drilling', 'reusable components', 'component design').

4 / 5

Distinctiveness Conflict Risk

Clear niche (React composition/architecture) with distinctive triggers like "boolean prop proliferation", "render props", and "compound components" that few other skills would claim. Minor overlap risk remains with generic React/frontend coding or style-guide skills via the broader phrase "component architecture".

4 / 5

Total

15

/

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
secondsky/claude-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.