@su-record/vibe 2.8.16 → 2.8.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.8.16",
+  "version": "2.8.17",
   "description": "AI Coding Framework for Claude Code — 49 agents, 41+ tools, multi-LLM orchestration",
   "type": "module",
   "main": "dist/cli/index.js",

package/skills/vibe-figma-analyze/SKILL.md

@@ -258,12 +258,21 @@ function handleClaimReward(milestone: Milestone): void {
 }
 </script>
 
-<style lang="scss" scoped>
-/* Step B: 모바일 디자인 URL 반영 시 스타일 구현 */
-.dailyCheckInSection {
-  /* layout will be filled in Step B */
-}
-</style>
+<!-- ⛔ <style> 블록을 컴포넌트에 넣지 않는다 -->
+<!-- 스타일은 외부 파일에서 관리: styles/{feature}/layout/, components/ -->
+</script>
+```
+
+### ⛔ 스타일 분리 규칙
+
+```
+Step A에서 컴포넌트 파일에 <style> 블록을 작성하지 않는다.
+스타일은 Step B에서 외부 파일로 생성:
+  --new 모드: styles/{feature}/layout/_daily-checkin.scss
+  기본 모드: 기존 프로젝트 스타일 패턴을 따름
+
+컴포넌트는 <template> + <script setup> 만 포함.
+스타일 import는 루트 페이지 또는 nuxt.config에서 처리.
 ```
 
 ### 핵심 원칙: 스타일 없이 동작하는 코드
@@ -348,29 +357,88 @@ function handleConfirm(): void {
 
 ## Phase 7: Step A 검증 루프
 
-> **⛔ 아래 조건을 모두 만족해야 Step B로 진행. 하나라도 실패 시 수정 후 재검증.**
+> **⛔ 아래 검증을 실제로 실행해야 함. 체크리스트를 머리속으로 확인하지 말고 도구로 확인.**
+
+### 7-1. 파일 존재 확인 (Glob 도구)
 
 ```
-🔄 검증 체크리스트:
+Glob으로 생성된 파일 목록 확인:
+  Glob: pages/{feature}*.vue
+  Glob: components/{feature}/**/*.vue
+  Glob: styles/{feature}/**/*.scss
+
+확인:
+  □ 루트 페이지 파일 존재
+  □ PAGE 프레임 수 = 컴포넌트 .vue 파일 수 (카운트 비교)
+  □ styles/{feature}/ 디렉토리 존재
+  □ 팝업 컴포넌트 존재 (스토리보드에 팝업이 있었으면)
+
+누락 시 → Write로 생성
+```
+
+### 7-2. 기능 주석 확인 (각 파일 Read 도구로 실제 열기)
 
-1. 파일 생성 완료 확인:
-   □ 루트 페이지 파일 존재 (pages/{feature}.vue)
-   □ PAGE 프레임 수 = 생성된 섹션 컴포넌트 수 (1개도 빠짐 없음)
-   □ 팝업 컴포넌트 생성됨 (스토리보드에 팝업이 있으면)
-   □ 스타일 디렉토리 생성됨 (styles/{feature}/)
+```
+⛔ 모든 섹션 컴포넌트 파일을 Read로 열어서 아래를 확인:
+
+각 파일에서 체크:
+  □ JSDoc 주석 블록 존재 (/** ... */)
+  □ [기능 정의] 섹션 있음 — 스토리보드 기능 정의서에서 추출한 내용
+  □ [인터랙션] 섹션 있음 — ①②③ 번호 + 동작 설명
+  □ [상태] 섹션 있음 — 해당 섹션의 상태 목록
+
+실제 확인 예시:
+  Read: components/{feature}/DailyCheckInSection.vue
+  → /** 블록 검색
+  → "[기능 정의]" 텍스트 존재 확인
+  → "[인터랙션]" 텍스트 존재 확인
+  → "handleCheckIn" 함수 존재 확인
+
+하나라도 누락 → Edit으로 추가 → 다시 Read로 재확인
+```
 
-2. 코드 품질 확인 (각 컴포넌트 Read로 확인):
-   □ 모든 컴포넌트에 기능 정의 JSDoc 주석 있음
-   □ v-for 리스트에 목 데이터 채워짐 (빈 배열 없음)
-   □ 이벤트 핸들러 함수 정의됨 (handleXxx)
-   □ TypeScript 인터페이스 정의됨
-   □ 팝업 open/close가 v-if + ref로 연결됨
+### 7-3. 목 데이터 확인 (Grep 도구)
 
-3. 빌드 확인:
-   □ 프로젝트 빌드 에러 없음 (Bash: npm run build 또는 nuxt build)
+```
+Grep으로 빈 배열 검색:
+  Grep: "ref<.*>\(\[\]\)" 또는 "ref\(\[\]\)" in components/{feature}/
+
+빈 배열 발견 시:
+  → 스토리보드 기능 정의서에서 해당 데이터 추출
+  → Edit으로 목 데이터 채움
+  → 다시 Grep으로 재확인
+```
+
+### 7-4. 스타일 분리 확인 (Grep 도구)
+
+```
+컴포넌트에 <style> 블록이 없는지 확인:
+  Grep: "<style" in components/{feature}/**/*.vue
+
+<style> 발견 시:
+  → Edit으로 제거
+  → 해당 스타일을 styles/{feature}/ 외부 파일로 이동
+```
+
+### 7-5. 빌드 확인 (Bash 도구)
+
+```
+Bash: npm run build (또는 nuxt build, next build)
+  → 에러 있으면 수정 → 재빌드
+  → 성공해야 Step B 진행
+```
+
+### 검증 완료 조건
+
+```
+✅ 파일 수 = PAGE 프레임 수
+✅ 모든 컴포넌트에 [기능 정의] + [인터랙션] + [상태] 주석
+✅ 빈 배열 0개
+✅ 컴포넌트 내 <style> 블록 0개
+✅ 빌드 성공
+→ Step B 진행 가능
 
-실패 항목 → Edit으로 수정 → 재검증 (횟수 제한 없음)
-동일 항목 3회 연속 실패 → 사용자에게 확인 후 계속
+실패 항목 → 수정 → 재검증 (횟수 제한 없음)
 ```
 
 ## 출력 요약