heraspec 0.1.0

package/dist/core/templates/skills/CHANGELOG.md

@@ -0,0 +1,117 @@
+# UI/UX Skill Changelog
+
+## New Features
+
+### 🔍 Multiple Search Modes
+
+UI/UX Builder now supports 3 search modes for better results:
+
+1. **BM25 (Default)** ⚡
+   - Fast keyword-based search
+   - Zero dependencies
+   - Works out of the box
+   - Best for exact keyword matches
+
+2. **Vector Mode** 🧠
+   - Semantic search using sentence transformers
+   - Understands meaning and synonyms
+   - ~15-20% better results than BM25
+   - Requires: `pip install sentence-transformers scikit-learn`
+
+3. **Hybrid Mode** 🎯
+   - Combines BM25 + Vector search
+   - Best overall results (~25% improvement)
+   - Catches both exact and semantic matches
+   - Requires: `pip install sentence-transformers scikit-learn`
+
+**Usage:**
+```bash
+# BM25 (default)
+python3 scripts/search.py "minimalism" --domain style
+
+# Vector (semantic)
+python3 scripts/search.py "elegant dark theme" --domain style --mode vector
+
+# Hybrid (best)
+python3 scripts/search.py "modern minimal design" --domain style --mode hybrid
+```
+
+### 📄 Multi-Page Website Support
+
+Added support for creating complete website packages with 9 default page types:
+
+1. Home
+2. About
+3. Post Details
+4. Category
+5. Pricing
+6. FAQ
+7. Contact
+8. Product Category (e-commerce)
+9. Product Details (e-commerce)
+
+**New Domain:** `pages` - Search for page type templates
+
+**Usage:**
+```bash
+python3 scripts/search.py "home homepage" --domain pages
+python3 scripts/search.py "pricing plans" --domain pages
+```
+
+### 📚 Enhanced Documentation
+
+- Added `SEARCH_MODES_GUIDE.md` - Detailed guide on search modes
+- Added `SEARCH_ALGORITHMS_COMPARISON.md` - Algorithm comparison
+- Added `CODE_EXPLANATION.md` - How the search engine works
+- Updated `ui-ux-skill.md` with search mode examples
+- Added references to base [UI UX Pro Max Skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) project that UI/UX Builder is built upon
+
+## Improvements
+
+- Auto-fallback to BM25 if Vector/Hybrid dependencies not installed
+- Better error messages and warnings
+- Mode information in search results output
+- Updated all examples with search mode options
+
+## Migration Guide
+
+### For Existing Users
+
+No changes required! BM25 remains the default mode.
+
+### To Use New Features
+
+1. **For Vector/Hybrid modes:**
+   ```bash
+   pip install sentence-transformers scikit-learn
+   ```
+
+2. **Update your search commands:**
+   ```bash
+   # Old (still works)
+   python3 scripts/search.py "query" --domain style
+   
+   # New (better results)
+   python3 scripts/search.py "query" --domain style --mode hybrid
+   ```
+
+3. **For multi-page websites:**
+   ```bash
+   # Search page types
+   python3 scripts/search.py "home" --domain pages
+   ```
+
+## Performance
+
+| Mode | Speed | Accuracy | Dependencies |
+|------|-------|----------|--------------|
+| BM25 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | None |
+| Vector | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | sentence-transformers |
+| Hybrid | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | sentence-transformers |
+
+## Backward Compatibility
+
+✅ All existing commands work without changes
+✅ BM25 remains default mode
+✅ Auto-fallback if dependencies missing
+✅ No breaking changes

package/dist/core/templates/skills/README-template.md

@@ -0,0 +1,58 @@
+# Skills Directory
+
+This directory contains reusable skills for HeraSpec projects.
+
+## What Are Skills?
+
+Skills are reusable patterns and workflows that help AI agents implement tasks consistently. Each skill contains:
+
+- **skill.md**: Complete guide on how to use the skill
+- **templates/**: Reusable templates
+- **scripts/**: Automation scripts
+- **examples/**: Good and bad examples
+
+## Skill Structure
+
+```
+skills/
+├── <project-type>/          # Project-specific skills
+│   └── <skill-name>/
+│       ├── skill.md
+│       ├── templates/
+│       ├── scripts/
+│       └── examples/
+│
+└── <skill-name>/            # Cross-cutting skills
+    ├── skill.md
+    ├── templates/
+    ├── scripts/
+    └── examples/
+```
+
+## How Agents Use Skills
+
+When a task has a skill tag:
+\`\`\`markdown
+## 1. Feature (projectType: perfex-module, skill: module-codebase)
+- [ ] Task 1.1
+\`\`\`
+
+The agent will:
+1. Find skill folder: \`heraspec/skills/perfex-module/module-codebase/\`
+2. Read \`skill.md\` to understand process
+3. Use templates and scripts from skill folder
+4. Follow guidelines in skill.md
+
+## Available Skills
+
+Run \`heraspec skill list\` to see all available skills.
+
+## Creating New Skills
+
+1. Create skill folder structure
+2. Write \`skill.md\` following the template
+3. Add templates, scripts, examples as needed
+4. Update this README
+
+See \`docs/SKILLS_STRUCTURE_PROPOSAL.md\` for detailed structure.
+

package/dist/core/templates/skills/README.md

@@ -0,0 +1,36 @@
+# Skills Templates
+
+This directory contains skill.md templates and resources for HeraSpec skills.
+
+## Available Skills
+
+- `module-codebase-skill.md` - For Perfex module codebase structure
+- `ui-ux-skill.md` - For UI/UX design and styling (with UI/UX Builder integration)
+- `documents-skill.md` - For technical and user documentation
+- `content-optimization-skill.md` - For content and CTA optimization
+
+## UI/UX Skill Resources
+
+The `ui-ux-skill.md` includes integration with UI/UX Builder (built upon [UI UX Pro Max Skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)):
+
+- **Scripts**: `scripts/search.py` and `scripts/core.py` for searching design database
+- **Search Modes**: 
+  - **BM25** (default) - Fast keyword-based search, zero dependencies
+  - **Vector** - Semantic search with ~15-20% better results (requires: `pip install sentence-transformers scikit-learn`)
+  - **Hybrid** - Best of both worlds with ~25% better results (requires: `pip install sentence-transformers scikit-learn`)
+- **Data**: `data/` folder contains CSV databases for:
+  - Styles (57 UI styles)
+  - Colors (95 color palettes)
+  - Typography (56 font pairings)
+  - Charts (24 chart types)
+  - Products (product recommendations)
+  - Pages (9+ page types for multi-page websites)
+  - Landing pages (page structures)
+  - UX guidelines (98 best practices)
+  - Stacks (8 tech stack guidelines)
+
+## Usage
+
+When creating a new skill, copy the appropriate template and customize it for your specific skill.
+
+For UI/UX tasks, agents will automatically use the search scripts to find relevant design intelligence before implementing.

package/dist/core/templates/skills/content-optimization-skill.md

@@ -0,0 +1,104 @@
+# Skill: Content Optimization (Cross-Cutting)
+
+## Purpose
+
+This skill is used to optimize content and increase CTA (Call-to-Action) conversion for the product/module being developed. Focus on conversion optimization and user engagement.
+
+## When to Use
+
+- When creating landing pages
+- When designing CTA buttons
+- When writing marketing content
+- When optimizing email campaigns
+- When needing to increase conversion rates
+
+## Step-by-Step Process
+
+### Step 1: Analyze Goals
+- Identify conversion goal (signup, purchase, download, etc.)
+- Identify target audience
+- Identify value proposition
+- Research competitors
+
+### Step 2: Create Content Variants
+- Use template: `templates/cta-template.md`
+- Use template: `templates/landing-page-template.md`
+- Create multiple variants for A/B testing
+- Run script: `scripts/generate-ab-test-variants.sh`
+
+### Step 3: Optimize CTA Placement
+- Above the fold for primary CTA
+- Multiple CTAs for long pages
+- Exit-intent CTAs
+- Follow good examples in `examples/high-conversion-cta/`
+
+### Step 4: Test & Measure
+- Setup A/B testing
+- Run script: `scripts/analyze-cta-performance.py`
+- Measure conversion rates
+- Track user behavior
+
+### Step 5: Iterate
+- Analyze results
+- Optimize based on data
+- Test new variants
+- Continuously improve
+
+## Required Input
+
+- **Conversion goal**: Signup, purchase, download, etc.
+- **Target audience**: Demographics, interests, pain points
+- **Value proposition**: Unique selling points
+- **Current conversion rate**: Baseline for comparison
+- **Content type**: Landing page, email, banner, etc.
+
+## Expected Output
+
+- Optimized content with clear CTAs
+- Multiple variants for A/B testing
+- Performance metrics and analysis
+- Recommendations for improvement
+
+## Tone & Rules
+
+### Content Principles
+- **Clear value**: Clear value proposition
+- **Urgency**: Create sense of urgency (if appropriate)
+- **Benefit-focused**: Focus on benefits, not just features
+- **Action-oriented**: Language that stimulates action
+
+### CTA Best Practices
+- Action verbs: "Get Started", "Download Now", "Try Free"
+- Clear and specific
+- Visually prominent
+- Above the fold
+- Mobile-friendly
+
+### Limitations
+- ❌ DO NOT use misleading claims
+- ❌ DO NOT create too many CTAs (confusion)
+- ❌ DO NOT ignore mobile experience
+- ❌ DO NOT skip loading speed
+- ❌ DO NOT test without measuring
+
+## Available Templates
+
+- `templates/cta-template.md` - CTA template
+- `templates/landing-page-template.md` - Landing page template
+- `templates/email-campaign-template.md` - Email marketing template
+
+## Available Scripts
+
+- `scripts/analyze-cta-performance.py` - Analyze CTA performance
+- `scripts/generate-ab-test-variants.sh` - Generate variants for A/B testing
+
+## Examples
+
+See `examples/` directory for reference:
+- `high-conversion-cta/` - Effective CTA (high conversion)
+- `low-conversion-cta/` - CTA that needs improvement (low conversion)
+
+## Links to Other Skills
+
+- **ui-ux**: Use to style CTAs and optimize visual hierarchy
+- **documents**: Use to document conversion strategies

package/dist/core/templates/skills/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/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/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/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/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).