feat(skill): absorb external design skills, restore interview gate, add review route

- Restore the step-0 interview as a mechanical gate the skill explicitly
  depends on; add harness.md (per-harness question tools, limits,
  fallbacks) and brief-interview.md (slots, question cards, rounds).
- Add 10 reference docs absorbed from external design skills
  (accessibility, interaction-feel, elevation, color, icons, product-copy,
  component-systems, critique, change-review, print-email) and extend
  existing references.
- Add a review-only route and two hard-gate clauses (truncated content
  reachability, three-flashes limit).
- design-gate: split tap targets into WCAG 2.5.8 and 44px contract layers,
  run axe-core when available, and fix false positives found on a real
  site (decorative alt="", stacked wordmark line count, url-only pages).
- lint-skill: fail if the interview gate section or its links disappear.
- Ship agents/openai.yaml and THIRD_PARTY_NOTICES.md.

packages/skill/references/antipatterns.md

@@ -5,6 +5,8 @@ AI가 만든 티는 **못 만들어서** 나는 게 아니라 결정을 설명·
 
 프리플라이트에서 이 문서를 훑어 후보를 찾는다. 검출은 실패가 아니다. 브리프·프로젝트 계약·실제 렌더를 대조해 유지·수정·제거를 결정하고 그 근거를 남긴다.
 
+**Simplicity 는 Minimalism 이 아니다** [SKILL-APPLE-DESIGN]. 요소를 지우는 것 자체가 단순함을 만들지는 않는다. **관찰 후보** — 정보·행동이 사라져 과업이 더 어려워졌다면 그것은 단순화가 아니라 손실이다. 무엇을 남길지는 과업이 정하고, 화면에 무엇이 없다는 사실만으로 단순하다고 주장하지 않는다. 아래 지문들도 같은 기준으로 읽는다 — 비어 보이거나 장식이 없다고 해서 자동으로 통과가 아니고, 요소가 많다고 자동으로 실패도 아니다.
+
 ---
 
 ## 0. 먼저 보는 반복 후보
@@ -38,6 +40,9 @@ AI가 만든 티는 **못 만들어서** 나는 게 아니라 결정을 설명·
 | **크림/베이지(`#FDF8F3`)를 "고급"의 기본값으로** | 보라를 대체한 신종 슬롭 | 크림을 쓸 거면 왜 크림인지 브리프와 연결하고 텍스트·액센트를 그에 맞춰 재설계 |
 | **여러 hue가 경쟁함** | 행동·상태·정보의 우선순위가 색 때문에 흐려질 수 있다 | 색 역할과 화면 면적을 실제 상태에서 비교한다. hue 수·60/30/10은 출발 가설일 뿐 통과 기준이 아니다 |
 | **다크에서 본문 대비 미달** | 적용 WCAG 성공 기준을 실제 배경 합성값으로 충족하는지 점검한다 | `#0f172a` 위 `#94a3b8`의 WCAG 대비는 약 **6.96:1**이므로 미달 사례가 아니다. WCAG 2.2 AA 본문 판정에는 contrast ratio를 사용하며 APCA는 이를 대체하지 않는다. 반투명·이미지 배경은 실제 렌더에서 계산한다. 출처: [WCAG 2.2 Contrast](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) |
+| **웜크림 배경 + 하이컨트라스트 세리프 + 테라코타 액센트** (배경 `#F4F1EA` 부근, 세리프 디스플레이, 액센트 `#D97757` 부근) | **관찰 후보** — 지금 AI 생성 디자인이 가장 자주 수렴하는 클러스터 중 하나다. `#D97757` 부근은 Anthropic 자체 상호작용 액센트와 겹쳐, 사용자 브리프에서는 Claude 계열 도구가 만들었다는 티로 먼저 읽힐 수 있다(자기지시적 경고) | 이 조합을 브랜드·업종 근거로 골랐는지 확인한다. 근거가 없으면 다른 웜톤이나 다른 액센트 hue를 브리프에서 다시 끌어온다. 브리프가 정확히 이 룩을 요구하면 그대로 쓴다. 출처: [SKILL-FRONTEND-DESIGN] |
+| **거의 검정 배경 + 단일 비비드 애시드그린·버미리언 액센트** | **관찰 후보** — 대비되는 두 번째 흔한 클러스터. 다크 배경 자체는 문제가 아니지만 "네온 액센트 하나"라는 조합이 브랜드와 무관하게 반복된다 | 브랜드·상태 역할과 실제 렌더 대비로 액센트 선택의 근거를 남긴다. 출처: [SKILL-FRONTEND-DESIGN] |
+| **뷰 하나에 여러 요소가 동시에 채색됨** (버튼·배지·아이콘·텍스트 링크가 한 화면에서 전부 강조색) | **관찰 후보** — 강조색이 여러 곳에 흩어지면 "지금 할 행동"을 색만으로 구분하기 어려워진다 | 뷰당 주요 행동 하나에만 채운 강조색을 쓰고, 나머지는 중성 톤이나 다른 상태 표시로 구분한다. 색 체계 상세는 `references/color.md`. 출처: [SKILL-BETTER-COLORS] |
 
 ---
 
@@ -73,6 +78,9 @@ AI가 만든 티는 **못 만들어서** 나는 게 아니라 결정을 설명·
 | **벤토 그리드를 기본 선택지로** | 타일 크기 차이가 정보 위계나 과업을 설명하지 못할 수 있다 | 벤토·단순 목록·비교 grid를 콘텐츠와 작은 폭 재배치에서 비교한다. 연도별 트렌드 주장은 근거가 아니다 |
 | **콘텐츠 여백·본문 폭이 읽기를 방해함** | viewport·글꼴·언어·확대에 따라 줄 길이와 행동 영역이 달라진다 | gutter와 measure 후보를 320px·200% 확대·넓은 폭에서 렌더해 검증한다. 고정 px·ch 범위는 출발값일 뿐이다 |
 | **푸터가 링크 4열 + 소셜 아이콘 + 카피라이트뿐** | AI가 가장 성의 없이 만드는 곳 | 실제 정보(연락처, 주소, 사업자 정보)를 넣어라. 링크가 4개뿐이면 4열로 만들지 마라 |
+| **브로드시트 클러스터** (헤어라인 룰 전체, `border-radius: 0` 전면 적용, 신문형 조밀 컬럼) | **관찰 후보** — 세 번째로 흔한 AI 생성 클러스터. 헤어라인·radius 0 자체가 나쁜 것은 아니지만 브랜드·매체 근거 없이 반복되면 에디토리얼 흉내로 읽힌다 | 브랜드·콘텐츠 밀도와 연결해 근거를 남기고, 좁은 컬럼에서 실제 가독성을 검증한다. 출처: [SKILL-FRONTEND-DESIGN] |
+| **섹션마다 페이드업 리빌 + 모든 카드에 호버 전환** (예외 없이 전부) | **관찰 후보** — 섹션 단위 등장과 카드 호버를 빠짐없이 걸면 "하나의 오케스트레이션된 모먼트"가 아니라 흩어진 장식 모션의 기본값으로 읽힌다 | 모션은 중요한 변화 한둘에만 걸고 나머지는 정적으로 둔다. `references/motion.md`의 저비용 기본·결정 표와 일관되게 선택한다. 출처: [SKILL-FRONTEND-DESIGN] |
+| **본문 전체를 justify 정렬** | **관찰 후보** — 자동 하이픈 없이 본문 전체를 양쪽 정렬하면 단어 사이 공백이 불규칙해져 읽기가 나빠질 수 있다. 한글은 어절 단위 줄바꿈이라 영향이 다르게 나타난다 | 왼쪽 정렬을 기본으로 하고, justify가 필요하면 하이픈네이션과 좁은 컬럼에서 실제 렌더로 확인한다. 세부는 `references/typography.md`. 출처: [SKILL-BETTER-TYPE] |
 
 ---
 
@@ -90,6 +98,14 @@ AI가 만든 티는 **못 만들어서** 나는 게 아니라 결정을 설명·
 | **자동 스크롤 마퀴** (로고·후기·태그가 끝없이 흐름) | 읽기·움직임 민감도·입력과 충돌할 수 있음 | 목적·정지 수단·감소 모션·성능을 검증하고, 정적 그리드 또는 페이지네이션과 비교 |
 | **hover 상태가 과업을 돕지 않음** | 포인터 반응이 행동 가능성·현재 상태·위험을 설명하지 못할 수 있다 | 링크·카드·버튼의 상태를 역할별로 설계하고, touch/keyboard에서도 같은 핵심 단서를 제공한다 |
 | **편집 불가 히어로 카피 뒤 깜빡이는 커서 `|`** | 타이핑 흉내. 정보 없음 | 삭제 |
+| **균일 radius + 흐린 동일 회색 그림자 카드 키트** (모든 카드가 같은 `border-radius`, 같은 `rgba(0,0,0,.1)` 그림자) | **관찰 후보** — SaaS 카드 키트 클러스터. 콘텐츠를 위계 없이 동일 규격 카드로 자르고 장식용 그라디언트 워시를 더하는 조합이 반복된다 | 카드 역할·중요도에 따라 radius·그림자·여백을 다르게 주거나, 카드가 아닌 다른 구조를 검토한다. 깊이 체계는 `references/elevation.md`. 출처: [SKILL-FRONTEND-DESIGN] |
+| **가운뎃점으로 이은 메타 문자열** (`A · B · C`) | **관찰 후보** — 어떤 주제에도 나타나는 템플릿 장식. 항목이 실제로 같은 범주인지, 구분자가 정보를 돕는지 점검한다 | 항목 성격이 다르면 구분자를 바꾸거나 줄을 나눈다. 실제 같은 범주라면 가운뎃점 자체는 문제가 아니다. 출처: [SKILL-FRONTEND-DESIGN] |
+| **버튼·링크 텍스트 뒤 `→` 접미사 남용** | **관찰 후보** — 모든 CTA·링크에 화살표를 붙이면 정보가 아니라 장식이 된다 | 실제로 다음 화면·다운로드·외부 이동처럼 방향성이 있는 경우에만 쓰고, 나머지는 텍스트만으로 충분한지 확인한다. 출처: [SKILL-FRONTEND-DESIGN] |
+| **작은 데이터 라벨에 장식용 모노스페이스** (자릿수 정렬이 의미 없는 라벨에 "테크 느낌"으로만 사용) | **관찰 후보** — §2의 모노스페이스 규칙(본문·제목 맥락)과 달리, 여기서는 실제 tabular 데이터인지부터 먼저 구분한다 | 숫자·코드·ID처럼 자릿수 정렬이 의미 있는 데이터에만 모노스페이스를 쓰고, 장식이면 본문 서체로 되돌린다. 출처: [SKILL-FRONTEND-DESIGN] |
+| **컨트롤처럼 보이는 정적 요소, 정적처럼 보이는 컨트롤** | **관찰 후보** — 배경·테두리·배치 구역 같은 시각 신호가 없는 상호작용 요소는 컨트롤로 보이지 않는다. 반대로 클릭할 수 없는 배지·라벨이 버튼처럼 생기면 헛클릭을 모은다 | 상호작용 요소마다 일관된 시각 신호(배경·테두리·배치 구역)를 주고, 비활성 정보는 그 신호를 빼서 구분한다. 출처: [SKILL-BETTER-LAYOUT] |
+| **테마화하지 않은 브라우저 표면** (`::selection`, `caret-color`, 스크롤바 색) | **관찰 후보** — 직접 그리지 않은 부분도 디자인의 일부다. 팔레트로 테마화하지 않으면 브라우저 기본값(파란 선택 영역, 회색 스크롤바)이 그대로 남아 "조립됐다"는 티가 가장 싸게 난다 | `::selection{background;color}`와 `caret-color`로 선택·캐럿을 팔레트에 맞춘다. `scrollbar-color`(2026-09-24 기준 Baseline Newly available — Chrome·Edge·Firefox·Safari 최신 버전은 지원하나 아직 Widely는 아니다)로 스크롤바를 테마화하고, 미지원 브라우저에서는 기본 스크롤바로 자연 열화되는지 확인한다. 출처: [SKILL-IMPECCABLE], [WEB-BASELINE] |
+| **비밀번호·OTP 필드의 붙여넣기 차단** (`onpaste=`, `addEventListener('paste', ...)`로 `preventDefault`) | **하드 게이트** — 비밀번호 관리자·2FA 자동 입력과 충돌해 WCAG 3.3.8(Accessible Authentication)이 요구하는, 인지 부담 없는 인증 경로를 막는다 | 붙여넣기를 막지 않는다. 진짜 `<form>`과 정확한 `autocomplete`(`current-password`, `one-time-code`)로 비밀번호 관리자·2FA 자동입력과 호환을 유지한다. 출처: [WCAG-AUTH], [SKILL-BETTER-A11Y] |
+| **스트리밍·채팅 UI의 자동 스크롤 추적을 직접 재구현** (바닥 고정·점프-투-레이턴트를 손으로 구현) | **관찰 후보** — 스크롤 앵커링 로직은 엣지케이스가 많아 직접 짜면 기존 라이브러리가 이미 처리한 문제를 다시 겪기 쉽다 | 라이브러리·플랫폼이 제공하는 기본 동작을 먼저 확인하고, 정말 필요할 때만 직접 구현한다. 출처: [SKILL-SHADCN] |
 
 ---
 
@@ -110,6 +126,8 @@ AI가 만든 티는 **못 만들어서** 나는 게 아니라 결정을 설명·
 
 **AI 티는 시각보다 문장에서 먼저 난다.**
 
+이 절은 브랜드 차별성을 주장하는 마케팅 카피(헤드라인·브랜드 약속)를 다룬다. 버튼·오류·빈 상태·토글 같은 제품 UI 카피의 목소리·용어 규칙은 `references/product-copy.md`.
+
 ### 진단 범위
 브랜드가 특별하다고 주장하는 헤드라인·브랜드 약속에만 제품·회사 이름을 **경쟁사 이름으로 바꿔 읽는다.** 다른 업체에도 그대로 성립하면 차별성의 근거와 구체성을 다시 본다.
 
@@ -180,6 +198,7 @@ B 라면, 반응형에서 매번 바뀌는 것을 지목한 것이다. 지목하
 | **스타카토 3연타** (`No fluff. No filler. No BS.` / `빠르게. 정확하게. 간단하게.`) | 리듬으로 내용 없음을 감춤 | 한 문장으로 구체적으로 |
 | **em-dash(—) 한 문단에 2회 이상** | AI 문장 리듬의 대표 지문 | 마침표로 끊거나 쉼표로. 한국어에서 특히 부자연스럽다 |
 | **`In today's fast-paced digital landscape...`** 도입 | 아무 말도 하지 않는 문단 | 첫 문장부터 본론. 도입 문단 삭제 |
+| 제목·라벨의 **`WORD — fragment`** 형식 (`Progress — this week`, `설정 — 계정`) | 본문 em-dash 남용(위 행)과는 별개로, 제목·라벨에서도 같은 리듬이 반복되면 템플릿 티가 난다 | 제목은 하나의 명사구나 문장으로 쓰고, 필요하면 콜론이나 줄바꿈으로 나눈다. 출처: [SKILL-FRONTEND-DESIGN] |
 
 ### 어휘 지문
 
@@ -194,6 +213,7 @@ B 라면, 반응형에서 매번 바뀌는 것을 지목한 것이다. 지목하
 | 모든 헤딩이 명사구 (`Powerful Features`, `Simple Pricing`) | 헤딩이 정보를 전달하지 않음 | 헤딩에 주장을 담아라 (`엑셀 없이 정산이 끝난다`) |
 | 레이블·서브레이블·헬퍼가 같은 말 3번 (`이메일` / `이메일 주소` / `이메일 주소를 입력하세요`) | 화면 소음 | 하나만 남긴다 |
 | 이모지로 시작하는 불릿 (`✅ 빠른 속도`) | 정보 위계를 이모지로 대체 | 일반 불릿 또는 문장으로 |
+| **내부 구현 용어가 사용자 라벨로 누출** (`webhook`, `config`, `payload`, `schema`) | 사용자는 시스템 구성요소 이름이 아니라 자신이 하는 일로 화면을 이해한다. "webhook 설정"이 아니라 "알림"을 관리하는 것이다 | 최종 사용자 어휘로 바꾼다(`webhook config` → `알림`, `payload` → `보낸 내용`). grep 후보는 §9. 출처: [SKILL-FRONTEND-DESIGN] |
 
 ---
 
@@ -242,6 +262,14 @@ shadow-lg|shadow-xl|shadow-2xl
 border-l-4|border-t-4
 backdrop-blur
 
+# 모션 — 프로젝트 계약(motion.md)
+scale\(0\)
+transition:\s*all\b
+
+# 폼 — 비밀번호 관리자 호환(§4 하드 게이트 참고)
+onpaste\s*=
+addEventListener\(['"]paste['"]
+
 # 타이포
 font-family:.*Inter
 (Space Grotesk.*Instrument Serif)|(Instrument Serif.*Geist)|(Space Grotesk.*Geist)
@@ -252,6 +280,9 @@ Get Started|Learn More|Empower|Streamline|Supercharge|Seamless
 world-class|cutting-edge|enterprise-grade|best-in-class
 It's not .* it's
 
+# 카피 — 내부 구현 용어 누출 (문맥 확인 필요, grep 자체는 후보일 뿐)
+\bwebhook\b|\bconfig\b|\bpayload\b|\bschema\b
+
 # 이모지 아이콘 (텍스트 노드)
 🚀|⚡|✨|🎯|🔥|💡|✅
 ```