@su-record/vibe 3.2.64 → 4.0.0

package/skills/vibe.design/SKILL.md

@@ -1,236 +0,0 @@
----
-name: vibe.design
-description: UI 작업 전에 시각 품질 SSOT가 필요하거나 DESIGN.md를 생성·검증·동기화할 때 사용한다. Figma와 독립적으로 동작한다.
-argument-hint: "init [--from=interview|code|reference|figma] | lint | verify | sync | preview"
-user-invocable: true
----
-
-# /vibe.design
-
-## 완료 기준
-
-- [ ] DESIGN.md가 프로젝트 루트에 존재한다.
-- [ ] 선택한 subcommand의 lint 또는 drift 검사가 통과한다.
-- [ ] 색상·타이포그래피·간격 token에 placeholder가 없다.
-- [ ] `init --from=interview`이면 `.vibe/design-context.json`이 존재한다.
-
-**vibe 의 세 번째 SSOT — 시각 품질 계약 문서(`DESIGN.md`)** 의 라이프사이클을 전담한다.
-
-> `CLAUDE.md`(코드) · `AGENTS.md`(빌드) 에 이은 시각 규약. **Figma 에 종속되지 않는다** — Figma 는 4 가지 입력 소스 중 하나.
-
-## Usage
-
-```
-/vibe.design init                       # 인터뷰 (디폴트)
-/vibe.design init --from=interview      # 대화형 9 섹션 작성
-/vibe.design init --from=code           # 기존 코드 토큰 역추출
-/vibe.design init --from=reference --reference=linear   # awesome-design-md 시드 선택
-/vibe.design init --from=figma --file=<key>             # /vibe.figma 위임 (옵션)
-/vibe.design lint                       # Stitch 9 섹션 완전성 검증
-/vibe.design verify [--files=<glob>]    # 구현 ↔ DESIGN.md hex 드리프트 (v1)
-/vibe.design sync                       # Figma 연결 시 양방향 동기화 (Should, Phase 2)
-/vibe.design preview "description"      # UI 프리뷰 (Antigravity 목업 또는 ASCII 폴백)
-```
-
-## Philosophy
-
-- **Figma 독립**: 모든 서브커맨드는 Figma 없이 동작. Figma 연결 시에만 sync 활성.
-- **권유 > 강제**: DESIGN.md 부재 = 안내 메시지 1 회. `/vibe.run` · `/vibe.verify` 는 막지 않는다.
-- **Stitch 9 섹션 표준**: 외부 에이전트 호환 (Google Stitch, awesome-design-md 생태계).
-- **버전 frontmatter**: `<!-- design-md-version: 1 -->` 로 미래 호환.
-- **루트 배치**: `CLAUDE.md` · `AGENTS.md` 와 동일하게 프로젝트 루트.
-
-## Process
-
-> **⏱️ Timer**: 시작 시 시스템 시각을 조회해 `{start_time}` 으로 기록.
-
-### Subcommand: `init`
-
-**진입 조건**: 프로젝트 루트에 `DESIGN.md` 없음 (있으면 덮어쓰기 확인).
-
-**경로 결정**:
-
-| `--from` | 동작 |
-|---------|------|
-| 미지정 / `interview` | 대화형 9 섹션 인터뷰 (디폴트) |
-| `code` | 기존 코드에서 토큰 역추출 → 인터뷰 보강 |
-| `reference` | `--reference=<slug>` 로 시드 카탈로그 선택 → §1·§2·§3 시드 + §4–§9 단축 인터뷰 |
-| `figma` | `/vibe.figma --emit-design-md` 위임 (Figma MCP 필요) |
-
-**공통 출력**:
-- 위치: `<프로젝트 루트>/DESIGN.md`
-- 첫 줄: `<!-- design-md-version: 1 -->`
-- 9 H2 섹션 (Visual Theme / Color Palette / Typography / Components / Layout / Depth / Do's & Don'ts / Responsive / Agent Prompt Guide)
-- 템플릿: `templates/DESIGN.md.template`
-
-#### `--from=interview` 흐름
-
-Read `references/design-context.md` for codebase signal collection, audience,
-brand, aesthetic, constraint questions, `.vibe/design-context.json` schema,
-and update semantics.
-
-1. 기존 코드 신호와 `.vibe/design-context.json`을 먼저 수집한다.
-2. 사용자가 9 섹션을 순차 답변 (브랜드 톤, 컬러, 폰트, 컴포넌트 스타일, 그리드, 그림자/뎁스, 금기, 브레이크포인트, 에이전트 가이드).
-3. design-context의 audience/brand/aesthetic/constraints를 같은 인터뷰에서 수집해 `.vibe/design-context.json`에 저장한다. 기존 파일은 field-level replacement, `createdAt` 보존, `updatedAt` 갱신 규칙을 따른다.
-4. 빈 DESIGN.md 섹션은 템플릿 기본값(주석)으로 채운다.
-5. `DESIGN.md` 저장 + `lint` 자동 실행 → P1 없으면 성공.
-
-#### `--from=code` 흐름
-
-1. `.vibe/config.json` 의 `stacks[].type` 으로 추출기 결정 (`heuristics/code-extract.md`)
-2. v1 필수 패턴: **Tailwind config / CSS custom properties / styled-components theme**
-3. 추출된 토큰을 §2·§3·§4 시드로 사용
-4. 나머지 6 섹션은 단축 인터뷰 (≤3 질문) 또는 템플릿 기본값
-
-#### `--from=reference` 흐름
-
-1. `references/README.md` 시드 카탈로그에서 `--reference=<slug>` 매칭 (`linear`, `vercel`, `stripe` …)
-2. 시드의 `style-preset` 한 줄 (예: `"minimal, neutral grays + electric purple accent, Inter Display"`) 로 §1·§2·§3 기본값 채움
-3. §4–§9 는 단축 인터뷰 (≤3 질문)
-4. 네트워크 차단 환경에서도 동작 (시드는 로컬 시드)
-
-#### `--from=figma` 흐름
-
-1. `/vibe.figma --emit-design-md --file=<key>` 호출 (위임)
-2. 산출물(`DESIGN.md`) 받아서 lint 통과 확인
-
-### Subcommand: `lint`
-
-**입력**: 프로젝트 루트 `DESIGN.md`
-
-**체크**:
-- 9 섹션 모두 존재 (`lintMissingSections` from `design-md-parser.ts`)
-- frontmatter 버전 주석 존재
-- §2 (Color Palette) 에 최소 1 개 hex 토큰
-- §9 (Agent Prompt Guide) 비어있지 않음
-
-**출력**:
-```
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-✅ DESIGN.md lint PASS
-   9 sections, 12 color tokens, version 1
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-```
-
-또는:
-
-```
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-❌ DESIGN.md lint FAIL (P1: 2)
-   Missing: Typography, Responsive
-   → Run /vibe.design init to regenerate, or edit DESIGN.md
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-```
-
-**성능 목표**: <200ms (100 줄 DESIGN.md 기준).
-
-### Subcommand: `verify`
-
-**입력**:
-- 프로젝트 루트 `DESIGN.md` (없으면 안내 후 종료)
-- `--files=<glob>` (기본: 최근 변경 파일 — `/vibe.verify` 의 changed-files 정책 따름)
-
-**체크 (v1 범위)**:
-- `extractHexTokens(DESIGN.md)` → 허용 토큰 셋
-- `findHardcodedColors(files, allowed)` → 허용 셋 밖 hex = P1 후보
-
-**v1 비범위** (Phase 2+):
-- spacing / font-family 드리프트
-- HSL/RGB/named color
-- Tailwind arbitrary value `bg-[#xxxxxx]`
-
-**출력**:
-```
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-✅ DESIGN.md verify PASS (32 files scanned)
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-```
-
-또는:
-
-```
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-❌ DESIGN.md verify FAIL (P1: 3 hex drifts)
-   src/Button.tsx:42  #FF5733 not in DESIGN.md tokens
-   src/Card.tsx:18    #123456 not in DESIGN.md tokens
-   src/Nav.tsx:7      #ABCDEF not in DESIGN.md tokens
-   → Add to DESIGN.md §2 Color Palette, or replace with token
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-```
-
-**성능 목표**: <1s / 100 파일.
-
-### Subcommand: `sync` (Should, Phase 2)
-
-**진입 조건**: `~/.vibe/config.json#figma.token` 존재 + `--file=<key>` 또는 프로젝트에 figma 연결 메타.
-
-**v1 동작**: "Phase 2 에서 활성됩니다. 현재는 `/vibe.figma --emit-design-md` 를 사용하세요." 메시지 후 종료.
-
-### Subcommand: `preview`
-
-Generate the UI preview directly in the main session (native capability — no dedicated agent). DESIGN.md 와 독립적으로 동작 — 임시 프리뷰용.
-
-Generate UI preview from a text description, a design folder, or a single file.
-
-- **Antigravity enabled**: UI mockup image + component code generation
-- **Antigravity disabled**: ASCII art fallback
-
-**Input types:**
-
-| Input | Example |
-| ----- | ------- |
-| Text description | `"Login form with email, password"` |
-| Design folder | `./design/` |
-| Single file | `./mockups/login.html` |
-
-> Read `references/ui-preview.md` for the full supported file-format list and example invocations.
-
-## Integration
-
-| Skill | 통합 지점 |
-|------|---------|
-| `/vibe.run` | UI 스택 진입 시 `DESIGN.md` 없으면 `### DESIGN.md Gate` 에서 권유 (ultrawork 시 silent skip) |
-| `/vibe.verify` | `### 3.2 Visual Drift Detection` 에서 `vibe.design verify` 호출 — P1 → fail |
-| `/vibe.review` | `### Phase 2.5 Visual P1 Baseline` 에서 DESIGN.md 우선, 없으면 WCAG AA 폴백 |
-| `/vibe.figma` | WRITE 는 DESIGN.md 읽어 톤·팔레트 우선, READ 는 `--emit-design-md` 플래그로 출력 |
-
-### 생태계 스킬 — 권유만 하고 설치하지 않는다
-
-사용자가 "AI 티 나는 UI", "밋밋하다", "레퍼런스 보드가 필요하다" 를 말하면 아래를
-**한 번 언급**한다. `DESIGN.md` 가 규범(팔레트·타이포·간격 SSOT)을 잡는다면, 이쪽은
-그 규범 안에서의 **취향**을 다룬다 — 겹치지 않고 보완한다.
-
-```bash
-npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
-```
-
-**자동 설치하지 않는 이유**: 스킬은 하나하나가 매 세션 상시 컨텍스트다
-(`vibe status` 의 Skills 행이 그 총량을 보고한다). 저 저장소는 스킬을 여러 개
-담고 있어 통째로 받으면 컨텍스트가 눈에 띄게 늘어난다 — 그래서 `--skill` 로
-하나만 집는 형태로 안내한다. 3rd-party 스킬을 사용자 머신에 말없이 얹는 것은
-신뢰 결정이라 사람이 한다.
-
-권유는 **1회로 끝낸다.** 거절했거나 이미 설치돼 있으면 다시 꺼내지 않는다.
-
-## Figma Credential Handling (init/sync only)
-
-- 토큰 출처: `~/.vibe/config.json#figma.token` (chmod 0o600)
-- 메모리 외 노출 금지. 로그에는 마지막 4 자만 노출 (`****abc1`)
-- `--from=figma` · `sync` 외 서브커맨드는 토큰 읽지 않음
-
-## Output
-
-| 파일 | 생성/수정 |
-|-----|---------|
-| `<root>/DESIGN.md` | `init` / `sync` |
-| 콘솔 리포트 | `lint` / `verify` |
-| ASCII 프리뷰 또는 목업 이미지 | `preview` |
-
-## Heuristics & References
-
-- 코드 역추출 패턴: `heuristics/code-extract.md`
-- 시드 카탈로그: `references/README.md`
-- UI 프리뷰 포맷·예시: `references/ui-preview.md`
-- 템플릿: `templates/DESIGN.md.template`
-
-ARGUMENTS: $ARGUMENTS

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
-```