heraspec 0.1.13 → 0.1.15

package/dist/core/templates/skills/templates/responsive-design.md

@@ -1,40 +1,40 @@
-# Responsive Design Checklist
-
-## Breakpoints
-
-Test at these breakpoints:
-- **Mobile**: 320px, 375px, 414px
-- **Tablet**: 768px, 1024px
-- **Desktop**: 1280px, 1440px, 1920px
-
-## Mobile-First Approach
-
-- [ ] Start with mobile layout
-- [ ] Use `min-width` media queries
-- [ ] Progressive enhancement for larger screens
-
-## Touch Targets
-
-- [ ] Minimum 44x44px for touch targets
-- [ ] Adequate spacing between interactive elements
-- [ ] No hover-only interactions (provide tap alternatives)
-
-## Layout
-
-- [ ] No horizontal scroll on mobile
-- [ ] Content doesn't overflow containers
-- [ ] Images scale appropriately
-- [ ] Text remains readable at all sizes
-
-## Navigation
-
-- [ ] Mobile menu works correctly
-- [ ] Navigation accessible on all screen sizes
-- [ ] Fixed elements don't block content
-
-## Typography
-
-- [ ] Font sizes scale appropriately
-- [ ] Line height readable on mobile
-- [ ] Text doesn't overflow containers
-
+# Responsive Design Checklist
+
+## Breakpoints
+
+Test at these breakpoints:
+- **Mobile**: 320px, 375px, 414px
+- **Tablet**: 768px, 1024px
+- **Desktop**: 1280px, 1440px, 1920px
+
+## Mobile-First Approach
+
+- [ ] Start with mobile layout
+- [ ] Use `min-width` media queries
+- [ ] Progressive enhancement for larger screens
+
+## Touch Targets
+
+- [ ] Minimum 44x44px for touch targets
+- [ ] Adequate spacing between interactive elements
+- [ ] No hover-only interactions (provide tap alternatives)
+
+## Layout
+
+- [ ] No horizontal scroll on mobile
+- [ ] Content doesn't overflow containers
+- [ ] Images scale appropriately
+- [ ] Text remains readable at all sizes
+
+## Navigation
+
+- [ ] Mobile menu works correctly
+- [ ] Navigation accessible on all screen sizes
+- [ ] Fixed elements don't block content
+
+## Typography
+
+- [ ] Font sizes scale appropriately
+- [ ] Line height readable on mobile
+- [ ] Text doesn't overflow containers
+

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."

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

@@ -0,0 +1,22 @@
+No,Page Type,Keywords,Section Order,Key Components,Layout Pattern,Color Strategy,Recommended Effects,Best For,Considerations
+10,Blog Listing,"blog, blog-list, news-list, articles, posts-list, blog-index",1. Header with page title, 2. Featured post (optional), 3. Post grid/list with filters, 4. Pagination, 5. Sidebar (categories, recent posts), 6. Footer,Blog header, Featured post card, Post grid (cards or list), Category sidebar, Recent posts widget, Search bar, Pagination,Minimal & Direct or Bento Box Grid,Neutral bg + featured post highlight,Post card hover, featured post animation, filter transitions, infinite scroll,Blog, news, content sites - main blog page,Different from Category - this is the main blog index. Show featured content.
+11,Search Results,"search, search-results, find, query-results",1. Search bar (sticky/prominent), 2. Results count, 3. Filter/sort options, 4. Results list/grid, 5. Pagination, 6. No results state, 7. Footer,Search input, Results count, Filter chips, Results cards/list, Pagination, Empty state, Suggested searches,Minimal & Direct or Content-First,High contrast for search input. Results cards with subtle borders,Search animation, result highlight, filter transitions, empty state animation,All sites with search functionality,Clear empty states. Show search suggestions. Highlight matching terms.
+12,404 Error,"404, error, not-found, page-not-found, missing",1. Error code (404), 2. Friendly error message, 3. Illustration/icon, 4. Helpful links (home, popular pages), 5. Search bar (optional), 6. Footer,Error code display, Friendly message, Illustration/icon, Navigation links, Search bar, Home button,Minimal & Direct or Trust & Authority,Neutral colors. Avoid alarming red. Friendly, approachable,Subtle animation on illustration, link hover effects,All websites - error handling,Keep it friendly, not scary. Provide clear next steps.
+13,Login,"login, sign-in, authenticate, account-access",1. Brand logo/header, 2. Login form (email, password), 3. Remember me checkbox, 4. Forgot password link, 5. Social login options (optional), 6. Sign up link, 7. Footer,Login form, Brand logo, Social login buttons, Forgot password link, Sign up CTA,Minimal & Direct or Trust & Authority,High contrast form. Brand color for submit button. Secure feeling,Form validation, password visibility toggle, social login animations,All sites with user accounts,Minimal fields. Clear error messages. Security indicators.
+14,Register,"register, sign-up, create-account, join",1. Brand logo/header, 2. Registration form (name, email, password, confirm), 3. Terms & conditions checkbox, 4. Social sign-up options (optional), 5. Login link, 6. Footer,Registration form, Brand logo, Social sign-up buttons, Terms checkbox, Login link,Minimal & Direct or Trust & Authority,High contrast form. Brand color for submit. Trust indicators,Form validation, password strength indicator, terms modal, social sign-up animations,All sites with user accounts,Clear validation. Show password requirements. Build trust.
+15,Dashboard,"dashboard, account, profile, my-account, user-dashboard",1. Welcome header, 2. Quick stats/overview cards, 3. Main content area (tabs/sections), 4. Sidebar navigation, 5. User profile section, 6. Footer,Welcome message, Stats cards, Tab navigation, Content sections, Sidebar menu, Profile dropdown,Data-Dense or Minimalism,Clean, organized. Status colors for stats. Clear hierarchy,Card hover, stat animations, tab transitions, smooth loading states,All sites with user accounts,Clear navigation. Quick access to key actions. Responsive layout.
+16,Cart,"cart, shopping-cart, basket, checkout-cart",1. Cart header, 2. Cart items list, 3. Quantity controls, 4. Remove items, 5. Order summary (subtotal, tax, total), 6. Checkout CTA, 7. Continue shopping link, 8. Footer,Cart items, Quantity controls, Remove buttons, Order summary, Checkout button, Empty cart state,Minimal & Direct or Conversion-Optimized,High contrast for checkout CTA. Clear pricing. Trust colors,Item animations, quantity updates, remove confirmations, empty state animation,E-commerce - shopping cart,Clear pricing breakdown. Easy item management. Prominent checkout CTA.
+17,Checkout,"checkout, payment, order, purchase, buy",1. Progress indicator, 2. Shipping address form, 3. Billing address (if different), 4. Payment method selection, 5. Order summary sidebar, 6. Place order button, 7. Security badges, 8. Footer,Progress steps, Address forms, Payment options, Order summary, Security badges, Place order button,Conversion-Optimized or Trust & Authority,High contrast for place order. Trust colors for security. Clear hierarchy,Progress indicator animation, form validation, payment method selection, order summary updates,E-commerce - purchase flow,Minimal steps. Clear progress. Security indicators. Trust signals.
+18,Thank You,"thank-you, confirmation, order-confirmed, success, receipt",1. Success icon/checkmark, 2. Thank you message, 3. Order number/details, 4. What happens next, 5. Order summary, 6. Continue shopping CTA, 7. Track order link, 8. Footer,Success icon, Thank you message, Order details, Next steps, Order summary, CTAs,Minimal & Direct or Trust & Authority,Success green. Celebratory but professional. Clear hierarchy,Success animation, order details reveal, smooth transitions,E-commerce - post-purchase,Clear confirmation. Set expectations. Provide next steps.
+19,Services,"services, offerings, what-we-do, solutions",1. Hero/Header, 2. Services overview, 3. Service cards grid (3-6 services), 4. Service details/features, 5. CTA section, 6. Footer,Service cards, Service descriptions, Feature lists, CTAs, Service icons,Minimal & Direct or Feature-Rich Showcase,Brand colors + service-specific accents,Service card hover, icon animations, feature reveals,Service-based businesses - showcase offerings,Clear service descriptions. Show value. Multiple CTAs.
+20,Portfolio,"portfolio, gallery, work, projects, showcase",1. Portfolio header, 2. Filter/category tabs, 3. Project grid (masonry or cards), 4. Project details on hover/click, 5. Pagination (optional), 6. Footer,Project grid, Filter tabs, Project cards, Lightbox/modal, Project details,Minimal & Direct or Bento Box Grid,Neutral bg to let work shine. Accent for filters,Grid animations, filter transitions, lightbox open, project hover effects,Creative agencies, portfolios - showcase work,Visual-first. Fast loading. Easy filtering.
+21,Testimonials,"testimonials, reviews, client-feedback, social-proof",1. Page header, 2. Testimonials grid/carousel, 3. Filter by category/rating, 4. Video testimonials (optional), 5. CTA section, 6. Footer,Testimonial cards, Client photos, Star ratings, Video players, Filter options, CTA buttons,Social Proof-Focused or Trust & Authority,Trust colors. Warm accents for testimonials,Carousel animations, video play, testimonial fade-in, star animations,All business types - build trust,Show variety. Include photos. Filter by industry/rating.
+22,Team,"team, our-team, staff, employees, people",1. Page header, 2. Team intro, 3. Team member grid, 4. Member details (role, bio, social), 5. Join us CTA (optional), 6. Footer,Team member cards, Photos, Role titles, Bio sections, Social links, CTA button,Storytelling-Driven or Trust & Authority,Warm, human colors. Professional but approachable,Member card hover, bio reveal, social link animations,All businesses - humanize brand,High-quality photos. Clear roles. Show personality.
+23,Careers,"careers, jobs, hiring, work-with-us, join-us",1. Hero with company culture, 2. Why work here, 3. Open positions list, 4. Job details/application, 5. Benefits section, 6. Application CTA, 7. Footer,Job listings, Company culture section, Benefits grid, Application form, CTA buttons,Feature-Rich Showcase or Trust & Authority,Energizing colors. Professional but inviting,Job card hover, benefits reveal, application form animations,Companies hiring - recruitment,Show culture. Clear job descriptions. Easy application.
+24,Events,"events, calendar, schedule, upcoming-events, workshops",1. Events header, 2. Upcoming events list/calendar, 3. Event details (date, location, description), 4. Registration CTA, 5. Past events (optional), 6. Footer,Event cards, Calendar view, Event details, Registration buttons, Date filters,Minimal & Direct or Feature-Rich Showcase,Event-specific colors. Clear date/location,Calendar animations, event card hover, registration animations,Event organizers, conferences - event listings,Clear dates. Easy registration. Show past events for credibility.
+25,Documentation,"documentation, docs, help-center, guides, api-docs",1. Search bar, 2. Category sidebar, 3. Content area, 4. Table of contents, 5. Related articles, 6. Feedback section, 7. Footer,Search bar, Sidebar navigation, Content area, TOC, Code blocks, Related links,FAQ/Documentation Landing or Minimal & Direct,High readability. Code syntax highlighting,Search autocomplete, smooth scrolling, code copy buttons, TOC highlight,Developer tools, SaaS - technical docs,Clear navigation. Searchable. Code examples. Versioning.
+26,Privacy Policy,"privacy, privacy-policy, data-protection, gdpr",1. Page header, 2. Last updated date, 3. Policy sections, 4. Contact information, 5. Footer,Policy sections, Table of contents, Contact info, Legal text,Minimal & Direct,High readability. Professional, neutral colors,Smooth scrolling, section anchors, print-friendly,All websites - legal requirement,Clear sections. Easy to read. Contact info for questions.
+27,Terms,"terms, terms-of-service, terms-and-conditions, legal",1. Page header, 2. Last updated date, 3. Terms sections, 4. Contact information, 5. Footer,Terms sections, Table of contents, Contact info, Legal text,Minimal & Direct,High readability. Professional, neutral colors,Smooth scrolling, section anchors, print-friendly,All websites - legal requirement,Clear sections. Easy to read. Contact info for questions.
+28,Coming Soon,"coming-soon, launch, under-construction, maintenance",1. Brand logo, 2. Coming soon message, 3. Countdown timer (optional), 4. Email signup form, 5. Social links, 6. Footer,Brand logo, Message, Countdown timer, Email form, Social links,Minimal & Direct or Hero-Centric,Brand colors. Anticipation building,Countdown animation, email form validation, subtle background animation,Pre-launch, maintenance - temporary pages,Clear message. Email capture. Set expectations.
+29,Compare,"compare, comparison, vs, versus, products-compare",1. Comparison header, 2. Comparison table (features side-by-side), 3. Highlight differences, 4. CTA buttons per option, 5. Footer,Comparison table, Feature rows, Highlight indicators, CTA buttons,Comparison Table Focus,Your product highlighted. Competitors neutral,Table row hover, feature highlight, CTA animations,Product comparisons - help decision,Clear differences. Highlight your advantages. Easy comparison.
+30,Account Settings,"settings, account-settings, profile-settings, preferences",1. Settings header, 2. Settings tabs/sections, 3. Form fields per section, 4. Save buttons, 5. Danger zone (delete account), 6. Footer,Settings tabs, Form sections, Save buttons, Danger zone,Minimal & Direct,High contrast for save. Warning colors for danger zone,Form validation, save confirmations, tab transitions,All sites with user accounts,Clear sections. Auto-save option. Clear danger actions.

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

@@ -0,0 +1,10 @@
+No,Page Type,Keywords,Section Order,Key Components,Layout Pattern,Color Strategy,Recommended Effects,Best For,Considerations
+1,Home,"home, homepage, index, main, landing",1. Hero with headline/CTA, 2. Value proposition, 3. Key features (3-5), 4. Social proof/testimonials, 5. CTA section, 6. Footer,Hero section, Feature cards, Testimonial carousel, CTA buttons, Navigation bar,Hero-Centric or Feature-Rich Showcase,Brand primary + white/light bg + accent CTA,Parallax hero, feature card hover, CTA glow, testimonial fade-in,All product types - main entry point,Strong first impression. Clear value prop. Multiple CTAs.
+2,About,"about, company, story, team, mission, vision, history, values",1. Hero/Header, 2. Mission/Vision, 3. Story/Timeline, 4. Team grid, 5. Values/Principles, 6. CTA (optional), 7. Footer,Page header, Mission statement, Timeline/story, Team member cards, Values grid, Stats/metrics,Storytelling-Driven or Trust & Authority,Professional colors + warm accents for team,Timeline animations, team card hover, stat counters, value reveal,All business types - builds trust,Humanize brand. Show expertise. Include team photos.
+3,Post Details,"post, article, blog, blog-post, single-post, content, news, story",1. Header with breadcrumbs, 2. Article title + meta, 3. Featured image, 4. Content body, 5. Author bio, 6. Related posts, 7. Comments (optional), 8. Footer,Breadcrumbs, Article header, Content area, Author card, Related posts grid, Share buttons, Comments section,Minimal & Direct or Content-First,High readability colors - dark text on light bg,Reading progress bar, smooth scroll, image lazy load, share animations,Blog, news, content sites - article pages,Readability paramount. SEO optimized. Social sharing.
+4,Category,"category, archive, listing, posts, blog-category, taxonomy",1. Header with category title, 2. Category description, 3. Post grid/list, 4. Pagination, 5. Sidebar (optional), 6. Footer,Category header, Filter/search bar, Post grid (masonry or cards), Pagination, Sidebar widgets,Minimal & Direct or Bento Box Grid,Neutral bg + card accents,Grid animations, filter transitions, infinite scroll option, pagination hover,Blog, news, e-commerce - category pages,Scannable layout. Fast filtering. Clear hierarchy.
+5,Pricing,"pricing, plans, tiers, subscription, cost, price, rates",1. Hero headline, 2. Price comparison cards (3-4 tiers), 3. Feature comparison table, 4. FAQ section, 5. Testimonials (optional), 6. Final CTA, 7. Footer,Pricing cards, Feature comparison table, FAQ accordion, Toggle (monthly/yearly), CTA buttons,Pricing-Focused Landing,Popular plan highlighted (brand color), others neutral,Price toggle animation, card hover lift, FAQ accordion, stat reveal,SaaS, services, memberships - pricing pages,Highlight recommended plan. Show value. Address objections in FAQ.
+6,FAQ,"faq, faqs, questions, help, support, answers",1. Hero with search bar, 2. Popular categories, 3. FAQ accordion, 4. Contact/support CTA, 5. Footer,Search bar, Category tabs, Accordion items, Contact form/link, Related articles,FAQ/Documentation Landing,Clean high readability. Category icons in brand color,Search autocomplete, smooth accordion, category hover, helpful feedback,All product types - support pages,Reduce support tickets. Track search. Show related articles.
+7,Contact,"contact, get-in-touch, reach-out, support, inquiry",1. Hero/Header, 2. Contact form (name, email, message), 3. Contact info (address, phone, email), 4. Map (optional), 5. Social links, 6. Footer,Contact form, Contact information cards, Map embed, Social media links, Success message,Minimal & Direct or Trust & Authority,High contrast form. Brand color for submit button,Form validation animations, success feedback, map interactions,All business types - contact pages,Minimal fields (3-4 max). Clear validation. Multiple contact methods.
+8,Product Category,"product-category, shop, products, catalog, browse, category",1. Header with category title, 2. Filter/sort bar, 3. Product grid, 4. Pagination, 5. Sidebar filters (optional), 6. Footer,Category header, Filter/sort controls, Product cards grid, Pagination, Sidebar filters, Quick view modal,E-commerce Clean or Bento Box Grid,Product cards with hover states. Brand colors for CTAs,Product card hover, filter animations, quick view modal, infinite scroll,E-commerce - product listing pages,Scannable products. Fast filtering. Clear product info. Quick add-to-cart.
+9,Product Details,"product-detail, single-product, product-page, item",1. Breadcrumbs, 2. Product images gallery, 3. Product title + price, 4. Product description, 5. Add to cart + options, 6. Specifications, 7. Reviews, 8. Related products, 9. Footer,Product image gallery, Product info, Add to cart form, Specifications table, Reviews section, Related products,Conversion-Optimized or Feature-Rich Showcase,High contrast CTA. Product images prominent,Image zoom, gallery slider, add-to-cart animation, review stars, related hover,E-commerce - product detail pages,Conversion focus. Clear pricing. Multiple images. Trust signals (reviews).