@infomind-ux/infoux-mcp 0.1.0

package/data/manifest.json

@@ -0,0 +1,286 @@
+{
+  "version": "c8f34dd",
+  "generated": "scripts/build-mcp.js",
+  "references": [
+    {
+      "id": "accessibility",
+      "file": "accessibility.md",
+      "chars": 5489,
+      "summary": "KRDS는 **WCAG 2.1 Level AA 이상 + KWCAG 2.1/2.2** 준수를 강제한다. 본 스킬도 이를 그대로 따른다."
+    },
+    {
+      "id": "forbidden-patterns",
+      "file": "forbidden-patterns.md",
+      "chars": 10600,
+      "summary": "이 문서의 패턴이 코드에서 발견되면 **즉시 작업 중단**하고 사용자에게 보고한다."
+    },
+    {
+      "id": "guide-import",
+      "file": "guide-import.md",
+      "chars": 1550,
+      "summary": "이 문서는 **UX팀이 개발팀·협력사 환경에 infoUX 기준을 배포하는 방법**과 **개발자가 활성화하는 방법**을 다룬다."
+    },
+    {
+      "id": "html-semantics",
+      "file": "html-semantics.md",
+      "chars": 19682,
+      "summary": "1. **시맨틱 우선** — 의미가 일치하는 HTML5 태그를 최우선 (`<button>` `<nav>` `<article>` `<dialog>` 등)."
+    },
+    {
+      "id": "krds-components",
+      "file": "krds-components.md",
+      "chars": 33775,
+      "summary": "아래 카탈로그에 없는 컴포넌트는 임의 생성 금지. § \"카탈로그에 없는 컴포넌트 요구 시\" 절차 따름."
+    },
+    {
+      "id": "krds-source",
+      "file": "krds-source.md",
+      "chars": 34433,
+      "summary": "- **시스템명**: KRDS (Korea Government Design System) — 한국명 \"범정부 UI/UX 디자인 시스템\""
+    },
+    {
+      "id": "krds-tokens",
+      "file": "krds-tokens.md",
+      "chars": 6700,
+      "summary": "색상, 기본 폰트, 브레이크포인트는 이 문서의 토큰을 사용한다. 임의 hex/rgb/hsl 색상 작성은 금지한다. 간격·크기·타이포 스케일·모션·z-index는 토큰 카탈로그 대상이 아니며 CSS/Tailwind 직접값으로 작성한다."
+    },
+    {
+      "id": "project-profiles",
+      "file": "project-profiles.md",
+      "chars": 4256,
+      "summary": "KRDS 체크리스트는 모든 프로젝트에 같은 방식으로 적용하지 않는다. 코드 생성 전 사이트 유형을 먼저 판정하고, 공통 품질 규칙과 조건부 정부/공공 규칙을 분리한다."
+    },
+    {
+      "id": "snippet-template",
+      "file": "snippet-template.md",
+      "chars": 3913,
+      "summary": "```markdown"
+    },
+    {
+      "id": "tailwind-mapping",
+      "file": "tailwind-mapping.md",
+      "chars": 1699,
+      "summary": "INFOUX는 Tailwind v4 `@theme`에 색상과 폰트만 공개한다."
+    }
+  ],
+  "workflows": [
+    {
+      "id": "change-token",
+      "file": "change-token.md",
+      "chars": 829,
+      "summary": "색상, 폰트, 브레이크포인트 등 INFOUX 토큰을 추가·변경·재매핑할 때 사용. foundation, semantic alias, 생성 CSS와 starter 영향 범위를 먼저 확인한다."
+    },
+    {
+      "id": "create-component",
+      "file": "create-component.md",
+      "chars": 1590,
+      "summary": "BEM 컴포넌트 일괄 생성. 컴포넌트명 입력 시 CSS + 스니펫 + playground HTML + site 문서 페이지를 생성한다. \"컴포넌트 추가\", \"새 컴포넌트\", \"create component\" 요청 시 사용."
+    },
+    {
+      "id": "design-form",
+      "file": "design-form.md",
+      "chars": 643,
+      "summary": "입력폼, 신청, 문의, 검색 조건, 로그인, 결제 정보 등 form UI를 설계하거나 수정할 때 사용. label, 도움말, 오류, 필수 상태와 제출 흐름을 구현 전에 확정한다."
+    },
+    {
+      "id": "design-page",
+      "file": "design-page.md",
+      "chars": 775,
+      "summary": "INFOUX 기준으로 새 페이지, 화면, 랜딩, 상세, 목록, 관리자 화면을 설계하거나 구현할 때 사용. 코드 작성 전에 사이트 유형, 사용자 핵심 과업, page shell, section 패턴과 재사용 컴포넌트를 확정한다."
+    },
+    {
+      "id": "design-widget",
+      "file": "design-widget.md",
+      "chars": 693,
+      "summary": "modal, tab, accordion, disclosure, tooltip, carousel, calendar, combobox 같은 인터랙티브 위젯을 설계하거나 구현할 때 사용. 상태 모델, ARIA 관계, 키보드와 포커스 이동을 코드 전에 확정한다."
+    },
+    {
+      "id": "init-project",
+      "file": "init-project.md",
+      "chars": 1478,
+      "summary": "INFOUX 스타터 기반 새 프로젝트 초기화. 프로젝트 유형과 브랜드 토큰을 반영해 프로젝트 컨트랙트와 토큰을 설정한다. \"새 프로젝트\", \"프로젝트 시작\", \"init project\" 요청 시 사용."
+    },
+    {
+      "id": "review-ui",
+      "file": "review-ui.md",
+      "chars": 429,
+      "summary": "INFOUX 기준으로 UI 구현을 리뷰하거나 규칙 준수 여부를 점검할 때 사용. 검사 결과만 나열하지 않고 Task Contract, 승인 패턴, 실제 구현의 차이를 우선 분석한다."
+    }
+  ],
+  "snippets": [
+    {
+      "id": "accordion",
+      "file": "accordion.md",
+      "chars": 1260,
+      "summary": "native `<details>`/`<summary>` 활용 — JS 없이 동작."
+    },
+    {
+      "id": "alert",
+      "file": "alert.md",
+      "chars": 961,
+      "summary": "페이지에 고정 노출되는 정보/경고/오류 메시지."
+    },
+    {
+      "id": "badge",
+      "file": "badge.md",
+      "chars": 553,
+      "summary": "작은 알림 표시기 (카운트 / 상태 / 새 항목)."
+    },
+    {
+      "id": "boilerplate",
+      "file": "boilerplate.md",
+      "chars": 3524,
+      "summary": "기본 마크업은 일반사이트, 공공서비스, 공공기관, CMS·관리자, 커머스·예약 모두에 적용 가능한 공통 골격이다. 공식 배너, 정부 상징, 운영기관 식별자, 공공 푸터 필수 링크는 사이트 유형 판정에서 적용 대상이 확인된 경우에만 추가한다."
+    },
+    {
+      "id": "breadcrumb",
+      "file": "breadcrumb.md",
+      "chars": 634,
+      "summary": "페이지 경로 표시. 사용자의 현재 위치를 보여주고 상위 페이지로 빠르게 이동할 수 있게 한다."
+    },
+    {
+      "id": "btn",
+      "file": "btn.md",
+      "chars": 2098,
+      "summary": "```html"
+    },
+    {
+      "id": "calendar",
+      "file": "calendar.md",
+      "chars": 2016,
+      "summary": "날짜 선택 그리드. 단독 사용 또는 date input의 팝업으로 사용."
+    },
+    {
+      "id": "card",
+      "file": "card.md",
+      "chars": 1199,
+      "summary": "```html"
+    },
+    {
+      "id": "carousel",
+      "file": "carousel.md",
+      "chars": 1483,
+      "summary": "스크롤 스냅 기반 슬라이드 컨테이너."
+    },
+    {
+      "id": "check-radio",
+      "file": "check-radio.md",
+      "chars": 1428,
+      "summary": "```html"
+    },
+    {
+      "id": "disclosure",
+      "file": "disclosure.md",
+      "chars": 1026,
+      "summary": "단일 \"더보기/접기\" 토글. Accordion(다중 그룹)과 달리 단독 토글에 사용."
+    },
+    {
+      "id": "file-upload",
+      "file": "file-upload.md",
+      "chars": 815,
+      "summary": "```html"
+    },
+    {
+      "id": "form",
+      "file": "form.md",
+      "chars": 1869,
+      "summary": "KRDS 입력폼 구성: **레이블 → 보조설명 → 입력박스 → 시스템메시지** (요소 간 8px gap)"
+    },
+    {
+      "id": "header",
+      "file": "header.md",
+      "chars": 1561,
+      "summary": "사이트 유형과 무관하게 사용할 수 있는 공통 헤더 패턴. 브랜드 + 주 메뉴 + 액션 영역을 기본으로 하며, 공식 배너·정부 상징·운영기관 식별자는 공공서비스/공공기관에서 적용 대상이 확인된 경우에만 별도 추가한다."
+    },
+    {
+      "id": "list",
+      "file": "list.md",
+      "chars": 1129,
+      "summary": "두 가지 변형 — 텍스트 목록과 구조화 목록(정의 목록)."
+    },
+    {
+      "id": "main-menu",
+      "file": "main-menu.md",
+      "chars": 1257,
+      "summary": "드롭다운형 주 내비게이션. 헤더 안에서 사용."
+    },
+    {
+      "id": "modal",
+      "file": "modal.md",
+      "chars": 1546,
+      "summary": "```html"
+    },
+    {
+      "id": "pagination",
+      "file": "pagination.md",
+      "chars": 1110,
+      "summary": "목록을 여러 페이지로 나눠 탐색."
+    },
+    {
+      "id": "progress",
+      "file": "progress.md",
+      "chars": 579,
+      "summary": "native `<progress>` + 시각 커스텀."
+    },
+    {
+      "id": "select",
+      "file": "select.md",
+      "chars": 696,
+      "summary": "native `<select>` 기반. input과 동일 사이즈/패딩 토큰."
+    },
+    {
+      "id": "side-panel",
+      "file": "side-panel.md",
+      "chars": 1476,
+      "summary": "우측에서 슬라이드 인하는 보조 패널. 모달과 달리 본문 스크롤을 차단하지 않는다."
+    },
+    {
+      "id": "spinner",
+      "file": "spinner.md",
+      "chars": 375,
+      "summary": "로딩 표시기. 진행 시간을 알 수 없을 때 사용."
+    },
+    {
+      "id": "step-indicator",
+      "file": "step-indicator.md",
+      "chars": 1000,
+      "summary": "다단계 폼/프로세스의 현재 단계 표시."
+    },
+    {
+      "id": "switch",
+      "file": "switch.md",
+      "chars": 660,
+      "summary": "```html"
+    },
+    {
+      "id": "tab",
+      "file": "tab.md",
+      "chars": 1535,
+      "summary": "```html"
+    },
+    {
+      "id": "table",
+      "file": "table.md",
+      "chars": 1141,
+      "summary": "데이터 표. 모바일에서는 가로 스크롤 컨테이너로 감싸서 사용."
+    },
+    {
+      "id": "tag",
+      "file": "tag.md",
+      "chars": 752,
+      "summary": "카테고리, 필터, 속성 라벨."
+    },
+    {
+      "id": "toast",
+      "file": "toast.md",
+      "chars": 986,
+      "summary": "일시적 피드백 메시지. 화면 우측 상단/하단에 잠시 노출 후 자동 사라짐."
+    },
+    {
+      "id": "tooltip",
+      "file": "tooltip.md",
+      "chars": 788,
+      "summary": "짧은 보조 설명 팝업. **JS 트리거 변형 권장** (키보드/터치 호환)."
+    }
+  ]
+}

package/data/references/accessibility.md

@@ -0,0 +1,243 @@
+# 접근성 — info-design 강제 규정
+
+KRDS는 **WCAG 2.1 Level AA 이상 + KWCAG 2.1/2.2** 준수를 강제한다. 본 스킬도 이를 그대로 따른다.
+
+---
+
+## 1. 색상 대비 (필수)
+
+| 텍스트 종류 | AA 최소 | AAA 권장 |
+|------------|--------|---------|
+| 일반 텍스트 (18pt 미만 / 14pt bold 미만) | **4.5:1** | 7:1 |
+| 큰 텍스트 (18pt+ 또는 14pt bold+) | **3:1** | 4.5:1 |
+| UI 컴포넌트 (버튼·아이콘) | **3:1** | — |
+| 아이콘 (장식이 아닌 의미) | **3:1** | 7:1 (고대비 모드) |
+
+### 매직넘버 50 규칙 (KRDS)
+
+KRDS 색상 단계에서 **두 단계 차이가 50 이상이면 4.5:1 자동 충족**.
+- 예: `gray.10` (#e6e8ea) ↔ `gray.60` (#58616a) → 차이 50 → AA 충족
+- 예: `gray.5` (#f4f5f6) ↔ `gray.50` (#6d7882) → 차이 45 → 검증 필요
+
+토큰 시맨틱 별칭 (`--color-text-*`)을 쓰면 KRDS가 이미 AA를 보장하는 조합으로 만들어졌다.
+
+---
+
+## 2. 포커스 (필수)
+
+```css
+/* ❌ 절대 금지 */
+:focus { outline: none; }
+button:focus { outline: 0; }
+
+/* ✅ KRDS 기본 — reset.css 전역 처리됨 */
+:focus-visible {
+  outline: 0.4rem solid var(--color-border-primary);
+  outline-offset: 2px;
+}
+```
+
+- **모든 인터랙티브 요소**: `<button>` `<a>` `<input>` `<select>` `<textarea>` `[tabindex]` `[contenteditable]`
+- 두께: **4px**
+- 색상: `var(--color-border-primary)` (KRDS primary)
+- offset: 2px (요소 윤곽이 보이도록)
+
+---
+
+## 3. 터치/클릭 영역 (필수)
+
+| 컨텍스트 | 최소 크기 |
+|---------|----------|
+| 모바일 | **44 × 44px** (`var(--touch-target-min)`) |
+| 데스크탑 dense UI | 32 × 32px (KRDS xsmall) 허용 |
+| 권장 기본 | 48 × 48px (KRDS medium = button medium 기본) |
+
+작은 시각 요소(체크박스 24×24, 토글 트랙 44×24)에서 터치 영역 확보:
+- `<label>`로 감싸 클릭 영역 확장
+- `min-height: var(--touch-target-min)` 적용
+
+---
+
+## 4. 시맨틱 HTML (필수)
+
+| 의도 | 사용 |
+|------|------|
+| 클릭 액션 | `<button type="button">` |
+| 페이지 이동 | `<a href="...">` |
+| 폼 제출 | `<button type="submit">` 또는 `<form>` |
+| 헤더 | `<header>` |
+| 푸터 | `<footer>` |
+| 내비게이션 | `<nav aria-label="...">` |
+| 본문 영역 | `<main>` (페이지당 하나) |
+| 독립 콘텐츠 | `<article>` |
+| 관련 섹션 | `<section>` (제목 필수) |
+| 보조 콘텐츠 | `<aside>` |
+
+**`div/span 클릭 핸들러 패턴` 절대 금지.** 클릭 가능한 요소는 button 또는 a.
+
+---
+
+## 5. 폼 접근성
+
+### 레이블 연결
+
+```html
+<!-- ✅ -->
+<label for="email">이메일</label>
+<input type="email" id="email">
+
+<!-- ❌ placeholder만으로 레이블 대체 -->
+<input type="email" placeholder="이메일">
+```
+
+### 필수 표시
+
+```html
+<label for="name">
+  이름
+  <span class="form-field__required" aria-label="필수">*</span>
+</label>
+<input type="text" id="name" required>
+```
+
+### 에러 안내
+
+```html
+<input type="email" id="email" aria-invalid="true" aria-describedby="email-error">
+<p id="email-error" class="form-field__message form-field__message--error">
+  올바른 이메일 형식이 아닙니다
+</p>
+```
+
+### 라디오 그룹
+
+```html
+<fieldset>
+  <legend class="form-field__label">결제 수단</legend>
+  <label class="radio">...</label>
+  <label class="radio">...</label>
+</fieldset>
+```
+
+---
+
+## 6. ARIA 속성 — 핵심 패턴
+
+### 현재 상태
+
+| 속성 | 용도 |
+|------|------|
+| `aria-current="page"` | 현재 페이지 (메뉴, breadcrumb) |
+| `aria-current="step"` | 현재 단계 (step-indicator) |
+| `aria-selected="true"` | 선택됨 (tab, table row) |
+| `aria-checked="true"` | 체크됨 (custom checkbox 시 — native input 사용 시 불필요) |
+| `aria-expanded="true|false"` | 펼침 (disclosure, dropdown, accordion) |
+| `aria-pressed="true|false"` | 토글 버튼 ON 상태 |
+| `aria-hidden="true"` | 시각만 (장식 아이콘) |
+| `aria-disabled="true"` | 비활성 (disabled 속성과 같이 사용) |
+| `aria-invalid="true"` | 검증 실패 |
+
+### 라이브 영역
+
+| 속성 | 용도 |
+|------|------|
+| `role="alert"` + `aria-live="assertive"` | 즉시 안내 (오류, 긴급) |
+| `role="status"` + `aria-live="polite"` | 정중한 안내 (저장 완료, 로딩) |
+
+### 다이얼로그
+
+```html
+<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
+  <h2 id="modal-title">...</h2>
+</div>
+```
+
+### 컨트롤 연결
+
+| 속성 | 용도 |
+|------|------|
+| `aria-controls="패널id"` | 트리거 → 제어 대상 |
+| `aria-haspopup="true"` | 팝업/드롭다운 트리거 |
+| `aria-describedby="설명id"` | 추가 설명 연결 (보조설명, 에러) |
+| `aria-labelledby="제목id"` | 레이블 대체 (단, label 더 우선) |
+| `aria-label="..."` | 레이블 대체 (텍스트 없는 아이콘 버튼) |
+
+---
+
+## 7. 키보드 네비게이션 (필수)
+
+| 컴포넌트 | 키 |
+|---------|-----|
+| Modal | `Esc` 닫기, `Tab` 트랩 (포커스 가두기) |
+| Dropdown | `Esc` 닫기, `↑↓` 이동, `Enter` 선택 |
+| Tab | `←→` 탭 이동, `Home/End` 처음/끝 |
+| Accordion | `Tab` 항목 간 이동, `Space/Enter` 펼침 |
+| Calendar | `←→` 일, `↑↓` 주, `Page Up/Down` 월, `Home/End` 주 시작/끝 |
+| Carousel | `←→` 슬라이드 이동 |
+
+모든 인터랙티브 요소는 **마우스만으로 가능한 모든 것이 키보드로도 가능**해야 한다.
+
+---
+
+## 8. 스크린 리더
+
+- 모든 페이지에 **Skip Link** (`.skip-to-content`) — 본문으로 바로 이동
+- 페이지 제목(`<h1>`) 페이지당 1개
+- 헤딩 레벨 순서 지키기 (`<h1>` → `<h2>` → `<h3>`, 건너뛰지 않기)
+- `<nav>`에 `aria-label`로 식별 (페이지에 nav가 여러 개면 필수)
+- 장식 아이콘은 `aria-hidden="true"`
+
+---
+
+## 9. 동작·모션
+
+- `prefers-reduced-motion: reduce` 미디어 쿼리로 **자동 비활성화** — 불필요한 transition·animation은 모션 감소 시 제거
+- **자동 재생 슬라이드/캐러셀 금지** (사용자가 명시 활성화 안 했으면 OFF) — WCAG 2.2.2
+- 자동 재생 시 **일시정지 버튼 필수**
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+---
+
+## 10. 다크/고대비 모드
+
+KRDS는 **light + high-contrast** 두 모드 시스템 차원에서 지원.
+
+```html
+<!-- 토글 -->
+<html data-color-mode="high-contrast">
+```
+
+- 컴포넌트 코드는 **모드 분기 작성 금지** — 토큰이 자동 분기됨
+- 새 토큰 추가 시 light + high-contrast **양쪽 모드 정의 필수**
+
+---
+
+## 자가 점검 체크리스트
+
+페이지·컴포넌트 작성 후 PR 올리기 전:
+
+- [ ] 모든 색상이 KRDS 토큰 (raw hex/rgb 0건)?
+- [ ] 모든 인터랙티브 요소가 시맨틱 HTML (`<button>`/`<a>`)?
+- [ ] 모든 `<img>`에 `alt` 속성?
+- [ ] 모든 폼 요소가 `<label for>` + `id` 연결?
+- [ ] focus-visible 처리 (`:focus { outline: none }` 0건)?
+- [ ] 터치 영역 44px 이상 (모바일)?
+- [ ] 키보드 네비게이션 작동 (Tab, Enter, Esc, 화살표)?
+- [ ] ARIA 속성 정확 (`aria-current`, `aria-selected`, `aria-expanded`, `aria-label`)?
+- [ ] 헤딩 레벨 순서 준수 (h1 → h2 → h3)?
+- [ ] Skip link 제공?
+- [ ] 다크/고대비 토글 시 깨지지 않음 (raw 색 0건이면 자동)?
+- [ ] `prefers-reduced-motion` 대응?
+
+위 12개 중 하나라도 No → 작업 미완으로 간주.