@su-record/vibe 2.9.40 → 2.10.2

package/hooks/scripts/llm-orchestrate.js

@@ -112,7 +112,6 @@ function resolveModel(providerName, config) {
  *
  * true인 경우:
  * - vibe-codex: ANTHROPIC_BASE_URL이 localhost (프록시 모드)
- * - coco: ~/.coco/ 존재 또는 COCO_HOME 설정
  * - 명시적: VIBE_SECONDARY_LLM=claude
  */
 function useClaudeAsSecondary() {
@@ -121,10 +120,6 @@ function useClaudeAsSecondary() {
   // 2. vibe-codex 프록시 모드
   const baseUrl = process.env.ANTHROPIC_BASE_URL || '';
   if (baseUrl.includes('localhost') || baseUrl.includes('127.0.0.1')) return true;
-  // 3. coco 환경
-  if (process.env.COCO_HOME) return true;
-  const cocoDir = path.join(os.homedir(), '.coco');
-  if (fs.existsSync(cocoDir)) return true;
   return false;
 }
 
@@ -601,10 +596,10 @@ async function main() {
     // 명시적 claude 호출
     providerChain = ['claude', 'gemini'];
   } else if (isGpt) {
-    // GPT 주관 → claude fallback (vibe-codex/coco), gemini fallback (직접 모드)
+    // GPT 주관 → claude fallback (vibe-codex), gemini fallback (직접 모드)
     providerChain = claudeSecondary ? [provider, 'claude'] : [provider, 'gemini'];
   } else {
-    // gemini 주관 → claude fallback (vibe-codex/coco), gpt fallback (직접 모드)
+    // gemini 주관 → claude fallback (vibe-codex), gpt fallback (직접 모드)
     providerChain = claudeSecondary ? ['gemini', 'claude'] : ['gemini', 'gpt'];
   }
 

package/hooks/scripts/prompt-dispatcher.js

@@ -42,11 +42,11 @@ try {
 
 if (!prompt) process.exit(0);
 
-// 레거시 SSOT 통합 — `/vibe.*` 진입 시 `.claude/vibe/`·`.coco/vibe/` → `.vibe/` 자동 이동.
+// 레거시 SSOT 통합 — `/vibe.*` 진입 시 `.claude/vibe/` → `.vibe/` 자동 이동.
 // `vibe init`/`update` 와 동일한 `consolidateLegacyVibe` (dist/cli/setup/LegacyMigration.js) 를 직접 재사용. Idempotent.
 if (/^\s*\/vibe\b/i.test(prompt)) {
   try {
-    const projectDir = process.env.CLAUDE_PROJECT_DIR || process.env.COCO_PROJECT_DIR || process.cwd();
+    const projectDir = process.env.CLAUDE_PROJECT_DIR || process.cwd();
     const utils = await import('./utils.js');
     const CLI_BASE = utils.getCliBaseUrl();
     const { consolidateLegacyVibe } = await import(`${CLI_BASE}setup/LegacyMigration.js`);
@@ -183,7 +183,7 @@ if (!matched) {
   setImmediate(async () => {
     try {
       const utils = await import('./utils.js');
-      const projectDir = process.env.CLAUDE_PROJECT_DIR || process.env.COCO_PROJECT_DIR || '.';
+      const projectDir = process.env.CLAUDE_PROJECT_DIR || '.';
       const configPath = utils.projectVibePath(projectDir, 'config.json');
       let gapEnabled = true;
       try {

package/hooks/scripts/step-counter.js

@@ -68,7 +68,7 @@ function isResponseError(toolResponse) {
 }
 
 // ─────────────────────────────────────────────────────
-// 책임 3a: error_category 분류 (regex 만 — vibe-regress tag enum 일부)
+// 책임 3a: error_category 분류 (regex 만 — regress tag enum 일부)
 // ─────────────────────────────────────────────────────
 const ERROR_CATEGORIES = [
   { tag: 'nullability', re: /Cannot read propert(?:y|ies) of (?:undefined|null)|TypeError[^\n]*(?:undefined|null)/i },

package/hooks/scripts/utils.js

@@ -17,7 +17,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const DETECTED_VIBE_PATH = path.resolve(__dirname, '..', '..');
 
 export const VIBE_PATH = process.env.VIBE_PATH || DETECTED_VIBE_PATH;
-export const PROJECT_DIR = process.env.CLAUDE_PROJECT_DIR || process.env.COCO_PROJECT_DIR || '.';
+export const PROJECT_DIR = process.env.CLAUDE_PROJECT_DIR || '.';
 
 // ~/.vibe/ 디렉토리 경로
 const VIBE_HOME_DIR = path.join(os.homedir(), '.vibe');
@@ -25,16 +25,14 @@ const VIBE_HOME_DIR = path.join(os.homedir(), '.vibe');
 /**
  * 프로젝트 내 Vibe 에셋 루트 해석.
  *
- * 신규 SSOT: `<project>/.vibe/` — CLI(Claude/coco)와 무관한 공용 디렉토리.
+ * 신규 SSOT: `<project>/.vibe/` — CLI(Claude/Codex)와 무관한 공용 디렉토리.
  * Legacy fallback:
  *   - `<project>/.claude/vibe/`  (Claude Code 프로젝트 초기화 흔적)
- *   - `<project>/.coco/vibe/`    (coco 프로젝트 초기화 흔적)
  *
  * 해석 규칙 — **읽기**(lookup) 시:
  *   1) `.vibe/` 가 존재하면 그 경로
  *   2) `.claude/vibe/` 가 존재하면 그 경로
- *   3) `.coco/vibe/` 가 존재하면 그 경로
- *   4) 아무것도 없으면 기본값 `.vibe/` (생성 대상)
+ *   3) 아무것도 없으면 기본값 `.vibe/` (생성 대상)
  *
  * **쓰기**(write) 시에는 항상 새 SSOT 인 `.vibe/` 로 수렴시키는 것이 원칙이지만,
  * 기존 프로젝트의 legacy 파일이 있으면 해당 위치에 쓰는 것이 덜 파괴적이다.
@@ -48,8 +46,6 @@ export function projectVibeRoot(projectDir = PROJECT_DIR) {
     if (fs.existsSync(vibeRoot)) return vibeRoot;
     const claudeVibe = path.join(projectDir, '.claude', 'vibe');
     if (fs.existsSync(claudeVibe)) return claudeVibe;
-    const cocoVibe = path.join(projectDir, '.coco', 'vibe');
-    if (fs.existsSync(cocoVibe)) return cocoVibe;
   } catch { /* ignore */ }
   return path.join(projectDir, '.vibe');
 }
@@ -66,14 +62,13 @@ export function projectVibePath(projectDir = PROJECT_DIR, ...sub) {
 
 /**
  * 프로젝트 메모리 DB 디렉토리 해석.
- * `.vibe/memories/` (신규) → `.claude/memories/` (legacy Claude) → `.coco/memories/` (legacy coco) → 기본 `.vibe/memories/`
+ * `.vibe/memories/` (신규) → `.claude/memories/` (legacy Claude) → 기본 `.vibe/memories/`
  */
 export function projectMemoryDir(projectDir = PROJECT_DIR) {
   try {
     const candidates = [
       path.join(projectDir, '.vibe', 'memories'),
       path.join(projectDir, '.claude', 'memories'),
-      path.join(projectDir, '.coco', 'memories'),
     ];
     for (const c of candidates) if (fs.existsSync(c)) return c;
   } catch { /* ignore */ }
@@ -95,7 +90,7 @@ export function readVibeConfig() {
 }
 
 /**
- * 프로젝트 설정(.vibe/config.json) 읽기 — legacy `.claude/vibe/`, `.coco/vibe/` fallback 포함
+ * 프로젝트 설정(.vibe/config.json) 읽기 — legacy `.claude/vibe/` fallback 포함
  * @returns {object} 파싱된 config 또는 빈 객체
  */
 export function readProjectConfig() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.9.40",
+  "version": "2.10.2",
   "description": "AI Coding Framework for Claude Code — 56 agents, 45 skills, multi-LLM orchestration",
   "type": "module",
   "main": "dist/cli/index.js",
@@ -27,6 +27,7 @@
     "dev": "tsc --watch",
     "gen:skill-docs": "npx tsx scripts/gen-skill-docs.ts",
     "gen:skill-docs:check": "npx tsx scripts/gen-skill-docs.ts --check",
+    "validate:skill-invocation": "npx tsx scripts/validate-skill-invocation.ts",
     "test": "vitest run",
     "test:watch": "vitest",
     "prepublishOnly": "pnpm build",

package/skills/agents-md/SKILL.md

@@ -1,5 +1,7 @@
 ---
 name: agents-md
+user-invocable: false
+invocation: [auto, chain]
 tier: standard
 description: "Optimize AGENTS.md / CLAUDE.md by removing discoverable info and keeping only gotchas. Based on Addy Osmani's AGENTS.md principles. Activates on agents.md, claude.md, context file optimization."
 triggers: [agents.md, claude.md, context file, optimize agents, optimize claude]

package/skills/arch-guard/SKILL.md

@@ -1,5 +1,7 @@
 ---
 name: arch-guard
+user-invocable: false
+invocation: [auto]
 tier: core
 description: "Generate architecture boundary tests that mechanically enforce layer constraints. Use when adding new modules, refactoring layers, or after detecting circular dependencies. Creates import-rule tests (e.g., 'UI must not import DB') that fail CI on violation. Must use this skill when user mentions layer enforcement, dependency rules, or architectural boundaries — even casually like 'make sure services don't import controllers'."
 triggers: [arch guard, architecture test, layer test, boundary test, structural test, arch validation]

package/skills/brand-assets/SKILL.md

@@ -1,5 +1,6 @@
 ---
 name: brand-assets
+invocation: [auto]
 tier: standard
 description: "Auto-generate app icons (iOS/Android/PWA), favicons, and OG images from SPEC brand information using Gemini Image API. Use when the project needs visual brand assets, when user mentions 'icon', 'favicon', 'logo', or 'brand assets', or when a SPEC defines brand colors/identity but no assets exist yet. Outputs multiple sizes and formats ready for deployment. Not for complex illustration or marketing graphics — focused on app identity assets."
 triggers: [icon, favicon, brand, logo, app icon, branding, assets]

package/skills/capability-loop/SKILL.md

@@ -1,5 +1,7 @@
 ---
 name: capability-loop
+user-invocable: false
+invocation: [auto]
 tier: standard
 description: "When an agent fails, diagnose which capability is missing and build it into the repo. Activates after repeated agent failures, tool errors, or when a task keeps failing in the same way. Analyzes failure transcripts, identifies the missing guardrail/tool/abstraction/doc, and creates it permanently. Use this skill whenever you see 3+ similar failures, an agent hitting the same wall repeatedly, or the user asking 'why does this keep failing'."
 triggers: [capability loop, failure loop, build capability, missing capability, agent failed, why did it fail]

package/skills/characterization-test/SKILL.md

@@ -1,5 +1,7 @@
 ---
 name: characterization-test
+user-invocable: false
+invocation: [auto]
 tier: core
 description: "Lock existing behavior with characterization tests before modifying code. Use BEFORE any refactor, rewrite, or large-scale modification of existing code — especially legacy code without tests. Captures current input/output behavior as test cases so regressions are caught immediately. Must use this skill when touching files >200 lines with no existing tests, when user says 'refactor', 'rewrite', 'modernize', or 'clean up' existing code."
 triggers: [legacy, characterization test, lock behavior, regression prevention, before refactor, large file]

package/skills/chub-usage/SKILL.md

@@ -1,5 +1,6 @@
 ---
 name: chub-usage
+invocation: [auto]
 tier: optional
 description: "Context Hub (chub) — fetch vetted, up-to-date API documentation. Write accurate code based on the latest docs instead of training data when working with external APIs/SDKs."
 triggers: [chub, context hub, API docs, latest API, deprecated API, SDK documentation, api reference, 최신 문서]

package/skills/claude-md-guide/SKILL.md

@@ -1,5 +1,7 @@
 ---
 name: claude-md-guide
+user-invocable: false
+invocation: [auto]
 tier: standard
 description: "Guide for writing effective CLAUDE.md files from scratch. Evidence-based methodology from 40+ sources including research papers, official docs, and real-world examples. Covers 3-layer architecture, Curse of Instructions mitigation, progressive disclosure, and maintenance. Use when creating new CLAUDE.md, improving existing ones, or teaching team members how to write project instructions for AI agents."
 triggers: [claude-md guide, write claude.md, create claude.md, claude.md 작성, 클로드 문서, project instructions, claude-md]

package/skills/clone/SKILL.md

@@ -0,0 +1,361 @@
+---
+name: clone
+description: URL → markup 수준 pixel-perfect 클론 본체 — headless browser로 라이브 사이트 캡처 후 현재 스택으로 스캐폴드.
+when_to_use: /vibe.clone 진입점에서 체인 호출. 직접 호출 금지.
+user-invocable: false
+tier: standard
+---
+
+# vibe.clone — Markup-Level Website Clone
+
+## Core Principles
+
+```
+The rendered DOM is the source of truth for markup. Screenshots are for pixel verification only.
+
+✅ Puppeteer-rendered DOM (post-JS) → HTML structural mapping
+✅ Computed CSS → SCSS direct conversion (no guessing)
+✅ All remote assets (images, fonts) → downloaded locally and rewritten to project paths
+✅ Claude handles semantic decisions only: tag selection, component splitting, interactions
+✅ Screenshots are used for verification only, not generation
+```
+
+## Immutable Rules
+
+```
+1. Do NOT generate CSS values by guessing or eyeballing screenshots.
+   ✅ Use clone-extract.js computed CSS output as-is.
+   ❌ Do NOT write CSS values directly inside scoped <style> blocks.
+
+2. Do NOT hotlink remote assets. All images/fonts must be downloaded and rewritten.
+
+3. Do NOT skip the pixel verification loop (Phase 5). The clone is incomplete without it.
+
+4. Do NOT copy textual content verbatim from copyrighted sources for production use.
+   This skill is for layout/markup learning ("클론 코딩"). Replace text with placeholders
+   or user-provided copy when shipping a real product.
+```
+
+## Full Flow
+
+```
+Input: a URL (or multiple URLs for multi-page clones)
+
+→ Phase 0: Setup (stack detection, feature naming, working dir)
+→ Phase 1: Capture (Puppeteer → rendered HTML + computed CSS + screenshots + assets)
+→ Phase 2: Refine (DOM → sections.json per breakpoint)
+→ Phase 3: Scaffold (sections.json → SCSS auto-gen + Claude-authored HTML/components)
+→ Phase 4: Compile gate
+→ Phase 5: Pixel verification loop
+
+Working directory:
+  /tmp/{feature}/
+  ├── mo/ (375×812)  — rendered.html, computed.json, screenshot.png, assets/, sections.json
+  ├── pc/ (1440×900) — rendered.html, computed.json, screenshot.png, assets/, sections.json
+  └── tokens.json    — extracted design tokens (colors/fonts/spacing)
+
+Code output: placed directly in the project directory per detected stack
+  components/{feature}/, styles/{feature}/, public/images/{feature}/
+```
+
+---
+
+## Phase 0: Setup
+
+```
+1. Stack detection:
+   - .vibe/config.json → stack (react/vue/next/svelte/vanilla, scss/tailwind/css-modules)
+   - Fallback: package.json deps
+2. Feature name: URL hostname → kebab-case (e.g. stripe.com → stripe-clone)
+   - User may override with --name=<custom>
+3. Directories:
+   - components/{feature}/, styles/{feature}/, public/images/{feature}/
+4. Component indexing → /tmp/{feature}/component-index.json
+   (scan up to 50 existing components, extract props/slots/classes, within 2 minutes)
+5. Design token scan → /tmp/{feature}/project-tokens.json
+   (SCSS > CSS Variables > Tailwind > CSS-in-JS)
+```
+
+---
+
+## Phase 1: Capture ← Headless browser (parallel MO/PC)
+
+**Coordinator pattern: run MO/PC capture as parallel workers.**
+
+### BLOCKING Command — Use only clone-extract.js for capture
+
+```bash
+# [CLONE_SCRIPT] = {{VIBE_PATH}}/hooks/scripts/clone-extract.js
+
+# Mobile (375×812)
+node {{VIBE_PATH}}/hooks/scripts/clone-extract.js capture <URL> \
+  --out=/tmp/{feature}/mo/ \
+  --viewport=375x812 \
+  --bp=mo
+
+# Desktop (1440×900)
+node {{VIBE_PATH}}/hooks/scripts/clone-extract.js capture <URL> \
+  --out=/tmp/{feature}/pc/ \
+  --viewport=1440x900 \
+  --bp=pc
+```
+
+⛔ **Writing custom capture scripts (puppeteer-fetch.mjs, etc.) is forbidden.**
+⛔ **Do NOT use WebFetch or curl** — they cannot render JS-driven SPAs.
+✅ Use clone-extract.js. If output is unsatisfactory, modify the script.
+
+### Output per breakpoint
+
+```
+/tmp/{feature}/{bp}/
+  ├── rendered.html       — final DOM after JS execution
+  ├── computed.json       — per-element computed CSS + bounding box
+  ├── screenshot.png      — full-page screenshot
+  ├── assets/
+  │   ├── images/         — all <img>, background-image, <picture> sources
+  │   └── fonts/          — @font-face srcs
+  └── asset-map.json      — remote URL → local path mapping
+```
+
+### Capture rules
+
+```
+1. Wait for `networkidle2` (no in-flight requests for 500ms) before snapshot
+2. Scroll to bottom slowly to trigger lazy-loaded content
+3. Resolve all <img src>, srcset, and computed background-image URLs
+4. Resolve @font-face src() URLs from all stylesheets
+5. Download assets in parallel (concurrency=8), preserve original extensions
+6. Rewrite asset URLs in rendered.html and computed.json to local paths
+7. Strip inline analytics/tracking scripts before saving rendered.html
+```
+
+---
+
+## Phase 2: Refine ← DOM → sections.json (independent per BP)
+
+### BLOCKING Command — Writing custom refine scripts is forbidden
+
+```bash
+# MO
+node {{VIBE_PATH}}/hooks/scripts/clone-refine.js \
+  /tmp/{feature}/mo/rendered.html \
+  /tmp/{feature}/mo/computed.json \
+  --out=/tmp/{feature}/mo/sections.json \
+  --bp=mo
+
+# PC
+node {{VIBE_PATH}}/hooks/scripts/clone-refine.js \
+  /tmp/{feature}/pc/rendered.html \
+  /tmp/{feature}/pc/computed.json \
+  --out=/tmp/{feature}/pc/sections.json \
+  --bp=pc
+```
+
+⛔ **Phase 3 is blocked until refine completes for all required BPs.**
+⛔ **Do NOT parse rendered.html with custom Python/Node scripts.**
+✅ Use clone-refine.js output as-is. If unsatisfactory, modify the script.
+
+### Refinement rules
+
+```
+Refinement applied when converting rendered.html + computed.json → sections.json:
+  1. Strip <script>, <noscript>, <style>, tracking pixels
+  2. Strip nodes with display:none, visibility:hidden, opacity:0, size 0
+  3. Detect sections: <header>, <nav>, top-level <section>/<main> children, <footer>
+     Fallback: top-level children of <body> with height > 100px
+  4. Detect repeated patterns (sibling nodes with same tag+class signature, count >= 3)
+     → mark as component candidates
+  5. Extract design tokens:
+     - colors: unique color/background-color values, sorted by frequency
+     - typography: font-family/size/weight combinations
+     - spacing: padding/margin values (px), bucketed to nearest 4px
+  6. Background images (background-image: url) → images.bg
+  7. Inline <img> → images.content
+  8. Keep CSS subset: layout (display/flex/grid/position/inset/margin/padding/width/height/gap),
+     typography (font-*, line-height, letter-spacing, text-*, color),
+     decoration (background, border, border-radius, box-shadow, opacity),
+     transform/transition
+```
+
+### Output
+
+```
+/tmp/{feature}/{bp}/sections.json:
+  {
+    meta: { feature, url, viewport, bp },
+    tokens: { colors: [...], typography: [...], spacing: [...] },
+    sections: [
+      {
+        name: "Header" | "Hero" | "Features" | ...,
+        nodeRef, tag, size, css,
+        text,                 // text content (placeholder candidates)
+        components: [...],    // detected repeated patterns
+        children: [...],      // full recursive subtree
+        images: { bg, content: [...] }
+      }
+    ]
+  }
+```
+
+---
+
+## Phase 3: Scaffold ← stack-specific code generation
+
+**⛔ Implement MO fully first → pass verification → then PC. No responsive conversion in this phase.**
+**⛔ CSS values must use computed.json output as-is. No vw/clamp/@media in this phase.**
+
+### BLOCKING Command — SCSS must only use script output
+
+```bash
+# Step A: Auto-generate SCSS skeleton (run once per BP)
+node {{VIBE_PATH}}/hooks/scripts/clone-to-scss.js \
+  /tmp/{feature}/{bp}/sections.json \
+  --out=/path/to/project/styles/{feature}/ \
+  --token-file=/tmp/{feature}/project-tokens.json
+
+# Step B: Per-section validation (after writing each section's component code)
+node {{VIBE_PATH}}/hooks/scripts/clone-validate.js \
+  /path/to/project/styles/{feature}/ \
+  /tmp/{feature}/{bp}/sections.json \
+  --section={SectionName}
+```
+
+⛔ **Writing SCSS files directly without calling clone-to-scss.js invalidates Phase 3.**
+⛔ **Do NOT write custom SCSS generation scripts.**
+⛔ **Do NOT proceed to the next section without a clone-validate.js PASS.**
+✅ Use clone-to-scss.js output as-is. If unsatisfactory, modify the script.
+
+```
+Phase 3A: MO Scaffold
+  Input: /tmp/{feature}/mo/sections.json
+  ⛔ No parallelism. Process one section at a time:
+    1. Read the target section from sections.json
+    2. Map component candidates against component-index.json
+       ├─ Match → import existing
+       └─ No match → create new in components/{feature}/
+    3. clone-to-scss.js → auto-generate SCSS skeleton (computed values as-is) — Step A once
+    4. Claude: HTML structure + semantic tags + framework-specific component file
+       ⛔ No CSS written directly in <style> blocks — only @import/@use allowed
+       Framework mapping:
+         - React/Next → .tsx with CSS Modules or styled-components per stack
+         - Vue/Nuxt   → .vue with scoped <style lang="scss"> @import only
+         - Svelte     → .svelte with <style> @import only
+         - Vanilla    → .html + linked .scss
+    5. Asset references → public/images/{feature}/ (already populated in Phase 1)
+    6. clone-validate.js → compare SCSS vs sections.json — Step B
+       ├─ PASS → next section
+       └─ FAIL → fix discrepancies → re-run step 6 (loop until P1=0, no round cap)
+  → Phase 4 (MO compile) → Phase 5 (MO pixel verification)
+
+Phase 3B: PC Scaffold
+  Same process as MO, input /tmp/{feature}/pc/sections.json
+  → Phase 4 (PC compile) → Phase 5 (PC pixel verification)
+
+Phase 3C: Responsive Integration (after both MO+PC pass verification)
+  → Merge MO+PC styles into @media-based responsive layout (separate flow, TODO)
+
+Claude's role (restricted):
+  ✅ Component candidates: decide which patterns become reusable components
+  ✅ HTML semantics: section/h1/p/button/nav tag selection
+  ✅ Text replacement: substitute copyrighted copy with placeholders or user-supplied text
+  ✅ Interactions: hover/focus states, click handlers, conditional rendering
+  ❌ Do NOT modify SCSS CSS values (use clone-to-scss.js output as-is)
+  ❌ Do NOT write CSS directly in <style> blocks
+  ❌ Do NOT use vw/clamp/@media or create custom mixins in Phase 3A/3B
+  ❌ Do NOT hotlink remote URLs — all assets must use local public/images/ paths
+```
+
+---
+
+## Phase 4: Compile Gate
+
+```
+No round cap. Loop until compile succeeds (or stuck → ask user).
+
+0. Capture baseline (before Phase 3): record existing tsc + build errors
+   → Phase 4 only fixes NEW errors
+
+1. TypeScript: vue-tsc / svelte-check / tsc --noEmit
+2. Build: npm run build (120s timeout)
+3. Dev server: npm run dev → detect port → polling
+
+On error: parse → auto-fix → re-check
+Termination:
+  ✅ Success: all checks pass → enter Phase 5
+  ⚠️ Stuck: same errors as previous round → ask user
+     1. Direct fix instructions → retry
+     2. "proceed" — record remaining errors as TODO, proceed to Phase 5
+     3. "abort" — halt
+  ultrawork mode: on stuck, record TODO without prompting and proceed
+
+⛔ Must enter Phase 5 after Phase 4 passes. Do NOT output a "completion summary".
+```
+
+---
+
+## Phase 5: Pixel Verification Loop ← MANDATORY
+
+**⛔ Phase 5 is mandatory, not optional. Enter automatically after Phase 4.**
+**⛔ Skipping Phase 5 makes the entire clone "incomplete".**
+
+```
+No round cap. Loop until P1=0 (or stuck → ask user).
+Infrastructure: src/infra/lib/browser/ (Puppeteer + CDP) — same as figma Phase 6.
+
+1. Render scaffolded page in dev server at matching viewport
+2. Capture screenshot → pixelmatch comparison against /tmp/{feature}/{bp}/screenshot.png
+   diffRatio > 0.05 (clone target is tighter than figma) → P1
+3. CSS comparison: live computed CSS vs /tmp/{feature}/{bp}/computed.json
+   delta > 2px → P1, ≤ 2px → P2
+4. Asset audit: every <img>/background-image resolves to local public/images/ path → else P1
+5. Fix P1 first (refer to computed.json, no guessing) → revalidate compile → reload
+
+Narrowing scope:
+  Round 1: P1+P2+P3
+  Round 2: P1+P2
+  Round 3+: P1 only
+
+Termination:
+  ✅ P1=0 AND no new findings → complete
+  ⚠️ Stuck: same findings → ask user (resolve / proceed / abort)
+  ultrawork mode: on stuck, record TODO without prompting and complete
+
+Responsive: after MO verification → change viewport → repeat against PC screenshot
+Cleanup: shut down browser + dev server
+
+⛔ "Completion summary" output only allowed after Phase 5 completes.
+```
+
+---
+
+## Legal & Ethical Notes
+
+```
+This skill is intended for:
+  ✅ "Clone coding" learning exercises (markup/layout study)
+  ✅ Rebuilding the user's own previously-deployed sites
+  ✅ Authorized redesigns where the user has rights to the source
+
+NOT intended for:
+  ❌ Republishing copyrighted content (text, images, logos) without permission
+  ❌ Deceptive look-alike sites (phishing, brand impersonation)
+  ❌ Bypassing robots.txt or rate-limiting protections
+
+Claude must:
+  - Replace copyrighted text content with placeholders (e.g. "[Lorem ipsum]") by default
+  - Skip and warn when robots.txt disallows fetching the target path
+  - Refuse if the user's stated intent is brand impersonation or deception
+```
+
+---
+
+## Error Recovery
+
+| Failure | Recovery |
+|---------|----------|
+| clone-extract.js Puppeteer launch failure | Verify Node ≥18 and that Chromium is installed (`npx puppeteer browsers install chrome`). Retry once. |
+| Target site blocks headless (403/Cloudflare) | Retry with `--stealth` flag (uses puppeteer-extra stealth plugin). If still blocked, report to user. |
+| Asset download 404 | Log to asset-map.json with `status: missing`. Use a 1×1 transparent placeholder. Continue. |
+| robots.txt disallows path | Halt Phase 1. Inform user; require explicit `--ignore-robots` flag to proceed. |
+| clone-refine.js produces empty sections | Site likely uses Shadow DOM or canvas rendering. Report and ask whether to fall back to screenshot-only mode. |
+| Pixel diff stuck > 0.05 after 5 rounds | Likely font fallback or anti-aliasing. Report metric, allow user to accept threshold. |

package/skills/commerce-patterns/SKILL.md

@@ -1,5 +1,6 @@
 ---
 name: commerce-patterns
+invocation: [auto]
 tier: core
 description: "E-commerce domain patterns — cart management, payment processing (Toss/Stripe/PG), inventory tracking, and order state machines with transaction safety. Use when implementing any shopping cart, checkout flow, payment integration, stock management, or order lifecycle. Covers idempotency keys, double-charge prevention, stock reservation, and refund flows. Must use this skill when the codebase involves e-commerce — even for seemingly simple 'add to cart' features."
 triggers: [commerce, ecommerce, cart, payment, checkout, inventory, stock, order, pg, toss, stripe]

package/skills/commit-push-pr/SKILL.md

@@ -1,5 +1,6 @@
 ---
 name: commit-push-pr
+invocation: [auto, chain]
 tier: optional
 description: "Commit, push, and create PR in one go. Auto-activates on commit, PR, push keywords."
 triggers: [commit, push, PR, pull request, merge]

package/skills/context7-usage/SKILL.md

@@ -1,5 +1,6 @@
 ---
 name: context7-usage
+invocation: [auto]
 tier: optional
 description: "Context7 plugin for latest library documentation. Auto-activates when docs, documentation, latest version, official docs, API reference, or library help is needed."
 triggers: [docs, documentation, latest version, official docs, API reference, library help, context7]

package/skills/{vibe-contract → contract}/SKILL.md

@@ -1,10 +1,9 @@
 ---
-name: vibe-contract
+name: contract
+description: API contract drift 탐지 본체 — SPEC contract 추출 → 구현 비교 → breaking drift P1을 regress로 자동 등록.
+when_to_use: /vibe.contract 진입점 / /vibe.spec 완료 / /vibe.verify 통과 시 체인. 직접 호출 금지.
+user-invocable: false
 tier: core
-description: "API contract drift detection. Extracts HTTP/GraphQL/event/public-function contracts from SPEC into .vibe/contracts/<feature>.md, compares to implementation, and fails loudly on breaking drift (missing endpoints, removed required fields, type changes). P1 drifts auto-register as regressions via vibe-regress. Must use this skill when user runs /vibe.contract, when /vibe.spec completes, when /vibe.verify passes scenarios, or when the user says 'contract', 'API schema', 'breaking change', 'drift', '계약', '스키마 바뀜'."
-triggers: [contract, drift, "계약", "API 변경", "breaking change", "schema drift"]
-priority: 70
-chain-next: []
 ---
 
 # vibe.contract — API Contract Drift Detection
@@ -116,7 +115,7 @@ endpoints:
 
 Auto-invoke right after the SPEC is written:
 ```
-Load skill `vibe-contract` with: extract <feature>
+Load skill `contract` with: extract <feature>
 ```
 Failure does not stop `/vibe.spec` (extraction is optional). On success, `/vibe.run` references this contract.
 
@@ -124,7 +123,7 @@ Failure does not stop `/vibe.spec` (extraction is optional). On success, `/vibe.
 
 After all scenarios pass:
 ```
-Load skill `vibe-contract` with: check <feature>
+Load skill `contract` with: check <feature>
 ```
 - no drift → verify still passes
 - P1 drift → demote verify to fail; auto-register
@@ -134,7 +133,7 @@ Load skill `vibe-contract` with: check <feature>
 
 On P1 drift:
 ```
-Load skill `vibe-regress` with:
+Load skill `regress` with:
   subcommand: register --from-contract
   feature: <feature>
   symptom: "Contract drift: <endpoint-id> <drift-type>"

package/skills/create-prd/SKILL.md

@@ -1,5 +1,6 @@
 ---
 name: create-prd
+invocation: [auto, chain]
 tier: standard
 description: "Create a Product Requirements Document using a comprehensive 8-section template covering problem, objectives, segments, value propositions, solution, and release planning."
 triggers: [prd, product requirements, feature spec, requirements document]

package/skills/design-audit/SKILL.md

@@ -1,5 +1,6 @@
 ---
 name: design-audit
+invocation: [command, auto]
 tier: standard
 description: "Design technical quality audit — a11y, performance, responsive, theming, AI slop detection with 5-dimension scoring. Use when design-audit, ui-audit, a11y-check, design-check."
 triggers: [design-audit, ui-audit, a11y-check, design-check]

package/skills/design-critique/SKILL.md

@@ -1,5 +1,6 @@
 ---
 name: design-critique
+invocation: [auto]
 tier: standard
 description: "UX design review — Nielsen heuristics scoring, 5-persona red flag analysis. Use when design-critique, ux-review, design-review."
 triggers: [design-critique, ux-review, design-review]