React components without a maze of flags
Replace overloaded components with composable parts, explicit variants and shared state. Vercel illustrates component API design with concrete examples.
31,207 · GitHubvercel-labs/agent-skillsEditorial selection · source reviewedAuthor: Vercel Engineering MIT Revision 063bee9
When to use it
Refactor a component with many boolean props
Build form variants from shared pieces
Separate state management from presentation
What you’ll get
A clearer component API and a refactoring plan that preserves behavior.
For example
This editor has eight mode flags. Propose compound components and explicit variants, preserve public behavior and identify tests for existing scenarios.
Original, requirements and limits
Original skill: Vercel Engineering. Editorial description: kossolapov.com.
- Agent
- An agent that can read Agent Skills instructions; tool access depends on the host
- Tools
- React project and its component tests
- Limits
- React 19-specific advice must not be applied to React 18 unchanged.
- Composition adds structure; small components may not need this refactor.
- Editorial selection based on source inspection, not a comparative performance certification.