@su-record/vibe 3.0.0 → 3.2.0

package/skills/vibe.clone/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: vibe.clone
 description: URL → 마크업 레벨 픽셀 완벽 클론 — 헤드리스 브라우저로 라이브 사이트 캡처 후 현재 프로젝트 스택에 맞게 스캐폴딩
-argument-hint: "<url> [<url2>...] [--name=<feature>] [--mo-only] [--pc-only] [--ignore-robots] [--no-interact]"
+argument-hint: "<url> [<url2>...] [--name=<feature>] [--sub] [--mo-only] [--pc-only] [--ignore-robots] [--no-interact] [--real-content]"
 user-invocable: true
 ---
 
@@ -18,9 +18,11 @@ URL을 받아 **마크업 수준으로 정밀 복제**하고 현재 프로젝트
 /vibe.clone <url> --mo-only                    # 모바일(375×812)만 캡처
 /vibe.clone <url> --pc-only                    # 데스크탑(1440×900)만 캡처
 /vibe.clone <url> --name=stripe-clone          # 기능 이름 지정 (기본: 호스트명 kebab-case)
+/vibe.clone <url> --sub                        # 사이트맵/메가메뉴 하위 메뉴 URL까지 함께 클론
 /vibe.clone <url1> <url2> <url3>               # 다중 페이지 클론 (같은 사이트의 여러 경로)
 /vibe.clone <url> --ignore-robots              # robots.txt 무시 (사이트 소유자 허가 있을 때만)
 /vibe.clone <url> --no-interact                # 능동 인터랙션 스윕 끄기 (완전 결정론적·재현 가능 캡처)
+/vibe.clone <url> --real-content               # 텍스트 verbatim 유지 (본인 소유/허가 확인 1회 필수)
 ```
 
 ## Argument Routing
@@ -30,11 +32,22 @@ Step 1) 인자 수집
   urls         = http(s):// 로 시작하는 모든 인자
   feature      = --name=<value> | URL host → kebab-case
   scope        = --mo-only | --pc-only | (기본: both)
+  sub          = --sub 플래그 유무
   ignoreRobots = --ignore-robots 플래그 유무
+  realContent  = --real-content 플래그 유무 (소유/허가 확인 질문 1회 후 적용)
 
 Step 2) 인자 검증
   urls.length === 0  → 사용자에게 URL 입력 요청, 중단
   ! /^https?:\/\//.test(url) → "유효한 URL이 아닙니다" 에러, 중단
+  --sub && urls.length > 1 → "--sub는 기준 URL 1개와 함께 사용하세요" 에러, 중단
+
+Step 2.5) --sub URL 확장
+  - node {{VIBE_PATH}}/hooks/scripts/clone-extract.js suburls <url> \
+      --out=/tmp/{feature}/menu-urls.json [--ignore-robots]
+  - menu-urls.json.urls 를 urls 로 사용
+  - 수집 기준: /sitemap 우선, 없으면 header/nav/mega-menu
+  - 포함: 같은 origin + 같은 locale prefix의 하위 메뉴 URL
+  - 제외: 외부 링크, 언어 전환, 검색, TOP, 푸터 정책/문의/파트너/뉴스룸 링크
 
 Step 3) 스킬 진입
   → clone 스킬 Phase 0부터 순차 실행
@@ -49,13 +62,16 @@ Step 3) 스킬 진입
 Phase 0: Setup
   - .vibe/config.json + package.json → 스택 감지
   - feature 이름 결정, 디렉토리 생성
+  - --sub이면 /tmp/{feature}/menu-urls.json 생성 후 URL 목록 확장
 
 Phase 1: Capture (병렬 — scope에 따라 MO/PC 동시)
   - node {{VIBE_PATH}}/hooks/scripts/clone-extract.js capture <url> \
       --out=/tmp/{feature}/{bp}/ --viewport={WxH} --bp={mo|pc}
-  - 출력: rendered.html, computed.json, screenshot.png, states.json, behaviors.json, asset-map.json, assets/
-  - behaviors.json = 능동 인터랙션 스윕(스크롤 시 헤더/내비 변화 diff + 탭 클릭 콘텐츠 스왑 감지).
+  - 출력: rendered.html, computed.json, screenshot.png, states.json, behaviors.json, asset-map.json, assets/ (images·fonts·seo)
+  - behaviors.json = 능동 인터랙션 스윕 4종+ (스크롤 헤더 diff · 탭 클릭 콘텐츠 스왑 · 호버 diff ·
+    in-view 등장 애니메이션 · time-driven 캐러셀 후보 · 스무스 스크롤 라이브러리 감지).
     JS로 세팅되는 상태(정적 CSS로는 안 잡힘)를 포착 — 클론 정확도의 핵심. --no-interact 로 비활성화.
+  - assets/seo/ = favicon·apple-touch-icon·og:image·webmanifest (Foundation 단계에서 배선)
 
 Phase 2: Refine (BP마다 독립)
   - node {{VIBE_PATH}}/hooks/scripts/clone-refine.js \
@@ -63,21 +79,34 @@ Phase 2: Refine (BP마다 독립)
       --out=/tmp/{feature}/{bp}/sections.json --states=/tmp/{feature}/{bp}/states.json --bp={mo|pc}
   - sections.json 에 section.interaction(인터랙션 모델 추정) + section.states(상태 규칙) 포함
 
-Phase 3: Scaffold (BP 순차 — MO 완료 후 PC)
+Phase 2.5: Foundation (순차 — 섹션 빌드 전)
+  - 폰트 배선(Next → next/font) · assets/seo/ → public/ (favicon·OG·manifest 메타 배선)
+  - 인라인 SVG dedupe → 아이콘 모듈 · scrollLib 감지 시 페이지 레벨 배선
+
+Phase 3: Scaffold (BP 순차 — MO 완료 후 PC / 섹션은 병렬 빌더 디스패치)
   - Step 0: node {{VIBE_PATH}}/hooks/scripts/clone-spec.js \
       /tmp/{feature}/{bp}/sections.json \
-      --out=./components/{feature}/_specs/ --feature={feature}
-    → 섹션별 빌드 계약서(_specs/{Section}.spec.md). 빌드 전 TODO(인터랙션 모델 확정·상태 목록·텍스트 교체) 해결
+      --out=./components/{feature}/_specs/{bp}/ --feature={feature} [--real-content]
+    → 섹션별 빌드 계약서(_specs/{bp}/{Section}.spec.md). 디스패치 전 TODO(인터랙션 모델 확정·상태 목록·텍스트 교체) 해결
+    → spec 150줄 초과 시 하위 컴포넌트 spec으로 분할 (기계적 체크 — wc -l)
   - Step A: node {{VIBE_PATH}}/hooks/scripts/clone-to-scss.js \
       /tmp/{feature}/{bp}/sections.json \
-      --out=./styles/{feature}/ --feature={feature}
-  - Claude: 섹션별로 HTML/컴포넌트 작성 (스택별 .tsx/.vue/.svelte/.html) — 확정된 인터랙션 모델 + 모든 상태 반영
+      --out=./styles/{feature}/{bp}/ --feature={feature}
+    → SCSS 초안. 이후 근거(computed/states/behaviors) 인용 시 수정 허용 — clone-validate가 판정자
+  - 병렬 디스패치: 섹션별 빌더 서브에이전트 — spec 전문을 프롬프트에 인라인, 병렬 파일 쓰기는 worktree 격리
   - Step B: node {{VIBE_PATH}}/hooks/scripts/clone-validate.js \
-      ./styles/{feature}/ /tmp/{feature}/{bp}/sections.json --section={Name}
-  - 섹션마다 PASS 받고 다음 섹션 진행
+      ./styles/{feature}/{bp}/ /tmp/{feature}/{bp}/sections.json --section={Name}
+  - 섹션마다 PASS 후 완료 처리 (머지 순서: 하위 컴포넌트 → 래퍼)
+
+Phase 3C: Responsive Merge (MO+PC 모두 Phase 5 통과 후)
+  - node {{VIBE_PATH}}/hooks/scripts/clone-merge-responsive.js \
+      --mo=./styles/{feature}/mo/ --pc=./styles/{feature}/pc/ \
+      --out=./styles/{feature}/ [--breakpoint=1024]
+    → mobile-first 병합: MO 선언 = 기본, PC diff만 @media (min-width) 블록
+  - 컴포넌트 import를 병합 index.scss로 전환 → Phase 4 → Phase 5를 두 뷰포트 모두 재실행
 
 Phase 4: Compile Gate (clone SKILL.md 규칙)
-Phase 5: Pixel Verification (P1=0까지 루프 — clone SKILL.md 규칙)
+Phase 5: Pixel Verification (P1=0까지 루프 — clone SKILL.md 규칙; 병합 후엔 MO·PC 양쪽)
 ```
 
 ## Prerequisites
@@ -91,19 +120,22 @@ Phase 5: Pixel Verification (P1=0까지 루프 — clone SKILL.md 규칙)
 
 ```
 /tmp/{feature}/                  # 작업 디렉토리 (산출물 원본)
+  ├── menu-urls.json             # --sub URL 확장 결과
   ├── mo/, pc/                   # rendered.html, computed.json, screenshot.png, states.json, behaviors.json, sections.json, assets/
   └── project-tokens.json        # 기존 프로젝트 토큰 인덱스
 
-./components/{feature}/          # Claude가 작성한 컴포넌트 (.tsx/.vue/.svelte/.html)
-./components/{feature}/_specs/   # clone-spec.js가 생성한 섹션별 빌드 계약서 (*.spec.md)
-./styles/{feature}/              # clone-to-scss.js가 생성한 SCSS 파일
-  ├── _tokens.scss               # CSS 변수
+./components/{feature}/          # 빌더가 작성한 컴포넌트 (.tsx/.vue/.svelte/.html)
+./components/{feature}/_specs/{mo,pc}/  # clone-spec.js가 생성한 섹션별 빌드 계약서 (*.spec.md)
+./styles/{feature}/              # 최종 병합 SCSS (Phase 3C 산출 — mobile-first @media)
+  ├── mo/, pc/                   # BP별 SCSS 초안 (clone-to-scss.js + 근거 기반 수정)
+  ├── _tokens.scss               # CSS 변수 (병합)
   ├── _base.scss                 # @font-face
-  ├── _shared.scss               # 유틸
-  ├── sections/_<name>.scss      # 섹션별 partial
-  ├── index.scss                 # 마스터 orchestrator
-  └── class-plan.json            # 노드 id → BEM 클래스
+  ├── _shared.scss               # 유틸 + 글로벌 동작 (scroll-lib 등)
+  ├── sections/_<name>.scss      # 섹션별 partial (병합)
+  ├── index.scss                 # 마스터 orchestrator (병합)
+  └── class-plan.json            # 노드 id → BEM 클래스 (병합)
 ./public/images/{feature}/       # 다운로드된 이미지/폰트
+./public/ (프로젝트 관례 경로)     # favicon·OG·manifest (assets/seo/ 에서 배선)
 ```
 
 ## Legal Notes
@@ -121,6 +153,7 @@ Phase 5: Pixel Verification (P1=0까지 루프 — clone SKILL.md 규칙)
 
 Claude 기본 행동:
   - 저작권 텍스트 → 플레이스홀더("[Lorem ipsum]") 교체
+  - --real-content → 소유/허가 확인 질문 1회 후 verbatim 유지 (본인 사이트 재구축 유스케이스)
   - robots.txt 차단 경로 → 명시적 --ignore-robots 없으면 거부
   - 사용자 의도가 사칭/기만이면 즉시 거부
 ```

package/skills/vibe.continue/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: vibe.continue
+description: Restore previous session context for continuity — memory load, context restore, resume from last checkpoint.
+argument-hint: (no arguments)
+user-invocable: true
+---
+
+# /vibe.continue
+
+Restore previous session context for continuity.
+
+## Usage
+
+```
+/vibe.continue
+```
+
+## Process
+
+1. Calls `core_start_session` to load project memories
+2. Restores previous conversation context
+3. Resumes work from last checkpoint
+
+## When to Use
+
+- At new session start, to pick up exactly where the previous session left off
+- At 85%+ context usage: `save_memory` → `/new` → `/vibe.continue` (컨텍스트 리셋 후 즉시 복원)
+- Combine with the `handoff` skill for detailed handover: Handoff writes a manual `HANDOFF.md` (work progress + notes + file list) before a session ends; `/vibe.continue` automatically restores memory + session state at the start of the next one.
+
+---
+
+ARGUMENTS: $ARGUMENTS

package/skills/vibe.design/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: vibe.design
 description: DESIGN.md(시각 품질 SSOT) 생성·검증·드리프트 검사·동기화. Figma 독립.
-argument-hint: "init [--from=interview|code|reference|figma] | lint | verify | sync"
+argument-hint: "init [--from=interview|code|reference|figma] | lint | verify | sync | preview"
 user-invocable: true
 ---
 
@@ -22,6 +22,7 @@ user-invocable: true
 /vibe.design lint                       # Stitch 9 섹션 완전성 검증
 /vibe.design verify [--files=<glob>]    # 구현 ↔ DESIGN.md hex 드리프트 (v1)
 /vibe.design sync                       # Figma 연결 시 양방향 동기화 (Should, Phase 2)
+/vibe.design preview "description"      # UI 프리뷰 (Antigravity 목업 또는 ASCII 폴백)
 ```
 
 ## Philosophy
@@ -152,6 +153,25 @@ user-invocable: true
 
 **v1 동작**: "Phase 2 에서 활성됩니다. 현재는 `/vibe.figma --emit-design-md` 를 사용하세요." 메시지 후 종료.
 
+### Subcommand: `preview`
+
+Generate the UI preview directly in the main session (native capability — no dedicated agent). DESIGN.md 와 독립적으로 동작 — 임시 프리뷰용.
+
+Generate UI preview from a text description, a design folder, or a single file.
+
+- **Antigravity enabled**: UI mockup image + component code generation
+- **Antigravity disabled**: ASCII art fallback
+
+**Input types:**
+
+| Input | Example |
+| ----- | ------- |
+| Text description | `"Login form with email, password"` |
+| Design folder | `./design/` |
+| Single file | `./mockups/login.html` |
+
+> Read `references/ui-preview.md` for the full supported file-format list and example invocations.
+
 ## Integration
 
 | Skill | 통합 지점 |
@@ -173,11 +193,13 @@ user-invocable: true
 |-----|---------|
 | `<root>/DESIGN.md` | `init` / `sync` |
 | 콘솔 리포트 | `lint` / `verify` |
+| ASCII 프리뷰 또는 목업 이미지 | `preview` |
 
 ## Heuristics & References
 
 - 코드 역추출 패턴: `heuristics/code-extract.md`
 - 시드 카탈로그: `references/README.md`
+- UI 프리뷰 포맷·예시: `references/ui-preview.md`
 - 템플릿: `templates/DESIGN.md.template`
 
 ARGUMENTS: $ARGUMENTS

package/skills/vibe.design/references/ui-preview.md

@@ -0,0 +1,20 @@
+# vibe.design — UI Preview: Supported Formats & Example
+
+> Loaded by vibe.design SKILL.md `preview` subcommand — full supported file-format list and example invocations.
+
+**Supported file formats in folder:**
+
+- `*.html` - HTML mockups
+- `*.png` / `*.jpg` / `*.webp` - UI screenshots (Claude reads images)
+- `*.json` - Design tokens
+- `*.css` / `*.scss` - Style variables
+- `*.md` - Style guides
+- `*.svg` - Vector graphics
+
+**Example:**
+
+```
+/vibe.design preview "Login form - email, password input + login button"
+/vibe.design preview ./design/dashboard/
+/vibe.design preview ./mockups/homepage.png
+```

package/skills/vibe.docs/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: vibe.docs
-description: Generate project documentation — README, architecture docs, user guide, release notes, agent instructions
-argument-hint: "readme, guide, arch, release, or agent"
+description: Generate project documentation — README, architecture docs, user guide, release notes, agent instructions, diagrams, codemaps
+argument-hint: "readme, guide, arch, release, agent, diagram, or codemaps"
 user-invocable: true
 ---
 
@@ -17,6 +17,8 @@ Generate or update project documentation by analyzing the actual codebase.
 /vibe.docs arch       # 아키텍처 문서 + Mermaid 다이어그램 (docs/ARCHITECTURE.md)
 /vibe.docs release    # 릴리즈 노트 (git history 기반)
 /vibe.docs agent      # CLAUDE.md / AGENTS.md 생성·동기화 (agents-md 검증 필수)
+/vibe.docs diagram    # Mermaid 다이어그램 (architecture/ER/flow/seq) → .vibe/diagrams/
+/vibe.docs codemaps   # 코드베이스 구조 자동 문서화 → docs/CODEMAPS/
 ```
 
 ## Pipeline Position