All agent resources
FOR AGENTS / Skills

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.

USE CASES

When to use it

  1. Refactor a component with many boolean props

  2. Build form variants from shared pieces

  3. 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.