vercel-composition-patterns

What problem does it solve?

This Skill helps software teams design scalable React codebases by avoiding boolean prop proliferation through composition patterns, compound components, and context.

Core Features & Use Cases

• Explicit variant components: ThreadComposer, EditMessageComposer, and ForwardMessageComposer reuse shared UI primitives to replace boolean prop gates.
• Compound components with context: A central ComposerContext enables pieces like Frame, Input, and Submit to be composed without prop drilling.
• State sharing via providers: Lift state to providers so unrelated UI pieces can access and mutate shared state without tight coupling.

Quick Start

• Create explicit variant components (ThreadComposer, EditMessageComposer, ForwardMessageComposer) using the shared Composer primitives, and wire them under a common provider. Then compose simple UIs by including Frame, Input, and Submit from the Composer family.