composition-patterns

Name: composition-patterns
Author: Vercel

Boolean prop hell → compound components. Cleaner React component APIs by construction.

Score 47(?)VerifiedCodeby VercelSource

Verified for:

Install

$ npx skills add github.com/vercel-labs/agent-skills --skill composition-patterns

$ npx skills add vercel-labs/agent-skills --skill composition-patterns --target cursor

Best for

Component library refactoring, API design improvements.

About this skill

Replaces boolean props with compound components and clean APIs.

ReactPatternsAPI design

Score breakdown

rubric 1.0

Install count

0/20

Provenance

12.8/15

GitHub stars

0/15

Recency

6/10

Compatibility

4/10

Documentation depth

6.5/10

Install ergonomics

10/10

License

5/5

Verification freshness

3/5

Composite 0–100 score derived from 9 verifiable signals. See the rubric →

frontend-design

Frontend & UI

Official

Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written.

ReactTailwindDesign

All surfaces

Low1 min

web-artifacts-builder

Frontend & UI

Official

Self-contained HTML artifacts with React + shadcn/ui — no build step, just paste and run.

Reactshadcn/uiArtifacts

All surfaces

Low1 min

brand-guidelines

Frontend & UI

Official

Lock generated UIs to a brand. Anthropic's own guidelines, formalized as a skill.

BrandGuidelinesIdentity

All surfaces

Low1 min

Ranked #18 in Frontend & UI

Publish the ranking in your README. The badge reads the live score, so it updates when the ranking does.

Markdown

[![composition-patterns — ranked #18 in Frontend & UI on Top Agent Skills](https://top-agent-skills.com/badge/composition-patterns.svg)](https://top-agent-skills.com/skill/composition-patterns)

HTML

<a href="https://top-agent-skills.com/skill/composition-patterns"><img src="https://top-agent-skills.com/badge/composition-patterns.svg" alt="composition-patterns — ranked #18 in Frontend & UI on Top Agent Skills"></a>

Editorial picks