heraspec 0.1.14 → 0.1.15

package/dist/core/templates/skills/tech-debt/skill.md

@@ -0,0 +1,70 @@
+# Skill: Technical Debt Management (Cross-Cutting)
+
+## Purpose
+
+Systematically identify, categorize, and prioritize technical debt to manage codebase maintenance and refactoring.
+
+## When to Use
+
+- When conducting code health/quality audits
+- When preparing refactoring proposals
+- When managing maintenance backlogs or prioritizing code quality tasks alongside feature work
+
+## Step-by-Step Process
+
+### Step 1: Identify and Categorize
+- **Code debt**: Duplicated logic, poor abstractions, magic numbers, lack of type safety
+- **Architecture debt**: Tight coupling, monolith splitting needs, wrong database choices
+- **Test debt**: Low coverage, flaky tests, missing integration/E2E test pipelines
+- **Dependency debt**: Outdated libraries, unmaintained packages, security vulnerabilities
+- **Documentation debt**: Outdated READMEs, missing runbooks, undocumented APIs
+
+### Step 2: Evaluate and Score
+Score each item on a 1-5 scale:
+- **Impact**: How much does it slow the development team down? (1-5)
+- **Risk**: What is the likelihood and impact of failure if left unresolved? (1-5)
+- **Effort**: How difficult/expensive is it to fix? (1-5)
+
+### Step 3: Prioritize
+Calculate the priority score using the formula:
+`Priority = (Impact + Risk) x (6 - Effort)`
+*(Note: A lower effort value increases the priority score).*
+
+### Step 4: Plan Remediation
+- Organize prioritized items into a phased remediation backlog
+- Propose refactoring phases that can run incrementally alongside regular feature implementation
+
+## Required Input
+
+- Codebase access or architectural description
+- History of recent outages, deployment issues, or developer complaints
+
+## Expected Output
+
+- Prioritized technical debt registry including:
+  - Technical debt category and description
+  - Impact, Risk, Effort scores, and Priority calculation
+  - Business justification for refactoring
+  - Phased remediation plan
+
+## Tone & Rules
+
+- Avoid subjective complaints. Focus on quantifiable metrics (developer velocity, test failures).
+- Frame refactoring in terms of business value (reduced latency, faster onboarding, lower crash rate).
+
+## Available Templates
+
+- None
+
+## Available Scripts
+
+- None
+
+## Examples
+
+See `examples/` directory.
+
+## Links to Other Skills
+
+- **suggestion**: Use to turn tech debt findings into actionable feature suggestions.
+- **sourcecode-analyzer**: Use to automate finding duplicated code and quality violations.

package/dist/core/templates/skills/tech-debt/skill.vi.md

@@ -0,0 +1,70 @@
+# Kỹ năng: Quản lý Nợ Kỹ thuật (Technical Debt Management) (Cross-Cutting)
+
+## Mục đích
+
+Nhận diện, phân loại và ưu tiên hóa nợ kỹ thuật (technical debt) một cách hệ thống để quản lý việc bảo trì và tái cấu trúc (refactoring) mã nguồn.
+
+## Khi nào sử dụng
+
+- Khi thực hiện kiểm toán sức khỏe/chất lượng mã nguồn (code health audits)
+- Khi chuẩn bị các đề xuất tái cấu trúc code (refactoring proposals)
+- Khi quản lý danh sách bảo trì hoặc ưu tiên các nhiệm vụ chất lượng code song song với phát triển tính năng mới
+
+## Quy trình từng bước
+
+### Bước 1: Nhận diện và Phân loại
+- **Code debt**: Trùng lặp logic, trừu tượng hóa kém, magic numbers, thiếu an toàn kiểu dữ liệu (type safety)
+- **Architecture debt**: Các thành phần bị phụ thuộc chặt chẽ (tight coupling), cần chia nhỏ monolith, lựa chọn sai database
+- **Test debt**: Độ bao phủ test thấp, test không ổn định (flaky tests), thiếu luồng test tích hợp/E2E
+- **Dependency debt**: Các thư viện bị lỗi thời, gói package không được duy trì, lỗ hổng bảo mật
+- **Documentation debt**: Tài liệu README cũ, thiếu hướng dẫn vận hành (runbooks), API không được viết tài liệu
+
+### Bước 2: Đánh giá và Chấm điểm
+Chấm điểm cho từng mục nợ kỹ thuật theo thang điểm từ 1-5:
+- **Ảnh hưởng (Impact)**: Nó làm chậm tốc độ phát triển của team đi bao nhiêu? (1-5)
+- **Rủi ro (Risk)**: Khả năng xảy ra và tác động của sự cố nếu không xử lý là gì? (1-5)
+- **Công sức (Effort)**: Độ khó/chi phí để sửa lỗi là bao nhiêu? (1-5)
+
+### Bước 3: Ưu tiên hóa
+Tính điểm ưu tiên (Priority Score) theo công thức:
+`Priority = (Impact + Risk) x (6 - Effort)`
+*(Lưu ý: Công sức càng nhỏ sẽ giúp tăng điểm ưu tiên).*
+
+### Bước 4: Lập Kế hoạch Khắc phục
+- Sắp xếp các mục nợ kỹ thuật đã được ưu tiên vào danh sách xử lý (remediation backlog) theo từng giai đoạn
+- Đề xuất các giai đoạn refactor tăng dần, có thể triển khai xen kẽ với các tác vụ phát triển tính năng thông thường
+
+## Input yêu cầu
+
+- Quyền truy cập mã nguồn hoặc tài liệu mô tả kiến trúc
+- Lịch sử các đợt sập hệ thống gần đây, lỗi deploy hoặc khó khăn từ đội ngũ lập trình viên
+
+## Output mong đợi
+
+- Báo cáo phân loại nợ kỹ thuật bao gồm:
+  - Phân loại và mô tả chi tiết nợ kỹ thuật
+  - Điểm số Ảnh hưởng, Rủi ro, Công sức và điểm Ưu tiên tương ứng
+  - Lý do thuyết phục về mặt nghiệp vụ/kinh doanh (business justification) để refactor
+  - Kế hoạch khắc phục theo từng giai đoạn
+
+## Giọng điệu & Quy tắc
+
+- Tránh các lời phàn nàn chủ quan. Tập trung vào các chỉ số định lượng được (tốc độ code của lập trình viên, tỷ lệ test lỗi).
+- Định hình hoạt động refactoring dựa trên giá trị nghiệp vụ mang lại (giảm độ trễ, onboarding lập trình viên mới nhanh hơn, giảm tỷ lệ crash ứng dụng).
+
+## Templates có sẵn
+
+- Không có
+
+## Scripts có sẵn
+
+- Không có
+
+## Ví dụ
+
+Xem thư mục `examples/`.
+
+## Liên kết với các kỹ năng khác
+
+- **suggestion**: Dùng để chuyển đổi phát hiện nợ kỹ thuật thành các đề xuất tính năng thực thi được.
+- **sourcecode-analyzer**: Dùng để tự động tìm kiếm code trùng lặp và các vi phạm chất lượng code.

package/dist/core/templates/skills/tech-debt-skill.md

@@ -0,0 +1,70 @@
+# Skill: Technical Debt Management (Cross-Cutting)
+
+## Purpose
+
+Systematically identify, categorize, and prioritize technical debt to manage codebase maintenance and refactoring.
+
+## When to Use
+
+- When conducting code health/quality audits
+- When preparing refactoring proposals
+- When managing maintenance backlogs or prioritizing code quality tasks alongside feature work
+
+## Step-by-Step Process
+
+### Step 1: Identify and Categorize
+- **Code debt**: Duplicated logic, poor abstractions, magic numbers, lack of type safety
+- **Architecture debt**: Tight coupling, monolith splitting needs, wrong database choices
+- **Test debt**: Low coverage, flaky tests, missing integration/E2E test pipelines
+- **Dependency debt**: Outdated libraries, unmaintained packages, security vulnerabilities
+- **Documentation debt**: Outdated READMEs, missing runbooks, undocumented APIs
+
+### Step 2: Evaluate and Score
+Score each item on a 1-5 scale:
+- **Impact**: How much does it slow the development team down? (1-5)
+- **Risk**: What is the likelihood and impact of failure if left unresolved? (1-5)
+- **Effort**: How difficult/expensive is it to fix? (1-5)
+
+### Step 3: Prioritize
+Calculate the priority score using the formula:
+`Priority = (Impact + Risk) x (6 - Effort)`
+*(Note: A lower effort value increases the priority score).*
+
+### Step 4: Plan Remediation
+- Organize prioritized items into a phased remediation backlog
+- Propose refactoring phases that can run incrementally alongside regular feature implementation
+
+## Required Input
+
+- Codebase access or architectural description
+- History of recent outages, deployment issues, or developer complaints
+
+## Expected Output
+
+- Prioritized technical debt registry including:
+  - Technical debt category and description
+  - Impact, Risk, Effort scores, and Priority calculation
+  - Business justification for refactoring
+  - Phased remediation plan
+
+## Tone & Rules
+
+- Avoid subjective complaints. Focus on quantifiable metrics (developer velocity, test failures).
+- Frame refactoring in terms of business value (reduced latency, faster onboarding, lower crash rate).
+
+## Available Templates
+
+- None
+
+## Available Scripts
+
+- None
+
+## Examples
+
+See `examples/` directory.
+
+## Links to Other Skills
+
+- **suggestion**: Use to turn tech debt findings into actionable feature suggestions.
+- **sourcecode-analyzer**: Use to automate finding duplicated code and quality violations.

package/dist/core/templates/skills/tech-debt-skill.vi.md

@@ -0,0 +1,70 @@
+# Kỹ năng: Quản lý Nợ Kỹ thuật (Technical Debt Management) (Cross-Cutting)
+
+## Mục đích
+
+Nhận diện, phân loại và ưu tiên hóa nợ kỹ thuật (technical debt) một cách hệ thống để quản lý việc bảo trì và tái cấu trúc (refactoring) mã nguồn.
+
+## Khi nào sử dụng
+
+- Khi thực hiện kiểm toán sức khỏe/chất lượng mã nguồn (code health audits)
+- Khi chuẩn bị các đề xuất tái cấu trúc code (refactoring proposals)
+- Khi quản lý danh sách bảo trì hoặc ưu tiên các nhiệm vụ chất lượng code song song với phát triển tính năng mới
+
+## Quy trình từng bước
+
+### Bước 1: Nhận diện và Phân loại
+- **Code debt**: Trùng lặp logic, trừu tượng hóa kém, magic numbers, thiếu an toàn kiểu dữ liệu (type safety)
+- **Architecture debt**: Các thành phần bị phụ thuộc chặt chẽ (tight coupling), cần chia nhỏ monolith, lựa chọn sai database
+- **Test debt**: Độ bao phủ test thấp, test không ổn định (flaky tests), thiếu luồng test tích hợp/E2E
+- **Dependency debt**: Các thư viện bị lỗi thời, gói package không được duy trì, lỗ hổng bảo mật
+- **Documentation debt**: Tài liệu README cũ, thiếu hướng dẫn vận hành (runbooks), API không được viết tài liệu
+
+### Bước 2: Đánh giá và Chấm điểm
+Chấm điểm cho từng mục nợ kỹ thuật theo thang điểm từ 1-5:
+- **Ảnh hưởng (Impact)**: Nó làm chậm tốc độ phát triển của team đi bao nhiêu? (1-5)
+- **Rủi ro (Risk)**: Khả năng xảy ra và tác động của sự cố nếu không xử lý là gì? (1-5)
+- **Công sức (Effort)**: Độ khó/chi phí để sửa lỗi là bao nhiêu? (1-5)
+
+### Bước 3: Ưu tiên hóa
+Tính điểm ưu tiên (Priority Score) theo công thức:
+`Priority = (Impact + Risk) x (6 - Effort)`
+*(Lưu ý: Công sức càng nhỏ sẽ giúp tăng điểm ưu tiên).*
+
+### Bước 4: Lập Kế hoạch Khắc phục
+- Sắp xếp các mục nợ kỹ thuật đã được ưu tiên vào danh sách xử lý (remediation backlog) theo từng giai đoạn
+- Đề xuất các giai đoạn refactor tăng dần, có thể triển khai xen kẽ với các tác vụ phát triển tính năng thông thường
+
+## Input yêu cầu
+
+- Quyền truy cập mã nguồn hoặc tài liệu mô tả kiến trúc
+- Lịch sử các đợt sập hệ thống gần đây, lỗi deploy hoặc khó khăn từ đội ngũ lập trình viên
+
+## Output mong đợi
+
+- Báo cáo phân loại nợ kỹ thuật bao gồm:
+  - Phân loại và mô tả chi tiết nợ kỹ thuật
+  - Điểm số Ảnh hưởng, Rủi ro, Công sức và điểm Ưu tiên tương ứng
+  - Lý do thuyết phục về mặt nghiệp vụ/kinh doanh (business justification) để refactor
+  - Kế hoạch khắc phục theo từng giai đoạn
+
+## Giọng điệu & Quy tắc
+
+- Tránh các lời phàn nàn chủ quan. Tập trung vào các chỉ số định lượng được (tốc độ code của lập trình viên, tỷ lệ test lỗi).
+- Định hình hoạt động refactoring dựa trên giá trị nghiệp vụ mang lại (giảm độ trễ, onboarding lập trình viên mới nhanh hơn, giảm tỷ lệ crash ứng dụng).
+
+## Templates có sẵn
+
+- Không có
+
+## Scripts có sẵn
+
+- Không có
+
+## Ví dụ
+
+Xem thư mục `examples/`.
+
+## Liên kết với các kỹ năng khác
+
+- **suggestion**: Dùng để chuyển đổi phát hiện nợ kỹ thuật thành các đề xuất tính năng thực thi được.
+- **sourcecode-analyzer**: Dùng để tự động tìm kiếm code trùng lặp và các vi phạm chất lượng code.

package/dist/core/templates/skills/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, SciChart",Real-time + Pause
+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/dist/core/templates/skills/ui-ux/data/colors.csv

@@ -0,0 +1,97 @@
+No,Product Type,Keywords,Primary (Hex),Secondary (Hex),CTA (Hex),Background (Hex),Text (Hex),Border (Hex),Notes
+1,SaaS (General),"saas, general",#2563EB,#3B82F6,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust blue + accent contrast
+2,Micro SaaS,"micro, saas",#2563EB,#3B82F6,#F97316,#F8FAFC,#1E293B,#E2E8F0,Vibrant primary + white space
+3,E-commerce,commerce,#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand primary + success green
+4,E-commerce Luxury,"commerce, luxury",#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Premium colors + minimal accent
+5,Service Landing Page,"service, landing, page",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand primary + trust colors
+6,B2B Service,"b2b, service",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional blue + neutral grey
+7,Financial Dashboard,"financial, dashboard",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark bg + red/green alerts + trust blue
+8,Analytics Dashboard,"analytics, dashboard",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Cool→Hot gradients + neutral grey
+9,Healthcare App,"healthcare, app",#0891B2,#22D3EE,#059669,#ECFEFF,#164E63,#A5F3FC,Calm blue + health green + trust
+10,Educational App,"educational, app",#4F46E5,#818CF8,#F97316,#EEF2FF,#1E1B4B,#C7D2FE,Playful colors + clear hierarchy
+11,Creative Agency,"creative, agency",#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold primaries + artistic freedom
+12,Portfolio/Personal,"portfolio, personal",#18181B,#3F3F46,#2563EB,#FAFAFA,#09090B,#E4E4E7,Brand primary + artistic interpretation
+13,Gaming,gaming,#7C3AED,#A78BFA,#F43F5E,#0F0F23,#E2E8F0,#4C1D95,Vibrant + neon + immersive colors
+14,Government/Public Service,"government, public, service",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional blue + high contrast
+15,Fintech/Crypto,"fintech, crypto",#F59E0B,#FBBF24,#8B5CF6,#0F172A,#F8FAFC,#334155,Dark tech colors + trust + vibrant accents
+16,Social Media App,"social, media, app",#2563EB,#60A5FA,#F43F5E,#F8FAFC,#1E293B,#DBEAFE,Vibrant + engagement colors
+17,Productivity Tool,"productivity, tool",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Clear hierarchy + functional colors
+18,Design System/Component Library,"design, system, component, library",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Clear hierarchy + code-like structure
+19,AI/Chatbot Platform,"chatbot, platform",#7C3AED,#A78BFA,#06B6D4,#FAF5FF,#1E1B4B,#DDD6FE,Neutral + AI Purple (#6366F1)
+20,NFT/Web3 Platform,"nft, web3, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark + Neon + Gold (#FFD700)
+21,Creator Economy Platform,"creator, economy, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Vibrant + Brand colors
+22,Sustainability/ESG Platform,"sustainability, esg, platform",#7C3AED,#A78BFA,#06B6D4,#FAF5FF,#1E1B4B,#DDD6FE,Green (#228B22) + Earth tones
+23,Remote Work/Collaboration Tool,"remote, work, collaboration, tool",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Calm Blue + Neutral grey
+24,Mental Health App,"mental, health, app",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Calm Pastels + Trust colors
+25,Pet Tech App,"pet, tech, app",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Playful + Warm colors
+26,Smart Home/IoT Dashboard,"smart, home, iot, dashboard",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark + Status indicator colors
+27,EV/Charging Ecosystem,"charging, ecosystem",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Electric Blue (#009CD1) + Green
+28,Subscription Box Service,"subscription, box, service",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand + Excitement colors
+29,Podcast Platform,"podcast, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark + Audio waveform accents
+30,Dating App,"dating, app",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Warm + Romantic (Pink/Red gradients)
+31,Micro-Credentials/Badges Platform,"micro, credentials, badges, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust Blue + Gold (#FFD700)
+32,Knowledge Base/Documentation,"knowledge, base, documentation",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Clean hierarchy + minimal color
+33,Hyperlocal Services,"hyperlocal, services",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Location markers + Trust colors
+34,Beauty/Spa/Wellness Service,"beauty, spa, wellness, service",#10B981,#34D399,#8B5CF6,#ECFDF5,#064E3B,#A7F3D0,Soft pastels (Pink #FFB6C1 Sage #90EE90) + Cream + Gold accents
+35,Luxury/Premium Brand,"luxury, premium, brand",#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Black + Gold (#FFD700) + White + Minimal accent
+36,Restaurant/Food Service,"restaurant, food, service",#DC2626,#F87171,#CA8A04,#FEF2F2,#450A0A,#FECACA,Warm colors (Orange Red Brown) + appetizing imagery
+37,Fitness/Gym App,"fitness, gym, app",#DC2626,#F87171,#16A34A,#FEF2F2,#1F2937,#FECACA,Energetic (Orange #FF6B35 Electric Blue) + Dark bg
+38,Real Estate/Property,"real, estate, property",#0F766E,#14B8A6,#0369A1,#F0FDFA,#134E4A,#99F6E4,Trust Blue (#0077B6) + Gold accents + White
+39,Travel/Tourism Agency,"travel, tourism, agency",#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Vibrant destination colors + Sky Blue + Warm accents
+40,Hotel/Hospitality,"hotel, hospitality",#1E3A8A,#3B82F6,#CA8A04,#F8FAFC,#1E40AF,#BFDBFE,Warm neutrals + Gold (#D4AF37) + Brand accent
+41,Wedding/Event Planning,"wedding, event, planning",#7C3AED,#A78BFA,#F97316,#FAF5FF,#4C1D95,#DDD6FE,Soft Pink (#FFD6E0) + Gold + Cream + Sage
+42,Legal Services,"legal, services",#1E3A8A,#1E40AF,#B45309,#F8FAFC,#0F172A,#CBD5E1,Navy Blue (#1E3A5F) + Gold + White
+43,Insurance Platform,"insurance, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust Blue (#0066CC) + Green (security) + Neutral
+44,Banking/Traditional Finance,"banking, traditional, finance",#0F766E,#14B8A6,#0369A1,#F0FDFA,#134E4A,#99F6E4,Navy (#0A1628) + Trust Blue + Gold accents
+45,Online Course/E-learning,"online, course, learning",#0D9488,#2DD4BF,#EA580C,#F0FDFA,#134E4A,#5EEAD4,Vibrant learning colors + Progress green
+46,Non-profit/Charity,"non, profit, charity",#0891B2,#22D3EE,#F97316,#ECFEFF,#164E63,#A5F3FC,Cause-related colors + Trust + Warm
+47,Music Streaming,"music, streaming",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark (#121212) + Vibrant accents + Album art colors
+48,Video Streaming/OTT,"video, streaming, ott",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark bg + Content poster colors + Brand accent
+49,Job Board/Recruitment,"job, board, recruitment",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional Blue + Success Green + Neutral
+50,Marketplace (P2P),"marketplace, p2p",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust colors + Category colors + Success green
+51,Logistics/Delivery,"logistics, delivery",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Blue (#2563EB) + Orange (tracking) + Green (delivered)
+52,Agriculture/Farm Tech,"agriculture, farm, tech",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Earth Green (#4A7C23) + Brown + Sky Blue
+53,Construction/Architecture,"construction, architecture",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Grey (#4A4A4A) + Orange (safety) + Blueprint Blue
+54,Automotive/Car Dealership,"automotive, car, dealership",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand colors + Metallic accents + Dark/Light
+55,Photography Studio,"photography, studio",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Black + White + Minimal accent
+56,Coworking Space,"coworking, space",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Energetic colors + Wood tones + Brand accent
+57,Cleaning Service,"cleaning, service",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Fresh Blue (#00B4D8) + Clean White + Green
+58,Home Services (Plumber/Electrician),"home, services, plumber, electrician",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Trust Blue + Safety Orange + Professional grey
+59,Childcare/Daycare,"childcare, daycare",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Playful pastels + Safe colors + Warm accents
+60,Senior Care/Elderly,"senior, care, elderly",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Calm Blue + Warm neutrals + Large text
+61,Medical Clinic,"medical, clinic",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Medical Blue (#0077B6) + Trust White + Calm Green
+62,Pharmacy/Drug Store,"pharmacy, drug, store",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Pharmacy Green + Trust Blue + Clean White
+63,Dental Practice,"dental, practice",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Fresh Blue + White + Smile Yellow accent
+64,Veterinary Clinic,"veterinary, clinic",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Caring Blue + Pet-friendly colors + Warm accents
+65,Florist/Plant Shop,"florist, plant, shop",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Natural Green + Floral pinks/purples + Earth tones
+66,Bakery/Cafe,"bakery, cafe",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Warm Brown + Cream + Appetizing accents
+67,Coffee Shop,"coffee, shop",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Coffee Brown (#6F4E37) + Cream + Warm accents
+68,Brewery/Winery,"brewery, winery",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Deep amber/burgundy + Gold + Craft aesthetic
+69,Airline,airline,#7C3AED,#A78BFA,#06B6D4,#FAF5FF,#1E1B4B,#DDD6FE,Sky Blue + Brand colors + Trust accents
+70,News/Media Platform,"news, media, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand colors + High contrast + Category colors
+71,Magazine/Blog,"magazine, blog",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Editorial colors + Brand primary + Clean white
+72,Freelancer Platform,"freelancer, platform",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional Blue + Success Green + Neutral
+73,Consulting Firm,"consulting, firm",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Navy + Gold + Professional grey
+74,Marketing Agency,"marketing, agency",#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold brand colors + Creative freedom
+75,Event Management,"event, management",#7C3AED,#A78BFA,#F97316,#FAF5FF,#4C1D95,#DDD6FE,Event theme colors + Excitement accents
+76,Conference/Webinar Platform,"conference, webinar, platform",#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional Blue + Video accent + Brand
+77,Membership/Community,"membership, community",#7C3AED,#A78BFA,#F97316,#FAF5FF,#4C1D95,#DDD6FE,Community brand colors + Engagement accents
+78,Newsletter Platform,"newsletter, platform",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Brand primary + Clean white + CTA accent
+79,Digital Products/Downloads,"digital, products, downloads",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Product category colors + Brand + Success green
+80,Church/Religious Organization,"church, religious, organization",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Warm Gold + Deep Purple/Blue + White
+81,Sports Team/Club,"sports, team, club",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Team colors + Energetic accents
+82,Museum/Gallery,"museum, gallery",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Art-appropriate neutrals + Exhibition accents
+83,Theater/Cinema,"theater, cinema",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Dark + Spotlight accents + Gold
+84,Language Learning App,"language, learning, app",#0D9488,#2DD4BF,#EA580C,#F0FDFA,#134E4A,#5EEAD4,Playful colors + Progress indicators + Country flags
+85,Coding Bootcamp,"coding, bootcamp",#3B82F6,#60A5FA,#F97316,#F8FAFC,#1E293B,#E2E8F0,Code editor colors + Brand + Success green
+86,Cybersecurity Platform,"cybersecurity, security, cyber, hacker",#00FF41,#0D0D0D,#00FF41,#000000,#E0E0E0,#1F1F1F,Matrix Green + Deep Black + Terminal feel
+87,Developer Tool / IDE,"developer, tool, ide, code, dev",#3B82F6,#1E293B,#2563EB,#0F172A,#F1F5F9,#334155,Dark syntax theme colors + Blue focus
+88,Biotech / Life Sciences,"biotech, science, biology, medical",#0EA5E9,#0284C7,#10B981,#F8FAFC,#0F172A,#E2E8F0,Sterile White + DNA Blue + Life Green
+89,Space Tech / Aerospace,"space, aerospace, tech, futuristic",#FFFFFF,#94A3B8,#3B82F6,#0B0B10,#F8FAFC,#1E293B,Deep Space Black + Star White + Metallic
+90,Architecture / Interior,"architecture, interior, design, luxury",#171717,#404040,#D4AF37,#FFFFFF,#171717,#E5E5E5,Monochrome + Gold Accent + High Imagery
+91,Quantum Computing,"quantum, qubit, tech",#00FFFF,#7B61FF,#FF00FF,#050510,#E0E0FF,#333344,Interference patterns + Neon + Deep Dark
+92,Biohacking / Longevity,"bio, health, science",#FF4D4D,#4D94FF,#00E676,#F5F5F7,#1C1C1E,#E5E5EA,Biological red/blue + Clinical white
+93,Autonomous Systems,"drone, robot, fleet",#00FF41,#008F11,#FF3333,#0D1117,#E6EDF3,#30363D,Terminal Green + Tactical Dark
+94,Generative AI Art,"art, gen-ai, creative",#111111,#333333,#FFFFFF,#FAFAFA,#000000,#E5E5E5,Canvas Neutral + High Contrast
+95,Spatial / Vision OS,"spatial, glass, vision",#FFFFFF,#E5E5E5,#007AFF,#888888,#000000,#FFFFFF,Glass opacity 20% + System Blue
+96,Climate Tech,"climate, green, energy",#2E8B57,#87CEEB,#FFD700,#F0FFF4,#1A3320,#C6E6C6,Nature Green + Solar Yellow + Air Blue

package/dist/core/templates/skills/ui-ux/data/design-systems.csv

@@ -0,0 +1,54 @@
+STT,Brand,Folder,Category,Keywords,Theme,Primary_Color,Accent_Color,Background,Text_Color,Heading_Font,Body_Font,Mono_Font,Border_Radius,Shadow_Style,Design_Philosophy,Best_For,Agent_Quick_Prompt
+1,Stripe,stripe,infrastructure-cloud,"fintech, payment, api, purple, elegant, premium, light, weight-300, blue-tinted-shadows, negative-tracking",light,#533AFD,#EA2261,#FFFFFF,#061B31,sohne-var (weight 300),sohne-var (weight 300),SourceCodePro,"4-8px conservative","Blue-tinted multi-layer: rgba(50,50,93,0.25)","Light weight 300 as luxury. Blue-tinted shadows. Deep navy headings not black. Conservative radius.","Fintech, payment platforms, API docs, premium SaaS","Use sohne-var weight 300, #533afd purple CTA, deep navy #061b31 headings, blue-tinted shadows rgba(50,50,93,0.25), 4px radius buttons"
+2,Vercel,vercel,developer-tools,"deployment, frontend, black-white, minimal, geist, shadow-as-border, compressed-type, monochrome",light,#171717,#0072F5,#FFFFFF,#171717,Geist (weight 600),Geist (weight 400),Geist Mono,"6-8px standard, 9999px pills","Shadow-as-border: 0px 0px 0px 1px rgba(0,0,0,0.08)","Compression as identity. Shadow-as-border technique. Near-pure monochrome. Gallery emptiness.","Frontend deployment, developer platforms, documentation","Use Geist font, letter-spacing -2.4px at 48px, shadow-as-border rgba(0,0,0,0.08) 0px 0px 0px 1px, #171717 text, 6px radius"
+3,Linear,linear.app,developer-tools,"project-management, dark-mode, indigo, inter-variable, precision, cv01-ss03, weight-510, luminance-stacking",dark,#5E6AD2,#7170FF,#08090A,#F7F8F8,Inter Variable (weight 510),Inter Variable (weight 400),Berkeley Mono,"6-8px standard, 9999px pills","Multi-layer dark: rgba(0,0,0,0.2) 0px 0px 0px 1px","Dark-mode-native. Semi-transparent white borders. Weight 510 signature. Luminance stacking for depth.","Issue trackers, project management, developer tools, dark-mode products","Use Inter Variable with cv01 ss03, weight 510, #08090a bg, #5e6ad2 brand, rgba(255,255,255,0.08) borders, 6px radius"
+4,Supabase,supabase,developer-tools,"database, firebase, dark-mode, emerald-green, postgresql, pill-buttons, HSL-tokens, terminal",dark,#3ECF8E,#00C573,#171717,#FAFAFA,Circular (weight 400),Circular (weight 400),Source Code Pro,"6px secondary, 9999px primary","Almost no shadows — depth through border contrast","Dark-mode-native. Emerald green sparingly. Zero-leading hero type. Depth via border hierarchy.","Database platforms, open-source tools, developer-centric dark UIs","Use Circular font, #171717 bg, #3ecf8e green accent sparingly, pill buttons 9999px, borders #2e2e2e, no shadows"
+5,Notion,notion,design-productivity,"workspace, warm-minimalism, serif-headings, soft-surfaces, friendly, content-first, block-editor",light,#2383E2,#2383E2,#FFFFFF,#37352F,Lyon Display (serif),Inter (weight 400),SFMono-Regular,"3-6px subtle","Subtle: rgba(15,15,15,0.1) 0px 0px 0px 1px","Warm minimalism. Serif headings for personality. Content-first. Tools should be invisible.","Productivity tools, content platforms, documentation, knowledge bases","Use Lyon Display serif for headings, Inter for body, #37352f text (not black), warm white bg, subtle borders, 3px radius"
+6,Claude,claude,ai-ml,"anthropic, ai-assistant, terracotta, editorial, warm, weight-480, clean, light-tan-bg",light,#DA7756,#DA7756,#F8F4EF,#1A1815,Styrene A (weight 480),Relative (weight 400),Relative Mono,"8-12px comfortable","Subtle warm: 0px 1px 3px rgba(0,0,0,0.1)","Warm terracotta editorial. Anti-tech-cold. Typographic warmth over decoration.","AI products, conversational UIs, editorial platforms, warm-toned apps","Use Styrene A weight 480 headings, Relative body, terracotta #DA7756 accent, warm bg #F8F4EF, 8px radius"
+7,Cursor,cursor,developer-tools,"code-editor, dark, gradient, purple-blue, sleek, ide-like, developer",dark,#7C5CFC,#00E5FF,#0A0A0A,#EDEDED,Inter (weight 600),Inter (weight 400),Berkeley Mono,"8-12px comfortable","Multi-layer dark with gradient accents","Sleek dark IDE aesthetic. Gradient purple-blue accents. Code-first atmosphere.","Code editors, developer tools, IDE-like interfaces, dark developer platforms","Use Inter font, #0a0a0a bg, purple-blue gradient accents #7C5CFC to #00E5FF, 8px radius"
+8,Figma,figma,design-productivity,"design-tool, multi-color, vibrant, playful, professional, collaborative, colorful",light,#0D99FF,#A259FF,#FFFFFF,#333333,"Figma custom Sans (weight 700)",Inter (weight 400),—,"8px standard","Standard: 0px 2px 4px rgba(0,0,0,0.1)","Multi-color vibrant but professional. Playful yet precise. Collaborative energy.","Design tools, creative platforms, collaborative software","Use vibrant multi-color palette, #0D99FF blue primary, #A259FF purple, 8px radius, white bg"
+9,Apple,apple,enterprise-consumer,"consumer, premium, white-space, cinematic, sf-pro, editorial, imagery-driven, elegant",light,#0071E3,#0071E3,#FFFFFF,#1D1D1F,SF Pro Display (weight 600),SF Pro Text (weight 400),SF Mono,"12-18px generous","Subtle: 0px 4px 16px rgba(0,0,0,0.12)","Premium white space. Cinematic imagery. Products as heroes. Typography-as-hero.","Consumer electronics, luxury products, premium brand sites, marketing pages","Use SF Pro Display, massive white space, #0071E3 blue links, 12px radius, cinematic imagery focus"
+10,Airbnb,airbnb,enterprise-consumer,"travel, marketplace, coral, photography, rounded-ui, warm, friendly, cereal-font",light,#FF5A5F,#008489,#FFFFFF,#222222,Cereal (weight 800),Cereal (weight 400),—,"12-16px rounded","Standard: 0px 2px 8px rgba(0,0,0,0.12)","Warm coral accent. Photography-driven. Rounded everything. Hospitality warmth.","Travel, marketplace, hospitality, photography-driven platforms","Use Cereal font, #FF5A5F coral accent, rounded 12px radius, photography-driven, warm white bg"
+11,Spotify,spotify,enterprise-consumer,"music, streaming, green, dark, bold-type, album-art, circular-font, vibrant",dark,#1DB954,#1DB954,#121212,#FFFFFF,Circular (weight 700-900),Circular (weight 400),—,"4-8px standard","Minimal shadows — color contrast dominates","Vibrant green on dark. Bold oversized type. Album art as primary visual.","Music, streaming, entertainment, media-rich dark interfaces","Use Circular font, #121212 dark bg, #1DB954 green accent, bold type weight 700+, 4px radius"
+12,BMW,bmw,enterprise-consumer,"luxury, automotive, dark-premium, german-engineering, precise, cinematic",dark,#1C69D4,#1C69D4,#1A1A1A,#FFFFFF,BMW Type (weight 700),BMW Type (weight 400),—,"4-8px conservative","Deep premiums: 0px 8px 24px rgba(0,0,0,0.3)","Dark premium surfaces. German engineering precision. Automotive luxury.","Automotive, luxury brands, premium dark interfaces","Use dark premium bg #1A1A1A, #1C69D4 blue accent, conservative radius, deep shadows"
+13,SpaceX,spacex,enterprise-consumer,"space, futuristic, black-white, full-bleed-imagery, stark, minimal, d-din-font",dark,#FFFFFF,#FFFFFF,#000000,#FFFFFF,D-DIN (weight 700),D-DIN (weight 400),—,"0px sharp","No shadows — full-bleed imagery with contrast","Stark black and white. Full-bleed imagery. Futuristic minimalism. Text over image.","Space tech, futuristic brands, full-bleed imagery sites","Use black #000000 bg, white text, D-DIN font, 0px radius (sharp), full-bleed images"
+14,Uber,uber,enterprise-consumer,"mobility, bold, black-white, tight-type, urban, uber-move-font, systematic",both,#000000,#276EF1,#FFFFFF,#000000,Uber Move (weight 700),Uber Move (weight 400),Uber Move Mono,"8px standard","Standard: 0px 2px 8px rgba(0,0,0,0.08)","Bold black and white. Tight typography. Urban energy. Systematic.","Mobility platforms, urban services, bold B&W interfaces","Use Uber Move font, #000000 primary, tight letter-spacing, 8px radius, bold systematic layout"
+15,IBM,ibm,enterprise-consumer,"enterprise, carbon-design, structured-blue, technical, grid-based, plex-font",both,#0F62FE,#0F62FE,#FFFFFF,#161616,IBM Plex Sans (weight 600),IBM Plex Sans (weight 400),IBM Plex Mono,"4-8px structured","Standard elevation tokens from Carbon DS","Carbon design system. Structured blue palette. Grid-based. Enterprise-clean.","Enterprise software, government, technical platforms","Use IBM Plex Sans, #0F62FE blue, Carbon Design tokens, 4px radius, structured grid layout"
+16,NVIDIA,nvidia,enterprise-consumer,"gpu, computing, green-black, technical, power, dark-theme, energy",dark,#76B900,#76B900,#1A1A1A,#EEEEEE,NVIDIA Sans (weight 700),NVIDIA Sans (weight 400),—,"4-8px standard","Subtle on dark: rgba(0,0,0,0.2)","Green-black energy. Technical power aesthetic. GPU computing vibes.","GPU computing, tech hardware, high-performance products","Use #76B900 green on dark #1A1A1A bg, technical aesthetic, NVIDIA Sans font"
+17,Coinbase,coinbase,enterprise-consumer,"crypto, exchange, blue, trust, institutional, clean, professional",light,#0052FF,#0052FF,#FFFFFF,#0A0B0D,Coinbase Sans (weight 500),Coinbase Text (weight 400),Coinbase Mono,"8px standard","Standard: 0px 2px 4px rgba(0,0,0,0.08)","Clean blue identity. Trust-focused. Institutional feel. Crypto-professional.","Crypto exchanges, financial platforms, trust-focused products","Use Coinbase Sans, #0052FF blue, clean white bg, trust-focused layout, 8px radius"
+18,Revolut,revolut,fintech-crypto,"banking, dark, gradient, fintech, precision, sleek, cards",dark,#0075EB,#0075EB,#171717,#FFFFFF,Basier Circle (weight 600),Basier Circle (weight 400),—,"12-16px rounded","Dark elevated: 0px 8px 24px rgba(0,0,0,0.25)","Sleek dark interface. Gradient cards. Fintech precision.","Digital banking, fintech, dark premium financial apps","Use dark bg #171717, #0075EB blue accent, gradient card effects, rounded 12px radius"
+19,Wise,wise,fintech-crypto,"money-transfer, green, friendly, clear, accessible, bright, lime",light,#9FE870,#163300,#F2F5F0,#163300,Mulish (weight 700),Mulish (weight 400),—,"8-16px comfortable","Light: 0px 1px 3px rgba(0,0,0,0.08)","Bright green accent. Friendly and clear. Accessible design. No financial jargon.","Money transfer, accessible fintech, friendly financial apps","Use Mulish font, bright green #9FE870 accent, light bg #F2F5F0, friendly tone, 8px radius"
+20,Kraken,kraken,fintech-crypto,"crypto, trading, purple, dark, data-dense, dashboards, professional",dark,#7B61FF,#7B61FF,#0B0E11,#FFFFFF,Inter (weight 600),Inter (weight 400),Roboto Mono,"4-8px standard","Dark: rgba(0,0,0,0.3)","Purple-accented dark UI. Data-dense dashboards. Professional trading.","Crypto trading, data-dense dashboards, dark financial platforms","Use Inter font, dark bg #0B0E11, #7B61FF purple accent, data-dense layout, 4px radius"
+21,Raycast,raycast,developer-tools,"productivity, launcher, dark-chrome, vibrant-gradients, sleek, macos, command-palette",dark,#FF6363,#FF6363,#1A1A1A,#FFFFFF,Inter (weight 600),Inter (weight 400),SF Mono,"8-12px comfortable","Multi-layer elevated dark shadows","Sleek dark chrome. Vibrant gradient accents. Command-palette aesthetic.","Productivity launchers, macOS-style apps, command palette UIs","Use Inter font, dark bg #1A1A1A, vibrant gradient accents, 8px radius, command-palette style"
+22,Warp,warp,developer-tools,"terminal, modern, dark, block-ui, ide-like, developer, command",dark,#01A4FF,#01A4FF,#0D1117,#E6EDF3,Inter (weight 600),Inter (weight 400),JetBrains Mono,"8px standard","Dark ambient: rgba(0,0,0,0.2)","Dark IDE-like interface. Block-based command UI. Modern terminal.","Modern terminals, CLI tools, block-based command interfaces","Use Inter + JetBrains Mono, dark bg #0D1117, #01A4FF blue accent, block-based layout"
+23,Resend,resend,developer-tools,"email-api, dark, minimal, monospace, developer-centric, clean, black",dark,#FFFFFF,#FFFFFF,#000000,#FFFFFF,Inter (weight 500),Inter (weight 400),Geist Mono,"6-8px standard","Minimal dark shadows","Minimal dark theme. Monospace accents. Developer-centric. Email API clean.","Email APIs, developer tools, minimal dark interfaces","Use Inter + Geist Mono, black #000000 bg, white text, minimal aesthetic, 6px radius"
+24,Sentry,sentry,developer-tools,"error-monitoring, dark, pink-purple, data-dense, dashboard, developer",dark,#6C5FC7,#F7508A,#1D1127,#EBE6EF,Rubik (weight 600),Rubik (weight 400),Roboto Mono,"6-8px standard","Dark elevated: rgba(0,0,0,0.2)","Dark dashboard. Data-dense. Pink-purple accent. Error monitoring vibe.","Error monitoring, developer dashboards, data-dense dark UIs","Use Rubik font, dark bg #1D1127, #6C5FC7 purple + #F7508A pink, data-dense layout"
+25,PostHog,posthog,developer-tools,"analytics, hedgehog, dark, playful, developer-friendly, orange, illustrations",dark,#F54E00,#F54E00,#1D1F27,#E5E7E0,Manrope (weight 700),Manrope (weight 400),Source Code Pro,"8-12px comfortable","Dark: rgba(0,0,0,0.15)","Playful hedgehog branding. Developer-friendly dark UI. Fun but functional.","Product analytics, developer-friendly tools, playful dark UIs","Use Manrope font, dark bg #1D1F27, #F54E00 orange accent, playful illustrations, 8px radius"
+26,Mintlify,mintlify,developer-tools,"documentation, clean, green, reading-optimized, developer, docs, content",light,#0D9373,#0D9373,#FFFFFF,#1A1A1A,Inter (weight 600),Inter (weight 400),JetBrains Mono,"8px standard","Subtle: 0px 1px 3px rgba(0,0,0,0.08)","Clean, green-accented, reading-optimized. Documentation-first.","Documentation platforms, API docs, reading-focused interfaces","Use Inter + JetBrains Mono, white bg, #0D9373 green accent, reading-optimized layout"
+27,Superhuman,superhuman,developer-tools,"email, premium, dark, keyboard-first, purple-glow, fast, productivity",dark,#6C5CE7,#6C5CE7,#1A1A2E,#FFFFFF,Inter (weight 600),Inter (weight 400),SF Mono,"6-8px standard","Purple glow: 0px 0px 20px rgba(108,92,231,0.3)","Premium dark UI. Keyboard-first. Purple glow aesthetic. Speed as brand.","Premium email, keyboard-first apps, dark productivity tools","Use Inter font, dark bg #1A1A2E, #6C5CE7 purple with glow effects, 6px radius"
+28,Expo,expo,developer-tools,"react-native, dark, tight-spacing, code-centric, mobile-dev, technical",dark,#368CCB,#368CCB,#0A0A0A,#FFFFFF,Inter (weight 600),Inter (weight 400),Fira Code,"8px standard","Dark subtle shadows","Dark theme. Tight letter-spacing. Code-centric. React Native platform.","React Native platforms, mobile dev tools, code-centric dark UIs","Use Inter + Fira Code, dark bg #0A0A0A, #368CCB blue accent, tight letter-spacing"
+29,Lovable,lovable,developer-tools,"ai-builder, playful, gradients, friendly, developer-aesthetic, purple, full-stack",both,#9B87F5,#9B87F5,#FFFFFF,#1A1F2C,Plus Jakarta Sans (weight 600),Plus Jakarta Sans (weight 400),JetBrains Mono,"8-16px comfortable","Soft: 0px 4px 12px rgba(0,0,0,0.08)","Playful gradients. Friendly developer aesthetic. AI-powered builder.","AI builders, full-stack tools, friendly dev platforms","Use Plus Jakarta Sans, #9B87F5 purple gradient accent, playful friendly tone, 8px radius"
+30,Zapier,zapier,developer-tools,"automation, orange, friendly, illustrations, warm, workflow, integrations",light,#FF4A00,#FF4A00,#FFFFFF,#2D2E2E,Degular (weight 700),Inter (weight 400),—,"8-12px comfortable","Soft: 0px 2px 8px rgba(0,0,0,0.08)","Warm orange. Friendly illustration-driven. Automation made approachable.","Automation platforms, workflow tools, integration-focused apps","Use Degular headings + Inter body, #FF4A00 orange, warm white bg, friendly illustrations"
+31,Framer,framer,design-productivity,"website-builder, bold, black-blue, motion-first, design-forward, creative",both,#0055FF,#0055FF,#FFFFFF,#000000,Inter (weight 700),Inter (weight 400),—,"8-12px standard","Standard: 0px 4px 16px rgba(0,0,0,0.1)","Bold black and blue. Motion-first. Design-forward. Builder for designers.","Website builders, design-forward tools, motion-heavy creative platforms","Use Inter font, bold #0055FF blue on black/white, motion animations, 8px radius"
+32,Notion,notion,design-productivity,"workspace, warm-minimalism, serif-headings, soft-surfaces, friendly, content-first, block-editor",light,#2383E2,#2383E2,#FFFFFF,#37352F,Lyon Display (serif),Inter (weight 400),SFMono-Regular,"3-6px subtle","Subtle: rgba(15,15,15,0.1) 0px 0px 0px 1px","Warm minimalism. Serif headings for personality. Content-first.","Productivity tools, content platforms, knowledge bases","Use Lyon Display serif for headings, Inter for body, warm tones, subtle borders, 3px radius"
+33,Miro,miro,design-productivity,"collaboration, yellow, bright, infinite-canvas, friendly, teamwork",light,#FFD02F,#050038,#FFFFFF,#050038,Roobert (weight 700),Inter (weight 400),—,"8-12px standard","Standard: 0px 2px 8px rgba(0,0,0,0.1)","Bright yellow accent. Infinite canvas aesthetic. Playful collaboration.","Visual collaboration, whiteboard tools, team brainstorming platforms","Use Roobert + Inter, #FFD02F yellow accent, bright friendly layout, 8px radius"
+34,Airtable,airtable,design-productivity,"spreadsheet, colorful, friendly, structured-data, database, organized",light,#2D7FF9,#2D7FF9,#FFFFFF,#333333,Inter (weight 600),Inter (weight 400),—,"6-8px standard","Standard: 0px 2px 4px rgba(0,0,0,0.1)","Colorful, friendly, structured data aesthetic. Database meets spreadsheet.","Database-spreadsheet hybrids, data management, organized interfaces","Use Inter font, #2D7FF9 blue, colorful category indicators, structured layout"
+35,Clay,clay,design-productivity,"creative, organic, soft-gradients, art-directed, flowing, agency",light,#4361EE,#4361EE,#FFFFFF,#1A1A2E,—,—,—,"16-24px generous","Soft organic: 0px 8px 30px rgba(0,0,0,0.08)","Organic shapes. Soft gradients. Art-directed layout. Creative agency feel.","Creative agencies, art-directed sites, organic design projects","Use soft gradients, organic shapes, generous 16px radius, art-directed layout"
+36,Cal.com,cal,design-productivity,"scheduling, neutral, developer, simplicity, open-source, clean, functional",light,#111827,#111827,#FFFFFF,#111827,Cal Sans (weight 700),Inter (weight 400),—,"6-8px standard","Subtle: 0px 1px 3px rgba(0,0,0,0.08)","Clean neutral UI. Developer-oriented simplicity. Open-source scheduling.","Scheduling tools, open-source products, clean functional UIs","Use Cal Sans headings + Inter body, neutral bg, #111827 dark text, 6px radius, clean layout"
+37,Webflow,webflow,design-productivity,"web-builder, blue, polished, marketing-site, professional, no-code",light,#4353FF,#4353FF,#FFFFFF,#1A1A1A,Manrope (weight 700),Inter (weight 400),—,"8-12px standard","Standard: 0px 4px 12px rgba(0,0,0,0.1)","Blue-accented. Polished marketing site aesthetic. Visual web builder.","Visual web builders, no-code platforms, polished marketing sites","Use Manrope + Inter, #4353FF blue accent, polished white bg, 8px radius"
+38,Pinterest,pinterest,design-productivity,"visual-discovery, red, masonry-grid, image-first, rounded, pins, photography",light,#E60023,#E60023,#FFFFFF,#333333,Helvetica Neue (weight 700),Helvetica Neue (weight 400),—,"16px rounded","Standard: 0px 1px 5px rgba(0,0,0,0.1)","Red accent. Masonry grid. Image-first. Pin-based visual discovery.","Visual discovery, image-centric platforms, masonry grid layouts","Use Helvetica Neue, #E60023 red, masonry grid layout, 16px rounded, image-first"
+39,Intercom,intercom,design-productivity,"messaging, blue, friendly, conversational, chat, customer-support",light,#396AFF,#396AFF,#FFFFFF,#1B1B30,—,—,—,"8-12px comfortable","Standard: 0px 2px 8px rgba(0,0,0,0.1)","Friendly blue palette. Conversational UI patterns. Chat-centric.","Customer messaging, chat interfaces, support platforms","Use #396AFF blue, friendly conversational UI, 8px radius, chat-oriented layout"
+40,ClickHouse,clickhouse,infrastructure-cloud,"database, analytics, yellow, technical, documentation, fast-queries",light,#FADB14,#FADB14,#FFFFFF,#1D1D1D,Inter (weight 700),Inter (weight 400),JetBrains Mono,"4-8px standard","Subtle technical shadows","Yellow-accented. Technical documentation style. Fast analytics database.","Analytics databases, technical docs, data-engineering tools","Use Inter + JetBrains Mono, #FADB14 yellow accent, white bg, technical doc layout"
+41,Composio,composio,infrastructure-cloud,"integration, dark, colorful-icons, tool-platform, modern, developer",dark,#6C5CE7,#6C5CE7,#0F0F0F,#FFFFFF,Inter (weight 600),Inter (weight 400),—,"8-12px comfortable","Dark elevated shadows","Modern dark with colorful integration icons. Tool integration platform.","Tool integration platforms, developer ecosystems, dark modern UIs","Use Inter font, dark bg #0F0F0F, #6C5CE7 purple, colorful integration icons"
+42,HashiCorp,hashicorp,infrastructure-cloud,"infrastructure, enterprise, black-white, clean, automation, terraform, vault",light,#000000,#000000,#FFFFFF,#000000,Metro Sans (weight 700),Metro Sans (weight 400),Deja Vu Sans Mono,"4-6px conservative","Minimal: 0px 1px 2px rgba(0,0,0,0.06)","Enterprise-clean. Black and white. Infrastructure automation precision.","Infrastructure tools, enterprise software, DevOps platforms","Use Metro Sans, pure B&W palette, clean enterprise layout, 4px radius"
+43,MongoDB,mongodb,infrastructure-cloud,"database, document, green-leaf, developer-docs, technical, open-source",light,#00ED64,#001E2B,#FFFFFF,#001E2B,MongoDB Value Serif,Euclid Circular A (weight 400),Source Code Pro,"8px standard","Standard: 0px 2px 8px rgba(0,0,0,0.1)","Green leaf branding. Developer documentation focus. Database-centric.","Document databases, developer documentation, data-centric platforms","Use Euclid Circular A body, #00ED64 green accent, developer doc layout, 8px radius"
+44,Sanity,sanity,infrastructure-cloud,"headless-cms, red, content-first, editorial, structured-content, clean",light,#F36458,#F36458,#FFFFFF,#1A1A1A,Inter (weight 700),Inter (weight 400),Roboto Mono,"8px standard","Standard: 0px 2px 8px rgba(0,0,0,0.08)","Red accent. Content-first editorial layout. Headless CMS clarity.","Headless CMS, content management, editorial platforms","Use Inter + Roboto Mono, #F36458 red accent, clean editorial layout, 8px radius"
+45,Cohere,cohere,ai-ml,"enterprise-ai, vibrant-gradients, data-rich, dashboard, professional",both,#39594D,#39594D,#FFFFFF,#1D2B24,Styrene A (weight 500),Inter (weight 400),JetBrains Mono,"8px standard","Standard: 0px 2px 8px rgba(0,0,0,0.08)","Vibrant gradients. Data-rich dashboard aesthetic. Enterprise AI.","Enterprise AI platforms, data-rich dashboards, professional AI tools","Use Styrene A + Inter, vibrant gradients, data-rich layout, 8px radius"
+46,ElevenLabs,elevenlabs,ai-ml,"voice-ai, dark, cinematic, audio-waveform, immersive, sound",dark,#FFFFFF,#FFFFFF,#000000,#FFFFFF,—,Inter (weight 400),—,"8-12px standard","Dark cinematic: rgba(0,0,0,0.4)","Dark cinematic UI. Audio-waveform aesthetics. Voice platform immersion.","Voice AI platforms, audio tools, cinematic dark interfaces","Use dark bg #000000, white text/accent, audio-waveform visual motifs, 8px radius"
+47,MiniMax,minimax,ai-ml,"ai-models, dark, neon-green, bold, futuristic, high-contrast",dark,#00FF88,#00FF88,#0A0A0A,#FFFFFF,Inter (weight 700),Inter (weight 400),—,"8px standard","Neon glow: 0px 0px 20px rgba(0,255,136,0.2)","Bold dark interface. Neon accents. Futuristic AI model provider.","AI model platforms, futuristic dark UIs, neon-accent interfaces","Use Inter font, dark bg #0A0A0A, #00FF88 neon green accents, 8px radius"
+48,Mistral AI,mistral.ai,ai-ml,"open-weight-llm, french, minimalism, purple, elegant, clean",light,#F54E42,#F54E42,#FFFFFF,#1A1A1A,Luciole (weight 700),Inter (weight 400),Source Code Pro,"8px standard","Subtle: 0px 2px 8px rgba(0,0,0,0.06)","French-engineered minimalism. Purple-toned. Open-weight LLM elegance.","LLM platforms, open-source AI, minimal SaaS pages","Use Luciole + Inter, #F54E42 accent, minimal white layout, 8px radius"
+49,Ollama,ollama,ai-ml,"local-llm, terminal, monochrome, simple, developer, cli, open-source",light,#000000,#000000,#FFFFFF,#000000,Inter (weight 700),Inter (weight 400),JetBrains Mono,"4-8px standard","Minimal: 0px 1px 2px rgba(0,0,0,0.05)","Terminal-first. Monochrome simplicity. Run LLMs locally aesthetic.","Local AI tools, CLI-first interfaces, terminal-native UIs","Use Inter + JetBrains Mono, monochrome B&W, terminal aesthetic, 4px radius"
+50,OpenCode AI,opencode.ai,ai-ml,"ai-coding, dark, emerald, developer, code-focused, terminal-green",dark,#10B981,#10B981,#0A0A0A,#E5E7EB,Inter (weight 600),Inter (weight 400),Fira Code,"6-8px standard","Dark subtle: rgba(0,0,0,0.2)","Developer-centric dark theme. Emerald coding accent. Code-first.","AI coding platforms, developer-centric dark tools","Use Inter + Fira Code, dark bg #0A0A0A, #10B981 emerald, code-focused layout"
+51,Replicate,replicate,ai-ml,"ml-api, white, code-forward, clean, minimal, api-first, developer",light,#000000,#000000,#FFFFFF,#000000,Inter (weight 600),Inter (weight 400),JetBrains Mono,"8px standard","Subtle: 0px 1px 3px rgba(0,0,0,0.06)","Clean white canvas. Code-forward. API-first ML platform.","ML API platforms, clean developer tools, API-first products","Use Inter + JetBrains Mono, white bg, #000000 text, code-forward layout, 8px radius"
+52,VoltAgent,voltagent,ai-ml,"agent-framework, dark, emerald, terminal-native, void-black, developer",dark,#10B981,#10B981,#000000,#E5E7EB,Inter (weight 700),Inter (weight 400),JetBrains Mono,"6-8px standard","Dark: rgba(0,0,0,0.3)","Void-black canvas. Emerald accent. Terminal-native developer framework.","AI agent frameworks, terminal-native tools, dark developer platforms","Use Inter + JetBrains Mono, void-black #000000 bg, #10B981 emerald, 6px radius"
+53,xAI,x.ai,ai-ml,"elon-musk, stark, monochrome, futuristic, minimalism, high-contrast",dark,#FFFFFF,#FFFFFF,#000000,#FFFFFF,Inter (weight 700),Inter (weight 400),—,"4px sharp","Minimal dark shadows","Stark monochrome. Futuristic minimalism. High contrast black and white.","Futuristic AI, stark minimal interfaces, monochrome dark UIs","Use Inter font, pure black #000000 bg, white text/accent, sharp 4px radius"

package/dist/core/templates/skills/ui-ux/data/landing.csv

@@ -0,0 +1,31 @@
+No,Pattern Name,Keywords,Section Order,Primary CTA Placement,Color Strategy,Recommended Effects,Conversion Optimization
+1,Hero + Features + CTA,"hero, hero-centric, features, feature-rich, cta, call-to-action","1. Hero with headline/image, 2. Value prop, 3. Key features (3-5), 4. CTA section, 5. Footer",Hero (sticky) + Bottom,Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color,"Hero parallax, feature card hover lift, CTA glow on hover",Deep CTA placement. Use contrasting color (at least 7:1 contrast ratio). Sticky navbar CTA.
+2,Hero + Testimonials + CTA,"hero, testimonials, social-proof, trust, reviews, cta","1. Hero, 2. Problem statement, 3. Solution overview, 4. Testimonials carousel, 5. CTA",Hero (sticky) + Post-testimonials,"Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant","Testimonial carousel slide animations, quote marks animations, avatar fade-in",Social proof before CTA. Use 3-5 testimonials. Include photo + name + role. CTA after social proof.
+3,Product Demo + Features,"demo, product-demo, features, showcase, interactive","1. Hero, 2. Product video/mockup (center), 3. Feature breakdown per section, 4. Comparison (optional), 5. CTA",Video center + CTA right/bottom,Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222,"Video play button pulse, feature scroll reveals, demo interaction highlights",Embedded product demo increases engagement. Use interactive mockup if possible. Auto-play video muted.
+4,Minimal Single Column,"minimal, simple, direct, single-column, clean","1. Hero headline, 2. Short description, 3. Benefit bullets (3 max), 4. CTA, 5. Footer","Center, large CTA button",Minimalist: Brand + white #FFFFFF + accent. Buttons: High contrast 7:1+. Text: Black/Dark grey,Minimal hover effects. Smooth scroll. CTA scale on hover (subtle),Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.
+5,Funnel (3-Step Conversion),"funnel, conversion, steps, wizard, onboarding","1. Hero, 2. Step 1 (problem), 3. Step 2 (solution), 4. Step 3 (action), 5. CTA progression",Each step: mini-CTA. Final: main CTA,"Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color","Step number animations, progress bar fill, step transitions smooth scroll",Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs.
+6,Comparison Table + CTA,"comparison, table, compare, versus, cta","1. Hero, 2. Problem intro, 3. Comparison table (product vs competitors), 4. Pricing (optional), 5. CTA",Table: Right column. CTA: Below table,Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark,"Table row hover highlight, price toggle animations, feature checkmark animations",Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row.
+7,Lead Magnet + Form,"lead, form, signup, capture, email, magnet","1. Hero (benefit headline), 2. Lead magnet preview (ebook cover, checklist, etc), 3. Form (minimal fields), 4. CTA submit",Form CTA: Submit button,Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color,"Form focus state animations, input validation animations, success confirmation animation",Form fields ≤ 3 for best conversion. Offer valuable lead magnet preview. Show form submission progress.
+8,Pricing Page + CTA,"pricing, plans, tiers, comparison, cta","1. Hero (pricing headline), 2. Price comparison cards, 3. Feature comparison table, 4. FAQ section, 5. Final CTA",Each card: CTA button. Sticky CTA in nav,"Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow","Price toggle animation (monthly/yearly), card comparison highlight, FAQ accordion open/close",Recommend starter plan (pre-select/highlight). Show annual discount (20-30%). Use FAQs to address concerns.
+9,Video-First Hero,"video, hero, media, visual, engaging","1. Hero with video background, 2. Key features overlay, 3. Benefits section, 4. CTA",Overlay on video (center/bottom) + Bottom section,Dark overlay 60% on video. Brand accent for CTA. White text on dark.,"Video autoplay muted, parallax scroll, text fade-in on scroll",86% higher engagement with video. Add captions for accessibility. Compress video for performance.
+10,Scroll-Triggered Storytelling,"storytelling, scroll, narrative, story, immersive","1. Intro hook, 2. Chapter 1 (problem), 3. Chapter 2 (journey), 4. Chapter 3 (solution), 5. Climax CTA",End of each chapter (mini) + Final climax CTA,Progressive reveal. Each chapter has distinct color. Building intensity.,"ScrollTrigger animations, parallax layers, progressive disclosure, chapter transitions",Narrative increases time-on-page 3x. Use progress indicator. Mobile: simplify animations.
+11,AI Personalization Landing,"ai, personalization, smart, recommendation, dynamic","1. Dynamic hero (personalized), 2. Relevant features, 3. Tailored testimonials, 4. Smart CTA",Context-aware placement based on user segment,Adaptive based on user data. A/B test color variations per segment.,"Dynamic content swap, fade transitions, personalized product recommendations",20%+ conversion with personalization. Requires analytics integration. Fallback for new users.
+12,Waitlist/Coming Soon,"waitlist, coming-soon, launch, early-access, notify","1. Hero with countdown, 2. Product teaser/preview, 3. Email capture form, 4. Social proof (waitlist count)",Email form prominent (above fold) + Sticky form on scroll,Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.,"Countdown timer animation, email validation feedback, success confetti, social share buttons",Scarcity + exclusivity. Show waitlist count. Early access benefits. Referral program.
+13,Comparison Table Focus,"comparison, table, versus, compare, features","1. Hero (problem statement), 2. Comparison matrix (you vs competitors), 3. Feature deep-dive, 4. Winner CTA",After comparison table (highlighted row) + Bottom,Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.,"Table row hover highlight, feature checkmark animations, sticky comparison header",Show value vs competitors. 35% higher conversion. Be factual. Include pricing if favorable.
+14,Pricing-Focused Landing,"pricing, price, cost, plans, subscription","1. Hero (value proposition), 2. Pricing cards (3 tiers), 3. Feature comparison, 4. FAQ, 5. Final CTA",Each pricing card + Sticky CTA in nav + Bottom,Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.,"Price toggle monthly/annual animation, card hover lift, FAQ accordion smooth open",Annual discount 20-30%. Recommend mid-tier (most popular badge). Address objections in FAQ.
+15,App Store Style Landing,"app, mobile, download, store, install","1. Hero with device mockup, 2. Screenshots carousel, 3. Features with icons, 4. Reviews/ratings, 5. Download CTAs",Download buttons prominent (App Store + Play Store) throughout,Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.,"Device mockup rotations, screenshot slider, star rating animations, download button pulse",Show real screenshots. Include ratings (4.5+ stars). QR code for mobile. Platform-specific CTAs.
+16,FAQ/Documentation Landing,"faq, documentation, help, support, questions","1. Hero with search bar, 2. Popular categories, 3. FAQ accordion, 4. Contact/support CTA",Search bar prominent + Contact CTA for unresolved questions,"Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.","Search autocomplete, smooth accordion open/close, category hover, helpful feedback buttons",Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.
+17,Immersive/Interactive Experience,"immersive, interactive, experience, 3d, animation","1. Full-screen interactive element, 2. Guided product tour, 3. Key benefits revealed, 4. CTA after completion",After interaction complete + Skip option for impatient users,Immersive experience colors. Dark background for focus. Highlight interactive elements.,"WebGL, 3D interactions, gamification elements, progress indicators, reward animations",40% higher engagement. Performance trade-off. Provide skip option. Mobile fallback essential.
+18,Event/Conference Landing,"event, conference, meetup, registration, schedule","1. Hero (date/location/countdown), 2. Speakers grid, 3. Agenda/schedule, 4. Sponsors, 5. Register CTA",Register CTA sticky + After speakers + Bottom,Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.,"Countdown timer, speaker hover cards with bio, agenda tabs, early bird countdown",Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts.
+19,Product Review/Ratings Focused,"reviews, ratings, testimonials, social-proof, stars","1. Hero (product + aggregate rating), 2. Rating breakdown, 3. Individual reviews, 4. Buy/CTA",After reviews summary + Buy button alongside reviews,Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.,"Star fill animations, review filtering, helpful vote interactions, photo lightbox",User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.
+20,Community/Forum Landing,"community, forum, social, members, discussion","1. Hero (community value prop), 2. Popular topics/categories, 3. Active members showcase, 4. Join CTA",Join button prominent + After member showcase,"Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.","Member avatars animation, activity feed live updates, topic hover previews, join success celebration","Show active community (member count, posts today). Highlight benefits. Preview content. Easy onboarding."
+21,Before-After Transformation,"before-after, transformation, results, comparison","1. Hero (problem state), 2. Transformation slider/comparison, 3. How it works, 4. Results CTA",After transformation reveal + Bottom,Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.,"Slider comparison interaction, before/after reveal animations, result counters, testimonial videos",Visual proof of value. 45% higher conversion. Real results. Specific metrics. Guarantee offer.
+22,Marketplace / Directory,"marketplace, directory, search, listing","1. Hero (Search focused), 2. Categories, 3. Featured Listings, 4. Trust/Safety, 5. CTA (Become a host/seller)",Hero Search Bar + Navbar 'List your item',Search: High contrast. Categories: Visual icons. Trust: Blue/Green.,"Search autocomplete animation, map hover pins, card carousel","Search bar is the CTA. Reduce friction to search. Popular searches suggestions."
+23,Newsletter / Content First,"newsletter, content, writer, blog, subscribe","1. Hero (Value Prop + Form), 2. Recent Issues/Archives, 3. Social Proof (Subscriber count), 4. About Author",Hero inline form + Sticky header form,Minimalist. Paper-like background. Text focus. Accent color for Subscribe.,"Text highlight animations, typewriter effect, subtle fade-in","Single field form (Email only). Show 'Join X,000 readers'. Read sample link."
+24,Webinar Registration,"webinar, registration, event, training, live","1. Hero (Topic + Timer + Form), 2. What you'll learn, 3. Speaker Bio, 4. Urgency/Bonuses, 5. Form (again)",Hero (Right side form) + Bottom anchor,Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.,"Countdown timer, speaker avatar float, urgent ticker","Limited seats logic. 'Live' indicator. Auto-fill timezone."
+25,Enterprise Gateway,"enterprise, corporate, gateway, solutions, portal","1. Hero (Video/Mission), 2. Solutions by Industry, 3. Solutions by Role, 4. Client Logos, 5. Contact Sales",Contact Sales (Primary) + Login (Secondary),Corporate: Navy/Grey. High integrity. Conservative accents.,"Slow video background, logo carousel, tab switching for industries","Path selection (I am a...). Mega menu navigation. Trust signals prominent."
+26,Portfolio Grid,"portfolio, grid, showcase, gallery, masonry","1. Hero (Name/Role), 2. Project Grid (Masonry), 3. About/Philosophy, 4. Contact",Project Card Hover + Footer Contact,Neutral background (let work shine). Text: Black/White. Accent: Minimal.,"Image lazy load reveal, hover overlay info, lightbox view","Visuals first. Filter by category. Fast loading essential."
+27,Horizontal Scroll Journey,"horizontal, scroll, journey, gallery, storytelling, panoramic","1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer","Floating Sticky CTA or End of Horizontal Track","Continuous palette transition. Chapter colors. Progress bar #000000.","Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator","Immersive product discovery. High engagement. Keep navigation visible."
+28,Bento Grid Showcase,"bento, grid, features, modular, apple-style, showcase","1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA","Floating Action Button or Bottom of Grid","Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark.","Hover card scale (1.02), video inside cards, tilt effect, staggered reveal","Scannable value props. High information density without clutter. Mobile stack."
+29,Interactive 3D Configurator,"3d, configurator, customizer, interactive, product","1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase","Inside Configurator UI + Sticky Bottom Bar","Neutral studio background. Product: Realistic materials. UI: Minimal overlay.","Real-time rendering, material swap animation, camera rotate/zoom, light reflection","Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart."
+30,AI-Driven Dynamic Landing,"ai, dynamic, personalized, adaptive, generative","1. Prompt/Input Hero, 2. Generated Result Preview, 3. How it Works, 4. Value Prop","Input Field (Hero) + 'Try it' Buttons","Adaptive to user input. Dark mode for compute feel. Neon accents.","Typing text effects, shimmering generation loaders, morphing layouts","Immediate value demonstration. 'Show, don't tell'. Low friction start."