feat: strengthen design skill and refresh all showcases

packages/skill/references/typography.md

@@ -39,6 +39,8 @@
 
 이름과 인상으로 고르지 마라. 다음 넷을 본다.
 
+실제 proof에는 패밀리, 계산된 크기, 행간, 본문 폭을 따로 기록한다. 같은 CSS px도 글꼴의 x-height·획·글자틀에 따라 같은 광학 크기로 보이지 않는다. 선호와 읽기 성능도 같은 값이 아니므로 [Wallace et al.](./visual-perception-research.md#wallace-et-al-2022)의 조건처럼 실제 독자·문자 체계·과업에서 분리해 확인한다.
+
 - **x-height 비율** — 소문자 높이와 본문 크기의 관계. 단일 임계값으로 가독성을 판정하지 말고 실제 크기·언어·렌더링에서 확인한다
 - **대비** — 획 굵기 차이. 큰 크기에서만 살아나는 폰트가 있다
 - **웨이트 범위** — 필요한 웨이트가 실제로 있는가. 없는 웨이트를 브라우저가 합성하면 뭉개진다
@@ -93,7 +95,7 @@ h1 { font-optical-sizing: auto; }
 
 ### 애니메이션
 
-가변 축은 애니메이션할 수 있지만 **레이아웃을 다시 계산한다.** 하드 게이트 8이 금지하는 종류다. 글자 굵기를 움직이고 싶으면 `opacity` 로 두 겹을 교차시켜라.
+가변 축 애니메이션은 레이아웃 계산 비용을 만들 수 있다. 자동 금지가 아니라, 3단계의 성능 예산 안에서 비용·입력 간섭·감소 모션 경로·상태 피드백을 실제 기기와 브라우저에서 측정해 채택한다. 글자 굵기 변화가 필요하지만 그 조건을 충족하지 못하면 `opacity`로 두 겹을 교차시키는 대안을 검토한다.
 
 ---