18장 component를 모양이 아니라 상태 계약으로 명세한다

Button 명세는 height 48, radius 8에서 끝나지 않는다.

이름: PrimaryAction
의도: 현재 화면의 가장 중요한 reversible next step
내용: 결과를 나타내는 동사, 최대 두 줄 금지
상태: default, hover, focus-visible, active, disabled, busy
접근성: native button, visible focus, disabled 이유는 인접 text
반응형: touch target 유지, full-width는 narrow dialog에서만
금지: 한 viewport에 다른 primary action 세 개

Card도 click target, heading level, metadata 순서, empty image, sold-out state를 갖는다. component library는 screenshot collection이 아니라 상태를 재현하는 catalog가 되어야 한다.

AI가 새 page를 만들 때 기존 component를 재사용하도록 component name과 content slot을 제공한다. 모든 page에서 약간 다른 button을 생성하게 두지 않는다.