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.

58

Quality

66%

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 ./.agent/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

63%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 concise, well-organized index-style SKILL.md that delegates detail to per-rule files, with a clear priority-driven lookup flow. It is weakened by an absence of any executable guidance in the body and by references to rule files and AGENTS.md that are not present in the bundle, leaving the disclosure structure unverifiable.

Suggestions

Include one short correct/incorrect code snippet inline (e.g., boolean props vs. compound components) so the highest-priority rule is actionable without opening a rule file.

Ship the referenced bundle — the rules/*.md files and AGENTS.md are cited but absent, so the progressive-disclosure structure cannot actually be navigated.

Split the conflated react19 entry into separate forwardRef and useContext() rules, and state where the rules/ directory lives relative to the skill root.

DimensionReasoningScore

Conciseness

The body is a lean index — a priority table and one-line rule summaries — with only minor trimmable padding: the intro sentence "These patterns make codebases easier for both humans and AI agents to work with as they scale" and a "When to Apply" list that duplicates the frontmatter description. Efficient but not anchor 5's every-token-earns-its-place.

4 / 5

Actionability

Directives like "Don't add boolean props to customize behavior; use composition" and "Don't use forwardRef; use use() instead of useContext()" are concrete but incomplete: the body contains no code and defers all executable detail to rule files, and the react19 line conflates two separate rules (forwardRef and useContext) in one cryptic entry. This matches anchor 3's concrete-but-incomplete guidance rather than 4's mostly-executable content.

3 / 5

Workflow Clarity

The lookup flow is clear and unambiguous: priority table with prefixes → quick-reference summaries → "Read individual rule files for detailed explanations and code examples" → AGENTS.md for the full guide. As a non-destructive reference skill it needs no validation checkpoints; the minor gap is that relative paths like `rules/architecture-avoid-boolean-props.md` are given without locating the directory, which keeps it below 5.

4 / 5

Progressive Disclosure

The structure is well designed — overview, prioritized categories, and clearly signaled one-level-deep references to `rules/*.md` and `AGENTS.md` — but none of the referenced files exist in the bundle (no references/, rules/, or AGENTS.md are present), so every navigation pointer dead-ends. Clearly signaled but unverifiable/dangling references fit anchor 3 better than anchor 4's "minor organization gaps".

3 / 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 well-formed, third-person description with an explicit and specific trigger clause covering natural React vocabulary. Its main weakness is that the 'what' states the topic rather than concrete capabilities, leaving the skill's actual deliverables implicit.

Suggestions

State what the skill provides as concrete actions, e.g., "Provides prioritized rules and code examples for refactoring boolean-prop components into compound components with shared context".

Add missing natural trigger synonyms such as "prop drilling" and "component refactoring" to broaden the when-clause to how users actually phrase the problem.

DimensionReasoningScore

Specificity

Phrases like "React composition patterns that scale" and "refactoring components with boolean prop proliferation" name the domain and a couple of concrete scenarios, but the description never states specific actions the skill itself performs (e.g., applying compound-component or context-provider patterns). It sits at anchor 3 rather than 4 because it lists use contexts, not several specific capabilities.

3 / 5

Completeness

Both parts are present: "React composition patterns that scale" (what) and an explicit "Use when refactoring... building... designing" plus "Triggers on tasks involving..." (when). It is not a 5 because the 'what' is a topic label rather than a concrete statement of what the skill provides (guidelines/rules with code examples).

4 / 5

Trigger Term Quality

Natural terms users would say are well covered: "boolean prop proliferation", "compound components", "render props", "context providers", "flexible component libraries", "reusable APIs", "React 19". It misses common synonyms such as "prop drilling" or "component refactoring", so it falls short of anchor 5's comprehensive synonym coverage but is clearly above anchor 3.

4 / 5

Distinctiveness Conflict Risk

The niche is clear — React composition patterns with distinctive triggers like "boolean prop proliferation" and "render props" — so overlap risk is low. The broad phrase "component architecture" and "building flexible component libraries" could overlap with general React or API-design skills, keeping it below anchor 5's minimal conflict risk.

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
Draculabo/AntigravityManager
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.