@su-record/vibe 2.7.18 → 2.7.20

package/skills/vercel-react-best-practices/SKILL.md

@@ -1,59 +1,59 @@
----
-name: vercel-react-best-practices
-description: "React/Next.js performance gotchas from Vercel engineering. Non-intuitive pitfalls that LLMs commonly miss."
-triggers: [react, next.js, performance, optimization, vercel, component, rendering]
-priority: 60
----
-
-# Vercel React Best Practices
-
-## Pre-check (K1)
-
-> Is this a React/Next.js performance issue? Standard React patterns (useState, useEffect, components) don't need this skill. Activate only for performance optimization or code review.
-
-## CRITICAL Gotchas
-
-### Waterfall Elimination
-
-| Gotcha | Why Non-obvious |
-|--------|----------------|
-| **Sequential awaits** | `const a = await f1(); const b = await f2();` creates waterfall. Use `Promise.all([f1(), f2()])` for independent ops |
-| **Await placement** | Move `await` to the branch where value is actually used, not at declaration |
-| **Missing Suspense** | Wrap slow server components in `<Suspense>` to stream — don't block entire page |
-
-### Bundle Size
-
-| Gotcha | Why Non-obvious |
-|--------|----------------|
-| **Barrel imports** | `import { Button } from "@/components"` pulls entire barrel. Use `import { Button } from "@/components/Button"` |
-| **Third-party in initial bundle** | Load analytics/logging AFTER hydration with `next/dynamic` or lazy `useEffect` |
-| **Heavy components** | Charts, editors, maps → `next/dynamic` with `{ ssr: false }` |
-
-## HIGH Gotchas
-
-### Server-side
-
-| Gotcha | Fix |
-|--------|-----|
-| Duplicate DB calls across server components | Wrap with `React.cache()` for per-request dedup |
-| Large data serialized to client | Pick only needed fields before passing to client components |
-| Blocking post-processing (logging, analytics) | Use `after()` for non-blocking tasks |
-
-## MEDIUM Gotchas
-
-| Gotcha | Fix |
-|--------|-----|
-| Expensive computation re-runs on parent re-render | Isolate in `memo()` wrapped component |
-| Static JSX recreated every render | Hoist outside component: `const HEADER = <header>...</header>` |
-| Long lists render all items | `content-visibility: auto; contain-intrinsic-size: 0 80px;` on list items |
-| `{count && <Item />}` renders `0` | Use ternary: `{count > 0 ? <Item /> : null}` |
-| Event handler changes every render → effect re-runs | Store handlers in `useRef` for stable effects |
-| Object in useEffect deps | Use primitive values (id, not entire object) as dependencies |
-
-## Done Criteria (K4)
-
-- [ ] No sequential awaits for independent operations
-- [ ] No barrel imports for tree-shakeable modules
-- [ ] Server component data is `React.cache()`-wrapped where reused
-- [ ] Heavy third-party loaded after hydration
-- [ ] Long lists use `content-visibility: auto`
+---
+name: vercel-react-best-practices
+description: "React/Next.js performance gotchas from Vercel engineering. Non-intuitive pitfalls that LLMs commonly miss."
+triggers: [react, next.js, performance, optimization, vercel, component, rendering]
+priority: 60
+---
+
+# Vercel React Best Practices
+
+## Pre-check (K1)
+
+> Is this a React/Next.js performance issue? Standard React patterns (useState, useEffect, components) don't need this skill. Activate only for performance optimization or code review.
+
+## CRITICAL Gotchas
+
+### Waterfall Elimination
+
+| Gotcha | Why Non-obvious |
+|--------|----------------|
+| **Sequential awaits** | `const a = await f1(); const b = await f2();` creates waterfall. Use `Promise.all([f1(), f2()])` for independent ops |
+| **Await placement** | Move `await` to the branch where value is actually used, not at declaration |
+| **Missing Suspense** | Wrap slow server components in `<Suspense>` to stream — don't block entire page |
+
+### Bundle Size
+
+| Gotcha | Why Non-obvious |
+|--------|----------------|
+| **Barrel imports** | `import { Button } from "@/components"` pulls entire barrel. Use `import { Button } from "@/components/Button"` |
+| **Third-party in initial bundle** | Load analytics/logging AFTER hydration with `next/dynamic` or lazy `useEffect` |
+| **Heavy components** | Charts, editors, maps → `next/dynamic` with `{ ssr: false }` |
+
+## HIGH Gotchas
+
+### Server-side
+
+| Gotcha | Fix |
+|--------|-----|
+| Duplicate DB calls across server components | Wrap with `React.cache()` for per-request dedup |
+| Large data serialized to client | Pick only needed fields before passing to client components |
+| Blocking post-processing (logging, analytics) | Use `after()` for non-blocking tasks |
+
+## MEDIUM Gotchas
+
+| Gotcha | Fix |
+|--------|-----|
+| Expensive computation re-runs on parent re-render | Isolate in `memo()` wrapped component |
+| Static JSX recreated every render | Hoist outside component: `const HEADER = <header>...</header>` |
+| Long lists render all items | `content-visibility: auto; contain-intrinsic-size: 0 80px;` on list items |
+| `{count && <Item />}` renders `0` | Use ternary: `{count > 0 ? <Item /> : null}` |
+| Event handler changes every render → effect re-runs | Store handlers in `useRef` for stable effects |
+| Object in useEffect deps | Use primitive values (id, not entire object) as dependencies |
+
+## Done Criteria (K4)
+
+- [ ] No sequential awaits for independent operations
+- [ ] No barrel imports for tree-shakeable modules
+- [ ] Server component data is `React.cache()`-wrapped where reused
+- [ ] Heavy third-party loaded after hydration
+- [ ] Long lists use `content-visibility: auto`

package/skills/video-production/SKILL.md

@@ -1,51 +1,51 @@
----
-name: video-production
-description: "Video processing gotchas — FFmpeg, transcoding, streaming, subtitles."
-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
+description: "Video processing gotchas — FFmpeg, transcoding, streaming, subtitles."
+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/vibe/config.json

@@ -1,30 +1,30 @@
-{
-  "models": {
-    "gpt": {
-      "enabled": false,
-      "authType": "codex-cli",
-      "role": "architecture",
-      "description": "Architecture/Debugging/Coding (GPT 5.4)"
-    },
-    "gemini": {
-      "enabled": false,
-      "authType": "apikey",
-      "role": "exploration",
-      "description": "Gemini 3.1 Pro / 3.1 Flash-Lite (Exploration, UI/UX)"
-    }
-  },
-  "stacks": [
-    {
-      "type": "typescript-node",
-      "path": ""
-    }
-  ],
-  "details": {
-    "databases": [
-      "SQLite"
-    ],
-    "stateManagement": [],
-    "hosting": [],
-    "cicd": []
-  }
+{
+  "models": {
+    "gpt": {
+      "enabled": false,
+      "authType": "codex-cli",
+      "role": "architecture",
+      "description": "Architecture/Debugging/Coding (GPT 5.4)"
+    },
+    "gemini": {
+      "enabled": false,
+      "authType": "apikey",
+      "role": "exploration",
+      "description": "Gemini 3.1 Pro / 3.1 Flash-Lite (Exploration, UI/UX)"
+    }
+  },
+  "stacks": [
+    {
+      "type": "typescript-node",
+      "path": ""
+    }
+  ],
+  "details": {
+    "databases": [
+      "SQLite"
+    ],
+    "stateManagement": [],
+    "hosting": [],
+    "cicd": []
+  }
 }