vercel-composition-patterns

Refactor React components with composition patterns to replace boolean props.

1|Updated Aug 25, 2024

Search Tags:#context #react #providers #design-patterns #compound-components #composition-patterns #react19

Ready to run

npx skills add https://github.com/7loro/dotfiles --skill vercel-composition-patterns-7loro

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-composition-patterns
Source: https://github.com/7loro/dotfiles/tree/main/dot_config/agents/skills/vercel-composition-patterns
Command: npx skills add https://github.com/7loro/dotfiles --skill vercel-composition-patterns-7loro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React codebases often suffer from boolean prop proliferation, leading to complex, hard-to-maintain conditional rendering. This Skill provides proven composition patterns to structure components as explicit variants, functional compound components, and shareable context providers, reducing hard-to-reason about props and improving scalability.

Core Features & Use Cases

Explicit variant components (e.g., ThreadComposer, EditMessageComposer, ForwardMessageComposer) that assemble UI from a shared Frame and subcomponents.
Compound components with a shared context, enabling flexible composition without prop drilling.
Context-based state management with a generic interface (state, actions, meta) to permit swapping implementations (local vs. global) without touching UI.

Quick Start

Use the vercel-composition-patterns skill to refactor a large React component that uses many boolean props by introducing a Frame-based composer, a ThreadComposer, and a ChannelProvider to lift state into a provider.

Frequently Asked Questions about vercel-composition-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I refactor React components to stop using boolean props for conditional rendering?▼

Refactor React components by replacing boolean props with explicit variant components and compound components. This pattern uses a shared Frame to assemble UI, reducing complex conditional logic and improving codebase scalability.

What are compound components in React and when should I use them?▼

Compound components are a React design pattern where subcomponents share a context to enable flexible composition without prop drilling. Use them when building reusable component libraries that require scalable, explicit variant structures.

Can I use React context providers to manage state without prop drilling in a large codebase?▼

Yes, React context providers enable state management without prop drilling by exposing a generic interface of state, actions, and meta. This approach permits swapping local and global implementations without touching the UI layer.

What is the best way to structure explicit variant components in a React library?▼

The best way to structure explicit variant components is assembling them from a shared Frame and targeted subcomponents, such as ThreadComposer or ForwardMessageComposer, ensuring robust composition and reducing hard-to-reason-about props.

Do I need to understand React 19 APIs to apply these composition patterns?▼

Yes, applying these React composition patterns requires an understanding of compound components, context providers, and React 19 APIs to successfully architect scalable components and refactor large codebases.