feat(skill): route fixes, delivery report, composition diversity, platform refresh

- route table: extension route for products with an existing visual
  language, feedback row, derived state tokens stay local
- completion: blocking 0 plus reported unverified; hard-gate surface is
  the touched scope; delivery report starts with what and how to open
- design.md created at step 0 with a skeleton, fingerprint line and
  change log; product-surface rubric reading; direction delegation
  states the chosen card and reason
- layout: hero families, nav forms, footer forms; art-direction page
  convergence 6 axes; genre sections; image treatments; placeholder
  conventions; multi-screen order; Tailwind theme mapping
- platform: scroll-driven examples, anchor positioning, canvas OT,
  three/R3F pins, shadcn style prefixes, Safari 26 notes, subgrid
- design-gate: four result states, exit codes, cwd module resolution,
  --url/--out-dir/--strict, oklch contrast, dead selector word match
- Korean font budget split from the Latin baseline

packages/skill/references/icons.md

@@ -15,7 +15,7 @@
 | 토글·재생 버튼처럼 아이콘이 상태에 따라 바뀐다 | §5 |
 | 아이콘+텍스트 버튼의 패딩이 어긋나 보인다 | §6 |
 | RTL 로케일을 지원한다 | §7 |
-| 아이콘만 있는 버튼의 접근성 이름 | §8 |
+| 아이콘만 있는 버튼의 접근성 이름 · 보이는 라벨을 붙일지 | §8 · §8-1 |
 | 아이콘을 코드에서 어떻게 참조하나 | §9 |
 | 감사 직전 | §10 |
 
@@ -45,7 +45,7 @@
 |---|---|
 | `--weight-body`(400), 14~16px | `1.5px` |
 | `--weight-medium`(500)~`--weight-strong`(600) | `2px` |
-| 700 이상, 또는 단독으로 강조되는 아이콘(로고형·경고) | `2.5px`(토큰 밖 값이므로 실측 조정) |
+| 700 이상(`--weight-display` 등), 또는 단독으로 강조되는 아이콘(로고형·경고) | `2.5px`(스트로크 토큰 밖 값이므로 실측 조정) |
 
 ```css
 /* 좋음: 라벨 웨이트에 맞춘 스트로크 */
@@ -104,7 +104,7 @@
 
 ### 5-2. 전환은 정적 단서를 대신하지 않는다 — 하드 게이트
 
-**아이콘 전환(외곽선→채움, 재생→일시정지 같은 상태 전환)이 상태 변화를 전달하는 유일한 단서면 안 된다.** 색이나 `aria-pressed` 같은 상태 속성이 애니메이션 재생 여부와 무관하게 항상 함께 있어야 한다. 이는 [interaction-feel.md](interaction-feel.md) §1과 motion.md §5 "접근성 — 타협 없음"과 같은 요구이고, `prefers-reduced-motion`에서는 코드 H와 같은 원칙(정적 단서는 유지)을 따르되 scale 기반 전환이라 transition 자체를 끈다 — 전환이 없어도 상태는 즉시 바뀌어 보여야 한다.
+**아이콘 전환(외곽선→채움, 재생→일시정지 같은 상태 전환)이 상태 변화를 전달하는 유일한 단서면 안 된다.** 색이나 `aria-pressed` 같은 상태 속성이 애니메이션 재생 여부와 무관하게 항상 함께 있어야 한다. 이는 [interaction-feel.md](interaction-feel.md) §1, [accessibility.md](accessibility.md) 부록 A와 같은 요구이고, `prefers-reduced-motion`에서는 코드 H와 같은 원칙(정적 단서는 유지)을 따르되 scale 기반 전환이라 transition 자체를 끈다 — 전환이 없어도 상태는 즉시 바뀌어 보여야 한다.
 
 ### 5-3. 전환 레시피 — 관찰 후보 (시작값, 실측 조정)
 
@@ -186,6 +186,15 @@
 
 구체 패턴(`aria-label` vs 시각적으로 숨긴 텍스트, 언제 어느 쪽을 쓰는지, 검증 절차)은 이 문서가 아니라 [accessibility.md](accessibility.md)가 정본이다. 아이콘 버튼을 구현했으면 반드시 그 문서의 접근 가능한 이름 절을 확인한다.
 
+### 8-1. 보이는 라벨을 붙일지 — 프로젝트 계약
+
+접근 가능한 이름은 스크린리더 사용자의 문제를 풀 뿐이다. 화면을 보는 사용자도 아이콘의 뜻을 알아야 한다.
+
+- **보편 아이콘만 아이콘 단독을 허용한다.** 검색·닫기·메뉴·뒤로·장바구니·재생/일시정지·더보기(⋯)처럼 대부분의 사용자가 이미 아는 것이다. 그 밖의 아이콘(공유 방식, 내보내기, 보관, 도메인 고유 기능)은 **보이는 텍스트 라벨을 병기**한다. 의미가 갈리는 아이콘(하트=좋아요/저장, 별=즐겨찾기/평점)도 라벨을 붙인다.
+- **아이콘 전용 버튼에는 툴팁을 함께 둔다.** 마우스 호버뿐 아니라 키보드 포커스에서도 열리고, 해제 가능·호버 유지·지속 조건(WCAG 1.4.13)을 지킨다. 네이티브 `title` 속성은 포커스·터치로 열리지 않으므로 단독 수단이 아니다.
+- **하단 탭 바는 아이콘 + 라벨**이 기본이다. 라벨을 빼면 탭 사이 구분이 아이콘 해석에 달린다([mobile-app-ux.md](mobile-app-ux.md)).
+- 공간이 좁아 라벨을 뺐다면 그 결정과 대상 사용자를 `design.md`에 적는다.
+
 ---
 
 ## 9. 참조 방식 — 관찰 후보 (엔지니어링 관행)
@@ -208,15 +217,17 @@ function StatusIcon({ icon: Icon }) { return <Icon />; }
 
 ---
 
-## 10. 체크리스트
+## 10. 체크리스트 (구현 중 자기 점검 — 납품 판정은 preflight.md X8)
 
-- [ ] 아이콘 세트가 프로젝트 기존 세트와 같다. 한 표면에 두 세트가 섞이지 않았다
-- [ ] 스트로크 굵기가 인접 텍스트의 웨이트 토큰과 맞거나, 세트 제약으로 못 맞추면 그 사실을 기록했다
-- [ ] 가장 작게 렌더되는 크기(보통 16px)에서 실제로 확인했다
-- [ ] 상태별 색이 `currentColor` + CSS로 구동되고, 상태마다 별도 자산이 없다
-- [ ] outline/filled 상태쌍이 있으면 일관되게 default/active로 쓰인다
-- [ ] 아이콘 전환이 있으면 색·상태 속성 같은 정적 단서가 함께 있고, `prefers-reduced-motion`에서 즉시 전환된다
-- [ ] 아이콘+텍스트 버튼·비대칭 아이콘의 광학 정렬을 실제 렌더에서 확인했다
-- [ ] RTL을 지원하는 프로젝트라면 방향성 아이콘만 뒤집었다
-- [ ] 아이콘 전용 버튼에 접근 가능한 이름이 있다(`accessibility.md`)
-- [ ] 아이콘을 문자열 키가 아니라 컴포넌트로 직접 참조했다
+납품 판정은 [preflight.md](preflight.md) X8이 하고, 아이콘 전용 버튼의 접근 가능한 이름은 A11, 아이콘 전환의 감소 모션은 A7이 판정한다.
+
+- 아이콘 세트가 프로젝트 기존 세트와 같다. 한 표면에 두 세트가 섞이지 않았다
+- 스트로크 굵기가 인접 텍스트의 웨이트 토큰과 맞거나, 세트 제약으로 못 맞추면 그 사실을 기록했다
+- 가장 작게 렌더되는 크기(보통 16px)에서 실제로 확인했다
+- 상태별 색이 `currentColor` + CSS로 구동되고, 상태마다 별도 자산이 없다
+- outline/filled 상태쌍이 있으면 일관되게 default/active로 쓰인다
+- 아이콘 전환이 있으면 색·상태 속성 같은 정적 단서가 함께 있다
+- 아이콘+텍스트 버튼·비대칭 아이콘의 광학 정렬을 실제 렌더에서 확인했다
+- RTL을 지원하는 프로젝트라면 방향성 아이콘만 뒤집었다
+- 보편 아이콘이 아니면 보이는 라벨을 병기했고, 아이콘 전용 버튼은 포커스로도 열리는 툴팁이 있다(§8-1)
+- 아이콘을 문자열 키가 아니라 컴포넌트로 직접 참조했다