@infomind-ux/infoux-mcp 0.1.0

package/data/references/krds-tokens.md

@@ -0,0 +1,201 @@
+# INFOUX 파운데이션 토큰 카탈로그
+
+> 자동 생성됨. 직접 수정 금지.
+> 출처: `tokens/foundation.json` + `tokens/brand.json` (합성 결과)
+> 빌드: c8f34dd
+
+색상, 기본 폰트, 브레이크포인트는 이 문서의 토큰을 사용한다. 임의 hex/rgb/hsl 색상 작성은 금지한다. 간격·크기·타이포 스케일·모션·z-index는 토큰 카탈로그 대상이 아니며 CSS/Tailwind 직접값으로 작성한다.
+
+---
+
+## 색상
+
+### Primary (브랜드 / 액션 강조)
+
+| 단계 | 토큰 | hex |
+|------|------|-----|
+| 5 | `--color-primary-5` | `#ecf2fe` |
+| 10 | `--color-primary-10` | `#d8e5fd` |
+| 20 | `--color-primary-20` | `#b1cefb` |
+| 30 | `--color-primary-30` | `#86aff9` |
+| 40 | `--color-primary-40` | `#4c87f6` |
+| 50 | `--color-primary-50` | `#256ef4` |
+| 60 | `--color-primary-60` | `#0b50d0` |
+| 70 | `--color-primary-70` | `#083891` |
+| 80 | `--color-primary-80` | `#052561` |
+| 90 | `--color-primary-90` | `#03163a` |
+| 95 | `--color-primary-95` | `#020f27` |
+
+**시맨틱 별칭**: `--color-primary` = primary-50 / `--color-primary-hover` = 60 / `--color-primary-pressed` = 70
+
+### Gray (무채색 — 텍스트/배경/보더)
+
+| 단계 | 토큰 | hex |
+|------|------|-----|
+| 0 | `--color-gray-0` | `#ffffff` |
+| 5 | `--color-gray-5` | `#f4f5f6` |
+| 10 | `--color-gray-10` | `#e6e8ea` |
+| 20 | `--color-gray-20` | `#cdd1d5` |
+| 30 | `--color-gray-30` | `#b1b8be` |
+| 40 | `--color-gray-40` | `#8a949e` |
+| 50 | `--color-gray-50` | `#6d7882` |
+| 60 | `--color-gray-60` | `#58616a` |
+| 70 | `--color-gray-70` | `#464c53` |
+| 80 | `--color-gray-80` | `#33363d` |
+| 90 | `--color-gray-90` | `#1e2124` |
+| 95 | `--color-gray-95` | `#131416` |
+| 100 | `--color-gray-100` | `#000000` |
+
+### Danger (오류/삭제)
+
+| 단계 | 토큰 | hex |
+|------|------|-----|
+| 5 | `--color-danger-5` | `#fdefec` |
+| 10 | `--color-danger-10` | `#fcdfd9` |
+| 20 | `--color-danger-20` | `#f7afa1` |
+| 30 | `--color-danger-30` | `#f48771` |
+| 40 | `--color-danger-40` | `#f05f42` |
+| 50 | `--color-danger-50` | `#de3412` |
+| 60 | `--color-danger-60` | `#bd2c0f` |
+| 70 | `--color-danger-70` | `#8a240f` |
+| 80 | `--color-danger-80` | `#5c180a` |
+| 90 | `--color-danger-90` | `#390d05` |
+| 95 | `--color-danger-95` | `#260903` |
+
+### Warning (경고)
+
+| 단계 | 토큰 | hex |
+|------|------|-----|
+| 5 | `--color-warning-5` | `#fff3db` |
+| 10 | `--color-warning-10` | `#ffe0a3` |
+| 20 | `--color-warning-20` | `#ffc95c` |
+| 30 | `--color-warning-30` | `#ffb114` |
+| 40 | `--color-warning-40` | `#c78500` |
+| 50 | `--color-warning-50` | `#9e6a00` |
+| 60 | `--color-warning-60` | `#8a5c00` |
+| 70 | `--color-warning-70` | `#614100` |
+| 80 | `--color-warning-80` | `#422c00` |
+| 90 | `--color-warning-90` | `#2e1f00` |
+| 95 | `--color-warning-95` | `#241800` |
+
+### Success (성공)
+
+| 단계 | 토큰 | hex |
+|------|------|-----|
+| 5 | `--color-success-5` | `#eaf6ec` |
+| 10 | `--color-success-10` | `#d8eedd` |
+| 20 | `--color-success-20` | `#a9dab4` |
+| 30 | `--color-success-30` | `#7ec88e` |
+| 40 | `--color-success-40` | `#3fa654` |
+| 50 | `--color-success-50` | `#228738` |
+| 60 | `--color-success-60` | `#267337` |
+| 70 | `--color-success-70` | `#285d33` |
+| 80 | `--color-success-80` | `#1f4727` |
+| 90 | `--color-success-90` | `#122b18` |
+| 95 | `--color-success-95` | `#0e2012` |
+
+### Information (정보)
+
+| 단계 | 토큰 | hex |
+|------|------|-----|
+| 5 | `--color-info-5` | `#e7f4fe` |
+| 10 | `--color-info-10` | `#d3ebfd` |
+| 20 | `--color-info-20` | `#9ed2fa` |
+| 30 | `--color-info-30` | `#5fb5f7` |
+| 40 | `--color-info-40` | `#2098f3` |
+| 50 | `--color-info-50` | `#0b78cb` |
+| 60 | `--color-info-60` | `#096ab3` |
+| 70 | `--color-info-70` | `#085691` |
+| 80 | `--color-info-80` | `#053961` |
+| 90 | `--color-info-90` | `#03253f` |
+| 95 | `--color-info-95` | `#021a2c` |
+
+### Point (강조 — 빨강)
+
+| 단계 | 토큰 | hex |
+|------|------|-----|
+| 5 | `--color-point-5` | `#fbeff0` |
+| 10 | `--color-point-10` | `#f5d6d9` |
+| 20 | `--color-point-20` | `#ebadb2` |
+| 30 | `--color-point-30` | `#e0858c` |
+| 40 | `--color-point-40` | `#d65c66` |
+| 50 | `--color-point-50` | `#d63d4a` |
+| 60 | `--color-point-60` | `#ab2b36` |
+| 70 | `--color-point-70` | `#7a1f26` |
+| 80 | `--color-point-80` | `#521419` |
+| 90 | `--color-point-90` | `#310c0f` |
+| 95 | `--color-point-95` | `#21080a` |
+
+### 시맨틱 — 텍스트
+
+| 토큰 (시맨틱 별칭) | 참조 | 용도 |
+|-------------------|------|------|
+| `--color-text` | gray-90 | 본문 (기본) |
+| `--color-text-bolder` | gray-95 | 가장 진한 텍스트 |
+| `--color-text-subtle` | gray-70 | 보조 텍스트 |
+| `--color-text-disabled` | gray-40 | 비활성 텍스트 |
+| `--color-text-inverse` | gray-0 | 다크 배경 위 텍스트 |
+| `--color-danger-text` | danger-60 | 오류 텍스트 |
+| `--color-warning-text` | warning-60 | 경고 텍스트 |
+| `--color-success-text` | success-60 | 성공 텍스트 |
+| `--color-info-text` | information-60 | 정보 텍스트 |
+
+### 시맨틱 — 배경/표면
+
+| 토큰 | 참조 | 용도 |
+|------|------|------|
+| `--color-bg` | gray-0 | 페이지 기본 배경 (흰색) |
+| `--color-bg-subtler` | gray-5 | 보조 배경 (헤더 띠 등) |
+| `--color-bg-subtle` | gray-10 | 더 진한 보조 배경 |
+| `--color-bg-inverse` | gray-90 | 다크 배경 |
+| `--color-bg-dim` | alpha-black-75 | 모달 dim |
+| `--color-surface` | gray-0 | 카드/패널 표면 |
+| `--color-surface-subtler` | gray-5 | 보조 표면 |
+| `--color-surface-disabled` | gray-20 | 비활성 표면 |
+| `--color-danger-surface` | danger-5 | 오류 알림 배경 |
+| `--color-warning-surface` | warning-5 | 경고 알림 배경 |
+| `--color-success-surface` | success-5 | 성공 알림 배경 |
+| `--color-info-surface` | information-5 | 정보 알림 배경 |
+
+### 시맨틱 — 보더
+
+| 토큰 | 참조 |
+|------|------|
+| `--color-border` | gray-30 (default) |
+| `--color-border-light` | gray-20 |
+| `--color-border-dark` | gray-60 (active hover) |
+| `--color-border-primary` | primary-50 (focus) |
+| `--color-border-disabled` | gray-30 |
+
+### 기본 폰트
+
+| 토큰 | 값 | 용도 |
+|------|----|------|
+| `--font-sans` | `'Pretendard GOV', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif` | 본문/컴포넌트 기본 폰트 |
+| `--font-mono` | `'JetBrains Mono', 'D2Coding', SFMono-Regular, Consolas, monospace` | 코드/고정폭 텍스트 |
+
+### 브레이크포인트
+
+| 토큰 | 값 | 용도 | Tailwind variant |
+|------|----|------|------------------|
+| `--breakpoint-mobile` | `360px` | 모바일 기준 뷰포트 | `mobile:` |
+| `--breakpoint-tablet` | `768px` | 태블릿 이상 | `tablet:` |
+| `--breakpoint-pc` | `1280px` | PC 이상 | `pc:` |
+
+---
+
+## 사용 원칙
+
+- 색상은 `--color-*` 시맨틱 토큰을 우선 사용한다.
+- 단계 색상은 예외적으로 명도가 필요한 경우에만 `--color-{group}-{step}`을 사용한다.
+- 폰트 패밀리는 `--font-sans`, `--font-mono`만 사용한다.
+- 브레이크포인트는 360 / 768 / 1280 세 단계만 사용한다.
+- Tailwind 반응형 variant는 `mobile:` / `tablet:` / `pc:`만 사용하고 `sm:` / `md:` / `lg:` / `xl:` / `2xl:`는 사용하지 않는다.
+- 단순 반응형 속성 변경은 CSS 파일 내부에서도 `@apply tablet:*`, `@apply pc:*`를 우선 사용한다.
+- 복잡한 중첩 선택자나 여러 하위 요소를 동시에 제어해야 할 때만 `@media`를 사용하고, 관련 선택자 내부에 중첩한다.
+- 파일 하단에 브레이크포인트별 `@media` 블록을 몰아두지 않는다.
+- 순수 CSS `@media (min-width: var(--breakpoint-*))`는 표준으로 쓰지 않는다. 직접 `@media`가 필요하면 `768px`, `1280px` 값을 명시한다.
+- 간격, 크기, 타이포 스케일, 반경, 그림자, 모션, z-index는 토큰화하지 않는다.
+- 해당 값들은 `@apply`의 Tailwind 유틸리티 또는 명확한 CSS 직접값으로 작성한다.
+- `tokens/build/tokens.css`는 자동 생성물이므로 직접 수정하지 않는다.
+

package/data/references/project-profiles.md

@@ -0,0 +1,99 @@
+# 사이트 유형 판정 기준
+
+KRDS 체크리스트는 모든 프로젝트에 같은 방식으로 적용하지 않는다. 코드 생성 전 사이트 유형을 먼저 판정하고, 공통 품질 규칙과 조건부 정부/공공 규칙을 분리한다.
+
+## 사이트 유형
+
+| 유형 | 적용 대상 | 기본 생성 | 조건부/제외 |
+|------|-----------|-----------|-------------|
+| 일반사이트 | 민간 기업, 브랜드, 캠페인, 포트폴리오, 회사 홈페이지 | 시맨틱 구조, 접근성, 색상 토큰, 반응형, 브랜드 표현 | 정부 상징/공식 배너/운영기관 식별자 제외 |
+| 공공서비스 | 중앙부처·지자체·공공기관이 시민에게 제공하는 민원, 신청, 조회, 정책, 참여 서비스 | KRDS 접근성·컴포넌트·서비스 패턴 적극 적용, 신청/검색/로그인/알림 흐름 보강 | 공식 배너/정부 상징/운영기관 식별자는 과업·기관 정책 확인 시만 |
+| 공공기관 | 공기업, 출자·출연기관, 산하기관, 재단, 공공기관 대표 홈페이지 | 공공 톤의 헤더/푸터, 기관 식별, 정보공개/공지/홍보 구조 | 정부 상징은 기본값 아님. 기관 CI/BI와 과업 요구 우선 |
+| CMS·관리자 | CMS, 관리자, 사내 업무 시스템, 운영 콘솔 | 고밀도 정보 구조, 폼/테이블/검색/필터/상태 패턴, 접근성 | 정부 아이덴티티 제외. 공공 운영 CMS라도 관리자 화면에는 업무 효율 우선 |
+| 커머스·예약 | 쇼핑몰, 면세점, 예약, 결제, 이벤트·프로모션 | 상품/주문/결제 접근성, 명확한 CTA, 전환 흐름 | 법정 링크, 환불/교환/개인정보 안내. 공공기관 운영이면 공공기관 조건과 병행 |
+
+## 항상 생성에 반영
+
+- `html lang`, 고유한 `<title>`, viewport
+- `<a href="#main" class="skip-to-content">본문 바로가기</a>`
+- `header#header`, `main#main`, `footer#footer`
+- `main > section > .container`
+- 각 `section`의 heading 또는 `aria-labelledby`/`aria-label`
+- 버튼/링크/폼/이미지/테이블의 접근성 기본값
+- `var(--color-*)` 색상 토큰, `var(--font-*)` 기본 폰트
+- 포커스 표시, 키보드 접근, 터치 영역 44x44px 이상
+- 상태 표현은 색상 + 텍스트/아이콘/ARIA를 함께 사용
+
+## 유형별 Page Shell
+
+사이트 유형 판정은 HTML 구조 선택으로 이어져야 한다. 정부/공공 아이덴티티 요소는 조건부 생성 항목이며, 아래 shell에는 기본 포함하지 않는다.
+
+| 유형 | 기본 section 흐름 | 우선 컴포넌트 |
+|------|-------------------|---------------|
+| 일반사이트 | `section--intro` → `section--content` → `section--list` 또는 `section--notice` | header, main-menu, card, list, btn |
+| 공공서비스 | `section--search` 또는 `section--intro` → `section--process` → `section--form` 또는 `section--data` → `section--notice` | breadcrumb, step-indicator, form, alert, table |
+| 공공기관 | `section--intro` → `section--notice` → `section--list` → `section--content` | header, main-menu, breadcrumb, card, pagination |
+| CMS·관리자 | `section--search` → `section--data` → `section--form` 또는 `section--notice` | form, select, table, pagination, badge, toast |
+| 커머스·예약 | `section--intro` → `section--list` → `section--form` 또는 `section--process` → `section--notice` | card, btn, form, step-indicator, alert |
+
+공통 page shell:
+
+```html
+<a href="#main" class="skip-to-content">본문 바로가기</a>
+
+<header id="header" class="site-header">
+  <div class="container">...</div>
+</header>
+
+<main id="main">
+  <section class="section section--content" aria-labelledby="section-title">
+    <div class="container">
+      <h1 id="section-title">페이지 제목</h1>
+      ...
+    </div>
+  </section>
+</main>
+
+<footer id="footer" class="site-footer">
+  <div class="container">...</div>
+</footer>
+```
+
+## 조건부 생성
+
+| 항목 | 생성 조건 | 생성하지 않는 경우 |
+|------|-----------|--------------------|
+| 공식 배너 | 공공서비스 중 정부 상징 사용이 명시되었거나 과업에서 요구됨 | 일반사이트, CMS·관리자, 커머스, 기관 정책 미확인 |
+| 정부 상징 로고 | 정부 상징 사용 대상 서비스로 확인됨 | 자체 CI/BI가 우선인 일반사이트·공공기관·사내 프로젝트 |
+| 운영기관 식별자 | 상위 운영기관 표시가 과업에 포함됨 | 운영기관 계층이 없거나 브랜드 사이트인 경우 |
+| 공공 푸터 필수 링크 | 공공서비스 또는 공공기관 웹사이트 납품/운영 요구가 있음 | 일반사이트는 해당 법정/운영 링크로 대체 |
+| 검색/로그인/신청/정책 서비스 패턴 | 해당 사용자 여정이 실제 화면에 존재함 | 해당 기능이 없는 화면 |
+
+## 판정 규칙
+
+1. 사이트 유형이 명시되어 있으면 그 유형을 따른다.
+2. 명시가 없으면 일반사이트 또는 CMS·관리자로 가정하고 정부 아이덴티티 요소는 생성하지 않는다.
+3. 공공서비스와 공공기관을 구분한다. 민원/신청/조회/정책 처리처럼 사용자 과업이 중심이면 공공서비스, 기관 소개/공지/정보공개/홍보가 중심이면 공공기관이다.
+4. 공공기관 프로젝트라도 공식 배너와 정부 상징은 과업지시서, 기관 정책, 운영 주체가 확인된 경우에만 생성한다.
+5. 적용 제외 항목은 체크리스트에서 `N/A`로 기록한다.
+6. KRDS 패턴을 변형하면 `조건부 PASS`로 사유와 대체 기준을 기록한다.
+
+## LLM 판정 절차
+
+코드 생성 전에 다음 순서로 사이트 유형을 판정한다.
+
+1. 사용자의 명시 표현을 찾는다: 정부, 지자체, 공공기관, 공기업, 산하기관, 민간, 기업, 브랜드, 쇼핑몰, 관리자, CMS, 사내 시스템.
+2. 클라이언트/운영 주체를 확인한다: 일반 회사면 일반사이트, 내부 업무 시스템이면 CMS·관리자, 중앙부처·지자체·공공기관이면 공공서비스 또는 공공기관 후보로 둔다.
+3. 사이트 목적을 확인한다: 민원/신청/정책/조회/참여 중심이면 공공서비스, 기관 소개/공지/정보공개/홍보 중심이면 공공기관, 상품/예약/결제면 커머스·예약, 운영/관리/통계면 CMS·관리자다.
+4. 정부 상징 사용 여부를 별도 판정한다. 공공서비스·공공기관이라도 정부 상징 사용이 확인되지 않으면 공식 배너와 정부 상징 로고는 생성하지 않는다.
+5. 증거가 부족하면 사용자에게 짧게 확인한다. 단, 구현을 계속해야 하는 상황에서는 정부 아이덴티티 요소를 제외하고 공통 접근성/구조 규칙만 적용한다.
+
+## 판정 예시
+
+| 입력 단서 | 판정 | 생성 방향 |
+|-----------|------|-----------|
+| "인포마인드 홈페이지 리뉴얼" | 일반사이트 | 회사 홈페이지. 브랜드 표현 + 접근성/시맨틱 구조. 정부 아이덴티티 N/A |
+| "JDC면세점 반응형 홈페이지" | 공공기관 + 커머스·예약 성격 | 기관 운영 맥락과 상품/구매 흐름 병행. 공식 배너는 요구 확인 전 생성 금지 |
+| "CMS inSTACK 관리자" | CMS·관리자 | 고밀도 폼/테이블/검색. 정부 아이덴티티 N/A |
+| "지자체 민원 신청 서비스" | 공공서비스 | 신청 서비스 패턴 적용. 정부 상징/공식 배너는 과업 확인 후 |
+| "쇼핑몰 이벤트 페이지" | 커머스·예약 또는 일반사이트 | 상품/구매 흐름과 법정 링크 중심 |

package/data/references/snippet-template.md

@@ -0,0 +1,185 @@
+# 스니펫 표준 템플릿 — `src/snippets/{component}.md`
+
+> 28개 KRDS 컴포넌트의 스니펫 문서가 따르는 표준 구조.
+> 새 컴포넌트 추가 시 본 템플릿을 복사해서 시작한다.
+> `scripts/check-snippet-structure.js`가 필수 섹션 누락을 자동 검출한다.
+
+---
+
+## 표준 섹션 순서
+
+```markdown
+# [한글명] ([영문명]) — KRDS
+
+## 기본 마크업           ← 필수
+## 시맨틱 구조           ← 필수 (R-15/R-16 매핑 인용)
+## Variant               ← 선택 (variant 있을 때만)
+## Size                  ← 선택 (size 있을 때만)
+## 상태                  ← 선택 (개별 상태가 있을 때만, BEM modifier + ARIA)
+## 동작 (JS)             ← 선택 (JavaScript 동작 필요 시)
+## 접근성                ← 필수 (ARIA + 키보드 + 색상 대비)
+## 출처                  ← 필수 (KRDS 토큰명 + 참조)
+```
+
+---
+
+## 각 섹션 작성 규약
+
+### 1. `## 기본 마크업` (필수)
+
+가장 단순한 형태의 권장 마크업 1개. 변형이 다양한 경우는 서브헤더(`###`)로 분리.
+
+```markdown
+## 기본 마크업
+
+\`\`\`html
+<article class="card">
+  <header class="card__header">
+    <h3 class="card__title">제목</h3>
+  </header>
+</article>
+\`\`\`
+```
+
+다중 형태(예: `check-radio`)는:
+
+```markdown
+## 기본 마크업
+
+### 체크박스
+
+\`\`\`html
+<label class="check">...</label>
+\`\`\`
+
+### 라디오
+
+\`\`\`html
+<label class="radio">...</label>
+\`\`\`
+```
+
+### 2. `## 시맨틱 구조` (필수)
+
+`html-semantics.md` 매핑을 인용. Root 태그 + 자식 시맨틱 + 필수 ARIA 키워드만 짧게.
+
+```markdown
+## 시맨틱 구조
+
+- **Root 태그**: `<article>` (독립 콘텐츠) / `<section>` (관련 그룹) / `<a>` (전체 링크)
+- **자식**: `header > h3` (제목) → `body` → `footer`
+- **필수 ARIA**: — (시맨틱 태그만으로 충분)
+
+> 상세: `skill/references/html-semantics.md#card`
+```
+
+### 3. `## Variant` (선택)
+
+KRDS 정의 variant만 표로 정리. R-18 시각 단어 사용 금지.
+
+```markdown
+## Variant (KRDS 정의 — 4종)
+
+| Variant | 클래스 | 용도 |
+|---------|--------|------|
+| Primary | `.btn--primary` | 메인 CTA |
+| ... | | |
+```
+
+### 4. `## Size` (선택)
+
+KRDS 사이즈 스케일(`xsmall`/`small`/`medium`/`large`/`xlarge`)만 사용.
+
+```markdown
+## Size (KRDS 정의 — 5종)
+
+| Size | 클래스 | 높이 | 권장 |
+|------|--------|------|------|
+| xsmall | `.btn--xsmall` | 32px | 데스크탑 dense |
+| ... | | | |
+```
+
+### 5. `## 상태` (선택)
+
+상태가 분명히 정의된 컴포넌트(disclosure 열림/닫힘, tab 선택, modal 열림 등)만 명시.
+
+R-17에 따라 **BEM modifier + ARIA 속성**을 항상 짝지어 표기:
+
+```markdown
+## 상태
+
+| 상태 | 클래스 | ARIA |
+|------|--------|------|
+| 선택됨 | `.tab__item--selected` | `aria-selected="true"` |
+| 비활성 | (native `disabled`) | `aria-disabled="true"` |
+```
+
+### 6. `## 동작 (JS)` (선택)
+
+JavaScript 동작이 필요한 위젯(modal, tab, accordion, carousel, calendar, tooltip)만. 풀 구현 대신 핵심 시그니처/이벤트만.
+
+```markdown
+## 동작 (JS — 별도 구현)
+
+- 열기: `modal.show()` — `hidden` 속성 제거, 첫 focusable 요소로 포커스 이동
+- 닫기: `modal.close()` — 트리거로 포커스 복귀
+- ESC 키 처리, 포커스 트랩 구현
+```
+
+### 7. `## 접근성` (필수)
+
+WAI-ARIA 1.2 APG + KWCAG/WCAG 2.1 AA 기준의 컴포넌트별 체크리스트.
+
+```markdown
+## 접근성
+
+- ARIA: `role="dialog"` + `aria-modal="true"` + `aria-labelledby` (필수)
+- 키보드: `Esc` 닫기 / `Tab` 포커스 트랩 / 트리거로 포커스 복귀
+- 색상 대비: KRDS 토큰 사용 시 AA 자동 충족
+- 모션: `prefers-reduced-motion: reduce` 시 전환 효과 비활성화
+```
+
+### 8. `## 출처` (필수)
+
+KRDS 토큰 / 컴포넌트 / 외부 표준 참조.
+
+```markdown
+## 출처
+
+- 카드 padding/반경은 프로젝트 밀도에 맞는 CSS/Tailwind 직접값 사용
+- WAI-ARIA: dialog pattern (https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)
+```
+
+---
+
+## 작성 시 자가 점검
+
+코드 한 줄 작성 전:
+
+- [ ] 기존 컴포넌트 카탈로그(`krds-components.md`)를 먼저 확인했는가?
+- [ ] HTML 기본 골격이 `header/main/footer`, `main > section > .container` 구조와 충돌하지 않는가? (R-15)
+- [ ] 인터랙티브 컴포넌트면 필수 ARIA가 들어갔는가? (R-16)
+- [ ] modifier가 KRDS 의미적 어휘인가? (R-18 — `--blue`, `--big` 같은 시각 단어 금지)
+- [ ] 상태 클래스는 BEM modifier로만 했는가? (R-17 — `.is-*` 금지)
+
+---
+
+## 신규 컴포넌트 생성 시 권장 순서
+
+1. 기존 카탈로그로 해결 가능한지 확인하고, 필요 시 UX팀 결정 → 프로젝트 패턴 또는 공통 컴포넌트 후보로 정리
+2. `src/snippets/{name}.md` 본 템플릿 복사해 채움
+3. `src/styles/6-components/{name}.css` 작성 (BEM + 색상 토큰, 필요 시 CSS nesting + `@apply`)
+4. `src/playground/{name}.html` 미리보기 추가
+5. `site/components/{name}.md` 문서 페이지
+6. `html-semantics.md`에 매핑 추가 + `check-html-structure.js` 매핑 갱신
+7. `npm run build:references && npm run build:mcp` 실행
+
+---
+
+## 참고
+
+- 카탈로그: `skill/references/krds-components.md`
+- 시맨틱 매핑: `skill/references/html-semantics.md`
+- 토큰: `skill/references/krds-tokens.md`
+- 접근성: `skill/references/accessibility.md`
+- 금지 패턴: `skill/references/forbidden-patterns.md`

package/data/references/tailwind-mapping.md

@@ -0,0 +1,53 @@
+# Tailwind v4 매핑
+
+INFOUX는 Tailwind v4 `@theme`에 색상과 폰트만 공개한다.
+
+## 색상 유틸리티
+
+| Tailwind | 토큰 | 용도 |
+|----------|------|------|
+| `bg-primary` | `--color-primary` | 메인 액션 |
+| `bg-primary-hover` | `--color-primary-hover` | hover 상태 |
+| `bg-primary-pressed` | `--color-primary-pressed` | active 상태 |
+| `text-text` | `--color-text` | 본문 텍스트 |
+| `text-text-bolder` | `--color-text-bolder` | 강조 텍스트 |
+| `text-text-subtle` | `--color-text-subtle` | 보조 텍스트 |
+| `text-text-disabled` | `--color-text-disabled` | 비활성 텍스트 |
+| `text-text-inverse` | `--color-text-inverse` | 어두운 배경 위 텍스트 |
+| `bg-bg` | `--color-bg` | 기본 배경 |
+| `bg-bg-subtler` | `--color-bg-subtler` | 보조 배경 |
+| `bg-surface` | `--color-surface` | 카드/패널 표면 |
+| `border-border` | `--color-border` | 기본 보더 |
+| `border-border-light` | `--color-border-light` | 약한 보더 |
+| `border-border-primary` | `--color-border-primary` | 활성 보더 |
+| `text-danger-text` | `--color-danger-text` | 오류 텍스트 |
+| `bg-danger-surface` | `--color-danger-surface` | 오류 배경 |
+
+단계 색상은 예외적으로만 사용한다.
+
+| Tailwind | 토큰 |
+|----------|------|
+| `bg-primary-{5..95}` | `--color-primary-{5..95}` |
+| `bg-secondary-{5..95}` | `--color-secondary-{5..95}` |
+| `bg-gray-{0,5,10,..,95,100}` | `--color-gray-*` |
+| `bg-danger-{5..95}` | `--color-danger-*` |
+| `bg-warning-{5..95}` | `--color-warning-*` |
+| `bg-success-{5..95}` | `--color-success-*` |
+| `bg-info-{5..95}` | `--color-info-*` |
+
+## 폰트 유틸리티
+
+| Tailwind | 토큰 |
+|----------|------|
+| `font-sans` | `--font-sans` |
+| `font-mono` | `--font-mono` |
+
+## 직접값 사용
+
+간격, 크기, 타이포 스케일, 반경, 그림자, 모션, z-index는 Tailwind arbitrary value 또는 CSS 직접값으로 작성한다.
+
+```css
+.card {
+  @apply p-[2.4rem] rounded-[0.6rem] shadow-[0_0.8rem_1.6rem_#00000014];
+}
+```