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.

1.43x

Quality

72%

Does it follow best practices?

Impact

99%

1.43x

Average score across 3 eval scenarios

Securityby

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

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 well-structured and concise as an overview/index, but it contains no executable code or commands and relies entirely on referenced files that are not present in the bundle. This significantly weakens actionability and progressive disclosure.

Suggestions

Include at least one short, executable code example (e.g., a compound-component or context-provider snippet) directly in SKILL.md so the skill is actionable without the missing rule files.

Provide the referenced bundle files (rules/*.md and AGENTS.md) or remove/fix the references so signaled paths actually resolve.

Add a concrete "How to apply" sequence (e.g., identify boolean-prop proliferation -> choose a pattern -> refactor with a checkpoint to verify the component still renders) to improve workflow clarity.

Dimension	Reasoning	Score
Conciseness	The body is reasonably lean and does not over-explain React basics, but lines like "These patterns make codebases easier for both humans and AI agents to work with as they scale" add minor padding, fitting anchor 4 with minor trimming possible.	4 / 5
Actionability	The content lists rule names and short descriptions but provides no executable code or concrete commands, and defers all detail to "Read individual rule files for detailed explanations and code examples" — high-level hints missing the specific steps, matching anchor 2.	2 / 5
Workflow Clarity	A priority table and categorized rule list provide some structure but there is no sequenced multi-step process and no validation checkpoints; the "How to Use" guidance is vague, fitting anchor 3 with sequence present but checkpoints missing.	3 / 5
Progressive Disclosure	The body is structured as an overview pointing to rule files and AGENTS.md, but the referenced paths (rules/*.md, AGENTS.md) do not exist as bundle files, so the signaled references do not resolve, fitting anchor 3 rather than 4.	3 / 5
	Total	12 / 20 Passed

Description

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

The description is strong: it states a clear purpose, lists several concrete triggers a user would naturally say, and answers both what and when explicitly. Voice is appropriately third person with no first/second-person phrasing.

Dimension	Reasoning	Score
Specificity	Names several concrete actions ("refactoring components with boolean prop proliferation", "building flexible component libraries", "designing reusable APIs") but stays at a domain-action level rather than ultra-concrete verbs, fitting the anchor 4 example with minor gaps.	4 / 5
Completeness	Explicitly answers both what ("React composition patterns that scale") and when ("Use when refactoring... building... designing..." plus "Triggers on tasks involving..."), matching the anchor 5 example with concrete trigger phrases.	5 / 5
Trigger Term Quality	Comprehensive natural-term coverage with synonyms a React developer would actually say: "compound components", "render props", "context providers", "component architecture", "boolean prop proliferation", matching the anchor 5 standard.	5 / 5
Distinctiveness Conflict Risk	Targets a clear niche (React composition/component architecture) with distinct triggers and minimal overlap risk with unrelated skills, matching anchor 5.	5 / 5
	Total	19 / 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: secondsky/claude-skills
Path: plugins/react-composition-patterns/skills/react-composition-patterns/SKILL.md
Commit: 84802a4

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.