@su-record/vibe 2.6.34 → 2.6.41

package/vibe/rules/standards/security.md

@@ -0,0 +1,305 @@
+# Security Standards
+
+> 보안은 기능이 아닌 기본 요구사항이다. 모든 코드는 보안을 내재화해야 한다.
+
+## 1. 시크릿 관리
+
+### 필수 원칙
+
+- 모든 시크릿(API 키, 토큰, 비밀번호)은 **환경 변수**로 관리한다
+- `.env` 파일은 `.gitignore`에 반드시 포함한다
+- `.env.example` 파일에 키 이름만(값 제외) 문서화한다
+- 시크릿 로테이션 권장 주기: 90~180일 (관리형 키, 개발 환경은 예외)
+- 유출 의심, 팀원 퇴사 시 즉시 로테이션 트리거
+
+```typescript
+// ❌ Bad: 하드코딩된 시크릿
+const apiKey = "sk-proj-xxxxx";
+const dbPassword = "admin1234";
+
+// ✅ Good: 환경 변수 사용
+const apiKey = process.env.API_KEY;
+if (!apiKey) {
+  throw new Error("API_KEY 환경 변수가 설정되지 않았습니다");
+}
+```
+
+### `.env.example` 패턴
+
+```bash
+# .env.example — 키 이름만 기록, 실제 값은 넣지 않음
+DATABASE_URL=
+API_KEY=
+JWT_SECRET=
+```
+
+## 2. OWASP Top 10 (2021) 체크리스트
+
+> 버전: OWASP Top 10 — 2021
+
+### A01: Broken Access Control
+
+- [ ] 모든 엔드포인트에 인증/인가 검증 적용
+- [ ] CORS 허용 오리진 최소화 (`*` 사용 금지)
+- [ ] 디렉토리 트래버설 방지 (경로 정규화)
+- [ ] 리소스 ID 기반 접근 시 소유권 검증
+
+```typescript
+// ❌ Bad: 소유권 검증 없이 리소스 반환
+app.get("/api/orders/:id", async (req, res) => {
+  const order = await db.orders.findById(req.params.id);
+  res.json(order);
+});
+
+// ✅ Good: 소유권 검증 포함
+app.get("/api/orders/:id", auth, async (req, res) => {
+  const order = await db.orders.findById(req.params.id);
+  if (order.userId !== req.user.id) {
+    return res.status(403).json({ error: "접근 권한이 없습니다" });
+  }
+  res.json(order);
+});
+```
+
+### A02: Cryptographic Failures
+
+- [ ] 민감 데이터 전송 시 TLS(HTTPS) 강제
+- [ ] 비밀번호는 bcrypt/argon2로 해싱 (SHA256 사용 금지)
+- [ ] 대칭키 암호화 시 AES-256-GCM 이상 사용
+
+### A03: Injection
+
+- [ ] SQL 쿼리 파라미터화 (Prepared Statements)
+- [ ] ORM 사용 시에도 raw query 파라미터 바인딩 검증
+- [ ] OS 명령어 실행 시 화이트리스트 기반 검증
+
+```typescript
+// ❌ Bad: SQL Injection 취약
+const query = `SELECT * FROM users WHERE id = '${userId}'`;
+
+// ✅ Good: 파라미터화된 쿼리
+const query = "SELECT * FROM users WHERE id = $1";
+const result = await db.query(query, [userId]);
+```
+
+### A04: Insecure Design
+
+- [ ] 비즈니스 로직에 rate limiting 적용
+- [ ] 인증 실패 횟수 제한 (계정 잠금 또는 지연)
+- [ ] 민감한 작업에 재인증 요구
+
+### A05: Security Misconfiguration
+
+- [ ] 프로덕션에서 디버그 모드 비활성화
+- [ ] 기본 계정/비밀번호 변경
+- [ ] 불필요한 HTTP 메서드 비활성화
+- [ ] 보안 헤더 설정 (아래 별도 섹션 참고)
+
+### A06: Vulnerable Components
+
+- [ ] `npm audit` 주기적 실행
+- [ ] 취약점 심각도별 대응: Critical/High → 즉시 패치, Medium → 1주 내, Low → 다음 릴리스
+- [ ] Snyk 등 도구 도입 검토 (선택 사항)
+
+### A07: Authentication Failures
+
+- [ ] 세션 토큰 충분한 엔트로피 확보
+- [ ] 로그인 실패 시 구체적 정보 미노출 ("이메일 또는 비밀번호가 올바르지 않습니다")
+- [ ] MFA 도입 검토
+
+```typescript
+// ❌ Bad: 구체적 실패 원인 노출
+throw new Error("비밀번호가 틀렸습니다");
+
+// ✅ Good: 통합 에러 메시지
+throw new Error("이메일 또는 비밀번호가 올바르지 않습니다");
+```
+
+### A08: Software and Data Integrity Failures
+
+- [ ] CI/CD 파이프라인 무결성 검증
+- [ ] 패키지 잠금 파일(package-lock.json) 커밋
+- [ ] 자동 업데이트 시 서명 검증
+
+### A09: Security Logging and Monitoring Failures
+
+- [ ] 인증 실패, 접근 거부 등 보안 이벤트 로깅
+- [ ] 로그에 민감 정보(PII, 비밀번호) 제외
+- [ ] 이상 탐지 알림 설정
+
+### A10: Server-Side Request Forgery (SSRF)
+
+- [ ] 사용자 입력 URL의 화이트리스트 검증
+- [ ] 내부 네트워크 주소(127.0.0.1, 10.x.x.x 등) 차단
+- [ ] 리다이렉트 허용 시 대상 도메인 검증
+
+## 3. XSS 방지
+
+```typescript
+// ❌ Bad: dangerouslySetInnerHTML 무분별 사용
+<div dangerouslySetInnerHTML={{ __html: userInput }} />
+
+// ✅ Good: DOMPurify로 새니타이즈
+import DOMPurify from "dompurify";
+<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userInput) }} />
+```
+
+- [ ] 사용자 입력 출력 시 HTML 이스케이프
+- [ ] CSP 헤더로 인라인 스크립트 제한
+- [ ] React JSX 기본 이스케이프를 활용하고, `dangerouslySetInnerHTML` 최소화
+
+## 4. CSRF 방지
+
+- [ ] 상태 변경 요청에 CSRF 토큰 적용
+- [ ] SameSite 쿠키 속성 설정 (`Strict` 또는 `Lax`)
+- [ ] Origin/Referer 헤더 검증
+
+## 5. 인증/권한 검증 패턴
+
+```typescript
+// ✅ Good: 미들웨어 기반 인증/인가
+const authMiddleware = (requiredRole: string) => {
+  return (req: Request, res: Response, next: NextFunction) => {
+    const token = req.headers.authorization?.split(" ")[1];
+    if (!token) {
+      return res.status(401).json({ error: "인증이 필요합니다" });
+    }
+    try {
+      const decoded = verifyToken(token);
+      if (!decoded.roles.includes(requiredRole)) {
+        return res.status(403).json({ error: "권한이 없습니다" });
+      }
+      req.user = decoded;
+      next();
+    } catch {
+      return res.status(401).json({ error: "유효하지 않은 토큰입니다" });
+    }
+  };
+};
+```
+
+## 6. 세션/쿠키 보안
+
+```typescript
+// ❌ Bad: 안전하지 않은 쿠키 설정
+res.cookie("session", token);
+
+// ✅ Good: 보안 플래그 적용
+res.cookie("session", token, {
+  httpOnly: true,
+  secure: true,
+  sameSite: "strict",
+  maxAge: 3600000,
+});
+```
+
+## 7. 보안 헤더
+
+```typescript
+// ✅ Good: 필수 보안 헤더 설정
+app.use((req, res, next) => {
+  res.setHeader("Content-Security-Policy", "default-src 'self'");
+  res.setHeader("Strict-Transport-Security", "max-age=31536000; includeSubDomains");
+  res.setHeader("X-Content-Type-Options", "nosniff");
+  res.setHeader("X-Frame-Options", "DENY");
+  res.setHeader("Referrer-Policy", "strict-origin-when-cross-origin");
+  next();
+});
+```
+
+## 8. CORS 설정
+
+```typescript
+// ❌ Bad: 모든 오리진 허용
+app.use(cors({ origin: "*" }));
+
+// ✅ Good: 허용 오리진 명시
+app.use(cors({
+  origin: ["https://myapp.com", "https://admin.myapp.com"],
+  methods: ["GET", "POST", "PUT", "DELETE"],
+  credentials: true,
+}));
+```
+
+## 9. 파일 업로드 보안
+
+- [ ] 파일 크기 제한 설정 (최대 10MB 등)
+- [ ] 허용 MIME 타입 화이트리스트
+- [ ] 파일명 재생성 (UUID 기반)
+- [ ] 업로드 디렉토리에 실행 권한 제거
+
+```typescript
+// ❌ Bad: 파일 업로드 제한 없음
+app.post("/upload", upload.single("file"), handler);
+
+// ✅ Good: 파일 타입/크기 제한
+const upload = multer({
+  limits: { fileSize: 10 * 1024 * 1024 },
+  fileFilter: (req, file, cb) => {
+    const allowed = ["image/jpeg", "image/png", "application/pdf"];
+    cb(null, allowed.includes(file.mimetype));
+  },
+});
+```
+
+## 10. 로그 마스킹 / PII 처리
+
+```typescript
+// ❌ Bad: 민감 정보 로그 출력
+logger.info(`User login: ${email}, password: ${password}`);
+
+// ✅ Good: 민감 정보 마스킹
+logger.info(`User login: ${maskEmail(email)}`);
+
+function maskEmail(email: string): string {
+  const [local, domain] = email.split("@");
+  return `${local.slice(0, 2)}***@${domain}`;
+}
+```
+
+## 11. 의존성 보안
+
+### `npm audit` 실행 가이드
+
+```bash
+# 취약점 확인
+npm audit
+
+# 자동 수정 가능한 항목 패치
+npm audit fix
+
+# breaking change 포함 패치 (주의 필요)
+npm audit fix --force
+```
+
+### 심각도별 대응 기준
+
+| 심각도 | 대응 | 기한 |
+|--------|------|------|
+| Critical | 즉시 패치 | 당일 |
+| High | 우선 패치 | 2일 이내 |
+| Medium | 계획 패치 | 1주 이내 |
+| Low | 다음 릴리스 | 다음 배포 |
+
+## 12. 보안 이슈 발견 시 프로토콜
+
+1. 즉시 작업 중단
+2. `security-reviewer` 에이전트 호출
+3. 심각도 분류: **Critical** → 즉시 중단 후 사용자 보고 | High → 우선 수정 | Medium/Low → 리포트 후 계획 수정
+4. 노출된 시크릿은 즉시 로테이션
+5. 전체 코드베이스에서 유사 이슈 검토 (Grep 도구 활용)
+
+## 필수 보안 체크리스트
+
+커밋 전 반드시 확인:
+
+- [ ] 하드코딩된 시크릿 없음
+- [ ] 모든 사용자 입력 검증됨
+- [ ] SQL Injection 방지 (파라미터화된 쿼리)
+- [ ] XSS 방지 (HTML 이스케이프)
+- [ ] CSRF 보호 활성화
+- [ ] 인증/권한 검증됨
+- [ ] 에러 메시지에 민감 정보 노출 없음
+- [ ] 보안 헤더 설정 확인
+- [ ] CORS 오리진 최소화
+- [ ] 로그에 PII 미포함

package/vibe/rules/writing/document-style.md

@@ -0,0 +1,74 @@
+# 📝 문서 작성 스타일 규칙
+
+> 문서(.md) 작성 시 자동 적용되는 품질 기준
+
+## 일반 가이드라인
+
+| 항목 | 기준 |
+|------|------|
+| 언어 | 한국어 |
+| 톤 | 명확, 간결, 전문적이면서 이해하기 쉽게 |
+| 이모지 | 제목/부제목/목록에 문맥 관련 이모지 적절 사용. 과도한 사용 지양 |
+| 형식 | 마크다운(`.md`) |
+| 일관성 | 용어, 스타일, 문서 구조 통일 |
+
+## 내용 작성 규칙
+
+### 정확성
+- 제공된 정보/기획 문서 기반으로 **정확한 내용** 작성
+- 추측이나 확인되지 않은 정보 금지
+- 추상적 설명보다 **구체적 예시, 코드 스니펫, 단계별 지침** 포함
+
+### 인용
+- 첨부 파일 내용 참조 시 해당 내용 뒤에 출처 표기
+
+### 링크
+- 다른 문서 링크는 정확한 **상대 경로** 사용
+- 헤딩 ID 기반 앵커 링크 정확히 작동하도록 작성
+
+### 참조 금지 원칙
+- 아직 생성되지 않은 파일 참조 금지
+- 모든 필요한 코드는 **문서 내에 완전히 포함**
+- "나머지는 X 파일 참조" 같은 표현 금지
+- 각 문서는 **독립적으로 완전**해야 함
+
+### 자리 표시자
+- 다이어그램, 미확정 사항, 추후 추가 내용은 `[TODO]` 또는 `[PLACEHOLDER]`로 명확 표기
+
+## 분량 가이드라인
+
+| 항목 | 기준 |
+|------|------|
+| 적정 분량 | 5-7분 읽기 (1,500-2,000 단어) |
+| 코드 포함 시 | 최대 3,000줄 이내 |
+| 목차 | 스크롤 없이 한 화면에 보이도록 |
+
+## 간결성 원칙
+
+- **핵심 코드 + 간단한 설명**만 포함
+- 예제는 대표적인 것 **1-2개**만
+- 중복 설명 제거, 한 번만 명확히
+
+## 실행 중심 구성
+
+- "이렇게 하세요" 방식의 **명확한 지시문**
+- 복사해서 바로 사용 가능한 **실행 가능한 코드**
+- 체크리스트 중심의 검증 가능한 내용
+
+## 구분 명확화
+
+- **[필수]** vs **[선택]** 항목 명확 표시
+- 코드 블록에 **파일 경로** 항상 명시
+- 환경별 차이는 **조건문**으로 한 번에 표현
+
+## AI 최적화
+
+- 긴 설명보다 **주석이 포함된 코드** 선호
+- 복잡한 개념은 **다이어그램**이나 **표**로 요약
+- 각 섹션은 **독립적으로 이해 가능**하게 작성
+
+## 상호작용
+
+- 초안 작성 완료 후 사용자 확인 요청
+- 사용자 피드백 반영하여 수정
+- 답변은 간략하게, 다음 스텝 진행 여부를 물어보는 수준

package/vibe/setup.sh

@@ -1,10 +1,10 @@
 #!/bin/bash
-# Vibe 협업자 자동 설치 스크립트
+# Core 협업자 자동 설치 스크립트
 # 사용법: ./.claude/vibe/setup.sh
 
 set -e
 
-echo "🔧 Vibe 설치 확인 중..."
+echo "🔧 Core 설치 확인 중..."
 
 # npm/npx 확인
 if ! command -v npx &> /dev/null; then
@@ -13,16 +13,16 @@ if ! command -v npx &> /dev/null; then
     exit 1
 fi
 
-# vibe 설치 확인 및 업데이트
+# core 설치 확인 및 업데이트
 if command -v vibe &> /dev/null; then
     echo "✅ Vibe가 이미 설치되어 있습니다."
     vibe update --silent
-    echo "✅ Vibe 업데이트 완료!"
+    echo "✅ Core 업데이트 완료!"
 else
-    echo "📦 Vibe 설치 중..."
+    echo "📦 Core 설치 중..."
     npm install -g @su-record/vibe
     vibe update --silent
-    echo "✅ Vibe 설치 및 설정 완료!"
+    echo "✅ Core 설치 및 설정 완료!"
 fi
 
 echo ""

package/vibe/templates/constitution-template.md

@@ -29,9 +29,9 @@ All reference documents are stored globally and specified in `.claude/vibe/confi
 {
   "references": {
     "rules": [
-      "~/.claude/vibe/rules/core/quick-start.md",
-      "~/.claude/vibe/rules/core/development-philosophy.md",
-      "~/.claude/vibe/rules/core/communication-guide.md",
+      "~/.claude/vibe/rules/principles/quick-start.md",
+      "~/.claude/vibe/rules/principles/development-philosophy.md",
+      "~/.claude/vibe/rules/principles/communication-guide.md",
       "~/.claude/vibe/rules/quality/checklist.md",
       "~/.claude/vibe/rules/quality/bdd-contract-testing.md",
       "~/.claude/vibe/rules/quality/testing-strategy.md",

package/vibe/ui-ux-data/charts.csv

@@ -0,0 +1,26 @@
+No,Data Type,Keywords,Best Chart Type,Secondary Options,Color Guidance,Performance Impact,Accessibility Notes,Library Recommendation,Interactive Level
+1,Trend Over Time,"trend, time-series, line, growth, timeline, progress",Line Chart,"Area Chart, Smooth Area",Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity,⚡ Excellent (optimized),✓ Clear line patterns for colorblind users. Add pattern overlays.,"Chart.js, Recharts, ApexCharts",Hover + Zoom
+2,Compare Categories,"compare, categories, bar, comparison, ranking",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar",Each bar: distinct color. Category: grouped same color. Sorted: descending order,⚡ Excellent,✓ Easy to compare. Add value labels on bars for clarity.,"Chart.js, Recharts, D3.js",Hover + Sort
+3,Part-to-Whole,"part-to-whole, pie, donut, percentage, proportion, share",Pie Chart or Donut,"Stacked Bar, Treemap",Colors: 5-6 max. Contrasting palette. Large slices first. Use labels.,⚡ Good (limit 6 slices),⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items.,"Chart.js, Recharts, D3.js",Hover + Drill
+4,Correlation/Distribution,"correlation, distribution, scatter, relationship, pattern",Scatter Plot or Bubble Chart,"Heat Map, Matrix",Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density,⚠ Moderate (many points),⚠ Provide data table alternative. Use pattern + color distinction.,"D3.js, Plotly, Recharts",Hover + Brush
+5,Heatmap/Intensity,"heatmap, heat-map, intensity, density, matrix",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat",Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data,⚡ Excellent (color CSS),⚠ Colorblind: Use pattern overlay. Provide numerical legend.,"D3.js, Plotly, ApexCharts",Hover + Zoom
+6,Geographic Data,"geographic, map, location, region, geo, spatial","Choropleth Map, Bubble Map",Geographic Heat Map,Regional: single color gradient or categorized colors. Legend: clear scale,⚠ Moderate (rendering),⚠ Include text labels for regions. Provide data table alternative.,"D3.js, Mapbox, Leaflet",Pan + Zoom + Drill
+7,Funnel/Flow,funnel/flow,"Funnel Chart, Sankey",Waterfall (for flows),Stages: gradient (starting color → ending color). Show conversion %,⚡ Good,✓ Clear stage labels + percentages. Good for accessibility if labeled.,"D3.js, Recharts, Custom SVG",Hover + Drill
+8,Performance vs Target,performance-vs-target,Gauge Chart or Bullet Chart,"Dial, Thermometer",Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors,⚡ Good,✓ Add numerical value + percentage label beside gauge.,"D3.js, ApexCharts, Custom SVG",Hover
+9,Time-Series Forecast,time-series-forecast,Line with Confidence Band,Ribbon Chart,Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading,⚡ Good,✓ Clearly distinguish actual vs forecast. Add legend.,"Chart.js, ApexCharts, Plotly",Hover + Toggle
+10,Anomaly Detection,anomaly-detection,Line Chart with Highlights,Scatter with Alert,Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert,⚡ Good,✓ Circle/marker for anomalies. Add text alert annotation.,"D3.js, Plotly, ApexCharts",Hover + Alert
+11,Hierarchical/Nested Data,hierarchical/nested-data,Treemap,"Sunburst, Nested Donut, Icicle",Parent: distinct hues. Children: lighter shades. White borders 2-3px.,⚠ Moderate,⚠ Poor - provide table alternative. Label large areas.,"D3.js, Recharts, ApexCharts",Hover + Drilldown
+12,Flow/Process Data,flow/process-data,Sankey Diagram,"Alluvial, Chord Diagram",Gradient from source to target. Opacity 0.4-0.6 for flows.,⚠ Moderate,⚠ Poor - provide flow table alternative.,"D3.js (d3-sankey), Plotly",Hover + Drilldown
+13,Cumulative Changes,cumulative-changes,Waterfall Chart,"Stacked Bar, Cascade",Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1.,⚡ Good,✓ Good - clear directional colors with labels.,"ApexCharts, Highcharts, Plotly",Hover
+14,Multi-Variable Comparison,multi-variable-comparison,Radar/Spider Chart,"Parallel Coordinates, Grouped Bar",Single: #0080FF 20% fill. Multiple: distinct colors per dataset.,⚡ Good,⚠ Moderate - limit 5-8 axes. Add data table.,"Chart.js, Recharts, ApexCharts",Hover + Toggle
+15,Stock/Trading OHLC,stock/trading-ohlc,Candlestick Chart,"OHLC Bar, Heikin-Ashi",Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below.,⚡ Good,⚠ Moderate - provide OHLC data table.,"Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom
+16,Relationship/Connection Data,relationship/connection-data,Network Graph,"Hierarchical Tree, Adjacency Matrix",Node types: categorical colors. Edges: #90A4AE 60% opacity.,❌ Poor (500+ nodes struggles),❌ Very Poor - provide adjacency list alternative.,"D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag
+17,Distribution/Statistical,distribution/statistical,Box Plot,"Violin Plot, Beeswarm",Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336.,⚡ Excellent,"✓ Good - include stats table (min, Q1, median, Q3, max).","Plotly, D3.js, Chart.js (plugin)",Hover
+18,Performance vs Target (Compact),performance-vs-target-(compact),Bullet Chart,"Gauge, Progress Bar","Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px.",⚡ Excellent,✓ Excellent - compact with clear values.,"D3.js, Plotly, Custom SVG",Hover
+19,Proportional/Percentage,proportional/percentage,Waffle Chart,"Pictogram, Stacked Bar 100%",10x10 grid. 3-5 categories max. 2-3px spacing between squares.,⚡ Good,✓ Good - better than pie for accessibility.,"D3.js, React-Waffle, Custom CSS Grid",Hover
+20,Hierarchical Proportional,hierarchical-proportional,Sunburst Chart,"Treemap, Icicle, Circle Packing",Center to outer: darker to lighter. 15-20% lighter per level.,⚠ Moderate,⚠ Poor - provide hierarchy table alternative.,"D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover
+21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split",Decomposition Tree,"Decision Tree, Flow Chart",Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.,⚠ Moderate (calculation heavy),✓ clear hierarchy. Allow keyboard navigation for nodes.,"Power BI (native), React-Flow, Custom D3.js",Drill + Expand
+22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric",3D Scatter/Surface Plot,"Volumetric Rendering, Point Cloud",Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).,❌ Heavy (WebGL required),❌ Poor - requires alternative 2D view or data table.,"Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR
+23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse",Streaming Area Chart,"Ticker Tape, Moving Gauge",Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.,⚡ Optimized (canvas/webgl),⚠ Flashing elements - provide pause button. High contrast.,Smoothed D3.js, CanvasJS
+24,Sentiment/Emotion,"sentiment, emotion, nlp, opinion, feeling",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart",Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.,⚡ Good,⚠ Word clouds poor for screen readers. Use list view.,"D3-cloud, Highcharts, Nivo",Hover + Filter
+25,Process Mining,"process, mining, variants, path, bottleneck, log",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net",Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444.,⚠ Moderate to Heavy,⚠ Complex graphs hard to navigate. Provide path summary.,"React-Flow, Cytoscape.js, Recharts",Drag + Node-Click

package/vibe/ui-ux-data/colors.csv

@@ -0,0 +1,97 @@
+No,Product Type,Primary (Hex),Secondary (Hex),CTA (Hex),Background (Hex),Text (Hex),Border (Hex),Notes
+1,SaaS (General),#2563EB,#3B82F6,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust blue + orange CTA contrast
+2,Micro SaaS,#6366F1,#818CF8,#10B981,#F5F3FF,#1E1B4B,#E0E7FF,Indigo primary + emerald CTA
+3,E-commerce,#059669,#10B981,#F97316,#ECFDF5,#064E3B,#A7F3D0,Success green + urgency orange
+4,E-commerce Luxury,#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Premium dark + gold accent
+5,Service Landing Page,#0EA5E9,#38BDF8,#F97316,#F0F9FF,#0C4A6E,#BAE6FD,Sky blue trust + warm CTA
+6,B2B Service,#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional navy + blue CTA
+7,Financial Dashboard,#0F172A,#1E293B,#22C55E,#020617,#F8FAFC,#334155,Dark bg + green positive indicators
+8,Analytics Dashboard,#1E40AF,#3B82F6,#F59E0B,#F8FAFC,#1E3A8A,#DBEAFE,Blue data + amber highlights
+9,Healthcare App,#0891B2,#22D3EE,#059669,#ECFEFF,#164E63,#A5F3FC,Calm cyan + health green
+10,Educational App,#4F46E5,#818CF8,#F97316,#EEF2FF,#1E1B4B,#C7D2FE,Playful indigo + energetic orange
+11,Creative Agency,#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold pink + cyan accent
+12,Portfolio/Personal,#18181B,#3F3F46,#2563EB,#FAFAFA,#09090B,#E4E4E7,Monochrome + blue accent
+13,Gaming,#7C3AED,#A78BFA,#F43F5E,#0F0F23,#E2E8F0,#4C1D95,Neon purple + rose action
+14,Government/Public Service,#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,High contrast navy + blue
+15,Fintech/Crypto,#F59E0B,#FBBF24,#8B5CF6,#0F172A,#F8FAFC,#334155,Gold trust + purple tech
+16,Social Media App,#E11D48,#FB7185,#2563EB,#FFF1F2,#881337,#FECDD3,Vibrant rose + engagement blue
+17,Productivity Tool,#0D9488,#14B8A6,#F97316,#F0FDFA,#134E4A,#99F6E4,Teal focus + action orange
+18,Design System/Component Library,#4F46E5,#6366F1,#F97316,#EEF2FF,#312E81,#C7D2FE,Indigo brand + doc hierarchy
+19,AI/Chatbot Platform,#7C3AED,#A78BFA,#06B6D4,#FAF5FF,#1E1B4B,#DDD6FE,AI purple + cyan interactions
+20,NFT/Web3 Platform,#8B5CF6,#A78BFA,#FBBF24,#0F0F23,#F8FAFC,#4C1D95,Purple tech + gold value
+21,Creator Economy Platform,#EC4899,#F472B6,#F97316,#FDF2F8,#831843,#FBCFE8,Creator pink + engagement orange
+22,Sustainability/ESG Platform,#059669,#10B981,#0891B2,#ECFDF5,#064E3B,#A7F3D0,Nature green + ocean blue
+23,Remote Work/Collaboration Tool,#6366F1,#818CF8,#10B981,#F5F3FF,#312E81,#E0E7FF,Calm indigo + success green
+24,Mental Health App,#8B5CF6,#C4B5FD,#10B981,#FAF5FF,#4C1D95,#EDE9FE,Calming lavender + wellness green
+25,Pet Tech App,#F97316,#FB923C,#2563EB,#FFF7ED,#9A3412,#FED7AA,Playful orange + trust blue
+26,Smart Home/IoT Dashboard,#1E293B,#334155,#22C55E,#0F172A,#F8FAFC,#475569,Dark tech + status green
+27,EV/Charging Ecosystem,#0891B2,#22D3EE,#22C55E,#ECFEFF,#164E63,#A5F3FC,Electric cyan + eco green
+28,Subscription Box Service,#D946EF,#E879F9,#F97316,#FDF4FF,#86198F,#F5D0FE,Excitement purple + urgency orange
+29,Podcast Platform,#1E1B4B,#312E81,#F97316,#0F0F23,#F8FAFC,#4338CA,Dark audio + warm accent
+30,Dating App,#E11D48,#FB7185,#F97316,#FFF1F2,#881337,#FECDD3,Romantic rose + warm orange
+31,Micro-Credentials/Badges Platform,#0369A1,#0EA5E9,#CA8A04,#F0F9FF,#0C4A6E,#BAE6FD,Trust blue + achievement gold
+32,Knowledge Base/Documentation,#475569,#64748B,#2563EB,#F8FAFC,#1E293B,#E2E8F0,Neutral grey + link blue
+33,Hyperlocal Services,#059669,#10B981,#F97316,#ECFDF5,#064E3B,#A7F3D0,Location green + action orange
+34,Beauty/Spa/Wellness Service,#EC4899,#F9A8D4,#8B5CF6,#FDF2F8,#831843,#FBCFE8,Soft pink + lavender luxury
+35,Luxury/Premium Brand,#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Premium black + gold accent
+36,Restaurant/Food Service,#DC2626,#F87171,#CA8A04,#FEF2F2,#450A0A,#FECACA,Appetizing red + warm gold
+37,Fitness/Gym App,#F97316,#FB923C,#22C55E,#1F2937,#F8FAFC,#374151,Energy orange + success green
+38,Real Estate/Property,#0F766E,#14B8A6,#0369A1,#F0FDFA,#134E4A,#99F6E4,Trust teal + professional blue
+39,Travel/Tourism Agency,#0EA5E9,#38BDF8,#F97316,#F0F9FF,#0C4A6E,#BAE6FD,Sky blue + adventure orange
+40,Hotel/Hospitality,#1E3A8A,#3B82F6,#CA8A04,#F8FAFC,#1E40AF,#BFDBFE,Luxury navy + gold service
+41,Wedding/Event Planning,#DB2777,#F472B6,#CA8A04,#FDF2F8,#831843,#FBCFE8,Romantic pink + elegant gold
+42,Legal Services,#1E3A8A,#1E40AF,#B45309,#F8FAFC,#0F172A,#CBD5E1,Authority navy + trust gold
+43,Insurance Platform,#0369A1,#0EA5E9,#22C55E,#F0F9FF,#0C4A6E,#BAE6FD,Security blue + protected green
+44,Banking/Traditional Finance,#0F172A,#1E3A8A,#CA8A04,#F8FAFC,#020617,#E2E8F0,Trust navy + premium gold
+45,Online Course/E-learning,#0D9488,#2DD4BF,#F97316,#F0FDFA,#134E4A,#5EEAD4,Progress teal + achievement orange
+46,Non-profit/Charity,#0891B2,#22D3EE,#F97316,#ECFEFF,#164E63,#A5F3FC,Compassion blue + action orange
+47,Music Streaming,#1E1B4B,#4338CA,#22C55E,#0F0F23,#F8FAFC,#312E81,Dark audio + play green
+48,Video Streaming/OTT,#0F0F23,#1E1B4B,#E11D48,#000000,#F8FAFC,#312E81,Cinema dark + play red
+49,Job Board/Recruitment,#0369A1,#0EA5E9,#22C55E,#F0F9FF,#0C4A6E,#BAE6FD,Professional blue + success green
+50,Marketplace (P2P),#7C3AED,#A78BFA,#22C55E,#FAF5FF,#4C1D95,#DDD6FE,Trust purple + transaction green
+51,Logistics/Delivery,#2563EB,#3B82F6,#F97316,#EFF6FF,#1E40AF,#BFDBFE,Tracking blue + delivery orange
+52,Agriculture/Farm Tech,#15803D,#22C55E,#CA8A04,#F0FDF4,#14532D,#BBF7D0,Earth green + harvest gold
+53,Construction/Architecture,#64748B,#94A3B8,#F97316,#F8FAFC,#334155,#E2E8F0,Industrial grey + safety orange
+54,Automotive/Car Dealership,#1E293B,#334155,#DC2626,#F8FAFC,#0F172A,#E2E8F0,Premium dark + action red
+55,Photography Studio,#18181B,#27272A,#F8FAFC,#000000,#FAFAFA,#3F3F46,Pure black + white contrast
+56,Coworking Space,#F59E0B,#FBBF24,#2563EB,#FFFBEB,#78350F,#FDE68A,Energetic amber + booking blue
+57,Cleaning Service,#0891B2,#22D3EE,#22C55E,#ECFEFF,#164E63,#A5F3FC,Fresh cyan + clean green
+58,Home Services (Plumber/Electrician),#1E40AF,#3B82F6,#F97316,#EFF6FF,#1E3A8A,#BFDBFE,Professional blue + urgent orange
+59,Childcare/Daycare,#F472B6,#FBCFE8,#22C55E,#FDF2F8,#9D174D,#FCE7F3,Soft pink + safe green
+60,Senior Care/Elderly,#0369A1,#38BDF8,#22C55E,#F0F9FF,#0C4A6E,#E0F2FE,Calm blue + reassuring green
+61,Medical Clinic,#0891B2,#22D3EE,#22C55E,#F0FDFA,#134E4A,#CCFBF1,Medical teal + health green
+62,Pharmacy/Drug Store,#15803D,#22C55E,#0369A1,#F0FDF4,#14532D,#BBF7D0,Pharmacy green + trust blue
+63,Dental Practice,#0EA5E9,#38BDF8,#FBBF24,#F0F9FF,#0C4A6E,#BAE6FD,Fresh blue + smile yellow
+64,Veterinary Clinic,#0D9488,#14B8A6,#F97316,#F0FDFA,#134E4A,#99F6E4,Caring teal + warm orange
+65,Florist/Plant Shop,#15803D,#22C55E,#EC4899,#F0FDF4,#14532D,#BBF7D0,Natural green + floral pink
+66,Bakery/Cafe,#92400E,#B45309,#F8FAFC,#FEF3C7,#78350F,#FDE68A,Warm brown + cream white
+67,Coffee Shop,#78350F,#92400E,#FBBF24,#FEF3C7,#451A03,#FDE68A,Coffee brown + warm gold
+68,Brewery/Winery,#7C2D12,#B91C1C,#CA8A04,#FEF2F2,#450A0A,#FECACA,Deep burgundy + craft gold
+69,Airline,#1E3A8A,#3B82F6,#F97316,#EFF6FF,#1E40AF,#BFDBFE,Sky blue + booking orange
+70,News/Media Platform,#DC2626,#EF4444,#1E40AF,#FEF2F2,#450A0A,#FECACA,Breaking red + link blue
+71,Magazine/Blog,#18181B,#3F3F46,#EC4899,#FAFAFA,#09090B,#E4E4E7,Editorial black + accent pink
+72,Freelancer Platform,#6366F1,#818CF8,#22C55E,#EEF2FF,#312E81,#C7D2FE,Creative indigo + hire green
+73,Consulting Firm,#0F172A,#334155,#CA8A04,#F8FAFC,#020617,#E2E8F0,Authority navy + premium gold
+74,Marketing Agency,#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold pink + creative cyan
+75,Event Management,#7C3AED,#A78BFA,#F97316,#FAF5FF,#4C1D95,#DDD6FE,Excitement purple + action orange
+76,Conference/Webinar Platform,#1E40AF,#3B82F6,#22C55E,#EFF6FF,#1E3A8A,#BFDBFE,Professional blue + join green
+77,Membership/Community,#7C3AED,#A78BFA,#22C55E,#FAF5FF,#4C1D95,#DDD6FE,Community purple + join green
+78,Newsletter Platform,#0369A1,#0EA5E9,#F97316,#F0F9FF,#0C4A6E,#BAE6FD,Trust blue + subscribe orange
+79,Digital Products/Downloads,#6366F1,#818CF8,#22C55E,#EEF2FF,#312E81,#C7D2FE,Digital indigo + buy green
+80,Church/Religious Organization,#7C3AED,#A78BFA,#CA8A04,#FAF5FF,#4C1D95,#DDD6FE,Spiritual purple + warm gold
+81,Sports Team/Club,#DC2626,#EF4444,#FBBF24,#FEF2F2,#7F1D1D,#FECACA,Team red + championship gold
+82,Museum/Gallery,#18181B,#27272A,#F8FAFC,#FAFAFA,#09090B,#E4E4E7,Gallery black + white space
+83,Theater/Cinema,#1E1B4B,#312E81,#CA8A04,#0F0F23,#F8FAFC,#4338CA,Dramatic dark + spotlight gold
+84,Language Learning App,#4F46E5,#818CF8,#22C55E,#EEF2FF,#312E81,#C7D2FE,Learning indigo + progress green
+85,Coding Bootcamp,#0F172A,#1E293B,#22C55E,#020617,#F8FAFC,#334155,Terminal dark + success green
+86,Cybersecurity Platform,#00FF41,#0D0D0D,#FF3333,#000000,#E0E0E0,#1F1F1F,Matrix green + alert red
+87,Developer Tool / IDE,#1E293B,#334155,#22C55E,#0F172A,#F8FAFC,#475569,Code dark + run green
+88,Biotech / Life Sciences,#0EA5E9,#0284C7,#10B981,#F0F9FF,#0C4A6E,#BAE6FD,DNA blue + life green
+89,Space Tech / Aerospace,#F8FAFC,#94A3B8,#3B82F6,#0B0B10,#F8FAFC,#1E293B,Star white + launch blue
+90,Architecture / Interior,#171717,#404040,#D4AF37,#FFFFFF,#171717,#E5E5E5,Minimal black + accent gold
+91,Quantum Computing,#00FFFF,#7B61FF,#FF00FF,#050510,#E0E0FF,#333344,Quantum cyan + interference purple
+92,Biohacking / Longevity,#FF4D4D,#4D94FF,#00E676,#F5F5F7,#1C1C1E,#E5E5EA,Bio red/blue + vitality green
+93,Autonomous Systems,#00FF41,#008F11,#FF3333,#0D1117,#E6EDF3,#30363D,Terminal green + alert red
+94,Generative AI Art,#18181B,#3F3F46,#EC4899,#FAFAFA,#09090B,#E4E4E7,Canvas neutral + creative pink
+95,Spatial / Vision OS,#FFFFFF,#E5E5E5,#007AFF,#888888,#000000,#CCCCCC,Glass white + system blue
+96,Climate Tech,#059669,#10B981,#FBBF24,#ECFDF5,#064E3B,#A7F3D0,Nature green + solar gold