CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

60

Quality

69%

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 ./.agents/skills/vercel-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

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

SKILL.md is a well-organized, token-efficient rule index with a clear priority scheme and version guard, but it is fundamentally incomplete as shipped: all detailed content is delegated to rules/*.md and AGENTS.md files that do not exist in the bundle, making the skill unexecutable beyond its one-line summaries.

Suggestions

Ship the referenced rules/*.md files (and AGENTS.md) in the bundle, or inline minimal incorrect/correct code examples for the top-priority architecture rules so the skill remains actionable without them.

Remove the duplicated trigger list — the 'When to Apply' section repeats the frontmatter description and the intro paragraph almost verbatim; one instance suffices.

Add a before/after code snippet for the highest-impact rule (e.g., boolean-prop refactor to compound components) directly in SKILL.md so concrete guidance survives even when rule files are not loaded.

DimensionReasoningScore

Conciseness

The body is a lean, index-style overview with no explanations of concepts Claude already knows; however, the trigger list is repeated nearly verbatim across the intro paragraph and the 'When to Apply' section (already in the frontmatter description), which is minor over-explanation that could be trimmed. Not 5 because of that duplication; not 3 because there is no real padding.

4 / 5

Actionability

One-line rule directives are concrete ('Don't use forwardRef; use use() instead of useContext()', 'Don't add boolean props to customize behavior; use composition'), but the body contains no code examples and delegates all detailed examples to rules/*.md files that are not present in the bundle, leaving key executable details missing. Not 4 because the guidance cannot be fully executed as shipped; not 2 because the directives are specific rather than high-level hints.

3 / 5

Workflow Clarity

The usage path is clear and unambiguous: a priority table, prefixed rule names, and a 'How to Use' section with example paths, plus an explicit React 19 version guard ('Skip this section if using React 18 or earlier'). Not 5 because the central 'Read individual rule files' step cannot actually be performed since the referenced files do not exist in the bundle.

4 / 5

Progressive Disclosure

The index design (one-level-deep rules/ references plus a compiled AGENTS.md) is well signaled, but the bundle contains none of the referenced files — every disclosure path (rules/architecture-avoid-boolean-props.md, rules/state-context-interface.md, AGENTS.md) is dangling, leaving an index that points to nothing. Not 3 because the references are not merely unclear, they are absent; not 1 because SKILL.md itself is well organized with no multi-level nesting.

2 / 5

Total

13

/

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 with an explicit and specific 'Use when...' trigger clause, natural React-domain keywords, and a clearly stated purpose. Its main weakness is that the 'what' leans on the slightly abstract phrase 'composition patterns that scale' rather than enumerating concrete capabilities.

DimensionReasoningScore

Specificity

Names the domain ('React composition patterns') with semi-concrete actions ('refactoring components with boolean prop proliferation', 'designing reusable APIs'), but 'patterns that scale' is abstract and it never enumerates several specific concrete actions, so it falls between the 3 and 4 anchors rather than clearly at 4.

3 / 5

Completeness

It explicitly answers both what ('React composition patterns') and when, with two concrete trigger clauses ('Use when refactoring components with boolean prop proliferation... Triggers on tasks involving compound components, render props, context providers'). The 'when' is more explicit and specific than the anchor-4 example, matching the anchor-5 example's structure.

5 / 5

Trigger Term Quality

Natural terms users would say include 'boolean prop proliferation', 'compound components', 'render props', 'context providers', and 'component architecture', giving good keyword coverage; common synonyms like 'props drilling' or 'reusable components' are missing, so it does not reach the comprehensive 5 anchor.

4 / 5

Distinctiveness Conflict Risk

The React composition niche with triggers like 'boolean prop proliferation' and 'render props' is mostly distinct with only minor overlap risk against general React best-practices or refactoring skills; it is not a fully isolated niche like the PDF example, so it stops short of 5.

4 / 5

Total

16

/

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
openstatusHQ/data-table-filters
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.