Component API Design

A design system's whole promise to its consumers is that learning one component's API transfers to the next one. That promise only holds if anatomy, props, and composition seams are designed with a shared discipline instead of invented fresh per component — otherwise two Buttons name their icon-position prop differently, one component's "variant" means visual style while another's means something else, and every consumer has to relearn the system one component at a time. This skill applies Nathan Curtis' (EightShapes) anatomy, property, and composability vocabulary from his 2023 Smashing Magazine design systems workshop to keep a new or revised component's API consistent with the rest of the system it lives in.

Anatomy: Elements, Naming, and Dependencies

A component's anatomy is defined to identify what's included and excluded, name each element in the component's context, and clarify which elements are required or optional.