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

70%

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

50%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This skill functions as a well-organized index/table of contents for React composition patterns, but provides almost no actionable content on its own. It efficiently categorizes and prioritizes rules, but defers all concrete guidance — code examples, implementation details, before/after comparisons — to external files that aren't provided. Without at least one inline example demonstrating a key pattern (e.g., boolean prop refactoring to compound components), the skill offers minimal standalone value.

Suggestions

Add at least one concrete inline code example showing the most common pattern (e.g., refactoring boolean props into compound components) so the skill has standalone actionable value.

Include a brief decision workflow: 'When you encounter X, apply pattern Y' with 2-3 concrete decision points to guide pattern selection during refactoring.

Add a minimal before/after code snippet for the highest-priority rule (architecture-avoid-boolean-props) directly in the Quick Reference section.

Consider inlining the most critical rule content (even abbreviated) rather than deferring everything to external files, especially since the skill's value is near-zero without them.

DimensionReasoningScore

Conciseness

Generally efficient and well-organized. The 'When to Apply' section and the priority table add some overhead that could be trimmed, but most content earns its place. The brief rule descriptions are appropriately terse.

4 / 5

Actionability

The skill is essentially a table of contents pointing to external rule files, with no concrete code examples, executable patterns, or specific guidance inline. It tells Claude what patterns exist but doesn't show how to implement any of them. The actual actionable content is entirely deferred to external files.

2 / 5

Workflow Clarity

There's a clear priority ordering and categorization of rules, and the 'When to Apply' section provides triggering conditions. However, there's no workflow for how to actually apply these patterns during a refactoring task — no sequence of steps, no validation checkpoints, no decision tree for choosing between patterns.

3 / 5

Progressive Disclosure

The structure references external rule files and a compiled AGENTS.md, which is a reasonable disclosure pattern. However, no bundle files were provided, so we can't verify the references exist. The skill itself is essentially only an index with no substantive inline content, making it overly dependent on external files for any value. The references are clearly signaled but the balance tips too far toward deferral.

3 / 5

Total

12

/

20

Passed

Description

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

This is a strong skill description that clearly communicates its purpose, provides explicit trigger guidance with both 'Use when' and 'Triggers on' clauses, and uses natural developer terminology. The description is concise yet comprehensive, covering the domain (React composition patterns), specific use cases, and relevant technical terms that would help Claude distinguish this skill from general React skills.

DimensionReasoningScore

Specificity

Lists several specific patterns and actions: 'refactoring components with boolean prop proliferation', 'building flexible component libraries', 'designing reusable APIs', 'compound components, render props, context providers'. Minor gaps in that it doesn't enumerate concrete code-level actions like 'converts class components' or 'implements slot patterns'.

4 / 5

Completeness

Clearly answers both 'what' (React composition patterns that scale, including compound components, render props, context providers, React 19 API changes) and 'when' (explicit 'Use when' clause with specific triggers plus a 'Triggers on' clause listing additional scenarios).

5 / 5

Trigger Term Quality

Excellent coverage of natural terms users would say: 'compound components', 'render props', 'context providers', 'component architecture', 'boolean prop proliferation', 'component libraries', 'reusable APIs', 'React 19'. These are the exact phrases developers use when discussing these patterns.

5 / 5

Distinctiveness Conflict Risk

Fairly distinct with its focus on composition patterns, compound components, and prop proliferation refactoring. Could have minor overlap with a general React skill or component library skill, but the specific mention of composition patterns, render props, and boolean prop proliferation narrows the niche well.

4 / 5

Total

18

/

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
whimzyLive/nightshift-ai
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.