@su-record/vibe 2.8.24 → 2.8.26

package/skills/vibe-figma-pipeline/rubrics/pipeline-stages.md

@@ -0,0 +1,96 @@
+# Pipeline Stage Descriptions and Failure Handling
+
+> This skill is merged into vibe-figma-consolidate (D-4). This rubric describes each stage of the Figma-to-code pipeline and what to do when a stage fails.
+
+## Stage Map
+
+```
+Phase 0: Setup
+  └─ Detect stack → Determine feature key → Create directories
+
+Phase 1: Storyboard
+  └─ Classify frames → Analyze SPEC/CONFIG/PAGE → Generate component shells
+
+Phase 2: Design (per breakpoint)
+  ├─ 2-1: Style scaffold
+  ├─ 2-2: Classify mode (normal/literal) per section
+  ├─ 2-3: Split tall frames if needed
+  └─ 2-4: Section loop
+       ├─ a. get_design_context
+       ├─ b. Download all assets
+       ├─ c. Convert code
+       ├─ d. Refactor component template
+       └─ e. Verify section
+
+Phase 3: Verification
+  ├─ Automated grep checks
+  └─ Screenshot comparison
+```
+
+## Stage Failure Handling
+
+### Phase 0 Failures
+
+| Failure | Resolution |
+|---------|-----------|
+| Cannot detect stack | Ask user: "Vue or React? SCSS or Tailwind?" |
+| Directory already exists | Proceed — do not overwrite existing files unless replacing |
+
+### Phase 1 Failures
+
+| Failure | Resolution |
+|---------|-----------|
+| Metadata too large (>100K chars) | Save to file, parse with Bash/Python to extract frame list |
+| No SPEC frame found | Continue without feature requirements; note missing in report |
+| No CONFIG frame | Use default scale factors (mobile: 480/720=0.667, PC: 1920/2560=0.75) |
+| Storyboard URL is "없음" | Skip Phase 1, go directly to Phase 2 |
+
+### Phase 2-a Failures (get_design_context)
+
+| Failure | Retry | Escalation |
+|---------|-------|-----------|
+| Timeout on first call | Retry once with `excludeScreenshot: true` | Split frame → per-child calls |
+| Timeout after split | Retry individual child once | `get_screenshot` + visual estimation |
+| Empty response | Retry once | Skip section, log in consolidation report |
+
+Maximum retries per section: 2. After 2 failures: use screenshot fallback. Never loop more than 3 times on the same section.
+
+### Phase 2-b Failures (Asset Download)
+
+| Failure | Resolution |
+|---------|-----------|
+| 0-byte file | Retry once with same curl command |
+| 404 URL | Try `get_metadata` → sub-node → `get_design_context` for fresh URL |
+| All retries failed | Log missing asset; continue with other assets; mark section as needs-review |
+
+Single asset failure does not block the entire section unless it is a critical background image.
+
+### Phase 2-e Section Verification Failures
+
+| Check Failed | Action |
+|-------------|--------|
+| Figma URL in output | Find and replace all occurrences; re-verify |
+| 0-byte or missing image | Re-download; if impossible, use placeholder only with TODO comment |
+| Empty template | Do not proceed to next section until fixed |
+| Build error | Fix TypeScript/template error; re-build |
+
+### Phase 3 Failures (Screenshot Comparison)
+
+| Priority | Issue Type | Action |
+|----------|-----------|--------|
+| P1 | Image missing, wrong layout, unstyled text | Fix immediately; re-verify before continuing |
+| P2 | Spacing delta, slight color difference | Fix if time allows; defer if P1=0 and deadline is tight |
+| P3 | Pixel-perfect micro-adjustments | Deferred to `/design-polish` pass |
+
+P1 = 0 is required before the feature is considered complete. P2/P3 are best-effort.
+
+## Design Quality Pipeline (Post-completion)
+
+```
+/design-normalize  → normalize inconsistent values
+/design-audit      → automated audit (quick pass)
+/design-critique   → thorough visual critique
+/design-polish     → final polish pass
+```
+
+Run at minimum: `/design-normalize` → `/design-audit --quick` before committing.

package/skills/vibe-figma-rules/rubrics/naming-conventions.md

@@ -0,0 +1,70 @@
+# Figma Layer Naming Conventions for Clean Extraction
+
+> This skill is inlined into vibe-figma, vibe-figma-extract, and vibe-figma-convert. This rubric documents how Figma layer names map to generated code identifiers.
+
+## Layer Name → CSS Class
+
+Convert `data-name` attribute values from reference code to CSS class names:
+
+| Figma Layer Name | CSS Class | Notes |
+|-----------------|-----------|-------|
+| `BG` | `.bg` | Lowercase single word |
+| `Title` | `.title` | PascalCase → camelCase |
+| `Period` | `.period` | |
+| `Light` | `.light` | |
+| `BTN_Share` | `.btnShare` | `BTN_` prefix → `btn`, underscore → camelCase |
+| `BTN_Primary` | `.btnPrimary` | |
+| `KV` (Key Visual) | `.kv` | Acronym → all lowercase |
+| `GNB` | `.gnb` | |
+| `PC_Banner` | `.pcBanner` | |
+| `Snow_Particle_12` | `.snowParticle12` | Underscore-separated → camelCase |
+| *(no data-name)* | `.node-{nodeId}` | Replace `:` with `-` in nodeId |
+
+## Conflict Resolution
+
+When two layers in the same section share the same name:
+- Prefix with parent layer name: `.heroLight`, `.kidLight`
+- Or append an index suffix: `.light-1`, `.light-2`
+- Never generate duplicate class names in the same `<style scoped>` block
+
+## Image Variable Name → File Name
+
+| Figma Variable | File Name | Rule |
+|---------------|-----------|------|
+| `imgTitle` | `title.webp` | Strip `img` prefix, kebab-case |
+| `img21` | `img-21.webp` | Numeric suffix: keep number |
+| `imgSnowParticle12` | `snow-particle-12.webp` | CamelCase → kebab |
+| `imgImgBannerStatic` | `banner-static.webp` | Double `img` prefix → strip both |
+| `imgBtnShare` | `btn-share.webp` | |
+
+## Component File Naming
+
+| Figma Section Name | Component File |
+|-------------------|----------------|
+| "Hero" / "히어로" | `HeroSection.vue` |
+| "Daily Check-in" / "일일 출석" | `DailyCheckInSection.vue` |
+| "Play Time Mission" | `PlayTimeMissionSection.vue` |
+| "Exchange" / "교환" | `ExchangeSection.vue` |
+| "Popup" | `RewardPopup.vue` (non-section suffix) |
+| "GNB" | `TheGnb.vue` (project-wide shared) |
+
+Rules:
+- PascalCase always
+- Append `Section` suffix for page sections
+- No `Section` suffix for popups, overlays, shared layout components
+
+## Feature Key (Directory Name)
+
+Derived from Figma file name:
+
+| Figma File Name | Feature Key |
+|----------------|-------------|
+| "PUBG 겨울 PC방 이벤트" | `winter-pcbang` |
+| "Summer Campaign 2025" | `summer-campaign-2025` |
+| "Login Page Redesign" | `login-page-redesign` |
+
+Rules:
+- kebab-case
+- Remove language/brand prefixes if obvious from context
+- Numbers and years are kept
+- No special characters

package/skills/vibe-figma-style/rubrics/style-mapping.md

@@ -0,0 +1,100 @@
+# Figma Style → CSS/Tailwind Mapping Rules
+
+> This skill is merged into vibe-figma-convert. This rubric is the definitive reference for converting Figma design values to output CSS.
+
+## Scale Factor Application
+
+```
+scaledValue = Math.round(figmaValue × scaleFactor)
+```
+
+Apply to: `px` units only (font-size, padding, margin, gap, width, height, top, left, inset, border-radius, box-shadow offsets, letter-spacing, blur radius).
+
+Never apply to: colors, opacity, unitless line-height, `%` values, z-index, degrees.
+
+## Color Mapping
+
+| Figma Token / Tailwind | CSS Output | Token Name |
+|-----------------------|-----------|-----------|
+| `text-[#1B3A1D]` | `color: #1B3A1D` | `$color-heading` |
+| `text-white` | `color: #FFFFFF` | `$color-white` |
+| `bg-[#0A1628]` | `background-color: #0A1628` | `$color-bg-dark` |
+| `bg-[rgba(13,40,61,0.5)]` | `background: rgba(13,40,61,0.5)` | *(inline, no token)* |
+| `var(--color/grayscale/950,#171716)` | `color: #171716` | Use fallback value |
+| `border-[#E5E7EB]` | `border-color: #E5E7EB` | `$color-border` |
+
+Create a `$color-*` token for any hex value that appears in 2+ selectors.
+
+## Typography Mapping
+
+| Figma / Tailwind | CSS Property | Scale? |
+|-----------------|-------------|--------|
+| `text-[48px]` | `font-size: 48px × SF` | Yes |
+| `font-black` | `font-weight: 900` | No |
+| `font-bold` | `font-weight: 700` | No |
+| `font-semibold` | `font-weight: 600` | No |
+| `font-medium` | `font-weight: 500` | No |
+| `font-normal` | `font-weight: 400` | No |
+| `leading-[1.4]` | `line-height: 1.4` | No (unitless) |
+| `leading-[48px]` | `line-height: 48px × SF` | Yes (has unit) |
+| `tracking-[-0.36px]` | `letter-spacing: -0.36px × SF` | Yes |
+| `text-center` | `text-align: center` | No |
+| `whitespace-nowrap` | `white-space: nowrap` | No |
+| `font-[family-name:var(--font/family/pretendard,...)]` | `font-family: 'Pretendard', sans-serif` | No |
+
+## Spacing Mapping
+
+| Tailwind | CSS | Scale? |
+|---------|-----|--------|
+| `pt-[120px]` | `padding-top: 120px × SF` | Yes |
+| `px-[24px]` | `padding-left: 24px × SF; padding-right: 24px × SF` | Yes |
+| `gap-[24px]` | `gap: 24px × SF` | Yes |
+| `mt-[16px]` | `margin-top: 16px × SF` | Yes |
+| `rounded-[12px]` | `border-radius: 12px × SF` | Yes |
+| `inset-0` | `inset: 0` | No |
+| `inset-[-18.13%]` | `inset: -18.13%` | No (%) |
+
+## Layout Mapping
+
+| Tailwind | CSS |
+|---------|-----|
+| `flex` | `display: flex` |
+| `flex-col` | `flex-direction: column` |
+| `items-center` | `align-items: center` |
+| `justify-center` | `justify-content: center` |
+| `justify-between` | `justify-content: space-between` |
+| `grid` | `display: grid` |
+| `absolute` | `position: absolute` |
+| `relative` | `position: relative` |
+| `overflow-clip` | `overflow: clip` ← not `overflow: hidden` |
+| `overflow-hidden` | `overflow: hidden` |
+| `size-full` | `width: 100%; height: 100%` |
+| `w-full` | `width: 100%` |
+| `max-w-none` | `max-width: none` |
+| `z-[10]` | `z-index: 10` |
+| `pointer-events-none` | `pointer-events: none` |
+
+## Visual Effects Mapping
+
+| Tailwind | CSS | Scale? |
+|---------|-----|--------|
+| `opacity-40` | `opacity: 0.4` | No |
+| `blur-[3.5px]` | `filter: blur(3.5px)` | Yes |
+| `mix-blend-lighten` | `mix-blend-mode: lighten` | No |
+| `mix-blend-multiply` | `mix-blend-mode: multiply` | No |
+| `mix-blend-hue` | `mix-blend-mode: hue` | No |
+| `rotate-[149.7deg]` | `transform: rotate(149.7deg)` | No |
+| `-scale-y-100` | `transform: scaleY(-1)` | No |
+| `shadow-[0_4px_24px_rgba(0,0,0,0.4)]` | `box-shadow: 0 4px × SF 24px × SF rgba(0,0,0,0.4)` | Partial (px only) |
+| `object-cover` | `object-fit: cover` | No |
+| `object-contain` | `object-fit: contain` | No |
+
+## Token Promotion Rules
+
+Promote a value to `_tokens.scss` when:
+- A color appears in 2+ different selectors
+- A font-size serves a named role (heading, body, caption)
+- A spacing value appears in 3+ places
+- A breakpoint threshold is used
+
+Do not promote one-off values used in a single selector — write them inline.

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

@@ -0,0 +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

package/skills/video-production/templates/production-plan.md

@@ -0,0 +1,104 @@
+# Video Production Plan Template
+
+## Project Overview
+
+| Field | Value |
+|-------|-------|
+| Project Name | {{PROJECT_NAME}} |
+| Output Format | {{FORMAT}} (e.g., HLS, MP4, WebM) |
+| Target Resolution | {{RESOLUTION}} (e.g., 1080p) |
+| Target Codec | {{CODEC}} (e.g., H.264 / libx264) |
+| Duration (approx.) | {{DURATION}} |
+| Deadline | {{DEADLINE}} |
+
+## Input Sources
+
+| Source File | Format | Resolution | Duration | Notes |
+|-------------|--------|------------|----------|-------|
+| {{INPUT_FILE_1}} | {{FORMAT}} | {{RES}} | {{DUR}} | {{NOTES}} |
+
+Run `ffprobe -v quiet -print_format json -show_streams {{INPUT_FILE}}` to populate this table.
+
+## Processing Pipeline
+
+```
+Input Validation (ffprobe)
+  ↓
+Pre-processing (trim / deinterlace / normalize audio)
+  ↓
+Transcoding ({{CODEC}}, CRF {{CRF_VALUE}})
+  ↓
+Post-processing (subtitles / thumbnail extraction / HLS segmentation)
+  ↓
+Output Validation (verify duration, codec, bitrate)
+  ↓
+Cleanup (remove temp files)
+```
+
+## Encoding Parameters
+
+```bash
+# Replace placeholders before running
+ffmpeg \
+  -i "{{INPUT_FILE}}" \
+  -c:v {{VIDEO_CODEC}} \
+  -crf {{CRF_VALUE}} \
+  -preset {{PRESET}} \
+  -c:a aac -b:a 128k \
+  -movflags +faststart \
+  -progress pipe:1 \
+  "{{OUTPUT_FILE}}"
+```
+
+| Parameter | Value | Rationale |
+|-----------|-------|-----------|
+| Codec | {{VIDEO_CODEC}} | {{CODEC_RATIONALE}} |
+| CRF | {{CRF_VALUE}} | 18-23 = high quality, 24-28 = balanced |
+| Preset | {{PRESET}} | `slow` = better compression, `fast` = faster encoding |
+| Audio | AAC 128k | Universal compatibility |
+
+## Subtitles
+
+- [ ] Subtitle file: `{{SUBTITLE_FILE}}` (SRT / VTT)
+- [ ] Burn-in (hardcoded) or soft subtitle track: {{SUBTITLE_TYPE}}
+- [ ] Language code: `{{LANG_CODE}}`
+
+## Thumbnail Extraction
+
+```bash
+# Extract frame at {{TIMESTAMP}} seconds
+ffmpeg -i "{{INPUT_FILE}}" -ss {{TIMESTAMP}} -frames:v 1 "{{THUMBNAIL_OUTPUT}}"
+```
+
+## HLS Output (if streaming)
+
+```bash
+ffmpeg -i "{{INPUT_FILE}}" \
+  -codec: copy \
+  -start_number 0 \
+  -hls_time 10 \
+  -hls_list_size 0 \
+  -f hls \
+  "{{HLS_OUTPUT_DIR}}/stream.m3u8"
+```
+
+## Quality Gates
+
+- [ ] Input validated with ffprobe before processing starts
+- [ ] Progress callback implemented (log every 10 seconds)
+- [ ] Timeout set: {{TIMEOUT_SECONDS}}s
+- [ ] Output file size within expected range: {{MIN_SIZE}}–{{MAX_SIZE}} MB
+- [ ] Output duration matches input: ±2 seconds tolerance
+- [ ] Temp files cleaned on success AND error
+
+## Temp File Management
+
+```
+temp/
+├── {{JOB_ID}}_input_validated.{{EXT}}
+├── {{JOB_ID}}_preprocessed.{{EXT}}
+└── (cleaned up in finally block)
+
+output/
+└── {{JOB_ID}}_final.{{EXT}}
+```