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

Quality

70%

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 ./.agents/skills/vercel-composition-patterns/SKILL.md

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

Quality

Content

57%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 clean, well-organized index of composition-pattern rules that assumes Claude's competence and avoids basic-concept bloat. Its main weakness is that the actionable code examples and detailed rule content are entirely delegated to referenced files that are missing from the bundle.

Suggestions

Include the referenced bundle files (rules/*.md and AGENTS.md) so the signaled navigation targets actually exist, or inline a brief executable code example for the top-priority rule.

Add selection guidance in 'How to Use' (e.g. 'For boolean-prop problems start with architecture-avoid-boolean-props') so Claude knows which rule to consult for a given situation.

Trim the padded closing sentence of the intro paragraph to improve token efficiency.

Dimension	Reasoning	Score
Conciseness	The body is lean and does not explain basic React concepts; it lists rules as one-line entries with a priority table, though the opening paragraph ('These patterns make codebases easier for both humans and AI agents to work with as they scale') is mildly padded.	4 / 5
Actionability	It provides concrete rule names and one-line descriptions, but the body itself contains no executable code examples — all actionable detail is deferred to 'Read individual rule files for detailed explanations and code examples', leaving the inline guidance incomplete.	3 / 5
Workflow Clarity	The 'How to Use' section lists what each rule file contains but offers no real sequenced process or selection guidance for which rule to apply when; there are no checkpoints, though none are strictly required for an index-style skill.	3 / 5
Progressive Disclosure	Structure is well organized as an overview with one-level-deep references to rules/*.md and AGENTS.md, but those referenced files are not present in the bundle, so navigation leads to dead ends rather than discoverable content.	3 / 5
	Total	13 / 20 Passed

Description

83%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 that clearly conveys both purpose and trigger conditions using natural developer vocabulary and third-person voice. Minor gains are possible by adding a few more concrete action verbs and synonyms.

Dimension	Reasoning	Score
Specificity	Names the domain ('React composition patterns') and lists several concrete scenarios ('refactoring components with boolean prop proliferation', 'building flexible component libraries', 'designing reusable APIs'), giving good but not exhaustive action coverage.	4 / 5
Completeness	Explicitly states what ('React composition patterns that scale') and when ('Use when refactoring components... building flexible component libraries, or designing reusable APIs' plus a 'Triggers on...' clause) with concrete trigger phrases.	5 / 5
Trigger Term Quality	Includes natural developer terms ('compound components', 'render props', 'context providers', 'component architecture') with synonyms, though a few common phrases (e.g. 'hooks', 'props') are absent and there are no file-type tokens.	4 / 5
Distinctiveness Conflict Risk	The composition-patterns niche with compound components/render props/context providers is mostly distinct, though it could overlap with a general React best-practices or component-design skill.	4 / 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: openstatusHQ/data-table-filters
Path: .agents/skills/vercel-composition-patterns/SKILL.md
Commit: 5017387

Reviewed: 1 day 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.