[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6QZ7HYN709D3VRGHM6735SN":3,"skill-same:01M6QZ7HYN709D3VRGHM6735SN":77},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":57,"repositoryHtmlUrl":58,"repositoryHomepageUrl":59,"ownerHtmlUrl":60,"ownerBlogUrl":6,"ownerDescription":61,"updatedAt":62,"install":63,"resources":76},"01M6QZ7HYN709D3VRGHM6735SN","mvp-design-spec",null,"MVP 디자인 스펙(design-spec.md) 작성 표준 — IA 트리·Mermaid 유저플로우·화면 명세·디자인 토큰·컴포넌트 인벤토리 필수 구조, [story: S-xx] 매핑 태그 정확 형식(gate-design.sh grep 호환), ASCII 와이어프레임 컨벤션, 색·타이포·간격 토큰 최소 셋, 빈\u002F로딩\u002F에러\u002F성공 4상태 의무, 스토리×화면 커버리지 매트릭스. ux-designer가 Stage 2에서 design-spec.md를 작성할 때, product-strategist가 checker로 커버리지를 검증할 때, gate-design.sh 실패를 진단할 때 참조.\nAuthoring standard for the MVP design spec (design-spec.md): required IA tree, Mermaid user flows, screen specs, design tokens, exact [story: S-xx] tag format (gate-design.sh grep-compatible), ASCII wireframe conventions, mandatory empty\u002Floading\u002Ferror\u002Fsuccess states, and the coverage matrix. Use when: writing design-spec.md in Stage 2, checking coverage, or diagnosing gate-design.sh failures.","Dokkabei97\u002Fdokkabei-harness","Dokkabei97","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F69792585?v=4","01M6QYPVTYK6CGF609W541QNSD","JangMK","01M6QYPVYXBP1GRYHZ7ZABCZC6",1,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FDokkabei97\u002Fdokkabei-harness\u002Fblob\u002Fmain\u002Farchive\u002Fmvp\u002Fskills\u002Fmvp-design-spec\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"mvp","mvp design spec","design spec","design","spec","product","ux","coverage","authoring","screen","error","mermaid","states","loading","flows","tree","matrix","for","when","writing","2026-11-10 10:12:30",false,"---\nname: mvp-design-spec\ndescription: |\n  MVP 디자인 스펙(design-spec.md) 작성 표준 — IA 트리·Mermaid 유저플로우·화면 명세·디자인 토큰·컴포넌트 인벤토리 필수 구조, [story: S-xx] 매핑 태그 정확 형식(gate-design.sh grep 호환), ASCII 와이어프레임 컨벤션, 색·타이포·간격 토큰 최소 셋, 빈\u002F로딩\u002F에러\u002F성공 4상태 의무, 스토리×화면 커버리지 매트릭스. ux-designer가 Stage 2에서 design-spec.md를 작성할 때, product-strategist가 checker로 커버리지를 검증할 때, gate-design.sh 실패를 진단할 때 참조.\n  Authoring standard for the MVP design spec (design-spec.md): required IA tree, Mermaid user flows, screen specs, design tokens, exact [story: S-xx] tag format (gate-design.sh grep-compatible), ASCII wireframe conventions, mandatory empty\u002Floading\u002Ferror\u002Fsuccess states, and the coverage matrix. Use when: writing design-spec.md in Stage 2, checking coverage, or diagnosing gate-design.sh failures.\n---\n\n# MVP 디자인 스펙 표준\n\n> design-spec.md는 그림 도구 없이 **텍스트만으로** 구현 가능한 수준까지 화면을 확정하는 단일 산출물이다.\n> `ux-designer`는 이 문서만 쓰고 코드는 생성하지 않는다.\n> 모든 화면은 PRD 스토리에 매핑되어야 하며, 매핑은 `gate-design.sh`가 결정론적으로 검사한다.\n\n## When to Apply\n\n다음 상황에서 이 스킬을 참조한다:\n\n- `ux-designer`가 Stage 2(디자인)에서 `.planning\u002Fdesign-spec.md`를 작성·수정할 때\n- `product-strategist`가 Stage 2 checker로 커버리지 매트릭스(스토리×화면)를 검증할 때\n- `\u002Fmvp-gate` 실행 결과 `gate-design.sh`가 실패(`[story: S-xx]` 태그 누락)하여 원인을 진단·교정할 때\n- `mvp-builder`가 Stage 4 루프에서 화면 구현 시 화면 명세·4상태·디자인 토큰을 구현 기준으로 삼을 때\n- 스코프 재협상으로 스토리가 추가·분할되어 디자인 스펙에 화면·태그를 증분 반영할 때\n\n## 1. 핵심 규칙\n\n| # | 규칙 | 집행 주체 |\n|---|------|-----------|\n| R1 | design-spec.md는 필수 6섹션을 §2 순서대로 포함한다 | `product-strategist` 검증 |\n| R2 | prd.json의 **모든** 스토리 id가 `[story: S-xx]` 정확 형식으로 1회 이상 등장한다 (§3) | `gate-design.sh` grep |\n| R3 | 매핑 태그 변형 금지 — 대소문자·공백·축약 어긋나면 게이트 실패 | `gate-design.sh` grep -F |\n| R4 | 모든 화면은 빈\u002F로딩\u002F에러\u002F성공 4상태를 정의한다 (§6) | `product-strategist` 검증 |\n| R5 | 디자인 토큰은 색·타이포·간격 최소 셋을 표로 정의하고, 화면 명세는 토큰 이름으로 참조한다 (§7) | `mvp-builder` 구현 기준 |\n| R6 | 커버리지 매트릭스에 prd.json 전 스토리가 행으로 존재하고 빈 행이 없어야 한다 (§9) | `product-strategist` 검증 입력 |\n| R7 | 코드(HTML\u002FCSS\u002F컴포넌트 코드) 생성 금지 — 산출물은 design-spec.md 단일 파일 | `ux-designer` Boundaries |\n\n## 2. design-spec.md 필수 구조\n\n아래 6개 `##` 섹션을 이 순서대로 포함한다.\n\n| 순서 | 섹션 헤딩 | 내용 |\n|------|-----------|------|\n| 1 | `## IA` | 정보 구조 트리 — 화면 계층과 진입 관계 |\n| 2 | `## 유저 플로우` | Mermaid flowchart — 핵심 여정 + 실패 분기 |\n| 3 | `## 화면 명세` | 화면별 `### SCR-xx 이름 [story: S-xx]` + 와이어프레임 + 4상태 |\n| 4 | `## 디자인 토큰` | 색·타이포·간격 표 (§7) |\n| 5 | `## 컴포넌트 인벤토리` | 재사용 컴포넌트 목록 + 사용 화면 (§8) |\n| 6 | `## 커버리지 매트릭스` | 스토리×화면 표 (§9) |\n\n### IA 트리 예시\n\n```text\n앱 루트\n├── SCR-01 로그인          (비로그인 진입점)\n└── SCR-02 메모 목록        (로그인 후 홈)\n    ├── SCR-03 메모 작성    (목록의 [+ 새 메모])\n    └── SCR-04 메모 상세    (목록 아이템 탭)\n```\n\n### Mermaid 유저플로우 예시\n\n```mermaid\nflowchart TD\n    A[SCR-01 로그인] -->|성공| B[SCR-02 메모 목록]\n    A -->|실패: 401| A\n    B -->|+ 새 메모| C[SCR-03 메모 작성]\n    C -->|저장 성공| B\n    C -->|저장 실패: 에러 배너| C\n    B -->|아이템 탭| D[SCR-04 메모 상세]\n```\n\n성공 경로만 그리지 않는다 — 실패·이탈 분기 1개 이상 포함.\n\n## 3. `[story: S-xx]` 매핑 태그 — 정확 형식\n\n`gate-design.sh`는 prd.json의 각 id에 대해 `grep -qF \"[story: S-xx]\"`로 검사한다.\n**고정 문자열 비교**이므로 한 글자라도 다르면 해당 스토리는 미커버로 판정된다.\n\n형식 규칙: `[story: S-01]`\n— 여는 대괄호 + 소문자 `story` + 콜론 + **공백 정확히 1개** + 대문자 `S` + 하이픈 + 2자리 숫자 + 닫는 대괄호.\n\n| 판정 | 표기 | 사유 |\n|------|------|------|\n| GOOD | `[story: S-01]` | 정확 형식 |\n| GOOD | `[story: S-01] [story: S-02]` | 복수 스토리는 태그를 **반복** |\n| BAD | `[Story: S-01]` | 대문자 S로 시작 |\n| BAD | `[story:S-01]` | 콜론 뒤 공백 누락 |\n| BAD | `[story: s-01]` | 소문자 id |\n| BAD | `[story: S-1]` | 자릿수 불일치(2자리 필수) |\n| BAD | `[story: S-01, S-02]` | 축약 — S-02가 grep -F에 잡히지 않음 |\n\n배치 위치: 각 화면 명세의 `###` 헤딩 라인에 붙인다(권장). 화면 외 요소(공통 레이아웃 등)에\n스토리가 걸리면 해당 단락 첫 줄에 태그를 둔다. prd.json의 모든 스토리가 어딘가에 1회 이상\n등장해야 게이트 통과 — 화면이 없는 스토리(예: 순수 API 스토리)도 가장 가까운 화면 또는\n\"비화면 동작\" 단락에 태그로 귀속시킨다.\n\n## 4. 화면 명세 양식\n\n화면마다 아래 형식을 따른다:\n\n```markdown\n### SCR-02 메모 목록 [story: S-02] [story: S-03]\n\n- 목적: 내 메모를 최신순으로 훑고 작성·상세로 이동하는 허브\n- 진입 경로: 로그인 성공 직후 \u002F 작성·상세에서 뒤로가기\n- 와이어프레임: (§5 컨벤션)\n- 상태 정의: (§6 표)\n- 인터랙션:\n  - [+ 새 메모] 탭 → SCR-03 이동\n  - 리스트 아이템 탭 → SCR-04 이동\n  - 당겨서 새로고침 → 목록 재조회(로딩 상태 표시)\n```\n\n## 5. ASCII 와이어프레임 컨벤션\n\n텍스트 박스 문자로 레이아웃을 고정한다. 픽셀 정밀도가 아니라 **요소 존재·순서·위계**를 확정하는 것이 목적.\n\n| 표기 | 의미 |\n|------|------|\n| `┌─┐ │ └─┘` | 화면\u002F카드 경계 |\n| `├─┤` | 영역 구분선 |\n| `[텍스트]` | 버튼(탭 가능 액션) |\n| `(텍스트____)` | 입력 필드(괄호 안은 placeholder) |\n| `▸` | 리스트 아이템 |\n| `←` 화살표 주석 | 와이어프레임 우측 설명(렌더링 대상 아님) |\n\n예시 — SCR-02 메모 목록:\n\n```text\n┌──────────────────────────────────┐\n│ 메모                [+ 새 메모]  │ ← 헤더: 타이틀(heading) + 주요 액션 버튼\n├──────────────────────────────────┤\n│ (메모 검색____________________)  │ ← 입력 필드, space-4 패딩\n├──────────────────────────────────┤\n│ ▸ 장보기 목록         2026-06-11 │ ← 아이템: 제목(body) + 날짜(caption, muted)\n│ ▸ 회의 메모           2026-06-10 │\n│ ▸ 아이디어            2026-06-09 │\n├──────────────────────────────────┤\n│         [더 불러오기]            │ ← 페이지네이션 버튼, 마지막 페이지면 숨김\n└──────────────────────────────────┘\n```\n\n## 6. 4상태 의무 — 빈\u002F로딩\u002F에러\u002F성공\n\n모든 화면 명세는 아래 4상태를 표로 정의한다. 하나라도 빠지면 `mvp-builder`가 임의 구현하게 되고,\n`mvp-verifier`의 AC 반증(빈 입력·실패 케이스)에서 적발된다.\n\n| 상태 | 정의 의무 사항 | SCR-02 예시 |\n|------|----------------|-------------|\n| 빈(empty) | 데이터 0건 표시 문구 + 다음 행동 유도 | \"메모가 없습니다\" + [첫 메모 작성] |\n| 로딩(loading) | 표시 방식(스켈레톤\u002F스피너)과 위치 | 리스트 영역 스켈레톤 3행 |\n| 에러(error) | 메시지 + 복구 액션 | \"목록을 불러오지 못했습니다\" + [다시 시도] |\n| 성공(success) | 정상 표시 규칙(정렬·포맷·최대 노출 수) | createdAt 내림차순, 날짜 `yyyy-MM-dd`, 페이지당 20건 |\n\n### 나쁜 예 \u002F 좋은 예\n\n```text\nBAD : \"목록 화면: 메모를 보여준다\"            ← 0건일 때? 실패하면? 정렬은?\nGOOD: 위 4상태 표 — 상태마다 표시 내용과 사용자의 다음 행동이 한 줄씩 확정됨\n```\n\n## 7. 디자인 토큰 최소 셋\n\n색·타이포·간격 3종은 반드시 정의한다. 화면 명세·와이어프레임 주석은 raw 값(`#3B82F6`, `16px`)이\n아니라 **토큰 이름**으로 참조한다. 구현 단계에서 `tech-architect`\u002F`mvp-builder`가 스택에 맞게\n(CSS 변수, Tailwind 테마 등) 옮긴다.\n\n### 색 (최소 6)\n\n| 토큰 | 값 | 용도 |\n|------|-----|------|\n| `color-primary` | `#2563EB` | 주요 액션 버튼, 링크 |\n| `color-on-primary` | `#FFFFFF` | primary 위 텍스트 |\n| `color-surface` | `#FFFFFF` | 카드·화면 배경 |\n| `color-text` | `#111827` | 본문 텍스트 |\n| `color-muted` | `#6B7280` | 보조 텍스트, 날짜·메타 |\n| `color-danger` | `#DC2626` | 에러 메시지, 파괴적 액션 |\n\n### 타이포 (패밀리 1 + 스케일 4)\n\n| 토큰 | 크기\u002F굵기\u002F행간 | 용도 |\n|------|----------------|------|\n| `font-family` | Pretendard, sans-serif | 전체 |\n| `type-heading` | 20px \u002F 700 \u002F 1.3 | 화면 타이틀 |\n| `type-body` | 16px \u002F 400 \u002F 1.5 | 본문, 리스트 제목 |\n| `type-caption` | 13px \u002F 400 \u002F 1.4 | 메타 정보, 날짜 |\n| `type-button` | 15px \u002F 600 \u002F 1.0 | 버튼 라벨 |\n\n### 간격 (4px 그리드)\n\n| 토큰 | 값 | 용도 |\n|------|-----|------|\n| `space-1` | 4px | 아이콘-라벨 간격 |\n| `space-2` | 8px | 인라인 요소 간격 |\n| `space-4` | 16px | 컴포넌트 내부 패딩, 화면 좌우 여백 |\n| `space-6` | 24px | 섹션 간 간격 |\n| `space-8` | 32px | 화면 상하 대여백 |\n\n값은 프로젝트 성격에 맞게 바꿔도 되지만 **토큰 이름 체계와 4px 배수 규칙은 유지**한다.\n\n## 8. 컴포넌트 인벤토리\n\n화면 명세에서 2회 이상 등장하는 요소를 컴포넌트로 추출해 표로 관리한다.\n`mvp-builder`가 중복 구현 대신 재사용 단위를 식별하는 입력이다.\n\n| 컴포넌트 | 설명 | 상태\u002F변형 | 사용 화면 |\n|----------|------|-----------|-----------|\n| `PrimaryButton` | color-primary 채움 버튼 | default \u002F disabled \u002F loading | SCR-01, SCR-03 |\n| `ListItem` | 제목 + caption 메타 행 | default \u002F pressed | SCR-02 |\n| `EmptyState` | 빈 상태 문구 + 유도 버튼 | 문구·버튼 라벨 주입 | SCR-02, SCR-04 |\n| `ErrorBanner` | color-danger 배너 + 재시도 | 메시지 주입 | 전 화면 공통 |\n\n## 9. 커버리지 매트릭스\n\n`product-strategist`가 Stage 2 검증에서 그대로 대조하는 입력. 행 = prd.json 전 스토리(누락 금지),\n열 = 화면 명세의 전 화면. `●` = 해당 화면이 그 스토리를 구현 표면으로 커버.\n\n```markdown\n| 스토리 | SCR-01 로그인 | SCR-02 메모 목록 | SCR-03 메모 작성 | SCR-04 메모 상세 | 커버 |\n|--------|:---:|:---:|:---:|:---:|------|\n| S-01 이메일 로그인     | ● |   |   |   | ✅ |\n| S-02 메모 목록 조회    |   | ● |   |   | ✅ |\n| S-03 메모 작성         |   | ● | ● |   | ✅ |\n| S-04 메모 상세·삭제    |   |   |   | ● | ✅ |\n```\n\n검증 판정 규칙:\n\n| 발견 | 판정 |\n|------|------|\n| 빈 행(어느 화면에도 미커버 스토리) | 실패 — 화면 추가 또는 §3 비화면 동작 태그 귀속 후 재검 |\n| 빈 열(어느 스토리에도 안 걸린 화면) | 경고 — 스코프 외 화면 의심, 범위 비대 신호로 PS가 지적 |\n| 매트릭스의 행 수 ≠ prd.json 스토리 수 | 실패 — 매트릭스 갱신 누락 |\n\n매트릭스는 `gate-design.sh`(태그 grep)와 별개의 **의미 검증** 층이다: 게이트는 태그 존재만,\n매트릭스는 매핑이 말이 되는지를 product-strategist가 확인한다.\n","# MVP 디자인 스펙 표준\n\n> design-spec.md는 그림 도구 없이 **텍스트만으로** 구현 가능한 수준까지 화면을 확정하는 단일 산출물이다.\n> `ux-designer`는 이 문서만 쓰고 코드는 생성하지 않는다.\n> 모든 화면은 PRD 스토리에 매핑되어야 하며, 매핑은 `gate-design.sh`가 결정론적으로 검사한다.\n\n## When to Apply\n\n다음 상황에서 이 스킬을 참조한다:\n\n- `ux-designer`가 Stage 2(디자인)에서 `.planning\u002Fdesign-spec.md`를 작성·수정할 때\n- `product-strategist`가 Stage 2 checker로 커버리지 매트릭스(스토리×화면)를 검증할 때\n- `\u002Fmvp-gate` 실행 결과 `gate-design.sh`가 실패(`[story: S-xx]` 태그 누락)하여 원인을 진단·교정할 때\n- `mvp-builder`가 Stage 4 루프에서 화면 구현 시 화면 명세·4상태·디자인 토큰을 구현 기준으로 삼을 때\n- 스코프 재협상으로 스토리가 추가·분할되어 디자인 스펙에 화면·태그를 증분 반영할 때\n\n## 1. 핵심 규칙\n\n| # | 규칙 | 집행 주체 |\n|---|------|-----------|\n| R1 | design-spec.md는 필수 6섹션을 §2 순서대로 포함한다 | `product-strategist` 검증 |\n| R2 | prd.json의 **모든** 스토리 id가 `[story: S-xx]` 정확 형식으로 1회 이상 등장한다 (§3) | `gate-design.sh` grep |\n| R3 | 매핑 태그 변형 금지 — 대소문자·공백·축약 어긋나면 게이트 실패 | `gate-design.sh` grep -F |\n| R4 | 모든 화면은 빈\u002F로딩\u002F에러\u002F성공 4상태를 정의한다 (§6) | `product-strategist` 검증 |\n| R5 | 디자인 토큰은 색·타이포·간격 최소 셋을 표로 정의하고, 화면 명세는 토큰 이름으로 참조한다 (§7) | `mvp-builder` 구현 기준 |\n| R6 | 커버리지 매트릭스에 prd.json 전 스토리가 행으로 존재하고 빈 행이 없어야 한다 (§9) | `product-strategist` 검증 입력 |\n| R7 | 코드(HTML\u002FCSS\u002F컴포넌트 코드) 생성 금지 — 산출물은 design-spec.md 단일 파일 | `ux-designer` Boundaries |\n\n## 2. design-spec.md 필수 구조\n\n아래 6개 `##` 섹션을 이 순서대로 포함한다.\n\n| 순서 | 섹션 헤딩 | 내용 |\n|------|-----------|------|\n| 1 | `## IA` | 정보 구조 트리 — 화면 계층과 진입 관계 |\n| 2 | `## 유저 플로우` | Mermaid flowchart — 핵심 여정 + 실패 분기 |\n| 3 | `## 화면 명세` | 화면별 `### SCR-xx 이름 [story: S-xx]` + 와이어프레임 + 4상태 |\n| 4 | `## 디자인 토큰` | 색·타이포·간격 표 (§7) |\n| 5 | `## 컴포넌트 인벤토리` | 재사용 컴포넌트 목록 + 사용 화면 (§8) |\n| 6 | `## 커버리지 매트릭스` | 스토리×화면 표 (§9) |\n\n### IA 트리 예시\n\n```text\n앱 루트\n├── SCR-01 로그인          (비로그인 진입점)\n└── SCR-02 메모 목록        (로그인 후 홈)\n    ├── SCR-03 메모 작성    (목록의 [+ 새 메모])\n    └── SCR-04 메모 상세    (목록 아이템 탭)\n```\n\n### Mermaid 유저플로우 예시\n\n```mermaid\nflowchart TD\n    A[SCR-01 로그인] -->|성공| B[SCR-02 메모 목록]\n    A -->|실패: 401| A\n    B -->|+ 새 메모| C[SCR-03 메모 작성]\n    C -->|저장 성공| B\n    C -->|저장 실패: 에러 배너| C\n    B -->|아이템 탭| D[SCR-04 메모 상세]\n```\n\n성공 경로만 그리지 않는다 — 실패·이탈 분기 1개 이상 포함.\n\n## 3. `[story: S-xx]` 매핑 태그 — 정확 형식\n\n`gate-design.sh`는 prd.json의 각 id에 대해 `grep -qF \"[story: S-xx]\"`로 검사한다.\n**고정 문자열 비교**이므로 한 글자라도 다르면 해당 스토리는 미커버로 판정된다.\n\n형식 규칙: `[story: S-01]`\n— 여는 대괄호 + 소문자 `story` + 콜론 + **공백 정확히 1개** + 대문자 `S` + 하이픈 + 2자리 숫자 + 닫는 대괄호.\n\n| 판정 | 표기 | 사유 |\n|------|------|------|\n| GOOD | `[story: S-01]` | 정확 형식 |\n| GOOD | `[story: S-01] [story: S-02]` | 복수 스토리는 태그를 **반복** |\n| BAD | `[Story: S-01]` | 대문자 S로 시작 |\n| BAD | `[story:S-01]` | 콜론 뒤 공백 누락 |\n| BAD | `[story: s-01]` | 소문자 id |\n| BAD | `[story: S-1]` | 자릿수 불일치(2자리 필수) |\n| BAD | `[story: S-01, S-02]` | 축약 — S-02가 grep -F에 잡히지 않음 |\n\n배치 위치: 각 화면 명세의 `###` 헤딩 라인에 붙인다(권장). 화면 외 요소(공통 레이아웃 등)에\n스토리가 걸리면 해당 단락 첫 줄에 태그를 둔다. prd.json의 모든 스토리가 어딘가에 1회 이상\n등장해야 게이트 통과 — 화면이 없는 스토리(예: 순수 API 스토리)도 가장 가까운 화면 또는\n\"비화면 동작\" 단락에 태그로 귀속시킨다.\n\n## 4. 화면 명세 양식\n\n화면마다 아래 형식을 따른다:\n\n```markdown\n### SCR-02 메모 목록 [story: S-02] [story: S-03]\n\n- 목적: 내 메모를 최신순으로 훑고 작성·상세로 이동하는 허브\n- 진입 경로: 로그인 성공 직후 \u002F 작성·상세에서 뒤로가기\n- 와이어프레임: (§5 컨벤션)\n- 상태 정의: (§6 표)\n- 인터랙션:\n  - [+ 새 메모] 탭 → SCR-03 이동\n  - 리스트 아이템 탭 → SCR-04 이동\n  - 당겨서 새로고침 → 목록 재조회(로딩 상태 표시)\n```\n\n## 5. ASCII 와이어프레임 컨벤션\n\n텍스트 박스 문자로 레이아웃을 고정한다. 픽셀 정밀도가 아니라 **요소 존재·순서·위계**를 확정하는 것이 목적.\n\n| 표기 | 의미 |\n|------|------|\n| `┌─┐ │ └─┘` | 화면\u002F카드 경계 |\n| `├─┤` | 영역 구분선 |\n| `[텍스트]` | 버튼(탭 가능 액션) |\n| `(텍스트____)` | 입력 필드(괄호 안은 placeholder) |\n| `▸` | 리스트 아이템 |\n| `←` 화살표 주석 | 와이어프레임 우측 설명(렌더링 대상 아님) |\n\n예시 — SCR-02 메모 목록:\n\n```text\n┌──────────────────────────────────┐\n│ 메모                [+ 새 메모]  │ ← 헤더: 타이틀(heading) + 주요 액션 버튼\n├──────────────────────────────────┤\n│ (메모 검색____________________)  │ ← 입력 필드, space-4 패딩\n├──────────────────────────────────┤\n│ ▸ 장보기 목록         2026-06-11 │ ← 아이템: 제목(body) + 날짜(caption, muted)\n│ ▸ 회의 메모           2026-06-10 │\n│ ▸ 아이디어            2026-06-09 │\n├──────────────────────────────────┤\n│         [더 불러오기]            │ ← 페이지네이션 버튼, 마지막 페이지면 숨김\n└──────────────────────────────────┘\n```\n\n## 6. 4상태 의무 — 빈\u002F로딩\u002F에러\u002F성공\n\n모든 화면 명세는 아래 4상태를 표로 정의한다. 하나라도 빠지면 `mvp-builder`가 임의 구현하게 되고,\n`mvp-verifier`의 AC 반증(빈 입력·실패 케이스)에서 적발된다.\n\n| 상태 | 정의 의무 사항 | SCR-02 예시 |\n|------|----------------|-------------|\n| 빈(empty) | 데이터 0건 표시 문구 + 다음 행동 유도 | \"메모가 없습니다\" + [첫 메모 작성] |\n| 로딩(loading) | 표시 방식(스켈레톤\u002F스피너)과 위치 | 리스트 영역 스켈레톤 3행 |\n| 에러(error) | 메시지 + 복구 액션 | \"목록을 불러오지 못했습니다\" + [다시 시도] |\n| 성공(success) | 정상 표시 규칙(정렬·포맷·최대 노출 수) | createdAt 내림차순, 날짜 `yyyy-MM-dd`, 페이지당 20건 |\n\n### 나쁜 예 \u002F 좋은 예\n\n```text\nBAD : \"목록 화면: 메모를 보여준다\"            ← 0건일 때? 실패하면? 정렬은?\nGOOD: 위 4상태 표 — 상태마다 표시 내용과 사용자의 다음 행동이 한 줄씩 확정됨\n```\n\n## 7. 디자인 토큰 최소 셋\n\n색·타이포·간격 3종은 반드시 정의한다. 화면 명세·와이어프레임 주석은 raw 값(`#3B82F6`, `16px`)이\n아니라 **토큰 이름**으로 참조한다. 구현 단계에서 `tech-architect`\u002F`mvp-builder`가 스택에 맞게\n(CSS 변수, Tailwind 테마 등) 옮긴다.\n\n### 색 (최소 6)\n\n| 토큰 | 값 | 용도 |\n|------|-----|------|\n| `color-primary` | `#2563EB` | 주요 액션 버튼, 링크 |\n| `color-on-primary` | `#FFFFFF` | primary 위 텍스트 |\n| `color-surface` | `#FFFFFF` | 카드·화면 배경 |\n| `color-text` | `#111827` | 본문 텍스트 |\n| `color-muted` | `#6B7280` | 보조 텍스트, 날짜·메타 |\n| `color-danger` | `#DC2626` | 에러 메시지, 파괴적 액션 |\n\n### 타이포 (패밀리 1 + 스케일 4)\n\n| 토큰 | 크기\u002F굵기\u002F행간 | 용도 |\n|------|----------------|------|\n| `font-family` | Pretendard, sans-serif | 전체 |\n| `type-heading` | 20px \u002F 700 \u002F 1.3 | 화면 타이틀 |\n| `type-body` | 16px \u002F 400 \u002F 1.5 | 본문, 리스트 제목 |\n| `type-caption` | 13px \u002F 400 \u002F 1.4 | 메타 정보, 날짜 |\n| `type-button` | 15px \u002F 600 \u002F 1.0 | 버튼 라벨 |\n\n### 간격 (4px 그리드)\n\n| 토큰 | 값 | 용도 |\n|------|-----|------|\n| `space-1` | 4px | 아이콘-라벨 간격 |\n| `space-2` | 8px | 인라인 요소 간격 |\n| `space-4` | 16px | 컴포넌트 내부 패딩, 화면 좌우 여백 |\n| `space-6` | 24px | 섹션 간 간격 |\n| `space-8` | 32px | 화면 상하 대여백 |\n\n값은 프로젝트 성격에 맞게 바꿔도 되지만 **토큰 이름 체계와 4px 배수 규칙은 유지**한다.\n\n## 8. 컴포넌트 인벤토리\n\n화면 명세에서 2회 이상 등장하는 요소를 컴포넌트로 추출해 표로 관리한다.\n`mvp-builder`가 중복 구현 대신 재사용 단위를 식별하는 입력이다.\n\n| 컴포넌트 | 설명 | 상태\u002F변형 | 사용 화면 |\n|----------|------|-----------|-----------|\n| `PrimaryButton` | color-primary 채움 버튼 | default \u002F disabled \u002F loading | SCR-01, SCR-03 |\n| `ListItem` | 제목 + caption 메타 행 | default \u002F pressed | SCR-02 |\n| `EmptyState` | 빈 상태 문구 + 유도 버튼 | 문구·버튼 라벨 주입 | SCR-02, SCR-04 |\n| `ErrorBanner` | color-danger 배너 + 재시도 | 메시지 주입 | 전 화면 공통 |\n\n## 9. 커버리지 매트릭스\n\n`product-strategist`가 Stage 2 검증에서 그대로 대조하는 입력. 행 = prd.json 전 스토리(누락 금지),\n열 = 화면 명세의 전 화면. `●` = 해당 화면이 그 스토리를 구현 표면으로 커버.\n\n```markdown\n| 스토리 | SCR-01 로그인 | SCR-02 메모 목록 | SCR-03 메모 작성 | SCR-04 메모 상세 | 커버 |\n|--------|:---:|:---:|:---:|:---:|------|\n| S-01 이메일 로그인     | ● |   |   |   | ✅ |\n| S-02 메모 목록 조회    |   | ● |   |   | ✅ |\n| S-03 메모 작성         |   | ● | ● |   | ✅ |\n| S-04 메모 상세·삭제    |   |   |   | ● | ✅ |\n```\n\n검증 판정 규칙:\n\n| 발견 | 판정 |\n|------|------|\n| 빈 행(어느 화면에도 미커버 스토리) | 실패 — 화면 추가 또는 §3 비화면 동작 태그 귀속 후 재검 |\n| 빈 열(어느 스토리에도 안 걸린 화면) | 경고 — 스코프 외 화면 의심, 범위 비대 신호로 PS가 지적 |\n| 매트릭스의 행 수 ≠ prd.json 스토리 수 | 실패 — 매트릭스 갱신 누락 |\n\n매트릭스는 `gate-design.sh`(태그 grep)와 별개의 **의미 검증** 층이다: 게이트는 태그 존재만,\n매트릭스는 매핑이 말이 되는지를 product-strategist가 확인한다.\n",{"name":5,"description":7},"main","e9f37e996e3d2b1b6ac9c879e9dfba1223b597c3","archive\u002Fmvp\u002Fskills\u002Fmvp-design-spec",0,"https:\u002F\u002Fgithub.com\u002FDokkabei97\u002Fdokkabei-harness","https:\u002F\u002Fdokkabei97.github.io\u002Fdokkabei-harness\u002F","https:\u002F\u002Fgithub.com\u002FDokkabei97","Contact: wkdrn970@gmail.com","2026-10-29 06:49:16",{"source":8,"skillName":5,"commands":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add Dokkabei97\u002Fdokkabei-harness --skill mvp-design-spec",{"tool":69,"command":70},"bunx","bunx skills add Dokkabei97\u002Fdokkabei-harness --skill mvp-design-spec",{"tool":72,"command":73},"pnpm","pnpm dlx skills add Dokkabei97\u002Fdokkabei-harness --skill mvp-design-spec","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FDokkabei97\u002Fdokkabei-harness\u002Fblob\u002Fmain\u002Farchive\u002Fmvp\u002Fskills\u002Fmvp-design-spec\u002FSKILL.md",true,[],[78,107,134,157,178,201],{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":87,"publishedAt":49},"01M6QZQTNF815AWYMAMJ3B25GY","sync-claude-md","커밋·푸시·PR\u002FMR 직전에 이번 변경이 프로젝트 CLAUDE.md 를 낡게 만드는지 검토하고, 필요할 때만 갱신 diff 를 제안한다 — 아키텍처·디렉터리 구조, 새 통합\u002FMCP, 컨벤션, 빌드·CI·도구, 주요 의존성 변화가 대상. 해당 없으면 한 줄로 끝낸다.\nReviews whether pending changes make the project CLAUDE.md stale (architecture, integrations, conventions, build\u002FCI\u002Ftooling, major dependencies) and proposes a minimal update diff only when needed.\nUse when: \"CLAUDE.md 갱신 필요해?\", \"CLAUDE.md 동기화\", 커밋\u002F푸시\u002FMR 전에 구조·도구가 바뀐 변경을 정리할 때, sync CLAUDE.md, check CLAUDE.md before commit or PR.","https:\u002F\u002Fgithub.com\u002FDokkabei97\u002Fdokkabei-harness\u002Fblob\u002Fmain\u002Fplugins\u002Fworkflow\u002Fskills\u002Fsync-claude-md\u002FSKILL.md",[84],{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,47],"sync","claude md","sync claude md","MCP","commit","architecture","pr","update","ci","integrations","use","diff","only","minimal","project","make","reviews","pending","mr",{"skillNo":108,"name":109,"nameZh":6,"description":110,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":111,"categories":112,"keywords":117,"publishedAt":49},"01M6QZQEK94G00N955VQH9EFQN","spec-driven-dev","새 기능·프로젝트·큰 변경을 코드보다 스펙 먼저로 진행하는 게이트 워크플로(SPECIFY → PLAN → TASKS → IMPLEMENT) — 가정 명시, 측정 가능한 성공 기준, Always\u002FAsk\u002FNever 경계, 단계별 사람 검토로 범위 이탈과 재작업을 줄인다.\nSpec-before-code gated workflow for new features or significant changes: explicit assumptions, measurable success criteria, boundaries, and a human review between stages.\nUse when: \"스펙 먼저\", \"기능 명세\", \"요구사항 정리\", starting a new feature or project, a significant change with vague requirements. 단순 버그 수정·1~2줄 변경엔 불필요.","https:\u002F\u002Fgithub.com\u002FDokkabei97\u002Fdokkabei-harness\u002Fblob\u002Fmain\u002Fplugins\u002Fworkflow\u002Fskills\u002Fspec-driven-dev\u002FSKILL.md",[113,114],{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":115,"categoryName":116,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000030","开发工程师",[33,118,119,120,121,122,123,124,125,126,127,128,129,130,102,131,46,132,133,47],"spec driven","dev","spec driven dev","driven","review","workflow","change","tasks","code","plan","ask","never","human","feature","vague","features",{"skillNo":135,"name":136,"nameZh":6,"description":137,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":138,"categories":139,"keywords":140,"publishedAt":49},"01M6QZQA9F6QVGTVDMJ28YQGDV","shipping-guide","프로덕션 배포 전후 가이드 — 배포 전 체크리스트, 피처 플래그 수명주기, 단계적 롤아웃과 진행\u002F보류\u002F롤백 임계값, 롤백 계획 템플릿, 배포 후 모니터링.\nProduction shipping guide: pre-launch checklist, feature-flag lifecycle, staged rollout with go\u002Fhold\u002Frollback thresholds, rollback plan template, post-launch monitoring.\nUse when: \"배포 준비\", \"릴리즈 전 점검\", \"롤아웃 계획\", \"롤백 계획\", preparing a production deploy, staged rollout, feature flags.","https:\u002F\u002Fgithub.com\u002FDokkabei97\u002Fdokkabei-harness\u002Fblob\u002Fmain\u002Fplugins\u002Fworkflow\u002Fskills\u002Fshipping-guide\u002FSKILL.md",[],[141,142,143,144,145,146,147,127,148,149,98,150,151,131,152,153,154,155,156,47],"shipping","guide","shipping guide","launch","monitoring","lifecycle","feature flags","template","rollback","rollout","flags","thresholds","post","with","pre-launch","rollback plan",{"skillNo":158,"name":159,"nameZh":6,"description":160,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":161,"categories":162,"keywords":163,"publishedAt":49},"01M6QZQ3M962PCWYM6YH62D76Z","retro","세션 회고·교훈 컴파운딩 — 이번 세션의 교정·실수·발견을 추출해 품질 기준(재현·일반화·판정 가능성)으로 거르고, 컨벤션 변화는 sync-claude-md 위임, 반복 실수는 tasks\u002Flessons.md(#가드-훅-후보 태그), 스킬 지식 갱신은 수정 제안으로 나눈다. 모든 적용은 승인 후.\nSession retrospective that turns corrections, mistakes, and discoveries into vetted lessons routed to CLAUDE.md sync, tasks\u002Flessons.md, or skill-edit proposals, with user approval before any write.\nUse when: \"회고\", \"레트로\", \"교훈 정리\", \"같은 실수 반복\", \"재발 방지 규칙\", retrospective, lessons learned, wrapping up a task, review, or loop. 여러 실행에 걸친 하네스 개선은 harness:evolve.","https:\u002F\u002Fgithub.com\u002FDokkabei97\u002Fdokkabei-harness\u002Fblob\u002Fmain\u002Fplugins\u002Fworkflow\u002Fskills\u002Fretro\u002FSKILL.md",[],[159,122,88,125,164,165,166,167,168,169,170,171,100,172,173,174,175,176,177,47],"run","harness","loop","evolve","write","edit","proposals","session","up","dry","learned","Session Retrospective","lessons","mistakes",{"skillNo":179,"name":180,"nameZh":6,"description":181,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":182,"categories":183,"keywords":185,"publishedAt":49},"01M6QZPPDATJ7DAGNP0JCXFGRV","project-rules","현재 프로젝트의 스택(빌드 파일 버전, 마이그레이션 도구, ORM 유무, ES 사용, git 호스트)을 감지해 프로젝트 루트 AGENTS.md 의 마커 블록(스택 사실 + 항상 적용되는 스페셜리스트 핵심 ≤15줄 — Claude Code·Codex·Antigravity 공통)과 CLAUDE.md 의 `@AGENTS.md` 연결, Claude 전용 경로 한정 .claude\u002Frules\u002F\u003Cstack>-specialist.md(해당 버전에 실제로 맞는 상세 함정)를 diff 로 제안하고, 스택 플러그인을 런타임별로 프로젝트 범위에서 켜는 법을 안내한다. 이전 버전 출력(CLAUDE.md 블록·specialist-core.md)은 AGENTS.md 로 이전을 제안. --check 는 버전 불일치·사라진 ID·크기 한도·연결 누락을 점검.\nDetects the project's stack and proposes a cross-runtime AGENTS.md block (stack facts + always-on specialist core) linked from CLAUDE.md via @AGENTS.md, plus Claude-only path-scoped specialist rules; migrates the older CLAUDE.md-block layout; --check audits drift.\nUse when: \"이 프로젝트 세팅\", \"프로젝트 규칙 생성\", \"AGENTS.md\u002FCLAUDE.md 점검\", project setup, generate project rules, audit AGENTS.md or CLAUDE.md drift.","https:\u002F\u002Fgithub.com\u002FDokkabei97\u002Fdokkabei-harness\u002Fblob\u002Fmain\u002Fplugins\u002Fworkflow\u002Fskills\u002Fproject-rules\u002FSKILL.md",[184],{"categoryNo":115,"categoryName":116,"taxonomyType":26,"taxonomyTypeDesc":27},[186,102,187,188,189,126,190,191,192,193,99,100,194,195,196,197,198,199,200,47],"Rules","project rules","core","generate","git","audit","stack","orm","es","drift","layout","runtime","-specialist","path","scoped",{"skillNo":202,"name":203,"nameZh":6,"description":204,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":205,"categories":206,"keywords":211,"publishedAt":49},"01M6QZPF3S8YAM27F297F6GVD7","post-merge","MR 머지 완료 후 Plane 이슈 종료와 Outline 문서 업데이트를 자동으로 처리하는 오케스트레이터 스킬입니다.\nissue-tracker와 document-latest 스킬을 연계 실행하여 머지 후 후속 작업을 일괄 처리합니다.\nOrchestrates post-merge follow-up after an MR is merged: chains the issue-tracker and document-latest skills to close the Plane issue and update Outline wiki docs in a single batch. Use when: an MR was just merged, closing tickets and syncing documentation after a merge, post-merge cleanup.","https:\u002F\u002Fgithub.com\u002FDokkabei97\u002Fdokkabei-harness\u002Fblob\u002Fmain\u002Fplugins\u002Fworkflow\u002Fskills\u002Fpost-merge\u002FSKILL.md",[207,210],{"categoryNo":208,"categoryName":209,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000002","文档处理",{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},[212,213,153,214,215,95,216,217,218,172,219,220,221,222,223,224,225,226,106,47],"merge","post merge","documentation","cleanup","batch","wiki","just","issue","tracker","close","closing","follow-up","true","plane","single"]