@infomind-ux/infoux-mcp 0.1.0

package/data/snippets/tag.md

@@ -0,0 +1,42 @@
+# 태그 (Tag) — KRDS
+
+카테고리, 필터, 속성 라벨.
+
+## 기본 마크업
+
+```html
+<!-- 정적 태그 -->
+<span class="tag">기본</span>
+
+<!-- 클릭 가능 (필터 등) -->
+<button type="button" class="tag tag--primary">선택됨</button>
+
+<!-- 제거 가능 (선택된 필터) -->
+<span class="tag tag--info">
+  카테고리: 디자인
+  <button type="button" class="tag__close" aria-label="카테고리: 디자인 제거">×</button>
+</span>
+
+<!-- 링크형 -->
+<a class="tag tag--success" href="?category=ui">UI</a>
+```
+
+## Variant
+
+- 기본 (회색 outline)
+- 시맨틱: `.tag--primary` / `.tag--info` / `.tag--success` / `.tag--warning` / `.tag--danger`
+
+## 사이즈
+
+- `.tag--small` (20px)
+- 기본 (24px)
+- `.tag--large` (32px)
+
+## 접근성
+
+- 제거 버튼은 `aria-label="태그명 제거"` 형식으로 컨텍스트 명시
+- 클릭 가능 태그는 `<button>` 또는 `<a>` 사용 (div onclick 금지)
+
+## 출처
+
+- CSS: `src/styles/6-components/tag.css`

package/data/snippets/toast.md

@@ -0,0 +1,48 @@
+# 토스트 (Toast) — KRDS
+
+일시적 피드백 메시지. 화면 우측 상단/하단에 잠시 노출 후 자동 사라짐.
+
+## 기본 마크업
+
+```html
+<div class="toast-stack">
+  <div class="toast toast--success" role="status">
+    <span class="toast__icon" aria-hidden="true">✓</span>
+    <p class="toast__message">저장되었습니다</p>
+    <button type="button" class="toast__close" aria-label="닫기">×</button>
+  </div>
+</div>
+```
+
+## 위치
+
+- `.toast-stack` (기본) — 우측 상단
+- `.toast-stack--bottom` — 우측 하단
+
+## Variant
+
+- `.toast--info` / `.toast--success` / `.toast--warning` / `.toast--danger`
+
+## 동작 (JS)
+
+- 보통 3~5초 후 자동 닫기 (사용자 액션 결과 통보)
+- 사용자가 닫기 버튼으로 즉시 닫기 가능
+- 다중 토스트는 위에서 아래로 누적
+
+## Alert vs Toast 사용 기준
+
+| | Alert | Toast |
+|---|-------|-------|
+| 위치 | 페이지 인라인 | 화면 고정 |
+| 지속시간 | 사용자가 닫을 때까지 | 자동 사라짐 |
+| 용도 | 페이지 컨텍스트 알림 | 즉시 피드백 (저장 완료 등) |
+
+## 접근성
+
+- `role="status"` + `aria-live="polite"` (스크린리더 정중 안내)
+- 위급 시에만 `role="alert"` + `aria-live="assertive"`
+- 자동 닫힘 토스트도 사용자 옵션으로 일시정지/지속 가능해야 함 (WCAG 2.2.1)
+
+## 출처
+
+- CSS: `src/styles/6-components/toast.css`

package/data/snippets/tooltip.md

@@ -0,0 +1,38 @@
+# 툴팁 (Tooltip) — KRDS
+
+짧은 보조 설명 팝업. **JS 트리거 변형 권장** (키보드/터치 호환).
+
+## 기본 마크업 (JS 변형)
+
+```html
+<button type="button" class="tooltip-trigger" aria-describedby="tip-1">
+  도움말
+</button>
+<div id="tip-1" class="tooltip" role="tooltip" hidden>
+  도움말 설명 텍스트
+</div>
+```
+
+JS: focus/mouseenter 시 `tooltip.removeAttribute('hidden')`, blur/mouseleave 시 `setAttribute('hidden', '')`.
+
+## CSS-only hover 변형 (단순 케이스)
+
+```html
+<span class="tooltip-wrap">
+  <button type="button" aria-label="도움말">?</button>
+  <span class="tooltip" role="tooltip">설명 텍스트</span>
+</span>
+```
+
+> 키보드 사용자는 호버할 수 없으므로 중요 정보는 JS 변형 사용.
+
+## 접근성
+
+- 트리거에 `aria-describedby="툴팁id"` 연결
+- 툴팁에 `role="tooltip"` 필수
+- ESC로 닫기 가능 (JS 처리)
+- 툴팁은 hover/focus 양쪽으로 트리거 가능해야 함 (WCAG 1.4.13)
+
+## 출처
+
+- CSS: `src/styles/6-components/tooltip.css`

package/data/tokens.css

@@ -0,0 +1,390 @@
+/**
+ * AUTO-GENERATED — tokens/build/tokens.css
+ * 출처: tokens/foundation.json
+ * 직접 수정 금지. 변경은 tokens/foundation.json에서 한다.
+ *
+ * 공개 토큰은 색상, 기본 폰트, 브레이크포인트만 발행한다.
+ * 간격·크기·타이포 스케일·반경·모션·그림자·z-index는 CSS/Tailwind 직접값으로 작성한다.
+ */
+
+:root {
+  /* Font families */
+  --font-sans: 'Pretendard GOV', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'D2Coding', SFMono-Regular, Consolas, monospace;
+
+  /* Breakpoints */
+  --breakpoint-mobile: 360px;
+  --breakpoint-tablet: 768px;
+  --breakpoint-pc: 1280px;
+
+  /* Semantic colors */
+  --color-primary: #256ef4;
+  --color-primary-hover: #0b50d0;
+  --color-primary-pressed: #083891;
+  --color-secondary: #346fb2;
+  --color-text: #1e2124;
+  --color-text-bolder: #131416;
+  --color-text-subtle: #464c53;
+  --color-text-disabled: #8a949e;
+  --color-text-inverse: #ffffff;
+  --color-bg: #ffffff;
+  --color-bg-subtler: #f4f5f6;
+  --color-bg-subtle: #e6e8ea;
+  --color-bg-inverse: #1e2124;
+  --color-bg-dim: #000000bf;
+  --color-surface: #ffffff;
+  --color-surface-subtler: #f4f5f6;
+  --color-surface-disabled: #cdd1d5;
+  --color-surface-primary-subtler: #ecf2fe;
+  --color-surface-information-subtler: #e7f4fe;
+  --color-surface-success-subtler: #eaf6ec;
+  --color-surface-warning-subtler: #fff3db;
+  --color-surface-danger-subtler: #fdefec;
+  --color-border: #b1b8be;
+  --color-border-light: #cdd1d5;
+  --color-border-dark: #58616a;
+  --color-border-primary: #256ef4;
+  --color-border-primary-light: #d8e5fd;
+  --color-border-information-light: #d3ebfd;
+  --color-border-success-light: #d8eedd;
+  --color-border-warning-light: #ffe0a3;
+  --color-border-danger-light: #fcdfd9;
+  --color-border-disabled: #b1b8be;
+  --color-link: #256ef4;
+  --color-link-hover: #0b50d0;
+  --color-link-pressed: #083891;
+  --color-link-visited: #5917b8;
+  --color-button-primary-fill: #0b50d0;
+  --color-button-primary-fill-hover: #083891;
+  --color-button-primary-fill-pressed: #052561;
+  --color-button-secondary-fill: #ecf2fe;
+  --color-button-secondary-fill-hover: #d8e5fd;
+  --color-button-secondary-fill-pressed: #b1cefb;
+  --color-button-secondary-border: #256ef4;
+  --color-button-tertiary-fill: #ffffff00;
+  --color-button-tertiary-fill-hover: #f4f5f6;
+  --color-button-tertiary-fill-pressed: #e6e8ea;
+  --color-button-tertiary-border: #58616a;
+  --color-button-text-fill: #ffffff00;
+  --color-button-text-fill-hover: #eef2f7;
+  --color-button-text-fill-pressed: #d6e0eb;
+  --color-button-text-border: #00000000;
+  --color-button-disabled-fill: #cdd1d5;
+  --color-button-disabled-border: #b1b8be;
+  --color-input-surface: #ffffff;
+  --color-input-surface-disabled: #cdd1d5;
+  --color-input-border: #58616a;
+  --color-input-border-active: #256ef4;
+  --color-input-border-disabled: #b1b8be;
+  --color-input-border-error: #de3412;
+  --color-danger: #de3412;
+  --color-danger-text: #bd2c0f;
+  --color-danger-surface: #fdefec;
+  --color-warning: #9e6a00;
+  --color-warning-text: #8a5c00;
+  --color-warning-surface: #fff3db;
+  --color-success: #228738;
+  --color-success-text: #267337;
+  --color-success-surface: #eaf6ec;
+  --color-info: #0b78cb;
+  --color-info-text: #096ab3;
+  --color-info-surface: #e7f4fe;
+  --color-point: #d63d4a;
+
+  /* 단계 색상: 필요한 경우에만 제한적으로 사용 */
+  --color-primary-5: #ecf2fe;
+  --color-primary-10: #d8e5fd;
+  --color-primary-20: #b1cefb;
+  --color-primary-30: #86aff9;
+  --color-primary-40: #4c87f6;
+  --color-primary-50: #256ef4;
+  --color-primary-60: #0b50d0;
+  --color-primary-70: #083891;
+  --color-primary-80: #052561;
+  --color-primary-90: #03163a;
+  --color-primary-95: #020f27;
+  --color-secondary-5: #eef2f7;
+  --color-secondary-10: #d6e0eb;
+  --color-secondary-20: #bacbde;
+  --color-secondary-30: #90b0d5;
+  --color-secondary-40: #6b96c7;
+  --color-secondary-50: #346fb2;
+  --color-secondary-60: #1c589c;
+  --color-secondary-70: #063a74;
+  --color-secondary-80: #052b57;
+  --color-secondary-90: #031f3f;
+  --color-secondary-95: #02162c;
+  --color-gray-0: #ffffff;
+  --color-gray-5: #f4f5f6;
+  --color-gray-10: #e6e8ea;
+  --color-gray-20: #cdd1d5;
+  --color-gray-30: #b1b8be;
+  --color-gray-40: #8a949e;
+  --color-gray-50: #6d7882;
+  --color-gray-60: #58616a;
+  --color-gray-70: #464c53;
+  --color-gray-80: #33363d;
+  --color-gray-90: #1e2124;
+  --color-gray-95: #131416;
+  --color-gray-100: #000000;
+  --color-danger-5: #fdefec;
+  --color-danger-10: #fcdfd9;
+  --color-danger-20: #f7afa1;
+  --color-danger-30: #f48771;
+  --color-danger-40: #f05f42;
+  --color-danger-50: #de3412;
+  --color-danger-60: #bd2c0f;
+  --color-danger-70: #8a240f;
+  --color-danger-80: #5c180a;
+  --color-danger-90: #390d05;
+  --color-danger-95: #260903;
+  --color-warning-5: #fff3db;
+  --color-warning-10: #ffe0a3;
+  --color-warning-20: #ffc95c;
+  --color-warning-30: #ffb114;
+  --color-warning-40: #c78500;
+  --color-warning-50: #9e6a00;
+  --color-warning-60: #8a5c00;
+  --color-warning-70: #614100;
+  --color-warning-80: #422c00;
+  --color-warning-90: #2e1f00;
+  --color-warning-95: #241800;
+  --color-success-5: #eaf6ec;
+  --color-success-10: #d8eedd;
+  --color-success-20: #a9dab4;
+  --color-success-30: #7ec88e;
+  --color-success-40: #3fa654;
+  --color-success-50: #228738;
+  --color-success-60: #267337;
+  --color-success-70: #285d33;
+  --color-success-80: #1f4727;
+  --color-success-90: #122b18;
+  --color-success-95: #0e2012;
+  --color-information-5: #e7f4fe;
+  --color-information-10: #d3ebfd;
+  --color-information-20: #9ed2fa;
+  --color-information-30: #5fb5f7;
+  --color-information-40: #2098f3;
+  --color-information-50: #0b78cb;
+  --color-information-60: #096ab3;
+  --color-information-70: #085691;
+  --color-information-80: #053961;
+  --color-information-90: #03253f;
+  --color-information-95: #021a2c;
+  --color-point-5: #fbeff0;
+  --color-point-10: #f5d6d9;
+  --color-point-20: #ebadb2;
+  --color-point-30: #e0858c;
+  --color-point-40: #d65c66;
+  --color-point-50: #d63d4a;
+  --color-point-60: #ab2b36;
+  --color-point-70: #7a1f26;
+  --color-point-80: #521419;
+  --color-point-90: #310c0f;
+  --color-point-95: #21080a;
+  --color-alpha-black-50: #00000080;
+  --color-alpha-black-75: #000000bf;
+}
+
+[data-color-mode="high-contrast"] {
+  --color-primary: #256ef4;
+  --color-primary-hover: #0b50d0;
+  --color-primary-pressed: #083891;
+  --color-text: #f4f5f6;
+  --color-text-bolder: #e6e8ea;
+  --color-text-subtle: #cdd1d5;
+  --color-text-disabled: #58616a;
+  --color-text-inverse: #1e2124;
+  --color-bg: #000000;
+  --color-bg-subtler: #131416;
+  --color-bg-subtle: #1e2124;
+  --color-bg-inverse: #e6e8ea;
+  --color-bg-dim: #000000bf;
+  --color-surface: #000000;
+  --color-surface-subtler: #131416;
+  --color-surface-disabled: #464c53;
+  --color-border: #464c53;
+  --color-border-light: #33363d;
+  --color-border-dark: #8a949e;
+  --color-border-primary: #256ef4;
+  --color-border-disabled: #464c53;
+}
+
+@theme {
+  /* Tailwind 기본 색상 팔레트 비활성화 — INFOUX 색상만 노출 */
+  --color-*: initial;
+
+  --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 responsive variants: mobile:, tablet:, pc: */
+  --breakpoint-*: initial;
+  --breakpoint-mobile: 360px;
+  --breakpoint-tablet: 768px;
+  --breakpoint-pc: 1280px;
+
+  --color-primary: var(--color-primary);
+  --color-primary-hover: var(--color-primary-hover);
+  --color-primary-pressed: var(--color-primary-pressed);
+  --color-secondary: var(--color-secondary);
+  --color-text: var(--color-text);
+  --color-text-bolder: var(--color-text-bolder);
+  --color-text-subtle: var(--color-text-subtle);
+  --color-text-disabled: var(--color-text-disabled);
+  --color-text-inverse: var(--color-text-inverse);
+  --color-bg: var(--color-bg);
+  --color-bg-subtler: var(--color-bg-subtler);
+  --color-bg-subtle: var(--color-bg-subtle);
+  --color-bg-inverse: var(--color-bg-inverse);
+  --color-bg-dim: var(--color-bg-dim);
+  --color-surface: var(--color-surface);
+  --color-surface-subtler: var(--color-surface-subtler);
+  --color-surface-disabled: var(--color-surface-disabled);
+  --color-surface-primary-subtler: var(--color-surface-primary-subtler);
+  --color-surface-information-subtler: var(--color-surface-information-subtler);
+  --color-surface-success-subtler: var(--color-surface-success-subtler);
+  --color-surface-warning-subtler: var(--color-surface-warning-subtler);
+  --color-surface-danger-subtler: var(--color-surface-danger-subtler);
+  --color-border: var(--color-border);
+  --color-border-light: var(--color-border-light);
+  --color-border-dark: var(--color-border-dark);
+  --color-border-primary: var(--color-border-primary);
+  --color-border-primary-light: var(--color-border-primary-light);
+  --color-border-information-light: var(--color-border-information-light);
+  --color-border-success-light: var(--color-border-success-light);
+  --color-border-warning-light: var(--color-border-warning-light);
+  --color-border-danger-light: var(--color-border-danger-light);
+  --color-border-disabled: var(--color-border-disabled);
+  --color-link: var(--color-link);
+  --color-link-hover: var(--color-link-hover);
+  --color-link-pressed: var(--color-link-pressed);
+  --color-link-visited: var(--color-link-visited);
+  --color-button-primary-fill: var(--color-button-primary-fill);
+  --color-button-primary-fill-hover: var(--color-button-primary-fill-hover);
+  --color-button-primary-fill-pressed: var(--color-button-primary-fill-pressed);
+  --color-button-secondary-fill: var(--color-button-secondary-fill);
+  --color-button-secondary-fill-hover: var(--color-button-secondary-fill-hover);
+  --color-button-secondary-fill-pressed: var(--color-button-secondary-fill-pressed);
+  --color-button-secondary-border: var(--color-button-secondary-border);
+  --color-button-tertiary-fill: var(--color-button-tertiary-fill);
+  --color-button-tertiary-fill-hover: var(--color-button-tertiary-fill-hover);
+  --color-button-tertiary-fill-pressed: var(--color-button-tertiary-fill-pressed);
+  --color-button-tertiary-border: var(--color-button-tertiary-border);
+  --color-button-text-fill: var(--color-button-text-fill);
+  --color-button-text-fill-hover: var(--color-button-text-fill-hover);
+  --color-button-text-fill-pressed: var(--color-button-text-fill-pressed);
+  --color-button-text-border: var(--color-button-text-border);
+  --color-button-disabled-fill: var(--color-button-disabled-fill);
+  --color-button-disabled-border: var(--color-button-disabled-border);
+  --color-input-surface: var(--color-input-surface);
+  --color-input-surface-disabled: var(--color-input-surface-disabled);
+  --color-input-border: var(--color-input-border);
+  --color-input-border-active: var(--color-input-border-active);
+  --color-input-border-disabled: var(--color-input-border-disabled);
+  --color-input-border-error: var(--color-input-border-error);
+  --color-danger: var(--color-danger);
+  --color-danger-text: var(--color-danger-text);
+  --color-danger-surface: var(--color-danger-surface);
+  --color-warning: var(--color-warning);
+  --color-warning-text: var(--color-warning-text);
+  --color-warning-surface: var(--color-warning-surface);
+  --color-success: var(--color-success);
+  --color-success-text: var(--color-success-text);
+  --color-success-surface: var(--color-success-surface);
+  --color-info: var(--color-info);
+  --color-info-text: var(--color-info-text);
+  --color-info-surface: var(--color-info-surface);
+  --color-point: var(--color-point);
+  --color-alpha-black-50: var(--color-alpha-black-50);
+  --color-alpha-black-75: var(--color-alpha-black-75);
+  --color-primary-5: var(--color-primary-5);
+  --color-primary-10: var(--color-primary-10);
+  --color-primary-20: var(--color-primary-20);
+  --color-primary-30: var(--color-primary-30);
+  --color-primary-40: var(--color-primary-40);
+  --color-primary-50: var(--color-primary-50);
+  --color-primary-60: var(--color-primary-60);
+  --color-primary-70: var(--color-primary-70);
+  --color-primary-80: var(--color-primary-80);
+  --color-primary-90: var(--color-primary-90);
+  --color-primary-95: var(--color-primary-95);
+  --color-secondary-5: var(--color-secondary-5);
+  --color-secondary-10: var(--color-secondary-10);
+  --color-secondary-20: var(--color-secondary-20);
+  --color-secondary-30: var(--color-secondary-30);
+  --color-secondary-40: var(--color-secondary-40);
+  --color-secondary-50: var(--color-secondary-50);
+  --color-secondary-60: var(--color-secondary-60);
+  --color-secondary-70: var(--color-secondary-70);
+  --color-secondary-80: var(--color-secondary-80);
+  --color-secondary-90: var(--color-secondary-90);
+  --color-secondary-95: var(--color-secondary-95);
+  --color-gray-0: var(--color-gray-0);
+  --color-gray-5: var(--color-gray-5);
+  --color-gray-10: var(--color-gray-10);
+  --color-gray-20: var(--color-gray-20);
+  --color-gray-30: var(--color-gray-30);
+  --color-gray-40: var(--color-gray-40);
+  --color-gray-50: var(--color-gray-50);
+  --color-gray-60: var(--color-gray-60);
+  --color-gray-70: var(--color-gray-70);
+  --color-gray-80: var(--color-gray-80);
+  --color-gray-90: var(--color-gray-90);
+  --color-gray-95: var(--color-gray-95);
+  --color-gray-100: var(--color-gray-100);
+  --color-danger-5: var(--color-danger-5);
+  --color-danger-10: var(--color-danger-10);
+  --color-danger-20: var(--color-danger-20);
+  --color-danger-30: var(--color-danger-30);
+  --color-danger-40: var(--color-danger-40);
+  --color-danger-50: var(--color-danger-50);
+  --color-danger-60: var(--color-danger-60);
+  --color-danger-70: var(--color-danger-70);
+  --color-danger-80: var(--color-danger-80);
+  --color-danger-90: var(--color-danger-90);
+  --color-danger-95: var(--color-danger-95);
+  --color-warning-5: var(--color-warning-5);
+  --color-warning-10: var(--color-warning-10);
+  --color-warning-20: var(--color-warning-20);
+  --color-warning-30: var(--color-warning-30);
+  --color-warning-40: var(--color-warning-40);
+  --color-warning-50: var(--color-warning-50);
+  --color-warning-60: var(--color-warning-60);
+  --color-warning-70: var(--color-warning-70);
+  --color-warning-80: var(--color-warning-80);
+  --color-warning-90: var(--color-warning-90);
+  --color-warning-95: var(--color-warning-95);
+  --color-success-5: var(--color-success-5);
+  --color-success-10: var(--color-success-10);
+  --color-success-20: var(--color-success-20);
+  --color-success-30: var(--color-success-30);
+  --color-success-40: var(--color-success-40);
+  --color-success-50: var(--color-success-50);
+  --color-success-60: var(--color-success-60);
+  --color-success-70: var(--color-success-70);
+  --color-success-80: var(--color-success-80);
+  --color-success-90: var(--color-success-90);
+  --color-success-95: var(--color-success-95);
+  --color-information-5: var(--color-information-5);
+  --color-information-10: var(--color-information-10);
+  --color-information-20: var(--color-information-20);
+  --color-information-30: var(--color-information-30);
+  --color-information-40: var(--color-information-40);
+  --color-information-50: var(--color-information-50);
+  --color-information-60: var(--color-information-60);
+  --color-information-70: var(--color-information-70);
+  --color-information-80: var(--color-information-80);
+  --color-information-90: var(--color-information-90);
+  --color-information-95: var(--color-information-95);
+  --color-point-5: var(--color-point-5);
+  --color-point-10: var(--color-point-10);
+  --color-point-20: var(--color-point-20);
+  --color-point-30: var(--color-point-30);
+  --color-point-40: var(--color-point-40);
+  --color-point-50: var(--color-point-50);
+  --color-point-60: var(--color-point-60);
+  --color-point-70: var(--color-point-70);
+  --color-point-80: var(--color-point-80);
+  --color-point-90: var(--color-point-90);
+  --color-point-95: var(--color-point-95);
+}

package/data/workflows/change-token.md

@@ -0,0 +1,20 @@
+# change-token
+
+> **언제 쓰나** — 색상, 폰트, 브레이크포인트 등 INFOUX 토큰을 추가·변경·재매핑할 때 사용. foundation, semantic alias, 생성 CSS와 starter 영향 범위를 먼저 확인한다.
+
+## 절차
+
+1. 변경 목적이 **브랜드 교체**(brand.json)인지 **표준 변경**(foundation.json)인지 먼저 가른다. 프로젝트 사정이면 brand.json만 고친다.
+2. `references/krds-tokens.md`와 `tokens/foundation.json`·`tokens/brand.json`에서 기존 토큰으로 해결 가능한지 확인한다.
+3. 사용처를 검색하고 대비, 상태, 다크 표면 등 영향 범위를 기록한다.
+4. 원본(`brand.json` 또는 `foundation.json`)만 수정하고 생성물은 빌드로 갱신한다. 브랜드 팔레트는 light·high-contrast 두 모드를 함께 채운다.
+5. `npm run build:tokens` → `npm run check:contrast` 후 원본과 starter의 drift를 확인한다.
+
+## 금지
+
+- CSS에서 raw 색상으로 우회
+- 기존 의미와 다른 용도로 semantic token 재사용
+- 생성된 `tokens/build/tokens.css` 직접 수정
+- 사용처 조사 없이 토큰 삭제 또는 이름 변경
+- 상태색(danger/warning/success/information)을 브랜드색으로 재정의 — 발주처 CI 요구는 `point`로 받는다
+- 대비 위반을 `tokens/contrast-baseline.json`에 추가해 덮기

package/data/workflows/create-component.md

@@ -0,0 +1,71 @@
+# create-component
+
+> **언제 쓰나** — BEM 컴포넌트 일괄 생성. 컴포넌트명 입력 시 CSS + 스니펫 + playground HTML + site 문서 페이지를 생성한다. "컴포넌트 추가", "새 컴포넌트", "create component" 요청 시 사용.
+
+INFOUX 카탈로그를 먼저 확인한 뒤 재사용 가치가 있는 BEM 컴포넌트를 추가한다.
+
+## 사전 판단
+
+1. `references/project-profiles.md`에서 사이트 유형을 판정한다.
+2. `references/krds-components.md`에서 기존 컴포넌트 조합으로 해결 가능한지 확인한다.
+3. 신규 패턴이면 일회성 프로젝트 패턴인지 공통 컴포넌트 후보인지 사용자에게 보고한다.
+4. 공통 컴포넌트로 확정된 경우에만 아래 파일을 생성한다.
+
+## 생성 파일
+
+| 파일 | 용도 |
+|------|------|
+| `src/styles/6-components/{name}.css` | Tailwind v4 + 표준 CSS nesting 스타일 |
+| `src/snippets/{name}.md` | HTML, variant, 접근성, 키보드 동작 |
+| `src/playground/{name}.html` | 브라우저 미리보기 |
+| `site/components/{name}.md` | 문서 사이트 페이지 |
+
+## CSS 기준
+
+```css
+/* {name} 컴포넌트 */
+.{name} {
+  @apply relative;
+  color: var(--color-text);
+
+  &__body {
+    @apply flex flex-col;
+    gap: 1.6rem;
+  }
+
+  &--selected {
+    border-color: var(--color-border-primary);
+  }
+
+  @media (min-width: 1280px) {
+    &__body {
+      @apply flex-row;
+    }
+  }
+}
+```
+
+- SCSS, `@use`, `@forward`, 믹스인을 사용하지 않는다.
+- 레이아웃·정렬·표시 속성은 `@apply`를 우선한다.
+- 색상은 `var(--color-*)`, 기본 폰트는 `var(--font-sans)`를 사용한다.
+- 간격·크기·타이포·반경은 프로젝트 맥락의 직접값을 허용한다.
+- 상태는 BEM modifier와 ARIA 속성을 함께 사용한다.
+- 컴포넌트 파일을 `src/styles/6-components/index.css`에 `@import`한다.
+
+## 마크업 기준
+
+- root 태그와 ARIA는 `references/html-semantics.md`를 따른다.
+- 인터랙티브 요소는 `button`, `a`, native form control을 사용한다.
+- 이미지 `alt`, 폼 label, 키보드 조작, 44px 터치 영역을 확인한다.
+- 위젯은 WAI-ARIA APG 관계 속성과 연결 대상 id까지 작성한다.
+
+## 검증
+
+```bash
+npm run check
+npm run lint
+npm run build
+npm run test:unit
+```
+
+위반이나 기존 카탈로그와의 중복이 있으면 생성 완료로 보고하지 않는다.

package/data/workflows/design-form.md

@@ -0,0 +1,20 @@
+# design-form
+
+> **언제 쓰나** — 입력폼, 신청, 문의, 검색 조건, 로그인, 결제 정보 등 form UI를 설계하거나 수정할 때 사용. label, 도움말, 오류, 필수 상태와 제출 흐름을 구현 전에 확정한다.
+
+## 구현 전 결정
+
+1. 폼의 목적과 제출 후 결과를 Task Contract의 `primaryTask`에 기록한다.
+2. 필드 목록, 필수 여부, 입력 형식, 도움말, 오류 메시지를 정한다.
+3. 관련 필드는 `fieldset`과 `legend`로 그룹화한다.
+4. `references/html-semantics.md`의 form, select, check-radio 패턴을 선택한다.
+5. 오류 요약이 필요한 긴 폼인지 판정한다.
+
+## 필수 패턴
+
+- 모든 컨트롤은 보이는 `label` 또는 동등한 접근 가능한 이름을 가진다.
+- 도움말과 오류는 고유 id로 `aria-describedby`에 연결한다.
+- 오류 상태는 BEM modifier와 `aria-invalid="true"`를 함께 사용한다.
+- placeholder는 label을 대체하지 않는다.
+- 제출은 native `form`과 `button type="submit"`을 사용한다.
+- 모바일 인터랙티브 영역은 44x44px 이상이다.

package/data/workflows/design-page.md

@@ -0,0 +1,22 @@
+# design-page
+
+> **언제 쓰나** — INFOUX 기준으로 새 페이지, 화면, 랜딩, 상세, 목록, 관리자 화면을 설계하거나 구현할 때 사용. 코드 작성 전에 사이트 유형, 사용자 핵심 과업, page shell, section 패턴과 재사용 컴포넌트를 확정한다.
+
+페이지 코드를 바로 작성하지 않는다. 먼저 `contracts/task-contract.md` 형식으로 Task Contract를 선언한다.
+
+## 절차
+
+1. `references/project-profiles.md`에서 사이트 유형과 기본 section 흐름을 판정한다.
+2. 사용자의 핵심 과업을 한 문장으로 쓴다.
+3. `references/krds-components.md`에서 재사용할 컴포넌트를 고른다.
+4. `contracts/html-page-contract.json`으로 page shell과 section 구조를 확정한다.
+5. 인터랙티브 위젯이 있으면 `design-widget` 절차를 함께 적용한다.
+6. Task Contract의 필수 항목이 채워진 뒤에만 구현한다.
+
+## 생성 원칙
+
+- `main` 직계 자식은 목적 기반 `section`이다.
+- 각 section은 `.container`와 접근 가능한 이름을 가진다.
+- 정부·공공 요소는 `publicIdentity: required`일 때만 생성한다.
+- 기존 section·컴포넌트 조합으로 해결할 수 있으면 새 block을 만들지 않는다.
+- 구현 후 검사는 선택을 대신하는 단계가 아니라 마지막 확인 단계다.

package/data/workflows/design-widget.md

@@ -0,0 +1,19 @@
+# design-widget
+
+> **언제 쓰나** — modal, tab, accordion, disclosure, tooltip, carousel, calendar, combobox 같은 인터랙티브 위젯을 설계하거나 구현할 때 사용. 상태 모델, ARIA 관계, 키보드와 포커스 이동을 코드 전에 확정한다.
+
+## 구현 전 결정
+
+1. native HTML로 해결 가능한지 먼저 확인한다.
+2. `references/html-semantics.md`에서 해당 위젯 패턴을 선택한다.
+3. Task Contract의 `interactive`에 위젯명과 상태를 기록한다.
+4. 트리거, 제어 대상, id 관계, 초기 상태, 종료 조건을 정한다.
+5. Tab, Enter, Space, Escape, 화살표 키와 포커스 복귀 규칙을 정한다.
+
+## 필수 패턴
+
+- 시각 상태는 의미 기반 BEM modifier로 표현한다.
+- 의미 상태는 `aria-expanded`, `aria-selected`, `aria-pressed`, `aria-hidden` 등으로 표현한다.
+- `aria-controls`, `aria-labelledby`의 대상 id가 실제로 존재해야 한다.
+- modal은 열릴 때 내부로 포커스를 이동하고 닫힐 때 트리거로 복귀한다.
+- 단순 표시/숨김을 이유로 불필요한 ARIA widget role을 만들지 않는다.