@su-record/vibe 2.8.51 → 2.8.53

package/skills/vibe.figma.extract/rubrics/image-rules.md

@@ -1,137 +1,145 @@
-# Image Extraction Rules — Node Rendering Based
-
-## Core Principle
-
-```
-❌ imageRef 개별 다운로드 금지 (텍스처 fill 공유 문제)
-✅ 모든 이미지는 Figma screenshot API로 노드 렌더링
-```
-
-## Render Methods
-
-| 이미지 유형 | 렌더링 방법 | 출력 위치 |
-|-----------|-----------|---------|
-| BG 프레임 (합성 배경) | `screenshot {fileKey} {bg.nodeId}` | `bg/{section}-bg.webp` |
-| 콘텐츠 (타이틀, 버튼) | `screenshot {fileKey} {node.nodeId}` | `content/{name}.webp` |
-| 벡터 글자 그룹 | `screenshot {fileKey} {group.nodeId}` | `content/{name}.webp` |
-
-## BG 프레임 판별
-
-```
-BG 프레임 = 다음 중 하나:
-  - name에 "BG", "bg" 포함
-  - 부모와 크기 동일(±10%) + 자식 이미지 3개 이상
-  - 1depth 첫 번째 자식이면서 이미지 노드 다수 보유
-
-→ 프레임 렌더링 1장 → CSS background-image
-→ 하위 개별 레이어 다운로드하지 않음
-```
-
-## 벡터 글자 판별
-
-```
-벡터 글자 그룹 = 다음 모두 충족:
-  - 부모 GROUP/FRAME 아래 VECTOR 타입 3개 이상
-  - 각 VECTOR 크기 < 60x60
-  - 같은 imageRef 공유 (텍스처 fill)
-
-→ 부모 GROUP 통째로 렌더링 (개별 글자 다운로드 금지)
-→ 커스텀 폰트 텍스트 = 웹폰트 없음 → 이미지로 사용
-```
-
-## 렌더링 금지 노드 (HTML로 구현해야 하는 것)
-
-```
-다음 조건에 해당하는 노드는 이미지로 렌더링하지 않는다 — HTML+CSS로 구현:
-
-1. TEXT 자식 보유 프레임:
-   프레임 내부에 TEXT 노드가 1개 이상 있으면 → HTML로 구현
-   ⚠️ BG 프레임 렌더링 시에도 TEXT 포함 여부 반드시 확인:
-     - BG 프레임에 TEXT 자식이 있으면 → BG 하위만 렌더링 (TEXT 제외)
-     - 텍스트 포함된 상위 프레임을 통째 렌더링하면 → 이미지 텍스트 + HTML 텍스트 이중 표시
-
-2. INSTANCE 반복 패턴 (카드/아이템 그리드):
-   같은 부모 아래 동일 구조 INSTANCE 2개 이상 → HTML 반복 구조 (v-for/.map())
-   ❌ 카드 그리드를 통째 이미지 1장으로 렌더링 금지
-   ✅ 각 카드 내부의 이미지 에셋만 개별 추출 (아이콘, 아이템 이미지)
-   ✅ 카드 레이아웃, 텍스트, 버튼은 HTML로 구현
-
-3. 인터랙티브 요소:
-   name에 "btn", "button", "CTA", "link", "tab", "toggle" 포함 → HTML <button>/<a>
-   ❌ 버튼을 이미지로 렌더링 금지 (클릭 이벤트 불가)
-
-4. 정보 텍스트 영역:
-   기간, 가격, 수량, 설명 등 변경 가능 데이터 → HTML 텍스트
-   ❌ "1,000", "500 G-COIN", "보상 교환하기" 등을 이미지에 포함 금지
-```
-
-## 이미지로 렌더링하는 것 (HTML로 구현 불가)
-
-```
-다음만 이미지로 렌더링:
-
-1. 커스텀 폰트 텍스트 (벡터 글자 그룹):
-   - 웹폰트 없는 장식 타이틀 ("MISSION 01" 등)
-   - VECTOR 타입으로 분해된 글자 → GROUP 렌더링
-
-2. 합성 배경 (BG 프레임):
-   - 눈, 나무, 파티클 등 장식 레이어 합성물
-   - 텍스트 미포함 확인 필수
-
-3. 래스터 이미지 에셋:
-   - 게임 아이템 썸네일, 코인 아이콘 등
-   - imageRef가 있는 개별 RECTANGLE/노드
-
-4. 복잡한 벡터 그래픽:
-   - CSS로 재현 불가능한 일러스트/아이콘
-   - VECTOR/GROUP 조합의 복잡한 그래픽
-```
-
-## Format
-
-- Output format: `.webp` (Figma API에서 png 수신 → cwebp로 webp 변환)
-- cwebp 미설치 시 `.png` 폴백
-
-## Naming
-
-렌더링된 이미지의 파일명 = Figma 노드 name을 kebab-case로:
-  - `"Hero"` BG frame → `hero-bg.webp`
-  - `"Mission 01"` vector group → `mission-01.webp`
-  - `"Title"` content → `hero-title.webp` (섹션명 prefix)
-  - `"Btn_Login"` → `btn-login.webp`
-
-Rules:
-  - 공백 → 하이픈
-  - 언더스코어 → 하이픈
-  - 숫자 유지: `item11` → `item-11`
-  - 대문자 → 소문자
-
-## Destination
-
-```
-/tmp/{feature}/{bp-folder}/
-  bg/                    ← BG 프레임 렌더링
-  content/               ← 콘텐츠 + 벡터 글자 렌더링
-  sections/              ← Phase 4 검증용 스크린샷
-```
-
-최종 배치 (Phase 5):
-```
-static/images/{feature}/  ← Nuxt 2
-public/images/{feature}/  ← Vue/Nuxt 3
-public/{feature}/         ← Next.js
-```
-
-## Size Limits
-
-| Type | Warn threshold | Action |
-|------|---------------|--------|
-| BG 렌더링 | 5 MB | 정상 (합성 이미지라 큰 게 정상) |
-| 콘텐츠 렌더링 | 1 MB | 경고 |
-| 단일 이미지 > 5 MB | — | ⚠️ 텍스처 fill 의심 → imageRef 다운로드 실수 확인 |
-
-## Fallback
-
-노드 렌더링 불가 시에만 imageRef 다운로드:
-  - Figma screenshot API 실패 (rate limit, 권한)
-  - 다운로드 후 파일 크기 5MB 초과 → 텍스처 fill 가능성 → 경고 로그
+# Image Extraction Rules — Node Rendering Based
+
+## Core Principle
+
+```
+❌ imageRef 개별 다운로드 금지 (텍스처 fill 공유 문제)
+❌ 섹션/그룹을 통째 이미지로 렌더링 금지 (내부 TEXT/INSTANCE 포함 시)
+✅ 모든 이미지는 Figma screenshot API로 노드 렌더링
+✅ 렌더링 전 반드시 2-1.5 판별 규칙 확인 → HTML 대상은 렌더링하지 않음
+
+실제 테스트에서 발생한 잘못된 렌더링:
+  ❌ exchange-section1.webp (카드 4개 그리드를 이미지 1장으로)
+  ❌ daily-step2-list.webp (보상 목록을 텍스트 포함하여 통째로)
+  ❌ prize-section1.webp (응모 아이템을 텍스트 포함하여 통째로)
+  ✅ 올바른 접근: 카드 내부의 아이콘/썸네일만 개별 렌더링
+```
+
+## Render Methods
+
+| 이미지 유형 | 렌더링 방법 | 출력 위치 |
+|-----------|-----------|---------|
+| BG 프레임 (합성 배경) | `screenshot {fileKey} {bg.nodeId}` | `bg/{section}-bg.webp` |
+| 콘텐츠 (타이틀, 버튼) | `screenshot {fileKey} {node.nodeId}` | `content/{name}.webp` |
+| 벡터 글자 그룹 | `screenshot {fileKey} {group.nodeId}` | `content/{name}.webp` |
+
+## BG 프레임 판별
+
+```
+BG 프레임 = 다음 중 하나:
+  - name에 "BG", "bg" 포함
+  - 부모와 크기 동일(±10%) + 자식 이미지 3개 이상
+  - 1depth 첫 번째 자식이면서 이미지 노드 다수 보유
+
+→ 프레임 렌더링 1장 → CSS background-image
+→ 하위 개별 레이어 다운로드하지 않음
+```
+
+## 벡터 글자 판별
+
+```
+벡터 글자 그룹 = 다음 모두 충족:
+  - 부모 GROUP/FRAME 아래 VECTOR 타입 3개 이상
+  - 각 VECTOR 크기 < 60x60
+  - 같은 imageRef 공유 (텍스처 fill)
+
+→ 부모 GROUP 통째로 렌더링 (개별 글자 다운로드 금지)
+→ 커스텀 폰트 텍스트 = 웹폰트 없음 → 이미지로 사용
+```
+
+## 렌더링 금지 노드 (HTML로 구현해야 하는 것)
+
+```
+다음 조건에 해당하는 노드는 이미지로 렌더링하지 않는다 — HTML+CSS로 구현:
+
+1. TEXT 자식 보유 프레임:
+   프레임 내부에 TEXT 노드가 1개 이상 있으면 → HTML로 구현
+   ⚠️ BG 프레임 렌더링 시에도 TEXT 포함 여부 반드시 확인:
+     - BG 프레임에 TEXT 자식이 있으면 → BG 하위만 렌더링 (TEXT 제외)
+     - 텍스트 포함된 상위 프레임을 통째 렌더링하면 → 이미지 텍스트 + HTML 텍스트 이중 표시
+
+2. INSTANCE 반복 패턴 (카드/아이템 그리드):
+   같은 부모 아래 동일 구조 INSTANCE 2개 이상 → HTML 반복 구조 (v-for/.map())
+   ❌ 카드 그리드를 통째 이미지 1장으로 렌더링 금지
+   ✅ 각 카드 내부의 이미지 에셋만 개별 추출 (아이콘, 아이템 이미지)
+   ✅ 카드 레이아웃, 텍스트, 버튼은 HTML로 구현
+
+3. 인터랙티브 요소:
+   name에 "btn", "button", "CTA", "link", "tab", "toggle" 포함 → HTML <button>/<a>
+   ❌ 버튼을 이미지로 렌더링 금지 (클릭 이벤트 불가)
+
+4. 정보 텍스트 영역:
+   기간, 가격, 수량, 설명 등 변경 가능 데이터 → HTML 텍스트
+   ❌ "1,000", "500 G-COIN", "보상 교환하기" 등을 이미지에 포함 금지
+```
+
+## 이미지로 렌더링하는 것 (HTML로 구현 불가)
+
+```
+다음만 이미지로 렌더링:
+
+1. 커스텀 폰트 텍스트 (벡터 글자 그룹):
+   - 웹폰트 없는 장식 타이틀 ("MISSION 01" 등)
+   - VECTOR 타입으로 분해된 글자 → GROUP 렌더링
+
+2. 합성 배경 (BG 프레임):
+   - 눈, 나무, 파티클 등 장식 레이어 합성물
+   - 텍스트 미포함 확인 필수
+
+3. 래스터 이미지 에셋:
+   - 게임 아이템 썸네일, 코인 아이콘 등
+   - imageRef가 있는 개별 RECTANGLE/노드
+
+4. 복잡한 벡터 그래픽:
+   - CSS로 재현 불가능한 일러스트/아이콘
+   - VECTOR/GROUP 조합의 복잡한 그래픽
+```
+
+## Format
+
+- Output format: `.webp` (Figma API에서 png 수신 → cwebp로 webp 변환)
+- cwebp 미설치 시 `.png` 폴백
+
+## Naming
+
+렌더링된 이미지의 파일명 = Figma 노드 name을 kebab-case로:
+  - `"Hero"` BG frame → `hero-bg.webp`
+  - `"Mission 01"` vector group → `mission-01.webp`
+  - `"Title"` content → `hero-title.webp` (섹션명 prefix)
+  - `"Btn_Login"` → `btn-login.webp`
+
+Rules:
+  - 공백 → 하이픈
+  - 언더스코어 → 하이픈
+  - 숫자 유지: `item11` → `item-11`
+  - 대문자 → 소문자
+
+## Destination
+
+```
+/tmp/{feature}/{bp-folder}/
+  bg/                    ← BG 프레임 렌더링
+  content/               ← 콘텐츠 + 벡터 글자 렌더링
+  sections/              ← Phase 4 검증용 스크린샷
+```
+
+최종 배치 (Phase 5):
+```
+static/images/{feature}/  ← Nuxt 2
+public/images/{feature}/  ← Vue/Nuxt 3
+public/{feature}/         ← Next.js
+```
+
+## Size Limits
+
+| Type | Warn threshold | Action |
+|------|---------------|--------|
+| BG 렌더링 | 5 MB | 정상 (합성 이미지라 큰 게 정상) |
+| 콘텐츠 렌더링 | 1 MB | 경고 |
+| 단일 이미지 > 5 MB | — | ⚠️ 텍스처 fill 의심 → imageRef 다운로드 실수 확인 |
+
+## Fallback
+
+노드 렌더링 불가 시에만 imageRef 다운로드:
+  - Figma screenshot API 실패 (rate limit, 권한)
+  - 다운로드 후 파일 크기 5MB 초과 → 텍스처 fill 가능성 → 경고 로그

package/skills/video-production/SKILL.md

@@ -1,52 +1,52 @@
----
-name: video-production
-tier: standard
-description: "Video processing gotchas — FFmpeg commands, transcoding pipelines, HLS/DASH streaming setup, subtitle embedding (SRT/VTT), and thumbnail extraction. Use when the project involves any video manipulation, media processing, or streaming infrastructure. Covers codec selection, bitrate optimization, and common FFmpeg pitfalls. Must use this skill when user works with video files, mentions FFmpeg, or needs media processing — even for simple tasks like 'generate a thumbnail'."
-triggers: [video, ffmpeg, transcode, encode, stream, media, subtitle, thumbnail, hls, dash]
-priority: 60
----
-
-# Video Production
-
-## Pre-check (K1)
-
-> Are you processing video files programmatically? If just embedding a YouTube/Vimeo player, this skill is not needed.
-
-## Gotchas
-
-| Gotcha | Consequence | Prevention |
-|--------|-------------|------------|
-| Direct CLI string concatenation | Command injection risk | Always use wrapper library (fluent-ffmpeg for TS, ffmpeg-python for Python) |
-| No input validation | Crash on corrupted files | Always `ffprobe` input before processing — check codec, resolution, duration |
-| No temp file cleanup | Disk fills up silently | `try/finally` or cleanup handler — never leave partial outputs |
-| No progress callback | Long encoding appears frozen | Implement progress events for any operation >10s |
-| Memory loading large files | OOM on 4K+ video | Use streaming I/O, never read entire file into memory |
-| Assuming codec availability | Fails on different FFmpeg builds | Check `ffmpeg -codecs` at runtime before encoding |
-| Fixed bitrate encoding | Inconsistent quality | Use CRF-based quality (18-28 for H.264) instead |
-| No timeout | Encoding hangs forever | Set timeout + kill process on expiry |
-
-## Codec Quick Reference
-
-| Use Case | Codec | Note |
-|----------|-------|------|
-| Maximum compatibility | H.264 (libx264) | CRF 23 default |
-| Smaller files | H.265 (libx265) | 50% smaller, slower, licensing issues |
-| Open source | VP9 (libvpx-vp9) | Good for WebM |
-| Best compression | AV1 (libaom-av1) | Very slow encoding |
-
-## Resolution Presets
-
-| Preset | Resolution | Bitrate (H.264) |
-|--------|-----------|-----------------|
-| 360p | 640x360 | 800 kbps |
-| 720p | 1280x720 | 3 Mbps |
-| 1080p | 1920x1080 | 6 Mbps |
-| 4K | 3840x2160 | 15 Mbps |
-
-## Done Criteria (K4)
-
-- [ ] All FFmpeg calls go through wrapper library (no raw CLI strings)
-- [ ] Input files validated with ffprobe before processing
-- [ ] Temp files cleaned up in all paths (success + error)
-- [ ] Progress reporting for long operations
-- [ ] Codec availability checked at runtime
+---
+name: video-production
+tier: standard
+description: "Video processing gotchas — FFmpeg commands, transcoding pipelines, HLS/DASH streaming setup, subtitle embedding (SRT/VTT), and thumbnail extraction. Use when the project involves any video manipulation, media processing, or streaming infrastructure. Covers codec selection, bitrate optimization, and common FFmpeg pitfalls. Must use this skill when user works with video files, mentions FFmpeg, or needs media processing — even for simple tasks like 'generate a thumbnail'."
+triggers: [video, ffmpeg, transcode, encode, stream, media, subtitle, thumbnail, hls, dash]
+priority: 60
+---
+
+# Video Production
+
+## Pre-check (K1)
+
+> Are you processing video files programmatically? If just embedding a YouTube/Vimeo player, this skill is not needed.
+
+## Gotchas
+
+| Gotcha | Consequence | Prevention |
+|--------|-------------|------------|
+| Direct CLI string concatenation | Command injection risk | Always use wrapper library (fluent-ffmpeg for TS, ffmpeg-python for Python) |
+| No input validation | Crash on corrupted files | Always `ffprobe` input before processing — check codec, resolution, duration |
+| No temp file cleanup | Disk fills up silently | `try/finally` or cleanup handler — never leave partial outputs |
+| No progress callback | Long encoding appears frozen | Implement progress events for any operation >10s |
+| Memory loading large files | OOM on 4K+ video | Use streaming I/O, never read entire file into memory |
+| Assuming codec availability | Fails on different FFmpeg builds | Check `ffmpeg -codecs` at runtime before encoding |
+| Fixed bitrate encoding | Inconsistent quality | Use CRF-based quality (18-28 for H.264) instead |
+| No timeout | Encoding hangs forever | Set timeout + kill process on expiry |
+
+## Codec Quick Reference
+
+| Use Case | Codec | Note |
+|----------|-------|------|
+| Maximum compatibility | H.264 (libx264) | CRF 23 default |
+| Smaller files | H.265 (libx265) | 50% smaller, slower, licensing issues |
+| Open source | VP9 (libvpx-vp9) | Good for WebM |
+| Best compression | AV1 (libaom-av1) | Very slow encoding |
+
+## Resolution Presets
+
+| Preset | Resolution | Bitrate (H.264) |
+|--------|-----------|-----------------|
+| 360p | 640x360 | 800 kbps |
+| 720p | 1280x720 | 3 Mbps |
+| 1080p | 1920x1080 | 6 Mbps |
+| 4K | 3840x2160 | 15 Mbps |
+
+## Done Criteria (K4)
+
+- [ ] All FFmpeg calls go through wrapper library (no raw CLI strings)
+- [ ] Input files validated with ffprobe before processing
+- [ ] Temp files cleaned up in all paths (success + error)
+- [ ] Progress reporting for long operations
+- [ ] Codec availability checked at runtime

package/skills/video-production/rubrics/quality-checklist.md

@@ -1,58 +1,58 @@
-# Video Quality Checklist
-
-## Pre-Processing
-
-- [ ] Input file exists and is readable before pipeline starts
-- [ ] `ffprobe` run on input — codec, resolution, duration, bitrate logged
-- [ ] Corrupted/truncated files rejected with clear error (not crash)
-- [ ] Input resolution within supported range (min 360p, max 4K)
-- [ ] Audio stream present — handle gracefully if missing
-
-## Encoding
-
-- [ ] CRF-based encoding used (not fixed bitrate) for consistent visual quality
-- [ ] Target codec available in current FFmpeg build (`ffmpeg -codecs` check)
-- [ ] Encoding runs through wrapper library — no raw CLI string concatenation
-- [ ] `-movflags +faststart` set for MP4 (enables streaming before full download)
-- [ ] Audio normalized: loudness target -16 LUFS (streaming standard)
-- [ ] Aspect ratio preserved — no unintended stretching
-
-## Progress & Monitoring
-
-- [ ] Progress events emitted for any operation exceeding 10 seconds
-- [ ] Encoding timeout configured — process killed on expiry
-- [ ] Estimated time remaining shown in progress (based on bitrate processed)
-
-## Output Validation
-
-- [ ] Output file exists after encoding completes
-- [ ] Output duration verified: within ±2 seconds of input
-- [ ] Output codec matches requested codec (re-run ffprobe on output)
-- [ ] Output file size within acceptable range (flag if >3x input size)
-- [ ] Thumbnail: correct dimensions, not blank/corrupted
-
-## Subtitles (if applicable)
-
-- [ ] Subtitle file encoding is UTF-8 (convert if needed)
-- [ ] Subtitle timing verified — first/last cue in range of video duration
-- [ ] Burn-in subtitles visually tested on dark and light scenes
-
-## HLS / DASH Streaming (if applicable)
-
-- [ ] `.m3u8` manifest references correct segment file names
-- [ ] All segment files present in output directory
-- [ ] Segment duration consistent (target ±1 second of configured value)
-- [ ] CORS headers configured on media server
-
-## Storage & Cleanup
-
-- [ ] Temp directory cleaned in `finally` block — both success and error paths
-- [ ] No partial output files left on disk after failure
-- [ ] Output written to separate directory from temp files
-- [ ] Disk space checked before processing large files (minimum 3x input size free)
-
-## Security
-
-- [ ] Input file path sanitized — no directory traversal (`../`)
-- [ ] FFmpeg invoked via array arguments (not shell string) to prevent injection
-- [ ] Max file size limit enforced before processing begins
+# Video Quality Checklist
+
+## Pre-Processing
+
+- [ ] Input file exists and is readable before pipeline starts
+- [ ] `ffprobe` run on input — codec, resolution, duration, bitrate logged
+- [ ] Corrupted/truncated files rejected with clear error (not crash)
+- [ ] Input resolution within supported range (min 360p, max 4K)
+- [ ] Audio stream present — handle gracefully if missing
+
+## Encoding
+
+- [ ] CRF-based encoding used (not fixed bitrate) for consistent visual quality
+- [ ] Target codec available in current FFmpeg build (`ffmpeg -codecs` check)
+- [ ] Encoding runs through wrapper library — no raw CLI string concatenation
+- [ ] `-movflags +faststart` set for MP4 (enables streaming before full download)
+- [ ] Audio normalized: loudness target -16 LUFS (streaming standard)
+- [ ] Aspect ratio preserved — no unintended stretching
+
+## Progress & Monitoring
+
+- [ ] Progress events emitted for any operation exceeding 10 seconds
+- [ ] Encoding timeout configured — process killed on expiry
+- [ ] Estimated time remaining shown in progress (based on bitrate processed)
+
+## Output Validation
+
+- [ ] Output file exists after encoding completes
+- [ ] Output duration verified: within ±2 seconds of input
+- [ ] Output codec matches requested codec (re-run ffprobe on output)
+- [ ] Output file size within acceptable range (flag if >3x input size)
+- [ ] Thumbnail: correct dimensions, not blank/corrupted
+
+## Subtitles (if applicable)
+
+- [ ] Subtitle file encoding is UTF-8 (convert if needed)
+- [ ] Subtitle timing verified — first/last cue in range of video duration
+- [ ] Burn-in subtitles visually tested on dark and light scenes
+
+## HLS / DASH Streaming (if applicable)
+
+- [ ] `.m3u8` manifest references correct segment file names
+- [ ] All segment files present in output directory
+- [ ] Segment duration consistent (target ±1 second of configured value)
+- [ ] CORS headers configured on media server
+
+## Storage & Cleanup
+
+- [ ] Temp directory cleaned in `finally` block — both success and error paths
+- [ ] No partial output files left on disk after failure
+- [ ] Output written to separate directory from temp files
+- [ ] Disk space checked before processing large files (minimum 3x input size free)
+
+## Security
+
+- [ ] Input file path sanitized — no directory traversal (`../`)
+- [ ] FFmpeg invoked via array arguments (not shell string) to prevent injection
+- [ ] Max file size limit enforced before processing begins