@su-record/vibe 3.2.62 → 4.0.0

package/skills/vibe.design/heuristics/code-extract.md

@@ -1,100 +0,0 @@
-# vibe.design — Code Extract Heuristics
-
-`/vibe.design init --from=code` 가 기존 코드에서 시각 토큰을 역추출할 때 따르는 패턴.
-
-## v1 Required Patterns
-
-v1 에서 **반드시 동작**해야 하는 추출기 (테스트 픽스처 보장):
-
-### 1. Tailwind config
-
-대상: `tailwind.config.{ts,js,cjs,mjs}` · `tailwind.config.*` · `app.config.ts` (Nuxt)
-
-```ts
-// tailwind.config.ts
-export default {
-  theme: {
-    extend: {
-      colors: {
-        primary: '#5E6AD2',
-        accent: '#10B981',
-      },
-      fontFamily: {
-        sans: ['Inter', 'system-ui'],
-      },
-      spacing: { '18': '4.5rem' },
-    },
-  },
-};
-```
-
-추출 결과:
-- `§2 Color Palette` ← `theme.extend.colors.*`
-- `§3 Typography` ← `theme.extend.fontFamily.*`
-- `§5 Layout spacing scale` ← `theme.extend.spacing.*`
-
-### 2. CSS custom properties (CSS variables)
-
-대상: `**/*.css` · `**/*.scss` 의 `:root { --... }`
-
-```css
-:root {
-  --color-primary: #5E6AD2;
-  --color-bg: #FFFFFF;
-  --font-sans: 'Inter', sans-serif;
-  --space-md: 16px;
-}
-```
-
-추출 결과:
-- `--color-*` → `§2 Color Palette` (semantic 이름 유지)
-- `--font-*` → `§3 Typography`
-- `--space-*` · `--size-*` → `§5 Layout`
-- `--shadow-*` · `--elevation-*` → `§6 Depth`
-
-### 3. styled-components theme
-
-대상: `**/theme.{ts,tsx,js}` · `ThemeProvider` 의 `theme={...}`
-
-```ts
-export const theme = {
-  colors: { primary: '#5E6AD2', bg: '#FFFFFF' },
-  typography: { fontFamily: 'Inter, sans-serif' },
-  spacing: [4, 8, 16, 24, 32],
-};
-```
-
-추출 결과: 위 CSS-vars 와 동일 매핑.
-
-## Documented-only Patterns (v1 비범위, Phase 2+)
-
-문서로만 정리. 실제 추출기는 Phase 2 에서 구현.
-
-| 패턴 | 위치 | Phase 2 계획 |
-|-----|------|------------|
-| PostCSS custom properties | `postcss.config.*` + `@custom-media` | Tailwind 추출기 확장 |
-| SCSS variables | `**/*.scss` 의 `$variable` | CSS-vars 추출기 확장 |
-| Emotion theme | `@emotion/react` ThemeProvider | styled-components 추출기 확장 |
-| Vanilla Extract | `*.css.ts` `createTheme` | 신규 추출기 |
-| Panda CSS / Linaria | `panda.config.ts` / `*.linaria.ts` | 신규 추출기 |
-| Flutter ThemeData | `theme.dart` | 모바일 트랙 (Phase 3) |
-| iOS asset catalog | `*.xcassets/Colors.xcassets` | 모바일 트랙 (Phase 3) |
-| Android styles.xml | `res/values/colors.xml` | 모바일 트랙 (Phase 3) |
-
-## Stack 매핑
-
-`.vibe/config.json#stacks[].type` 으로 추출기 선택:
-
-| Stack | v1 활성 추출기 |
-|------|--------------|
-| `typescript-react` / `typescript-nextjs` | Tailwind + CSS-vars + styled-components |
-| `typescript-vue` / `typescript-nuxt` | Tailwind + CSS-vars |
-| `typescript-svelte` / `typescript-astro` | Tailwind + CSS-vars |
-| `typescript-angular` | CSS-vars (Tailwind 옵션) |
-| `typescript-react-native` | styled-components (Theme 객체) |
-| `dart-flutter` · `swift-ios` · `kotlin-android` | (Phase 3 — 문서만) |
-
-## Fallback
-
-추출 실패 또는 토큰 0 개 → 인터뷰 모드로 자동 폴백 (`--from=interview` 처럼 동작).
-사용자에게 한 줄 안내: "코드에서 토큰을 찾지 못해 인터뷰로 전환합니다."

package/skills/vibe.design/references/README.md

@@ -1,39 +0,0 @@
-# vibe.design — Reference Seeds
-
-`awesome-design-md` 생태계에서 추출한 **로컬 시드 카탈로그**. 네트워크 없이도
-`/vibe.design init --from=reference --reference=<slug>` 으로 §1·§2·§3 기본값을 시드한다.
-
-각 시드의 `style-preset` 컬럼은 한 문장으로 시각 무드를 요약하며, init 시 §1 Visual
-Theme + §2 Color Palette 의 primary/accent + §3 Typography family 의 기본값으로 변환된다.
-나머지 §4–§9 는 단축 인터뷰(≤3 질문) 로 채운다.
-
-## Catalog
-
-| Slug | Style Preset | 주된 무드 |
-|------|--------------|----------|
-| `linear` | minimal, neutral grays + electric purple accent (#5E6AD2), Inter Display | 도구·정확·조용 |
-| `vercel` | mono-light, pure black/white + zinc neutrals, Geist Sans | 미니멀·기술 |
-| `stripe` | clean white + indigo accent (#635BFF), Sohne / Inter | 신뢰·전문 |
-| `notion` | warm off-white (#FBFBFA) + charcoal text, system serif + sans | 따뜻·문서 |
-| `github` | crisp white/dark + GitHub blue (#0969DA), system-ui | 개발자·정보밀도 |
-| `apple` | premium white + space gray, SF Pro / system | 프리미엄·여백 |
-| `figma` | dark canvas + multi-color accents, Inter | 창의·툴링 |
-| `tailwind` | white + sky/cyan accent (#06B6D4), Inter | 유틸·교육 |
-| `posthog` | playful peach + dark navy, Matter SQ | 친근·실험 |
-| `supabase` | dark + emerald accent (#3ECF8E), Custom Sans | 모던·DB |
-| `arc` | iridescent gradients + soft pastels, Inter Display | 미래·브라우저 |
-| `clerk` | white + purple/violet accent, Inter | 인증·SaaS |
-
-## Adding a new seed
-
-1. 카탈로그 표에 한 줄 추가 (slug · style-preset · 무드)
-2. `style-preset` 은 한 문장: `<intensity>, <palette>, <font family>`
-3. 라이선스: 시드는 시각 규약 텍스트만 보유 (브랜드 로고/이미지 미포함)
-
-## How `init --from=reference` uses these
-
-1. `--reference=<slug>` 매칭 → `style-preset` 추출
-2. `style-preset` 의 palette 토큰 → `DESIGN.md §2 Color Palette` 의 primary/accent 시드
-3. font family → `§3 Typography` 의 Family 시드
-4. intensity 문구 → `§1 Visual Theme` 의 한 문단 초안
-5. `§4–§9` 는 단축 인터뷰 (컴포넌트 radius, spacing scale, breakpoints) 로 보강

package/skills/vibe.design/references/brand-personality.md

@@ -1,73 +0,0 @@
-# Brand Personality Assessment Framework
-
-Use this rubric to evaluate whether the current UI implementation reflects the stated brand personality. Score each axis 0–4.
-
----
-
-## Personality Axes
-
-### Axis 1: Formality (Casual ↔ Professional)
-
-| Score | Indicators |
-|-------|------------|
-| **4** | Typography is structured, spacing generous, copy is precise; no playful shapes or informal microcopy |
-| **3** | Mostly formal with 1–2 informal touches (e.g., friendly empty state copy) |
-| **2** | Mixed signals: formal layout but casual copy, or vice versa |
-| **1** | Predominantly informal when brand requires professional tone |
-| **0** | Completely misaligned (e.g., bounce animations and emoji icons on a financial compliance tool) |
-
-### Axis 2: Energy (Calm ↔ Bold)
-
-| Score | Indicators |
-|-------|------------|
-| **4** | Color saturation, animation speed, and typographic weight all consistent with stated energy level |
-| **3** | One outlier element (e.g., a single high-saturation call-to-action in an otherwise calm palette) |
-| **2** | Energy inconsistent across pages or components |
-| **1** | Dominant energy contradicts brand intent |
-| **0** | Extreme mismatch (e.g., muted monochrome palette on an "energetic, vibrant" brand) |
-
-### Axis 3: Warmth (Cold/Technical ↔ Warm/Human)
-
-| Score | Indicators |
-|-------|------------|
-| **4** | Color temperature, illustration style, and copy voice all aligned to warmth target |
-| **3** | Mostly aligned; one section feels tonally off |
-| **2** | Neutral — neither warm nor cold, no clear personality signal |
-| **1** | Opposite of intended (e.g., cool blues throughout a "warm and approachable" consumer product) |
-| **0** | Severely misaligned — creates user trust issues or tonal dissonance |
-
-### Axis 4: Complexity (Minimal ↔ Rich)
-
-| Score | Indicators |
-|-------|------------|
-| **4** | Visual density, number of elements per screen, and information hierarchy match stated style |
-| **3** | Correct overall density with 1–2 overcrowded or overly sparse areas |
-| **2** | Inconsistent density — some screens minimal, others overwhelming |
-| **1** | Density clearly wrong for product type (e.g., a consumer app with an enterprise-dense layout) |
-| **0** | Completely unrelated to brand intent |
-
----
-
-## Reference: Personality → Design Signal Mapping
-
-| Personality Word | Typography | Color | Spacing | Motion |
-|-----------------|------------|-------|---------|--------|
-| Professional | Geometric sans, weight contrast | Desaturated, cool neutrals | Generous, consistent | Subtle, linear ease |
-| Playful | Rounded, variable weight | High saturation, warm | Tight or expressive | Bouncy, spring ease |
-| Minimal | Single typeface, tight scale | Monochromatic or 2-color | Very generous | None or fade only |
-| Bold | High contrast, expressive display | Primary-heavy, high contrast | Dramatic gaps | Fast, snappy |
-| Warm | Humanist typeface | Warm neutrals, amber/terracotta | Comfortable | Gentle, ease-in-out |
-| Technical | Monospace or geometric | Low saturation, functional | Dense, structured | None or immediate |
-
----
-
-## Overall Brand Alignment Score
-
-Average the four axis scores. Thresholds:
-
-| Average | Assessment |
-|---------|------------|
-| 3.5–4.0 | Strong brand alignment — personality comes through clearly |
-| 2.5–3.4 | Adequate — personality visible but inconsistent in places |
-| 1.5–2.4 | Weak — personality signals mixed or absent in key areas |
-| 0–1.4 | Misaligned — redesign brand expression before shipping |

package/skills/vibe.design/references/design-context.md

@@ -1,184 +0,0 @@
----
-name: design-context-reference
-user-invocable: false
-invocation: [auto]
-tier: standard
-description: "Gather and store project design context — target audience, brand personality, aesthetic direction, constraints. Used by other design-* skills. Use when design-teach, design-setup, design-context."
-triggers: [design-teach, design-setup, design-context]
-priority: 50
----
-
-# Design Teach — Project Design Context Gathering
-
-Collect project-specific design context so all design-* skills produce tailored, brand-aware results. Saves to `.vibe/design-context.json`.
-
-## Usage
-
-```
-/design-teach                  # Interactive context gathering
-/design-teach --update         # Update existing context
-```
-
-## Process
-
-### Step 1: Auto-Explore Codebase
-
-Before asking questions, automatically gather existing signals:
-
-| Signal | Where to Look |
-|--------|---------------|
-| CSS variables / tokens | `*.css`, `tailwind.config.*`, `theme.*` |
-| Color palette | Existing color definitions, brand assets |
-| Typography | Font imports, font-family declarations |
-| Component library | `package.json` dependencies (MUI, Chakra, shadcn, etc.) |
-| Design system | `.vibe/design-system/*/MASTER.md` |
-| Existing context | `.vibe/design-context.json` (if updating) |
-
-### Step 2: Ask Clarifying Questions
-
-Present findings from Step 1, then ask what's missing:
-
-**1. Target Audience**
-- Who are the primary users? (developers, consumers, enterprise, internal)
-- Technical sophistication? (tech-savvy, general public, mixed)
-- Usage context? (desktop office, mobile on-the-go, both)
-
-**2. Brand Personality**
-- How should the product feel? (professional, playful, minimal, bold, warm)
-- Reference products with similar feel? (e.g., "Linear-like", "Notion-like")
-- Any brand guidelines or style guide URL?
-
-**3. Aesthetic Direction**
-- Visual density preference? (spacious, balanced, dense)
-- Color mood? (warm, cool, neutral, vibrant)
-- Typography mood? (modern sans, classic serif, monospace-technical)
-
-**4. Constraints**
-- Accessibility requirements? (WCAG AA, AAA, specific needs)
-- Supported devices? (desktop-only, mobile-first, responsive)
-- Dark mode required?
-- Performance budget? (target LCP, bundle size limits)
-
-### Step 3: Save Context
-
-Persist the gathered context to `.vibe/design-context.json` with the harness's file-editing capability.
-
-**Schema (v1):**
-
-```json
-{
-  "$schema": "design-context-v1",
-  "createdAt": "ISO-8601",
-  "updatedAt": "ISO-8601",
-  "audience": {
-    "primary": "Description of target users",
-    "context": "Usage environment (desktop/mobile/mixed)",
-    "expertise": "Technical level (beginner/intermediate/expert)"
-  },
-  "brand": {
-    "personality": ["3-5 adjectives"],
-    "tone": "formal | casual | playful | professional (guideline, free text allowed)",
-    "existingAssets": "Path to existing brand guidelines (optional)"
-  },
-  "aesthetic": {
-    "style": "minimal | bold | elegant | playful | corporate (guideline, free text allowed)",
-    "colorMood": "warm | cool | neutral | vibrant | muted (guideline, free text allowed)",
-    "typographyMood": "modern | classic | geometric | humanist (guideline, free text allowed)",
-    "references": ["Reference site/app URLs"]
-  },
-  "constraints": {
-    "accessibility": "AA | AAA",
-    "performance": "core-web-vitals | balanced | unlimited",
-    "browsers": ["chrome", "safari", "firefox", "edge"],
-    "devices": ["mobile", "tablet", "desktop"]
-  },
-  "detectedStack": {
-    "framework": "Detected framework",
-    "componentLibrary": "Detected component library",
-    "styling": "Detected styling approach",
-    "fonts": ["Detected fonts"]
-  }
-}
-```
-
-> **Note**: `tone`, `style`, `colorMood`, `typographyMood` values are suggestions, not closed enums. Users can enter free text.
-
-> **Size limit**: design-context.json should not exceed 10KB. The `references` array is capped at 5 items.
-
-### Step 4: Rerun Semantics
-
-When `/design-teach` is run again and `design-context.json` already exists:
-
-1. Read the existing file in full with the harness's file-reading capability
-2. **Show existing values as defaults** for each question ("Current: professional, clean — do you want to change this?")
-3. User replies "keep" or leaves blank → that field is preserved
-4. New value entered → only that field is replaced (**field-level replacement, not merge**)
-5. `createdAt` is always preserved; only `updatedAt` is updated to the current time
-
-### Step 5: Other Skills Reference This Context
-
-Each design-* skill does the following when it runs:
-
-```
-1. Read `.vibe/design-context.json`
-2. File not found → print "Run /design-teach first for better results" → continue with defaults
-3. Parse failure (invalid JSON) → warn "design-context.json parse failed" + continue with defaults → recommend re-running /design-teach
-4. Success → apply context to analysis criteria
-```
-
-## Design Workflow Integration
-
-Design skills are integrated into 3 phases of the vibe workflow:
-
-```
-SPEC Phase:
-  ① Check design-context.json (recommend /design-teach if missing)
-  ② design-system-gen (industry analysis → design system → layout)
-
-REVIEW Phase:
-  ③ /design-review audit (technical quality check)
-  ④ /design-review critique (UX review)
-  ⑤ design-reviewer (AI slop + anti-pattern detection)
-
-PRE-SHIP Phase:
-  ⑥ /design-refine normalize (design system alignment)
-  ⑦ /design-refine polish (final pass)
-```
-
-## How Other Skills Use This
-
-| Skill | Context Usage |
-|-------|---------------|
-| `/design-review audit` | Weight findings by audience constraints (a11y level, devices) |
-| `/design-review critique` | Adjust persona priorities by target audience |
-| `/design-refine polish` | Apply brand-appropriate micro-interactions |
-| `/design-refine normalize` | Use detected token system for replacement mapping |
-| `/design-refine distill` | Preserve brand-expressive elements based on personality |
-
-## Output Format
-
-```markdown
-## Design Context: {project}
-
-### Auto-Detected
-- Framework: Next.js 15
-- Styling: Tailwind CSS + shadcn/ui
-- Fonts: Inter (heading), Inter (body)
-- Tokens: 24 CSS variables found
-
-### User Provided
-- Audience: B2B SaaS, mixed technical level
-- Brand: Professional, clean (like Linear)
-- Density: Balanced
-- A11y: WCAG AA
-- Dark mode: Required
-
-### Saved
-✅ .vibe/design-context.json updated
-```
-
-## Important
-
-- **Non-destructive**: Only creates/updates the context file. No code changes.
-- **Incremental**: Running `--update` preserves existing answers, only asks about gaps.
-- **Foundation**: Run this first before other design-* skills for best results.

package/skills/vibe.design/references/ui-preview.md

@@ -1,20 +0,0 @@
-# vibe.design — UI Preview: Supported Formats & Example
-
-> Loaded by vibe.design SKILL.md `preview` subcommand — full supported file-format list and example invocations.
-
-**Supported file formats in folder:**
-
-- `*.html` - HTML mockups
-- `*.png` / `*.jpg` / `*.webp` - UI screenshots (Claude reads images)
-- `*.json` - Design tokens
-- `*.css` / `*.scss` - Style variables
-- `*.md` - Style guides
-- `*.svg` - Vector graphics
-
-**Example:**
-
-```
-/vibe.design preview "Login form - email, password input + login button"
-/vibe.design preview ./design/dashboard/
-/vibe.design preview ./mockups/homepage.png
-```

package/skills/vibe.design/templates/DESIGN.md.template

@@ -1,100 +0,0 @@
-<!-- design-md-version: 1 -->
-<!-- generated-by: vibe.design -->
-<!-- format: Google Stitch 9-section standard -->
-
-# DESIGN.md — Visual Quality SSOT
-
-> 이 문서는 프로젝트의 시각 규약 단일 출처(SSOT)입니다.
-> `CLAUDE.md`(코드) · `AGENTS.md`(빌드) 와 동급으로 외부 AI 에이전트가 직접 읽습니다.
-> 수정 시 `/vibe.design lint` 로 9 섹션 완전성을 검증하세요.
-
-## Visual Theme
-
-> §1 — 브랜드 톤 한 문단 (분위기, 무드, 핵심 정서).
-
-예시: "Minimal · neutral grays + single accent · 도구처럼 정확하고 조용한 인상."
-
-## Color Palette
-
-> §2 — hex 토큰 리스트 (이 섹션의 hex 만 verify 통과). semantic 이름 우선.
-
-- Primary: `#000000`
-- Background: `#FFFFFF`
-- Text: `#1A1A1A`
-- Border: `#E5E5E5`
-- Accent: `#5E6AD2`
-- Success: `#10B981`
-- Warning: `#F59E0B`
-- Error: `#EF4444`
-
-## Typography
-
-> §3 — 폰트 패밀리, 사이즈 스케일, 행간/자간.
-
-- Family: `"Inter", -apple-system, system-ui, sans-serif`
-- Display: 48 / 56 (weight 600)
-- H1: 32 / 40 (weight 600)
-- H2: 24 / 32 (weight 600)
-- Body: 16 / 24 (weight 400)
-- Caption: 14 / 20 (weight 400)
-- Code: `"JetBrains Mono", monospace`
-
-## Components
-
-> §4 — 공용 컴포넌트의 시각 규약 (Button / Input / Card / Modal …).
-
-- **Button**: radius 8px, padding 12px 20px, transition 150ms ease
-- **Input**: radius 6px, border 1px solid Border, focus ring 2px Accent
-- **Card**: radius 12px, padding 24px, background Background, border 1px solid Border
-- **Modal**: max-width 480px, backdrop blur 8px, radius 16px
-
-## Layout
-
-> §5 — 그리드, 간격 스케일, 컨테이너 최대폭.
-
-- Spacing scale: `4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96`
-- Container max-width: 1200px
-- Section vertical rhythm: 96px (desktop) / 64px (mobile)
-- Grid: 12-col, gutter 24px
-
-## Depth
-
-> §6 — 그림자, elevation, z-index 계층.
-
-- elevation-0: none (flat)
-- elevation-1: `0 1px 2px rgba(0,0,0,0.05)`
-- elevation-2: `0 4px 8px rgba(0,0,0,0.08)`
-- elevation-3: `0 12px 24px rgba(0,0,0,0.12)`
-- z-index: base 0, dropdown 10, modal 100, toast 1000
-
-## Do's & Don'ts
-
-> §7 — 금기와 권장 사항 (visual P1 의 시드).
-
-**DO**
-- 색은 §2 Color Palette 의 토큰만 사용
-- 모든 인터랙티브 요소에 focus ring (2px Accent)
-- spacing 은 §5 scale 에서만 선택
-
-**DON'T**
-- hex 하드코딩 (`bg: #FF0000` 금지 — 토큰으로 §2 에 등록)
-- 임의 그림자값 (반드시 §6 elevation 사용)
-- 폰트 패밀리 임시 변경
-
-## Responsive
-
-> §8 — 브레이크포인트와 적응 규칙.
-
-- Breakpoints: `sm: 640px`, `md: 768px`, `lg: 1024px`, `xl: 1280px`, `2xl: 1536px`
-- Mobile-first 작성, `min-width` 미디어쿼리만 사용
-- Section vertical rhythm: 96px (lg+) / 64px (sm/md)
-- Touch target 최소 44×44px (mobile)
-
-## Agent Prompt Guide
-
-> §9 — UI 코드 생성 AI 에이전트를 위한 한 문단 가이드.
-
-"UI 코드를 생성/수정할 때 §2 Color Palette · §3 Typography · §5 Layout spacing scale 의 토큰만 사용한다.
-hex 하드코딩 시 §2 에 토큰을 추가하거나 기존 토큰으로 치환한다.
-신규 컴포넌트는 §4 의 radius · padding 규칙을 따른다.
-브레이크포인트는 §8 만 사용한다."

package/skills/vibe.design/templates/design-context.json

@@ -1,36 +0,0 @@
-{
-  "$schema": "design-context-v1",
-  "createdAt": "{{ISO_DATE}}",
-  "updatedAt": "{{ISO_DATE}}",
-  "audience": {
-    "primary": "B2B SaaS — product managers and engineers at mid-size tech companies",
-    "context": "desktop",
-    "expertise": "intermediate"
-  },
-  "brand": {
-    "personality": ["professional", "clean", "trustworthy", "efficient"],
-    "tone": "professional",
-    "existingAssets": ".vibe/brand/brand-guide.pdf"
-  },
-  "aesthetic": {
-    "style": "minimal",
-    "colorMood": "cool",
-    "typographyMood": "modern",
-    "references": [
-      "https://linear.app",
-      "https://vercel.com"
-    ]
-  },
-  "constraints": {
-    "accessibility": "AA",
-    "performance": "core-web-vitals",
-    "browsers": ["chrome", "safari", "firefox", "edge"],
-    "devices": ["desktop", "tablet"]
-  },
-  "detectedStack": {
-    "framework": "Next.js 15",
-    "componentLibrary": "shadcn/ui",
-    "styling": "Tailwind CSS",
-    "fonts": ["Inter"]
-  }
-}