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.

78

1.19x
Quality

66%

Does it follow best practices?

Impact

100%

1.19x

Average score across 3 eval scenarios

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

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.

The SKILL.md body is an efficient, well-organized index with clear prioritization and signaling, but it is an index to nothing: none of the referenced rule files or the compiled AGENTS.md are present in the bundle, and the body itself contains no code examples. As shipped, the skill delivers rule names and one-line summaries without the details needed to apply them.

Suggestions

Ship the referenced detail files: include the rules/ directory (e.g., rules/architecture-avoid-boolean-props.md, rules/state-context-interface.md) and AGENTS.md in the bundle, or inline the highest-priority rules directly into SKILL.md if no bundle is intended.

Add at least one compact incorrect/correct code example for the top-priority pattern (avoid boolean props via compound components) so the skill is actionable without external files.

Add brief guidance on how to apply the catalog in practice — e.g., which rule categories to check when reviewing a component versus refactoring one — so the workflow is more than an unordered lookup.

DimensionReasoningScore

Conciseness

The body is a lean catalog — a priority table plus one-line rule summaries — that assumes Claude's competence and avoids explaining known concepts; only minor trimming is needed (the intro paragraph repeats the description, and "easier for both humans and AI agents" plus the meta-list of what each rule file contains are mildly redundant).

4 / 5

Actionability

Rules are stated as concrete directives ("Don't use forwardRef; use use() instead of useContext()"), but there are no code examples in the body and the primary instruction — "Read individual rule files" — cannot be executed because the referenced rules/ files are missing from the bundle, leaving key details absent.

3 / 5

Workflow Clarity

The consult-by-priority then read-the-rule-file path is present as an unambiguous single lookup, but the reading step is broken (referenced files don't exist) and no guidance is given on how to sequence or apply the rules during an actual refactor or architecture review.

3 / 5

Progressive Disclosure

The body itself is well-structured with clearly signaled, one-level-deep references (rules/*.md and AGENTS.md), but every referenced path is dangling — no rules/ directory or AGENTS.md exists in the bundle — so the entire detail layer is missing and navigation fails, preventing a score in the 4-5 band.

3 / 5

Total

13

/

20

Passed

Description

75%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 explicit, concrete trigger guidance and natural developer terminology occupying a well-defined React niche. Its main weakness is that the capability statement is a topic label ("React composition patterns that scale") rather than an explicit statement of what the skill provides.

DimensionReasoningScore

Specificity

The description lists several specific, concrete items — "refactoring components with boolean prop proliferation", "compound components, render props, context providers", "React 19 API changes" — but the core capability is only a topic label ("React composition patterns that scale") rather than an explicit action, leaving minor gaps versus the comprehensive 5 anchor.

4 / 5

Completeness

An explicit "Use when..." clause with concrete trigger scenarios answers "when" clearly, but the "what" is only implied by the topic phrase rather than stated as a capability (e.g., "provides guidelines for..."), so it does not fully match the 5 anchor requiring both to be clearly and explicitly answered.

4 / 5

Trigger Term Quality

Natural developer phrasings like "boolean prop proliferation", "render props", "context providers", and "reusable component libraries" give good keyword coverage, though common variations such as "prop drilling", "wrapper hell", or "headless components" are missing, so it falls short of the comprehensive 5 anchor.

4 / 5

Distinctiveness Conflict Risk

It occupies a clear niche (React composition/component architecture) with distinct triggers like "boolean prop proliferation" and "compound components"; broader terms such as "component architecture" and "designing reusable APIs" leave minor overlap risk with generic React style-guide or React 19 migration skills.

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
1weiho/open-slide
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.