@soleri/core 9.14.0 → 9.14.4

package/dist/knowledge-packs/knowledge-packs/salvador/salvador-uipro/vault/design.json

@@ -1,2589 +0,0 @@
-{
-  "domain": "design",
-  "version": "1.0.0",
-  "entries": [
-    {
-      "id": "uipro-chart-recommendations",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Chart Type Recommendations",
-      "severity": "suggestion",
-      "description": "# Chart Type Recommendations\n\n## Trend Over Time\n- **Best Chart:*\\* Line Chart\n- **Secondary:*\\* Area Chart, Smooth Area\n- **Colors:*\\* Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity\n- **Performance:*\\* Excellent (optimized)\n- **Accessibility:** ✓ Clear line patterns for colorblind users. Add pattern overlays.\n- **Libraries:*\\* Chart.js, Recharts, ApexCharts\n- **Interactivity:*\\* Hover + Zoom\n\n## Compare Categories\n- **Best Chart:*\\* Bar Chart (Horizontal or Vertical)\n- **Secondary:*\\* Column Chart, Grouped Bar\n- **Colors:*\\* Each bar: distinct color. Category: grouped same color. Sorted: descending order\n- **Performance:*\\* Excellent\n- **Accessibility:** ✓ Easy to compare. Add value labels on bars for clarity.\n- **Libraries:*\\* Chart.js, Recharts, D3.js\n- **Interactivity:*\\* Hover + Sort\n\n## Part-to-Whole\n- **Best Chart:*\\* Pie Chart or Donut\n- **Secondary:*\\* Stacked Bar, Treemap\n- **Colors:*\\* Colors: 5-6 max. Contrasting palette. Large slices first. Use labels.\n- **Performance:*\\* Good (limit 6 slices)\n- **Accessibility:** ⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items.\n- **Libraries:*\\* Chart.js, Recharts, D3.js\n- **Interactivity:*\\* Hover + Drill\n\n## Correlation/Distribution\n- **Best Chart:*\\* Scatter Plot or Bubble Chart\n- **Secondary:*\\* Heat Map, Matrix\n- **Colors:*\\* Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density\n- **Performance:*\\* Moderate (many points)\n- **Accessibility:** ⚠ Provide data table alternative. Use pattern + color distinction.\n- **Libraries:*\\* D3.js, Plotly, Recharts\n- **Interactivity:*\\* Hover + Brush\n\n## Heatmap/Intensity\n- **Best Chart:*\\* Heat Map or Choropleth\n- **Secondary:*\\* Grid Heat Map, Bubble Heat\n- **Colors:*\\* Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data\n- **Performance:*\\* Excellent (color CSS)\n- **Accessibility:** ⚠ Colorblind: Use pattern overlay. Provide numerical legend.\n- **Libraries:*\\* D3.js, Plotly, ApexCharts\n- **Interactivity:*\\* Hover + Zoom\n\n## Geographic Data\n- **Best Chart:*\\* Choropleth Map, Bubble Map\n- **Secondary:*\\* Geographic Heat Map\n- **Colors:*\\* Regional: single color gradient or categorized colors. Legend: clear scale\n- **Performance:*\\* Moderate (rendering)\n- **Accessibility:** ⚠ Include text labels for regions. Provide data table alternative.\n- **Libraries:*\\* D3.js, Mapbox, Leaflet\n- **Interactivity:*\\* Pan + Zoom + Drill\n\n## Funnel/Flow\n- **Best Chart:*\\* Funnel Chart, Sankey\n- **Secondary:*\\* Waterfall (for flows)\n- **Colors:*\\* Stages: gradient (starting color → ending color). Show conversion %\n- **Performance:*\\* Good\n- **Accessibility:** ✓ Clear stage labels + percentages. Good for accessibility if labeled.\n- **Libraries:*\\* D3.js, Recharts, Custom SVG\n- **Interactivity:*\\* Hover + Drill\n\n## Performance vs Target\n- **Best Chart:*\\* Gauge Chart or Bullet Chart\n- **Secondary:*\\* Dial, Thermometer\n- **Colors:*\\* Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors\n- **Performance:*\\* Good\n- **Accessibility:** ✓ Add numerical value + percentage label beside gauge.\n- **Libraries:*\\* D3.js, ApexCharts, Custom SVG\n- **Interactivity:*\\* Hover\n\n## Time-Series Forecast\n- **Best Chart:*\\* Line with Confidence Band\n- **Secondary:*\\* Ribbon Chart\n- **Colors:*\\* Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading\n- **Performance:*\\* Good\n- **Accessibility:** ✓ Clearly distinguish actual vs forecast. Add legend.\n- **Libraries:*\\* Chart.js, ApexCharts, Plotly\n- **Interactivity:*\\* Hover + Toggle\n\n## Anomaly Detection\n- **Best Chart:*\\* Line Chart with Highlights\n- **Secondary:*\\* Scatter with Alert\n- **Colors:*\\* Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert\n- **Performance:*\\* Good\n- **Accessibility:** ✓ Circle/marker for anomalies. Add text alert annotation.\n- **Libraries:*\\* D3.js, Plotly, ApexCharts\n- **Interactivity:*\\* Hover + Alert\n\n## Hierarchical/Nested Data\n- **Best Chart:*\\* Treemap\n- **Secondary:*\\* Sunburst, Nested Donut, Icicle\n- **Colors:*\\* Parent: distinct hues. Children: lighter shades. White borders 2-3px.\n- **Performance:*\\* Moderate\n- **Accessibility:** ⚠ Poor - provide table alternative. Label large areas.\n- **Libraries:*\\* D3.js, Recharts, ApexCharts\n- **Interactivity:*\\* Hover + Drilldown\n\n## Flow/Process Data\n- **Best Chart:*\\* Sankey Diagram\n- **Secondary:*\\* Alluvial, Chord Diagram\n- **Colors:*\\* Gradient from source to target. Opacity 0.4-0.6 for flows.\n- **Performance:*\\* Moderate\n- **Accessibility:** ⚠ Poor - provide flow table alternative.\n- **Libraries:*\\* D3.js (d3-sankey), Plotly\n- **Interactivity:*\\* Hover + Drilldown\n\n## Cumulative Changes\n- **Best Chart:*\\* Waterfall Chart\n- **Secondary:*\\* Stacked Bar, Cascade\n- **Colors:*\\* Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1.\n- **Performance:*\\* Good\n- **Accessibility:** ✓ Good - clear directional colors with labels.\n- **Libraries:*\\* ApexCharts, Highcharts, Plotly\n- **Interactivity:*\\* Hover\n\n## Multi-Variable Comparison\n- **Best Chart:*\\* Radar/Spider Chart\n- **Secondary:*\\* Parallel Coordinates, Grouped Bar\n- **Colors:*\\* Single: #0080FF 20% fill. Multiple: distinct colors per dataset.\n- **Performance:*\\* Good\n- **Accessibility:** ⚠ Moderate - limit 5-8 axes. Add data table.\n- **Libraries:*\\* Chart.js, Recharts, ApexCharts\n- **Interactivity:*\\* Hover + Toggle\n\n## Stock/Trading OHLC\n- **Best Chart:*\\* Candlestick Chart\n- **Secondary:*\\* OHLC Bar, Heikin-Ashi\n- **Colors:*\\* Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below.\n- **Performance:*\\* Good\n- **Accessibility:** ⚠ Moderate - provide OHLC data table.\n- **Libraries:*\\* Lightweight Charts (TradingView), ApexCharts\n- **Interactivity:*\\* Real-time + Hover + Zoom\n\n## Relationship/Connection Data\n- **Best Chart:*\\* Network Graph\n- **Secondary:*\\* Hierarchical Tree, Adjacency Matrix\n- **Colors:*\\* Node types: categorical colors. Edges: #90A4AE 60% opacity.\n- **Performance:** ❌ Poor (500+ nodes struggles)\n- **Accessibility:** ❌ Very Poor - provide adjacency list alternative.\n- **Libraries:*\\* D3.js (d3-force), Vis.js, Cytoscape.js\n- **Interactivity:*\\* Drilldown + Hover + Drag\n\n## Distribution/Statistical\n- **Best Chart:*\\* Box Plot\n- **Secondary:*\\* Violin Plot, Beeswarm\n- **Colors:*\\* Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336.\n- **Performance:*\\* Excellent\n- **Accessibility:** ✓ Good - include stats table (min, Q1, median, Q3, max).\n- **Libraries:*\\* Plotly, D3.js, Chart.js (plugin)\n- **Interactivity:*\\* Hover\n\n## Performance vs Target (Compact)\n- **Best Chart:*\\* Bullet Chart\n- **Secondary:*\\* Gauge, Progress Bar\n- **Colors:*\\* Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px.\n- **Performance:*\\* Excellent\n- **Accessibility:** ✓ Excellent - compact with clear values.\n- **Libraries:*\\* D3.js, Plotly, Custom SVG\n- **Interactivity:*\\* Hover\n\n## Proportional/Percentage\n- **Best Chart:*\\* Waffle Chart\n- **Secondary:*\\* Pictogram, Stacked Bar 100%\n- **Colors:*\\* 10x10 grid. 3-5 categories max. 2-3px spacing between squares.\n- **Performance:*\\* Good\n- **Accessibility:** ✓ Good - better than pie for accessibility.\n- **Libraries:*\\* D3.js, React-Waffle, Custom CSS Grid\n- **Interactivity:*\\* Hover\n\n## Hierarchical Proportional\n- **Best Chart:*\\* Sunburst Chart\n- **Secondary:*\\* Treemap, Icicle, Circle Packing\n- **Colors:*\\* Center to outer: darker to lighter. 15-20% lighter per level.\n- **Performance:*\\* Moderate\n- **Accessibility:** ⚠ Poor - provide hierarchy table alternative.\n- **Libraries:*\\* D3.js (d3-hierarchy), Recharts, ApexCharts\n- **Interactivity:*\\* Drilldown + Hover\n\n## Root Cause Analysis\n- **Best Chart:*\\* Decomposition Tree\n- **Secondary:*\\* Decision Tree, Flow Chart\n- **Colors:*\\* Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.\n- **Performance:*\\* Moderate (calculation heavy)\n- **Accessibility:** ✓ clear hierarchy. Allow keyboard navigation for nodes.\n- **Libraries:*\\* Power BI (native), React-Flow, Custom D3.js\n- **Interactivity:*\\* Drill + Expand\n\n## 3D Spatial Data\n- **Best Chart:*\\* 3D Scatter/Surface Plot\n- **Secondary:*\\* Volumetric Rendering, Point Cloud\n- **Colors:*\\* Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).\n- **Performance:** ❌ Heavy (WebGL required)\n- **Accessibility:** ❌ Poor - requires alternative 2D view or data table.\n- **Libraries:*\\* Three.js, Deck.gl, Plotly 3D\n- **Interactivity:*\\* Rotate + Zoom + VR\n\n## Real-Time Streaming\n- **Best Chart:*\\* Streaming Area Chart\n- **Secondary:*\\* Ticker Tape, Moving Gauge\n- **Colors:*\\* Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.\n- **Performance:*\\* Optimized (canvas/webgl)\n- **Accessibility:** ⚠ Flashing elements - provide pause button. High contrast.\n- **Libraries:*\\* Smoothed D3.js\n- **Interactivity:*\\* CanvasJS\n\n## Sentiment/Emotion\n- **Best Chart:*\\* Word Cloud with Sentiment\n- **Secondary:*\\* Sentiment Arc, Radar Chart\n- **Colors:*\\* Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.\n- **Performance:*\\* Good\n- **Accessibility:** ⚠ Word clouds poor for screen readers. Use list view.\n- **Libraries:*\\* D3-cloud, Highcharts, Nivo\n- **Interactivity:*\\* Hover + Filter\n\n## Process Mining\n- **Best Chart:*\\* Process Map / Graph\n- **Secondary:*\\* Directed Acyclic Graph (DAG), Petri Net\n- **Colors:*\\* Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444.\n- **Performance:*\\* Moderate to Heavy\n- **Accessibility:** ⚠ Complex graphs hard to navigate. Provide path summary.\n- **Libraries:*\\* React-Flow, Cytoscape.js, Recharts\n- **Interactivity:*\\* Drag + Node-Click",
-      "tags": ["charts", "data-visualization", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-font-pairings",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Font Pairings Reference (57 combinations)",
-      "severity": "suggestion",
-      "description": "# Font Pairings Reference\n\n## Classic Elegant\n- **Category:*\\* Serif + Sans\n- **Heading:*\\* Playfair Display\n- **Body:*\\* Inter\n- **Mood:*\\* elegant, luxury, sophisticated, timeless, premium, editorial\n- **Best for:*\\* Luxury brands, fashion, spa, beauty, editorial, magazines, high-end e-commerce\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { serif: ['Playfair Display', 'serif'], sans: ['Inter', 'sans-serif'] }`\n\n## Modern Professional\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Poppins\n- **Body:*\\* Open Sans\n- **Mood:*\\* modern, professional, clean, corporate, friendly, approachable\n- **Best for:*\\* SaaS, corporate sites, business apps, startups, professional services\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { heading: ['Poppins', 'sans-serif'], body: ['Open Sans', 'sans-serif'] }`\n\n## Tech Startup\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Space Grotesk\n- **Body:*\\* DM Sans\n- **Mood:*\\* tech, startup, modern, innovative, bold, futuristic\n- **Best for:*\\* Tech companies, startups, SaaS, developer tools, AI products\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['DM Sans', 'sans-serif'] }`\n\n## Editorial Classic\n- **Category:*\\* Serif + Serif\n- **Heading:*\\* Cormorant Garamond\n- **Body:*\\* Libre Baskerville\n- **Mood:*\\* editorial, classic, literary, traditional, refined, bookish\n- **Best for:*\\* Publishing, blogs, news sites, literary magazines, book covers\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');`\n- **Tailwind:** `fontFamily: { heading: ['Cormorant Garamond', 'serif'], body: ['Libre Baskerville', 'serif'] }`\n\n## Minimal Swiss\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Inter\n- **Body:*\\* Inter\n- **Mood:*\\* minimal, clean, swiss, functional, neutral, professional\n- **Best for:*\\* Dashboards, admin panels, documentation, enterprise apps, design systems\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { sans: ['Inter', 'sans-serif'] }`\n\n## Playful Creative\n- **Category:*\\* Display + Sans\n- **Heading:*\\* Fredoka\n- **Body:*\\* Nunito\n- **Mood:*\\* playful, friendly, fun, creative, warm, approachable\n- **Best for:*\\* Children's apps, educational, gaming, creative tools, entertainment\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { heading: ['Fredoka', 'sans-serif'], body: ['Nunito', 'sans-serif'] }`\n\n## Bold Statement\n- **Category:*\\* Display + Sans\n- **Heading:*\\* Bebas Neue\n- **Body:*\\* Source Sans 3\n- **Mood:*\\* bold, impactful, strong, dramatic, modern, headlines\n- **Best for:*\\* Marketing sites, portfolios, agencies, event pages, sports\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { display: ['Bebas Neue', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'] }`\n\n## Wellness Calm\n- **Category:*\\* Serif + Sans\n- **Heading:*\\* Lora\n- **Body:*\\* Raleway\n- **Mood:*\\* calm, wellness, health, relaxing, natural, organic\n- **Best for:*\\* Health apps, wellness, spa, meditation, yoga, organic brands\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { serif: ['Lora', 'serif'], sans: ['Raleway', 'sans-serif'] }`\n\n## Developer Mono\n- **Category:*\\* Mono + Sans\n- **Heading:*\\* JetBrains Mono\n- **Body:*\\* IBM Plex Sans\n- **Mood:*\\* code, developer, technical, precise, functional, hacker\n- **Best for:*\\* Developer tools, documentation, code editors, tech blogs, CLI apps\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { mono: ['JetBrains Mono', 'monospace'], sans: ['IBM Plex Sans', 'sans-serif'] }`\n\n## Retro Vintage\n- **Category:*\\* Display + Serif\n- **Heading:*\\* Abril Fatface\n- **Body:*\\* Merriweather\n- **Mood:*\\* retro, vintage, nostalgic, dramatic, decorative, bold\n- **Best for:*\\* Vintage brands, breweries, restaurants, creative portfolios, posters\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:wght@300;400;700&display=swap');`\n- **Tailwind:** `fontFamily: { display: ['Abril Fatface', 'serif'], body: ['Merriweather', 'serif'] }`\n\n## Geometric Modern\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Outfit\n- **Body:*\\* Work Sans\n- **Mood:*\\* geometric, modern, clean, balanced, contemporary, versatile\n- **Best for:*\\* General purpose, portfolios, agencies, modern brands, landing pages\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Work+Sans:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Work Sans', 'sans-serif'] }`\n\n## Luxury Serif\n- **Category:*\\* Serif + Sans\n- **Heading:*\\* Cormorant\n- **Body:*\\* Montserrat\n- **Mood:*\\* luxury, high-end, fashion, elegant, refined, premium\n- **Best for:*\\* Fashion brands, luxury e-commerce, jewelry, high-end services\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { serif: ['Cormorant', 'serif'], sans: ['Montserrat', 'sans-serif'] }`\n\n## Friendly SaaS\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Plus Jakarta Sans\n- **Body:*\\* Plus Jakarta Sans\n- **Mood:*\\* friendly, modern, saas, clean, approachable, professional\n- **Best for:*\\* SaaS products, web apps, dashboards, B2B, productivity tools\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] }`\n\n## News Editorial\n- **Category:*\\* Serif + Sans\n- **Heading:*\\* Newsreader\n- **Body:*\\* Roboto\n- **Mood:*\\* news, editorial, journalism, trustworthy, readable, informative\n- **Best for:*\\* News sites, blogs, magazines, journalism, content-heavy sites\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');`\n- **Tailwind:** `fontFamily: { serif: ['Newsreader', 'serif'], sans: ['Roboto', 'sans-serif'] }`\n\n## Handwritten Charm\n- **Category:*\\* Script + Sans\n- **Heading:*\\* Caveat\n- **Body:*\\* Quicksand\n- **Mood:*\\* handwritten, personal, friendly, casual, warm, charming\n- **Best for:*\\* Personal blogs, invitations, creative portfolios, lifestyle brands\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { script: ['Caveat', 'cursive'], sans: ['Quicksand', 'sans-serif'] }`\n\n## Corporate Trust\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Lexend\n- **Body:*\\* Source Sans 3\n- **Mood:*\\* corporate, trustworthy, accessible, readable, professional, clean\n- **Best for:*\\* Enterprise, government, healthcare, finance, accessibility-focused\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { heading: ['Lexend', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'] }`\n\n## Brutalist Raw\n- **Category:*\\* Mono + Mono\n- **Heading:*\\* Space Mono\n- **Body:*\\* Space Mono\n- **Mood:*\\* brutalist, raw, technical, monospace, minimal, stark\n- **Best for:*\\* Brutalist designs, developer portfolios, experimental, tech art\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');`\n- **Tailwind:** `fontFamily: { mono: ['Space Mono', 'monospace'] }`\n\n## Fashion Forward\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Syne\n- **Body:*\\* Manrope\n- **Mood:*\\* fashion, avant-garde, creative, bold, artistic, edgy\n- **Best for:*\\* Fashion brands, creative agencies, art galleries, design studios\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { heading: ['Syne', 'sans-serif'], body: ['Manrope', 'sans-serif'] }`\n\n## Soft Rounded\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Varela Round\n- **Body:*\\* Nunito Sans\n- **Mood:*\\* soft, rounded, friendly, approachable, warm, gentle\n- **Best for:*\\* Children's products, pet apps, friendly brands, wellness, soft UI\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Varela+Round&display=swap');`\n- **Tailwind:** `fontFamily: { heading: ['Varela Round', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'] }`\n\n## Premium Sans\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Satoshi\n- **Body:*\\* General Sans\n- **Mood:*\\* premium, modern, clean, sophisticated, versatile, balanced\n- **Best for:*\\* Premium brands, modern agencies, SaaS, portfolios, startups\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');`\n- **Tailwind:** `fontFamily: { sans: ['DM Sans', 'sans-serif'] }`\n\n## Vietnamese Friendly\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Be Vietnam Pro\n- **Body:*\\* Noto Sans\n- **Mood:*\\* vietnamese, international, readable, clean, multilingual, accessible\n- **Best for:*\\* Vietnamese sites, multilingual apps, international products\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { sans: ['Be Vietnam Pro', 'Noto Sans', 'sans-serif'] }`\n\n## Japanese Elegant\n- **Category:*\\* Serif + Sans\n- **Heading:*\\* Noto Serif JP\n- **Body:*\\* Noto Sans JP\n- **Mood:*\\* japanese, elegant, traditional, modern, multilingual, readable\n- **Best for:*\\* Japanese sites, Japanese restaurants, cultural sites, anime/manga\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { serif: ['Noto Serif JP', 'serif'], sans: ['Noto Sans JP', 'sans-serif'] }`\n\n## Korean Modern\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Noto Sans KR\n- **Body:*\\* Noto Sans KR\n- **Mood:*\\* korean, modern, clean, professional, multilingual, readable\n- **Best for:*\\* Korean sites, K-beauty, K-pop, Korean businesses, multilingual\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');`\n- **Tailwind:** `fontFamily: { sans: ['Noto Sans KR', 'sans-serif'] }`\n\n## Chinese Traditional\n- **Category:*\\* Serif + Sans\n- **Heading:*\\* Noto Serif TC\n- **Body:*\\* Noto Sans TC\n- **Mood:*\\* chinese, traditional, elegant, cultural, multilingual, readable\n- **Best for:*\\* Traditional Chinese sites, cultural content, Taiwan/Hong Kong markets\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { serif: ['Noto Serif TC', 'serif'], sans: ['Noto Sans TC', 'sans-serif'] }`\n\n## Chinese Simplified\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Noto Sans SC\n- **Body:*\\* Noto Sans SC\n- **Mood:*\\* chinese, simplified, modern, professional, multilingual, readable\n- **Best for:*\\* Simplified Chinese sites, mainland China market, business apps\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');`\n- **Tailwind:** `fontFamily: { sans: ['Noto Sans SC', 'sans-serif'] }`\n\n## Arabic Elegant\n- **Category:*\\* Serif + Sans\n- **Heading:*\\* Noto Naskh Arabic\n- **Body:*\\* Noto Sans Arabic\n- **Mood:*\\* arabic, elegant, traditional, cultural, RTL, readable\n- **Best for:*\\* Arabic sites, Middle East market, Islamic content, bilingual sites\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;700&display=swap');`\n- **Tailwind:** `fontFamily: { serif: ['Noto Naskh Arabic', 'serif'], sans: ['Noto Sans Arabic', 'sans-serif'] }`\n\n## Thai Modern\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Noto Sans Thai\n- **Body:*\\* Noto Sans Thai\n- **Mood:*\\* thai, modern, readable, clean, multilingual, accessible\n- **Best for:*\\* Thai sites, Southeast Asia, tourism, Thai restaurants\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;700&display=swap');`\n- **Tailwind:** `fontFamily: { sans: ['Noto Sans Thai', 'sans-serif'] }`\n\n## Hebrew Modern\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Noto Sans Hebrew\n- **Body:*\\* Noto Sans Hebrew\n- **Mood:*\\* hebrew, modern, RTL, clean, professional, readable\n- **Best for:*\\* Hebrew sites, Israeli market, Jewish content, bilingual sites\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;700&display=swap');`\n- **Tailwind:** `fontFamily: { sans: ['Noto Sans Hebrew', 'sans-serif'] }`\n\n## Legal Professional\n- **Category:*\\* Serif + Sans\n- **Heading:*\\* EB Garamond\n- **Body:*\\* Lato\n- **Mood:*\\* legal, professional, traditional, trustworthy, formal, authoritative\n- **Best for:*\\* Law firms, legal services, contracts, formal documents, government\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap');`\n- **Tailwind:** `fontFamily: { serif: ['EB Garamond', 'serif'], sans: ['Lato', 'sans-serif'] }`\n\n## Medical Clean\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Figtree\n- **Body:*\\* Noto Sans\n- **Mood:*\\* medical, clean, accessible, professional, healthcare, trustworthy\n- **Best for:*\\* Healthcare, medical clinics, pharma, health apps, accessibility\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;700&display=swap');`\n- **Tailwind:** `fontFamily: { heading: ['Figtree', 'sans-serif'], body: ['Noto Sans', 'sans-serif'] }`\n\n## Financial Trust\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* IBM Plex Sans\n- **Body:*\\* IBM Plex Sans\n- **Mood:*\\* financial, trustworthy, professional, corporate, banking, serious\n- **Best for:*\\* Banks, finance, insurance, investment, fintech, enterprise\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { sans: ['IBM Plex Sans', 'sans-serif'] }`\n\n## Real Estate Luxury\n- **Category:*\\* Serif + Sans\n- **Heading:*\\* Cinzel\n- **Body:*\\* Josefin Sans\n- **Mood:*\\* real estate, luxury, elegant, sophisticated, property, premium\n- **Best for:*\\* Real estate, luxury properties, architecture, interior design\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Josefin+Sans:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { serif: ['Cinzel', 'serif'], sans: ['Josefin Sans', 'sans-serif'] }`\n\n## Restaurant Menu\n- **Category:*\\* Serif + Sans\n- **Heading:*\\* Playfair Display SC\n- **Body:*\\* Karla\n- **Mood:*\\* restaurant, menu, culinary, elegant, foodie, hospitality\n- **Best for:*\\* Restaurants, cafes, food blogs, culinary, hospitality\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&family=Playfair+Display+SC:wght@400;700&display=swap');`\n- **Tailwind:** `fontFamily: { display: ['Playfair Display SC', 'serif'], sans: ['Karla', 'sans-serif'] }`\n\n## Art Deco\n- **Category:*\\* Display + Sans\n- **Heading:*\\* Poiret One\n- **Body:*\\* Didact Gothic\n- **Mood:*\\* art deco, vintage, 1920s, elegant, decorative, gatsby\n- **Best for:*\\* Vintage events, art deco themes, luxury hotels, classic cocktails\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Poiret+One&display=swap');`\n- **Tailwind:** `fontFamily: { display: ['Poiret One', 'sans-serif'], sans: ['Didact Gothic', 'sans-serif'] }`\n\n## Magazine Style\n- **Category:*\\* Serif + Sans\n- **Heading:*\\* Libre Bodoni\n- **Body:*\\* Public Sans\n- **Mood:*\\* magazine, editorial, publishing, refined, journalism, print\n- **Best for:*\\* Magazines, online publications, editorial content, journalism\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:wght@400;500;600;700&family=Public+Sans:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { serif: ['Libre Bodoni', 'serif'], sans: ['Public Sans', 'sans-serif'] }`\n\n## Crypto/Web3\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Orbitron\n- **Body:*\\* Exo 2\n- **Mood:*\\* crypto, web3, futuristic, tech, blockchain, digital\n- **Best for:*\\* Crypto platforms, NFT, blockchain, web3, futuristic tech\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { display: ['Orbitron', 'sans-serif'], body: ['Exo 2', 'sans-serif'] }`\n\n## Gaming Bold\n- **Category:*\\* Display + Sans\n- **Heading:*\\* Russo One\n- **Body:*\\* Chakra Petch\n- **Mood:*\\* gaming, bold, action, esports, competitive, energetic\n- **Best for:*\\* Gaming, esports, action games, competitive sports, entertainment\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Russo+One&display=swap');`\n- **Tailwind:** `fontFamily: { display: ['Russo One', 'sans-serif'], body: ['Chakra Petch', 'sans-serif'] }`\n\n## Indie/Craft\n- **Category:*\\* Display + Sans\n- **Heading:*\\* Amatic SC\n- **Body:*\\* Cabin\n- **Mood:*\\* indie, craft, handmade, artisan, organic, creative\n- **Best for:*\\* Craft brands, indie products, artisan, handmade, organic products\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Cabin:wght@400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { display: ['Amatic SC', 'sans-serif'], sans: ['Cabin', 'sans-serif'] }`\n\n## Startup Bold\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Clash Display\n- **Body:*\\* Satoshi\n- **Mood:*\\* startup, bold, modern, innovative, confident, dynamic\n- **Best for:*\\* Startups, pitch decks, product launches, bold brands\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Rubik', 'sans-serif'] }`\n\n## E-commerce Clean\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Rubik\n- **Body:*\\* Nunito Sans\n- **Mood:*\\* ecommerce, clean, shopping, product, retail, conversion\n- **Best for:*\\* E-commerce, online stores, product pages, retail, shopping\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { heading: ['Rubik', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'] }`\n\n## Academic/Research\n- **Category:*\\* Serif + Sans\n- **Heading:*\\* Crimson Pro\n- **Body:*\\* Atkinson Hyperlegible\n- **Mood:*\\* academic, research, scholarly, accessible, readable, educational\n- **Best for:*\\* Universities, research papers, academic journals, educational\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Crimson+Pro:wght@400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { serif: ['Crimson Pro', 'serif'], sans: ['Atkinson Hyperlegible', 'sans-serif'] }`\n\n## Dashboard Data\n- **Category:*\\* Mono + Sans\n- **Heading:*\\* Fira Code\n- **Body:*\\* Fira Sans\n- **Mood:*\\* dashboard, data, analytics, code, technical, precise\n- **Best for:*\\* Dashboards, analytics, data visualization, admin panels\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { mono: ['Fira Code', 'monospace'], sans: ['Fira Sans', 'sans-serif'] }`\n\n## Music/Entertainment\n- **Category:*\\* Display + Sans\n- **Heading:*\\* Righteous\n- **Body:*\\* Poppins\n- **Mood:*\\* music, entertainment, fun, energetic, bold, performance\n- **Best for:*\\* Music platforms, entertainment, events, festivals, performers\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Righteous&display=swap');`\n- **Tailwind:** `fontFamily: { display: ['Righteous', 'sans-serif'], sans: ['Poppins', 'sans-serif'] }`\n\n## Minimalist Portfolio\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Archivo\n- **Body:*\\* Space Grotesk\n- **Mood:*\\* minimal, portfolio, designer, creative, clean, artistic\n- **Best for:*\\* Design portfolios, creative professionals, minimalist brands\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['Archivo', 'sans-serif'] }`\n\n## Kids/Education\n- **Category:*\\* Display + Sans\n- **Heading:*\\* Baloo 2\n- **Body:*\\* Comic Neue\n- **Mood:*\\* kids, education, playful, friendly, colorful, learning\n- **Best for:*\\* Children's apps, educational games, kid-friendly content\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&family=Comic+Neue:wght@300;400;700&display=swap');`\n- **Tailwind:** `fontFamily: { display: ['Baloo 2', 'sans-serif'], sans: ['Comic Neue', 'sans-serif'] }`\n\n## Wedding/Romance\n- **Category:*\\* Script + Serif\n- **Heading:*\\* Great Vibes\n- **Body:*\\* Cormorant Infant\n- **Mood:*\\* wedding, romance, elegant, script, invitation, feminine\n- **Best for:*\\* Wedding sites, invitations, romantic brands, bridal\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300;400;500;600;700&family=Great+Vibes&display=swap');`\n- **Tailwind:** `fontFamily: { script: ['Great Vibes', 'cursive'], serif: ['Cormorant Infant', 'serif'] }`\n\n## Science/Tech\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Exo\n- **Body:*\\* Roboto Mono\n- **Mood:*\\* science, technology, research, data, futuristic, precise\n- **Best for:*\\* Science, research, tech documentation, data-heavy sites\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400;500;700&display=swap');`\n- **Tailwind:** `fontFamily: { sans: ['Exo', 'sans-serif'], mono: ['Roboto Mono', 'monospace'] }`\n\n## Accessibility First\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Atkinson Hyperlegible\n- **Body:*\\* Atkinson Hyperlegible\n- **Mood:*\\* accessible, readable, inclusive, WCAG, dyslexia-friendly, clear\n- **Best for:*\\* Accessibility-critical sites, government, healthcare, inclusive design\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');`\n- **Tailwind:** `fontFamily: { sans: ['Atkinson Hyperlegible', 'sans-serif'] }`\n\n## Sports/Fitness\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Barlow Condensed\n- **Body:*\\* Barlow\n- **Mood:*\\* sports, fitness, athletic, energetic, condensed, action\n- **Best for:*\\* Sports, fitness, gyms, athletic brands, competition\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Barlow:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { display: ['Barlow Condensed', 'sans-serif'], body: ['Barlow', 'sans-serif'] }`\n\n## Luxury Minimalist\n- **Category:*\\* Serif + Sans\n- **Heading:*\\* Bodoni Moda\n- **Body:*\\* Jost\n- **Mood:*\\* luxury, minimalist, high-end, sophisticated, refined, premium\n- **Best for:*\\* Luxury minimalist brands, high-end fashion, premium products\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;700&family=Jost:wght@300;400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { serif: ['Bodoni Moda', 'serif'], sans: ['Jost', 'sans-serif'] }`\n\n## Tech/HUD Mono\n- **Category:*\\* Mono + Mono\n- **Heading:*\\* Share Tech Mono\n- **Body:*\\* Fira Code\n- **Mood:*\\* tech, futuristic, hud, sci-fi, data, monospaced, precise\n- **Best for:*\\* Sci-fi interfaces, developer tools, cybersecurity, dashboards\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');`\n- **Tailwind:** `fontFamily: { hud: ['Share Tech Mono', 'monospace'], code: ['Fira Code', 'monospace'] }`\n\n## Pixel Retro\n- **Category:*\\* Display + Sans\n- **Heading:*\\* Press Start 2P\n- **Body:*\\* VT323\n- **Mood:*\\* pixel, retro, gaming, 8-bit, nostalgic, arcade\n- **Best for:*\\* Pixel art games, retro websites, creative portfolios\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');`\n- **Tailwind:** `fontFamily: { pixel: ['Press Start 2P', 'cursive'], terminal: ['VT323', 'monospace'] }`\n\n## Neubrutalist Bold\n- **Category:*\\* Display + Sans\n- **Heading:*\\* Lexend Mega\n- **Body:*\\* Public Sans\n- **Mood:*\\* bold, neubrutalist, loud, strong, geometric, quirky\n- **Best for:*\\* Neubrutalist designs, Gen Z brands, bold marketing\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@100..900&family=Public+Sans:wght@100..900&display=swap');`\n- **Tailwind:** `fontFamily: { mega: ['Lexend Mega', 'sans-serif'], body: ['Public Sans', 'sans-serif'] }`\n\n## Academic/Archival\n- **Category:*\\* Serif + Serif\n- **Heading:*\\* EB Garamond\n- **Body:*\\* Crimson Text\n- **Mood:*\\* academic, old-school, university, research, serious, traditional\n- **Best for:*\\* University sites, archives, research papers, history\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&family=EB+Garamond:wght@400;500;600;700;800&display=swap');`\n- **Tailwind:** `fontFamily: { classic: ['EB Garamond', 'serif'], text: ['Crimson Text', 'serif'] }`\n\n## Spatial Clear\n- **Category:*\\* Sans + Sans\n- **Heading:*\\* Inter\n- **Body:*\\* Inter\n- **Mood:*\\* spatial, legible, glass, system, clean, neutral\n- **Best for:*\\* Spatial computing, AR/VR, glassmorphism interfaces\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');`\n- **Tailwind:** `fontFamily: { sans: ['Inter', 'sans-serif'] }`\n\n## Kinetic Motion\n- **Category:*\\* Display + Mono\n- **Heading:*\\* Syncopate\n- **Body:*\\* Space Mono\n- **Mood:*\\* kinetic, motion, futuristic, speed, wide, tech\n- **Best for:*\\* Music festivals, automotive, high-energy brands\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syncopate:wght@400;700&display=swap');`\n- **Tailwind:** `fontFamily: { display: ['Syncopate', 'sans-serif'], mono: ['Space Mono', 'monospace'] }`\n\n## Gen Z Brutal\n- **Category:*\\* Display + Sans\n- **Heading:*\\* Anton\n- **Body:*\\* Epilogue\n- **Mood:*\\* brutal, loud, shouty, meme, internet, bold\n- **Best for:*\\* Gen Z marketing, streetwear, viral campaigns\n- **CSS Import:** `@import url('https://fonts.googleapis.com/css2?family=Anton&family=Epilogue:wght@400;500;600;700&display=swap');`\n- **Tailwind:** `fontFamily: { display: ['Anton', 'sans-serif'], body: ['Epilogue', 'sans-serif'] }`",
-      "tags": ["typography", "font-pairing", "design-inspiration", "google-fonts"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-landing-patterns",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Landing Page Patterns",
-      "severity": "suggestion",
-      "description": "# Landing Page Patterns\n\n## Hero + Features + CTA\n- **Keywords:*\\* hero, hero-centric, features, feature-rich, cta, call-to-action\n- **Section Order:*\\* 1. Hero with headline/image, 2. Value prop, 3. Key features (3-5), 4. CTA section, 5. Footer\n- **CTA Placement:*\\* Hero (sticky) + Bottom\n- **Color Strategy:*\\* Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color\n- **Effects:*\\* Hero parallax, feature card hover lift, CTA glow on hover\n- **Conversion:*\\* Deep CTA placement. Use contrasting color (at least 7:1 contrast ratio). Sticky navbar CTA.\n\n## Hero + Testimonials + CTA\n- **Keywords:*\\* hero, testimonials, social-proof, trust, reviews, cta\n- **Section Order:*\\* 1. Hero, 2. Problem statement, 3. Solution overview, 4. Testimonials carousel, 5. CTA\n- **CTA Placement:*\\* Hero (sticky) + Post-testimonials\n- **Color Strategy:*\\* Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant\n- **Effects:*\\* Testimonial carousel slide animations, quote marks animations, avatar fade-in\n- **Conversion:*\\* Social proof before CTA. Use 3-5 testimonials. Include photo + name + role. CTA after social proof.\n\n## Product Demo + Features\n- **Keywords:*\\* demo, product-demo, features, showcase, interactive\n- **Section Order:*\\* 1. Hero, 2. Product video/mockup (center), 3. Feature breakdown per section, 4. Comparison (optional), 5. CTA\n- **CTA Placement:*\\* Video center + CTA right/bottom\n- **Color Strategy:*\\* Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222\n- **Effects:*\\* Video play button pulse, feature scroll reveals, demo interaction highlights\n- **Conversion:*\\* Embedded product demo increases engagement. Use interactive mockup if possible. Auto-play video muted.\n\n## Minimal Single Column\n- **Keywords:*\\* minimal, simple, direct, single-column, clean\n- **Section Order:*\\* 1. Hero headline, 2. Short description, 3. Benefit bullets (3 max), 4. CTA, 5. Footer\n- **CTA Placement:*\\* Center, large CTA button\n- **Color Strategy:*\\* Minimalist: Brand + white #FFFFFF + accent. Buttons: High contrast 7:1+. Text: Black/Dark grey\n- **Effects:*\\* Minimal hover effects. Smooth scroll. CTA scale on hover (subtle)\n- **Conversion:*\\* Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.\n\n## Funnel (3-Step Conversion)\n- **Keywords:*\\* funnel, conversion, steps, wizard, onboarding\n- **Section Order:*\\* 1. Hero, 2. Step 1 (problem), 3. Step 2 (solution), 4. Step 3 (action), 5. CTA progression\n- **CTA Placement:*\\* Each step: mini-CTA. Final: main CTA\n- **Color Strategy:*\\* Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color\n- **Effects:*\\* Step number animations, progress bar fill, step transitions smooth scroll\n- **Conversion:*\\* Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs.\n\n## Comparison Table + CTA\n- **Keywords:*\\* comparison, table, compare, versus, cta\n- **Section Order:*\\* 1. Hero, 2. Problem intro, 3. Comparison table (product vs competitors), 4. Pricing (optional), 5. CTA\n- **CTA Placement:*\\* Table: Right column. CTA: Below table\n- **Color Strategy:*\\* Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark\n- **Effects:*\\* Table row hover highlight, price toggle animations, feature checkmark animations\n- **Conversion:*\\* Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row.\n\n## Lead Magnet + Form\n- **Keywords:*\\* lead, form, signup, capture, email, magnet\n- **Section Order:*\\* 1. Hero (benefit headline), 2. Lead magnet preview (ebook cover, checklist, etc), 3. Form (minimal fields), 4. CTA submit\n- **CTA Placement:*\\* Form CTA: Submit button\n- **Color Strategy:*\\* Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color\n- **Effects:*\\* Form focus state animations, input validation animations, success confirmation animation\n- **Conversion:*\\* Form fields ≤ 3 for best conversion. Offer valuable lead magnet preview. Show form submission progress.\n\n## Pricing Page + CTA\n- **Keywords:*\\* pricing, plans, tiers, comparison, cta\n- **Section Order:*\\* 1. Hero (pricing headline), 2. Price comparison cards, 3. Feature comparison table, 4. FAQ section, 5. Final CTA\n- **CTA Placement:*\\* Each card: CTA button. Sticky CTA in nav\n- **Color Strategy:*\\* Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow\n- **Effects:*\\* Price toggle animation (monthly/yearly), card comparison highlight, FAQ accordion open/close\n- **Conversion:*\\* Recommend starter plan (pre-select/highlight). Show annual discount (20-30%). Use FAQs to address concerns.\n\n## Video-First Hero\n- **Keywords:*\\* video, hero, media, visual, engaging\n- **Section Order:*\\* 1. Hero with video background, 2. Key features overlay, 3. Benefits section, 4. CTA\n- **CTA Placement:*\\* Overlay on video (center/bottom) + Bottom section\n- **Color Strategy:*\\* Dark overlay 60% on video. Brand accent for CTA. White text on dark.\n- **Effects:*\\* Video autoplay muted, parallax scroll, text fade-in on scroll\n- **Conversion:*\\* 86% higher engagement with video. Add captions for accessibility. Compress video for performance.\n\n## Scroll-Triggered Storytelling\n- **Keywords:*\\* storytelling, scroll, narrative, story, immersive\n- **Section Order:*\\* 1. Intro hook, 2. Chapter 1 (problem), 3. Chapter 2 (journey), 4. Chapter 3 (solution), 5. Climax CTA\n- **CTA Placement:*\\* End of each chapter (mini) + Final climax CTA\n- **Color Strategy:*\\* Progressive reveal. Each chapter has distinct color. Building intensity.\n- **Effects:*\\* ScrollTrigger animations, parallax layers, progressive disclosure, chapter transitions\n- **Conversion:*\\* Narrative increases time-on-page 3x. Use progress indicator. Mobile: simplify animations.\n\n## AI Personalization Landing\n- **Keywords:*\\* ai, personalization, smart, recommendation, dynamic\n- **Section Order:*\\* 1. Dynamic hero (personalized), 2. Relevant features, 3. Tailored testimonials, 4. Smart CTA\n- **CTA Placement:*\\* Context-aware placement based on user segment\n- **Color Strategy:*\\* Adaptive based on user data. A/B test color variations per segment.\n- **Effects:*\\* Dynamic content swap, fade transitions, personalized product recommendations\n- **Conversion:*\\* 20%+ conversion with personalization. Requires analytics integration. Fallback for new users.\n\n## Waitlist/Coming Soon\n- **Keywords:*\\* waitlist, coming-soon, launch, early-access, notify\n- **Section Order:*\\* 1. Hero with countdown, 2. Product teaser/preview, 3. Email capture form, 4. Social proof (waitlist count)\n- **CTA Placement:*\\* Email form prominent (above fold) + Sticky form on scroll\n- **Color Strategy:*\\* Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.\n- **Effects:*\\* Countdown timer animation, email validation feedback, success confetti, social share buttons\n- **Conversion:*\\* Scarcity + exclusivity. Show waitlist count. Early access benefits. Referral program.\n\n## Comparison Table Focus\n- **Keywords:*\\* comparison, table, versus, compare, features\n- **Section Order:*\\* 1. Hero (problem statement), 2. Comparison matrix (you vs competitors), 3. Feature deep-dive, 4. Winner CTA\n- **CTA Placement:*\\* After comparison table (highlighted row) + Bottom\n- **Color Strategy:*\\* Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.\n- **Effects:*\\* Table row hover highlight, feature checkmark animations, sticky comparison header\n- **Conversion:*\\* Show value vs competitors. 35% higher conversion. Be factual. Include pricing if favorable.\n\n## Pricing-Focused Landing\n- **Keywords:*\\* pricing, price, cost, plans, subscription\n- **Section Order:*\\* 1. Hero (value proposition), 2. Pricing cards (3 tiers), 3. Feature comparison, 4. FAQ, 5. Final CTA\n- **CTA Placement:*\\* Each pricing card + Sticky CTA in nav + Bottom\n- **Color Strategy:*\\* Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.\n- **Effects:*\\* Price toggle monthly/annual animation, card hover lift, FAQ accordion smooth open\n- **Conversion:*\\* Annual discount 20-30%. Recommend mid-tier (most popular badge). Address objections in FAQ.\n\n## App Store Style Landing\n- **Keywords:*\\* app, mobile, download, store, install\n- **Section Order:*\\* 1. Hero with device mockup, 2. Screenshots carousel, 3. Features with icons, 4. Reviews/ratings, 5. Download CTAs\n- **CTA Placement:*\\* Download buttons prominent (App Store + Play Store) throughout\n- **Color Strategy:*\\* Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.\n- **Effects:*\\* Device mockup rotations, screenshot slider, star rating animations, download button pulse\n- **Conversion:*\\* Show real screenshots. Include ratings (4.5+ stars). QR code for mobile. Platform-specific CTAs.\n\n## FAQ/Documentation Landing\n- **Keywords:*\\* faq, documentation, help, support, questions\n- **Section Order:*\\* 1. Hero with search bar, 2. Popular categories, 3. FAQ accordion, 4. Contact/support CTA\n- **CTA Placement:*\\* Search bar prominent + Contact CTA for unresolved questions\n- **Color Strategy:*\\* Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.\n- **Effects:*\\* Search autocomplete, smooth accordion open/close, category hover, helpful feedback buttons\n- **Conversion:*\\* Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.\n\n## Immersive/Interactive Experience\n- **Keywords:*\\* immersive, interactive, experience, 3d, animation\n- **Section Order:*\\* 1. Full-screen interactive element, 2. Guided product tour, 3. Key benefits revealed, 4. CTA after completion\n- **CTA Placement:*\\* After interaction complete + Skip option for impatient users\n- **Color Strategy:*\\* Immersive experience colors. Dark background for focus. Highlight interactive elements.\n- **Effects:*\\* WebGL, 3D interactions, gamification elements, progress indicators, reward animations\n- **Conversion:*\\* 40% higher engagement. Performance trade-off. Provide skip option. Mobile fallback essential.\n\n## Event/Conference Landing\n- **Keywords:*\\* event, conference, meetup, registration, schedule\n- **Section Order:*\\* 1. Hero (date/location/countdown), 2. Speakers grid, 3. Agenda/schedule, 4. Sponsors, 5. Register CTA\n- **CTA Placement:*\\* Register CTA sticky + After speakers + Bottom\n- **Color Strategy:*\\* Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.\n- **Effects:*\\* Countdown timer, speaker hover cards with bio, agenda tabs, early bird countdown\n- **Conversion:*\\* Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts.\n\n## Product Review/Ratings Focused\n- **Keywords:*\\* reviews, ratings, testimonials, social-proof, stars\n- **Section Order:*\\* 1. Hero (product + aggregate rating), 2. Rating breakdown, 3. Individual reviews, 4. Buy/CTA\n- **CTA Placement:*\\* After reviews summary + Buy button alongside reviews\n- **Color Strategy:*\\* Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.\n- **Effects:*\\* Star fill animations, review filtering, helpful vote interactions, photo lightbox\n- **Conversion:*\\* User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.\n\n## Community/Forum Landing\n- **Keywords:*\\* community, forum, social, members, discussion\n- **Section Order:*\\* 1. Hero (community value prop), 2. Popular topics/categories, 3. Active members showcase, 4. Join CTA\n- **CTA Placement:*\\* Join button prominent + After member showcase\n- **Color Strategy:*\\* Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.\n- **Effects:*\\* Member avatars animation, activity feed live updates, topic hover previews, join success celebration\n- **Conversion:*\\* Show active community (member count, posts today). Highlight benefits. Preview content. Easy onboarding.\n\n## Before-After Transformation\n- **Keywords:*\\* before-after, transformation, results, comparison\n- **Section Order:*\\* 1. Hero (problem state), 2. Transformation slider/comparison, 3. How it works, 4. Results CTA\n- **CTA Placement:*\\* After transformation reveal + Bottom\n- **Color Strategy:*\\* Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.\n- **Effects:*\\* Slider comparison interaction, before/after reveal animations, result counters, testimonial videos\n- **Conversion:*\\* Visual proof of value. 45% higher conversion. Real results. Specific metrics. Guarantee offer.\n\n## Marketplace / Directory\n- **Keywords:*\\* marketplace, directory, search, listing\n- **Section Order:*\\* 1. Hero (Search focused), 2. Categories, 3. Featured Listings, 4. Trust/Safety, 5. CTA (Become a host/seller)\n- **CTA Placement:*\\* Hero Search Bar + Navbar 'List your item'\n- **Color Strategy:*\\* Search: High contrast. Categories: Visual icons. Trust: Blue/Green.\n- **Effects:*\\* Search autocomplete animation\n- **Conversion:*\\* map hover pins,  card carousel, Search bar is the CTA. Reduce friction to search. Popular searches suggestions.\n\n## Newsletter / Content First\n- **Keywords:*\\* newsletter, content, writer, blog, subscribe\n- **Section Order:*\\* 1. Hero (Value Prop + Form), 2. Recent Issues/Archives, 3. Social Proof (Subscriber count), 4. About Author\n- **CTA Placement:*\\* Hero inline form + Sticky header form\n- **Color Strategy:*\\* Minimalist. Paper-like background. Text focus. Accent color for Subscribe.\n- **Effects:*\\* Text highlight animations\n- **Conversion:*\\* typewriter effect,  subtle fade-in, Single field form (Email only). Show 'Join X, 000 readers'. Read sample link.\n\n## Webinar Registration\n- **Keywords:*\\* webinar, registration, event, training, live\n- **Section Order:*\\* 1. Hero (Topic + Timer + Form), 2. What you'll learn, 3. Speaker Bio, 4. Urgency/Bonuses, 5. Form (again)\n- **CTA Placement:*\\* Hero (Right side form) + Bottom anchor\n- **Color Strategy:*\\* Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.\n- **Effects:*\\* Countdown timer\n- **Conversion:*\\* speaker avatar float,  urgent ticker, Limited seats logic. 'Live' indicator. Auto-fill timezone.\n\n## Enterprise Gateway\n- **Keywords:*\\* enterprise, corporate, gateway, solutions, portal\n- **Section Order:*\\* 1. Hero (Video/Mission), 2. Solutions by Industry, 3. Solutions by Role, 4. Client Logos, 5. Contact Sales\n- **CTA Placement:*\\* Contact Sales (Primary) + Login (Secondary)\n- **Color Strategy:*\\* Corporate: Navy/Grey. High integrity. Conservative accents.\n- **Effects:*\\* Slow video background\n- **Conversion:*\\* logo carousel,  tab switching for industries, Path selection (I am a...). Mega menu navigation. Trust signals prominent.\n\n## Portfolio Grid\n- **Keywords:*\\* portfolio, grid, showcase, gallery, masonry\n- **Section Order:*\\* 1. Hero (Name/Role), 2. Project Grid (Masonry), 3. About/Philosophy, 4. Contact\n- **CTA Placement:*\\* Project Card Hover + Footer Contact\n- **Color Strategy:*\\* Neutral background (let work shine). Text: Black/White. Accent: Minimal.\n- **Effects:*\\* Image lazy load reveal\n- **Conversion:*\\* hover overlay info,  lightbox view, Visuals first. Filter by category. Fast loading essential.\n\n## Horizontal Scroll Journey\n- **Keywords:*\\* horizontal, scroll, journey, gallery, storytelling, panoramic\n- **Section Order:*\\* 1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer\n- **CTA Placement:*\\* Floating Sticky CTA or End of Horizontal Track\n- **Color Strategy:*\\* Continuous palette transition. Chapter colors. Progress bar #000000.\n- **Effects:*\\* Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator\n- **Conversion:*\\* Immersive product discovery. High engagement. Keep navigation visible.\n\n## Bento Grid Showcase\n- **Keywords:*\\* bento\n- **Section Order:*\\* grid\n- **CTA Placement:*\\* features\n- **Color Strategy:*\\* modular\n- **Effects:*\\* apple-style\n- **Conversion:*\\* showcase\n\n## Interactive 3D Configurator\n- **Keywords:*\\* 3d\n- **Section Order:*\\* configurator\n- **CTA Placement:*\\* customizer\n- **Color Strategy:*\\* interactive\n- **Effects:*\\* product\n- **Conversion:*\\* 1. Hero (Configurator)\n\n## AI-Driven Dynamic Landing\n- **Keywords:*\\* ai\n- **Section Order:*\\* dynamic\n- **CTA Placement:*\\* personalized\n- **Color Strategy:*\\* adaptive\n- **Effects:*\\* generative\n- **Conversion:*\\* 1. Prompt/Input Hero",
-      "tags": ["landing-page", "layout", "conversion", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-agriculture-farm-tech",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Agriculture/Farm Tech",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Agriculture/Farm Tech\n\n## Agriculture/Farm Tech\n\n| Role | Hex |\n|------|-----|\n| Primary | #15803D |\n| Secondary | #22C55E |\n| CTA | #CA8A04 |\n| Background | #F0FDF4 |\n| Text | #14532D |\n| Border | #BBF7D0 |\n\n*Earth green + harvest gold*",
-      "tags": ["color-palette", "agriculture-farm-tech", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-ai-chatbot-platform",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for AI/Chatbot Platform",
-      "severity": "suggestion",
-      "description": "# Color Palettes: AI/Chatbot Platform\n\n## AI/Chatbot Platform\n\n| Role | Hex |\n|------|-----|\n| Primary | #7C3AED |\n| Secondary | #A78BFA |\n| CTA | #06B6D4 |\n| Background | #FAF5FF |\n| Text | #1E1B4B |\n| Border | #DDD6FE |\n\n*AI purple + cyan interactions*",
-      "tags": ["color-palette", "ai-chatbot-platform", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-airline",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Airline",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Airline\n\n## Airline\n\n| Role | Hex |\n|------|-----|\n| Primary | #1E3A8A |\n| Secondary | #3B82F6 |\n| CTA | #F97316 |\n| Background | #EFF6FF |\n| Text | #1E40AF |\n| Border | #BFDBFE |\n\n*Sky blue + booking orange*",
-      "tags": ["color-palette", "airline", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-analytics-dashboard",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Analytics Dashboard",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Analytics Dashboard\n\n## Analytics Dashboard\n\n| Role | Hex |\n|------|-----|\n| Primary | #1E40AF |\n| Secondary | #3B82F6 |\n| CTA | #F59E0B |\n| Background | #F8FAFC |\n| Text | #1E3A8A |\n| Border | #DBEAFE |\n\n*Blue data + amber highlights*",
-      "tags": ["color-palette", "analytics-dashboard", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-architecture-interior",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Architecture / Interior",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Architecture / Interior\n\n## Architecture / Interior\n\n| Role | Hex |\n|------|-----|\n| Primary | #171717 |\n| Secondary | #404040 |\n| CTA | #D4AF37 |\n| Background | #FFFFFF |\n| Text | #171717 |\n| Border | #E5E5E5 |\n\n*Minimal black + accent gold*",
-      "tags": ["color-palette", "architecture-interior", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-automotive-car-dealership",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Automotive/Car Dealership",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Automotive/Car Dealership\n\n## Automotive/Car Dealership\n\n| Role | Hex |\n|------|-----|\n| Primary | #1E293B |\n| Secondary | #334155 |\n| CTA | #DC2626 |\n| Background | #F8FAFC |\n| Text | #0F172A |\n| Border | #E2E8F0 |\n\n*Premium dark + action red*",
-      "tags": ["color-palette", "automotive-car-dealership", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-autonomous-systems",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Autonomous Systems",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Autonomous Systems\n\n## Autonomous Systems\n\n| Role | Hex |\n|------|-----|\n| Primary | #00FF41 |\n| Secondary | #008F11 |\n| CTA | #FF3333 |\n| Background | #0D1117 |\n| Text | #E6EDF3 |\n| Border | #30363D |\n\n*Terminal green + alert red*",
-      "tags": ["color-palette", "autonomous-systems", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-b2b-service",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for B2B Service",
-      "severity": "suggestion",
-      "description": "# Color Palettes: B2B Service\n\n## B2B Service\n\n| Role | Hex |\n|------|-----|\n| Primary | #0F172A |\n| Secondary | #334155 |\n| CTA | #0369A1 |\n| Background | #F8FAFC |\n| Text | #020617 |\n| Border | #E2E8F0 |\n\n*Professional navy + blue CTA*",
-      "tags": ["color-palette", "b2b-service", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-bakery-cafe",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Bakery/Cafe",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Bakery/Cafe\n\n## Bakery/Cafe\n\n| Role | Hex |\n|------|-----|\n| Primary | #92400E |\n| Secondary | #B45309 |\n| CTA | #F8FAFC |\n| Background | #FEF3C7 |\n| Text | #78350F |\n| Border | #FDE68A |\n\n*Warm brown + cream white*",
-      "tags": ["color-palette", "bakery-cafe", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-banking-traditional-finance",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Banking/Traditional Finance",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Banking/Traditional Finance\n\n## Banking/Traditional Finance\n\n| Role | Hex |\n|------|-----|\n| Primary | #0F172A |\n| Secondary | #1E3A8A |\n| CTA | #CA8A04 |\n| Background | #F8FAFC |\n| Text | #020617 |\n| Border | #E2E8F0 |\n\n*Trust navy + premium gold*",
-      "tags": ["color-palette", "banking-traditional-finance", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-beauty-spa-wellness-service",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Beauty/Spa/Wellness Service",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Beauty/Spa/Wellness Service\n\n## Beauty/Spa/Wellness Service\n\n| Role | Hex |\n|------|-----|\n| Primary | #EC4899 |\n| Secondary | #F9A8D4 |\n| CTA | #8B5CF6 |\n| Background | #FDF2F8 |\n| Text | #831843 |\n| Border | #FBCFE8 |\n\n*Soft pink + lavender luxury*",
-      "tags": ["color-palette", "beauty-spa-wellness-service", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-biohacking-longevity",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Biohacking / Longevity",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Biohacking / Longevity\n\n## Biohacking / Longevity\n\n| Role | Hex |\n|------|-----|\n| Primary | #FF4D4D |\n| Secondary | #4D94FF |\n| CTA | #00E676 |\n| Background | #F5F5F7 |\n| Text | #1C1C1E |\n| Border | #E5E5EA |\n\n*Bio red/blue + vitality green*",
-      "tags": ["color-palette", "biohacking-longevity", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-biotech-life-sciences",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Biotech / Life Sciences",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Biotech / Life Sciences\n\n## Biotech / Life Sciences\n\n| Role | Hex |\n|------|-----|\n| Primary | #0EA5E9 |\n| Secondary | #0284C7 |\n| CTA | #10B981 |\n| Background | #F0F9FF |\n| Text | #0C4A6E |\n| Border | #BAE6FD |\n\n*DNA blue + life green*",
-      "tags": ["color-palette", "biotech-life-sciences", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-brewery-winery",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Brewery/Winery",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Brewery/Winery\n\n## Brewery/Winery\n\n| Role | Hex |\n|------|-----|\n| Primary | #7C2D12 |\n| Secondary | #B91C1C |\n| CTA | #CA8A04 |\n| Background | #FEF2F2 |\n| Text | #450A0A |\n| Border | #FECACA |\n\n*Deep burgundy + craft gold*",
-      "tags": ["color-palette", "brewery-winery", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-childcare-daycare",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Childcare/Daycare",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Childcare/Daycare\n\n## Childcare/Daycare\n\n| Role | Hex |\n|------|-----|\n| Primary | #F472B6 |\n| Secondary | #FBCFE8 |\n| CTA | #22C55E |\n| Background | #FDF2F8 |\n| Text | #9D174D |\n| Border | #FCE7F3 |\n\n*Soft pink + safe green*",
-      "tags": ["color-palette", "childcare-daycare", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-church-religious-organization",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Church/Religious Organization",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Church/Religious Organization\n\n## Church/Religious Organization\n\n| Role | Hex |\n|------|-----|\n| Primary | #7C3AED |\n| Secondary | #A78BFA |\n| CTA | #CA8A04 |\n| Background | #FAF5FF |\n| Text | #4C1D95 |\n| Border | #DDD6FE |\n\n*Spiritual purple + warm gold*",
-      "tags": ["color-palette", "church-religious-organization", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-cleaning-service",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Cleaning Service",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Cleaning Service\n\n## Cleaning Service\n\n| Role | Hex |\n|------|-----|\n| Primary | #0891B2 |\n| Secondary | #22D3EE |\n| CTA | #22C55E |\n| Background | #ECFEFF |\n| Text | #164E63 |\n| Border | #A5F3FC |\n\n*Fresh cyan + clean green*",
-      "tags": ["color-palette", "cleaning-service", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-climate-tech",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Climate Tech",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Climate Tech\n\n## Climate Tech\n\n| Role | Hex |\n|------|-----|\n| Primary | #059669 |\n| Secondary | #10B981 |\n| CTA | #FBBF24 |\n| Background | #ECFDF5 |\n| Text | #064E3B |\n| Border | #A7F3D0 |\n\n*Nature green + solar gold*",
-      "tags": ["color-palette", "climate-tech", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-coding-bootcamp",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Coding Bootcamp",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Coding Bootcamp\n\n## Coding Bootcamp\n\n| Role | Hex |\n|------|-----|\n| Primary | #0F172A |\n| Secondary | #1E293B |\n| CTA | #22C55E |\n| Background | #020617 |\n| Text | #F8FAFC |\n| Border | #334155 |\n\n*Terminal dark + success green*",
-      "tags": ["color-palette", "coding-bootcamp", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-coffee-shop",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Coffee Shop",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Coffee Shop\n\n## Coffee Shop\n\n| Role | Hex |\n|------|-----|\n| Primary | #78350F |\n| Secondary | #92400E |\n| CTA | #FBBF24 |\n| Background | #FEF3C7 |\n| Text | #451A03 |\n| Border | #FDE68A |\n\n*Coffee brown + warm gold*",
-      "tags": ["color-palette", "coffee-shop", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-conference-webinar-platform",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Conference/Webinar Platform",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Conference/Webinar Platform\n\n## Conference/Webinar Platform\n\n| Role | Hex |\n|------|-----|\n| Primary | #1E40AF |\n| Secondary | #3B82F6 |\n| CTA | #22C55E |\n| Background | #EFF6FF |\n| Text | #1E3A8A |\n| Border | #BFDBFE |\n\n*Professional blue + join green*",
-      "tags": ["color-palette", "conference-webinar-platform", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-construction-architecture",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Construction/Architecture",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Construction/Architecture\n\n## Construction/Architecture\n\n| Role | Hex |\n|------|-----|\n| Primary | #64748B |\n| Secondary | #94A3B8 |\n| CTA | #F97316 |\n| Background | #F8FAFC |\n| Text | #334155 |\n| Border | #E2E8F0 |\n\n*Industrial grey + safety orange*",
-      "tags": ["color-palette", "construction-architecture", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-consulting-firm",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Consulting Firm",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Consulting Firm\n\n## Consulting Firm\n\n| Role | Hex |\n|------|-----|\n| Primary | #0F172A |\n| Secondary | #334155 |\n| CTA | #CA8A04 |\n| Background | #F8FAFC |\n| Text | #020617 |\n| Border | #E2E8F0 |\n\n*Authority navy + premium gold*",
-      "tags": ["color-palette", "consulting-firm", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-coworking-space",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Coworking Space",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Coworking Space\n\n## Coworking Space\n\n| Role | Hex |\n|------|-----|\n| Primary | #F59E0B |\n| Secondary | #FBBF24 |\n| CTA | #2563EB |\n| Background | #FFFBEB |\n| Text | #78350F |\n| Border | #FDE68A |\n\n*Energetic amber + booking blue*",
-      "tags": ["color-palette", "coworking-space", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-creative-agency",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Creative Agency",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Creative Agency\n\n## Creative Agency\n\n| Role | Hex |\n|------|-----|\n| Primary | #EC4899 |\n| Secondary | #F472B6 |\n| CTA | #06B6D4 |\n| Background | #FDF2F8 |\n| Text | #831843 |\n| Border | #FBCFE8 |\n\n*Bold pink + cyan accent*",
-      "tags": ["color-palette", "creative-agency", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-creator-economy-platform",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Creator Economy Platform",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Creator Economy Platform\n\n## Creator Economy Platform\n\n| Role | Hex |\n|------|-----|\n| Primary | #EC4899 |\n| Secondary | #F472B6 |\n| CTA | #F97316 |\n| Background | #FDF2F8 |\n| Text | #831843 |\n| Border | #FBCFE8 |\n\n*Creator pink + engagement orange*",
-      "tags": ["color-palette", "creator-economy-platform", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-cybersecurity-platform",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Cybersecurity Platform",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Cybersecurity Platform\n\n## Cybersecurity Platform\n\n| Role | Hex |\n|------|-----|\n| Primary | #00FF41 |\n| Secondary | #0D0D0D |\n| CTA | #FF3333 |\n| Background | #000000 |\n| Text | #E0E0E0 |\n| Border | #1F1F1F |\n\n*Matrix green + alert red*",
-      "tags": ["color-palette", "cybersecurity-platform", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-dating-app",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Dating App",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Dating App\n\n## Dating App\n\n| Role | Hex |\n|------|-----|\n| Primary | #E11D48 |\n| Secondary | #FB7185 |\n| CTA | #F97316 |\n| Background | #FFF1F2 |\n| Text | #881337 |\n| Border | #FECDD3 |\n\n*Romantic rose + warm orange*",
-      "tags": ["color-palette", "dating-app", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-dental-practice",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Dental Practice",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Dental Practice\n\n## Dental Practice\n\n| Role | Hex |\n|------|-----|\n| Primary | #0EA5E9 |\n| Secondary | #38BDF8 |\n| CTA | #FBBF24 |\n| Background | #F0F9FF |\n| Text | #0C4A6E |\n| Border | #BAE6FD |\n\n*Fresh blue + smile yellow*",
-      "tags": ["color-palette", "dental-practice", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-design-system-component-library",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Design System/Component Library",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Design System/Component Library\n\n## Design System/Component Library\n\n| Role | Hex |\n|------|-----|\n| Primary | #4F46E5 |\n| Secondary | #6366F1 |\n| CTA | #F97316 |\n| Background | #EEF2FF |\n| Text | #312E81 |\n| Border | #C7D2FE |\n\n*Indigo brand + doc hierarchy*",
-      "tags": ["color-palette", "design-system-component-library", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-developer-tool-ide",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Developer Tool / IDE",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Developer Tool / IDE\n\n## Developer Tool / IDE\n\n| Role | Hex |\n|------|-----|\n| Primary | #1E293B |\n| Secondary | #334155 |\n| CTA | #22C55E |\n| Background | #0F172A |\n| Text | #F8FAFC |\n| Border | #475569 |\n\n*Code dark + run green*",
-      "tags": ["color-palette", "developer-tool-ide", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-digital-products-downloads",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Digital Products/Downloads",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Digital Products/Downloads\n\n## Digital Products/Downloads\n\n| Role | Hex |\n|------|-----|\n| Primary | #6366F1 |\n| Secondary | #818CF8 |\n| CTA | #22C55E |\n| Background | #EEF2FF |\n| Text | #312E81 |\n| Border | #C7D2FE |\n\n*Digital indigo + buy green*",
-      "tags": ["color-palette", "digital-products-downloads", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-e-commerce-luxury",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for E-commerce Luxury",
-      "severity": "suggestion",
-      "description": "# Color Palettes: E-commerce Luxury\n\n## E-commerce Luxury\n\n| Role | Hex |\n|------|-----|\n| Primary | #1C1917 |\n| Secondary | #44403C |\n| CTA | #CA8A04 |\n| Background | #FAFAF9 |\n| Text | #0C0A09 |\n| Border | #D6D3D1 |\n\n*Premium dark + gold accent*",
-      "tags": ["color-palette", "e-commerce-luxury", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-e-commerce",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for E-commerce",
-      "severity": "suggestion",
-      "description": "# Color Palettes: E-commerce\n\n## E-commerce\n\n| Role | Hex |\n|------|-----|\n| Primary | #059669 |\n| Secondary | #10B981 |\n| CTA | #F97316 |\n| Background | #ECFDF5 |\n| Text | #064E3B |\n| Border | #A7F3D0 |\n\n*Success green + urgency orange*",
-      "tags": ["color-palette", "e-commerce", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-educational-app",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Educational App",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Educational App\n\n## Educational App\n\n| Role | Hex |\n|------|-----|\n| Primary | #4F46E5 |\n| Secondary | #818CF8 |\n| CTA | #F97316 |\n| Background | #EEF2FF |\n| Text | #1E1B4B |\n| Border | #C7D2FE |\n\n*Playful indigo + energetic orange*",
-      "tags": ["color-palette", "educational-app", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-ev-charging-ecosystem",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for EV/Charging Ecosystem",
-      "severity": "suggestion",
-      "description": "# Color Palettes: EV/Charging Ecosystem\n\n## EV/Charging Ecosystem\n\n| Role | Hex |\n|------|-----|\n| Primary | #0891B2 |\n| Secondary | #22D3EE |\n| CTA | #22C55E |\n| Background | #ECFEFF |\n| Text | #164E63 |\n| Border | #A5F3FC |\n\n*Electric cyan + eco green*",
-      "tags": ["color-palette", "ev-charging-ecosystem", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-event-management",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Event Management",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Event Management\n\n## Event Management\n\n| Role | Hex |\n|------|-----|\n| Primary | #7C3AED |\n| Secondary | #A78BFA |\n| CTA | #F97316 |\n| Background | #FAF5FF |\n| Text | #4C1D95 |\n| Border | #DDD6FE |\n\n*Excitement purple + action orange*",
-      "tags": ["color-palette", "event-management", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-financial-dashboard",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Financial Dashboard",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Financial Dashboard\n\n## Financial Dashboard\n\n| Role | Hex |\n|------|-----|\n| Primary | #0F172A |\n| Secondary | #1E293B |\n| CTA | #22C55E |\n| Background | #020617 |\n| Text | #F8FAFC |\n| Border | #334155 |\n\n*Dark bg + green positive indicators*",
-      "tags": ["color-palette", "financial-dashboard", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-fintech-crypto",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Fintech/Crypto",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Fintech/Crypto\n\n## Fintech/Crypto\n\n| Role | Hex |\n|------|-----|\n| Primary | #F59E0B |\n| Secondary | #FBBF24 |\n| CTA | #8B5CF6 |\n| Background | #0F172A |\n| Text | #F8FAFC |\n| Border | #334155 |\n\n*Gold trust + purple tech*",
-      "tags": ["color-palette", "fintech-crypto", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-fitness-gym-app",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Fitness/Gym App",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Fitness/Gym App\n\n## Fitness/Gym App\n\n| Role | Hex |\n|------|-----|\n| Primary | #F97316 |\n| Secondary | #FB923C |\n| CTA | #22C55E |\n| Background | #1F2937 |\n| Text | #F8FAFC |\n| Border | #374151 |\n\n*Energy orange + success green*",
-      "tags": ["color-palette", "fitness-gym-app", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-florist-plant-shop",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Florist/Plant Shop",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Florist/Plant Shop\n\n## Florist/Plant Shop\n\n| Role | Hex |\n|------|-----|\n| Primary | #15803D |\n| Secondary | #22C55E |\n| CTA | #EC4899 |\n| Background | #F0FDF4 |\n| Text | #14532D |\n| Border | #BBF7D0 |\n\n*Natural green + floral pink*",
-      "tags": ["color-palette", "florist-plant-shop", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-freelancer-platform",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Freelancer Platform",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Freelancer Platform\n\n## Freelancer Platform\n\n| Role | Hex |\n|------|-----|\n| Primary | #6366F1 |\n| Secondary | #818CF8 |\n| CTA | #22C55E |\n| Background | #EEF2FF |\n| Text | #312E81 |\n| Border | #C7D2FE |\n\n*Creative indigo + hire green*",
-      "tags": ["color-palette", "freelancer-platform", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-gaming",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Gaming",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Gaming\n\n## Gaming\n\n| Role | Hex |\n|------|-----|\n| Primary | #7C3AED |\n| Secondary | #A78BFA |\n| CTA | #F43F5E |\n| Background | #0F0F23 |\n| Text | #E2E8F0 |\n| Border | #4C1D95 |\n\n*Neon purple + rose action*",
-      "tags": ["color-palette", "gaming", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-generative-ai-art",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Generative AI Art",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Generative AI Art\n\n## Generative AI Art\n\n| Role | Hex |\n|------|-----|\n| Primary | #18181B |\n| Secondary | #3F3F46 |\n| CTA | #EC4899 |\n| Background | #FAFAFA |\n| Text | #09090B |\n| Border | #E4E4E7 |\n\n*Canvas neutral + creative pink*",
-      "tags": ["color-palette", "generative-ai-art", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-government-public-service",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Government/Public Service",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Government/Public Service\n\n## Government/Public Service\n\n| Role | Hex |\n|------|-----|\n| Primary | #0F172A |\n| Secondary | #334155 |\n| CTA | #0369A1 |\n| Background | #F8FAFC |\n| Text | #020617 |\n| Border | #E2E8F0 |\n\n*High contrast navy + blue*",
-      "tags": ["color-palette", "government-public-service", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-healthcare-app",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Healthcare App",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Healthcare App\n\n## Healthcare App\n\n| Role | Hex |\n|------|-----|\n| Primary | #0891B2 |\n| Secondary | #22D3EE |\n| CTA | #059669 |\n| Background | #ECFEFF |\n| Text | #164E63 |\n| Border | #A5F3FC |\n\n*Calm cyan + health green*",
-      "tags": ["color-palette", "healthcare-app", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-home-services",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Home Services",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Home Services\n\n## Home Services (Plumber/Electrician)\n\n| Role | Hex |\n|------|-----|\n| Primary | #1E40AF |\n| Secondary | #3B82F6 |\n| CTA | #F97316 |\n| Background | #EFF6FF |\n| Text | #1E3A8A |\n| Border | #BFDBFE |\n\n*Professional blue + urgent orange*",
-      "tags": ["color-palette", "home-services", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-hotel-hospitality",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Hotel/Hospitality",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Hotel/Hospitality\n\n## Hotel/Hospitality\n\n| Role | Hex |\n|------|-----|\n| Primary | #1E3A8A |\n| Secondary | #3B82F6 |\n| CTA | #CA8A04 |\n| Background | #F8FAFC |\n| Text | #1E40AF |\n| Border | #BFDBFE |\n\n*Luxury navy + gold service*",
-      "tags": ["color-palette", "hotel-hospitality", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-hyperlocal-services",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Hyperlocal Services",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Hyperlocal Services\n\n## Hyperlocal Services\n\n| Role | Hex |\n|------|-----|\n| Primary | #059669 |\n| Secondary | #10B981 |\n| CTA | #F97316 |\n| Background | #ECFDF5 |\n| Text | #064E3B |\n| Border | #A7F3D0 |\n\n*Location green + action orange*",
-      "tags": ["color-palette", "hyperlocal-services", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-insurance-platform",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Insurance Platform",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Insurance Platform\n\n## Insurance Platform\n\n| Role | Hex |\n|------|-----|\n| Primary | #0369A1 |\n| Secondary | #0EA5E9 |\n| CTA | #22C55E |\n| Background | #F0F9FF |\n| Text | #0C4A6E |\n| Border | #BAE6FD |\n\n*Security blue + protected green*",
-      "tags": ["color-palette", "insurance-platform", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-job-board-recruitment",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Job Board/Recruitment",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Job Board/Recruitment\n\n## Job Board/Recruitment\n\n| Role | Hex |\n|------|-----|\n| Primary | #0369A1 |\n| Secondary | #0EA5E9 |\n| CTA | #22C55E |\n| Background | #F0F9FF |\n| Text | #0C4A6E |\n| Border | #BAE6FD |\n\n*Professional blue + success green*",
-      "tags": ["color-palette", "job-board-recruitment", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-knowledge-base-documentation",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Knowledge Base/Documentation",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Knowledge Base/Documentation\n\n## Knowledge Base/Documentation\n\n| Role | Hex |\n|------|-----|\n| Primary | #475569 |\n| Secondary | #64748B |\n| CTA | #2563EB |\n| Background | #F8FAFC |\n| Text | #1E293B |\n| Border | #E2E8F0 |\n\n*Neutral grey + link blue*",
-      "tags": ["color-palette", "knowledge-base-documentation", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-language-learning-app",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Language Learning App",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Language Learning App\n\n## Language Learning App\n\n| Role | Hex |\n|------|-----|\n| Primary | #4F46E5 |\n| Secondary | #818CF8 |\n| CTA | #22C55E |\n| Background | #EEF2FF |\n| Text | #312E81 |\n| Border | #C7D2FE |\n\n*Learning indigo + progress green*",
-      "tags": ["color-palette", "language-learning-app", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-legal-services",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Legal Services",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Legal Services\n\n## Legal Services\n\n| Role | Hex |\n|------|-----|\n| Primary | #1E3A8A |\n| Secondary | #1E40AF |\n| CTA | #B45309 |\n| Background | #F8FAFC |\n| Text | #0F172A |\n| Border | #CBD5E1 |\n\n*Authority navy + trust gold*",
-      "tags": ["color-palette", "legal-services", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-logistics-delivery",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Logistics/Delivery",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Logistics/Delivery\n\n## Logistics/Delivery\n\n| Role | Hex |\n|------|-----|\n| Primary | #2563EB |\n| Secondary | #3B82F6 |\n| CTA | #F97316 |\n| Background | #EFF6FF |\n| Text | #1E40AF |\n| Border | #BFDBFE |\n\n*Tracking blue + delivery orange*",
-      "tags": ["color-palette", "logistics-delivery", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-luxury-premium-brand",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Luxury/Premium Brand",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Luxury/Premium Brand\n\n## Luxury/Premium Brand\n\n| Role | Hex |\n|------|-----|\n| Primary | #1C1917 |\n| Secondary | #44403C |\n| CTA | #CA8A04 |\n| Background | #FAFAF9 |\n| Text | #0C0A09 |\n| Border | #D6D3D1 |\n\n*Premium black + gold accent*",
-      "tags": ["color-palette", "luxury-premium-brand", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-magazine-blog",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Magazine/Blog",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Magazine/Blog\n\n## Magazine/Blog\n\n| Role | Hex |\n|------|-----|\n| Primary | #18181B |\n| Secondary | #3F3F46 |\n| CTA | #EC4899 |\n| Background | #FAFAFA |\n| Text | #09090B |\n| Border | #E4E4E7 |\n\n*Editorial black + accent pink*",
-      "tags": ["color-palette", "magazine-blog", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-marketing-agency",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Marketing Agency",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Marketing Agency\n\n## Marketing Agency\n\n| Role | Hex |\n|------|-----|\n| Primary | #EC4899 |\n| Secondary | #F472B6 |\n| CTA | #06B6D4 |\n| Background | #FDF2F8 |\n| Text | #831843 |\n| Border | #FBCFE8 |\n\n*Bold pink + creative cyan*",
-      "tags": ["color-palette", "marketing-agency", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-marketplace",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Marketplace",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Marketplace\n\n## Marketplace (P2P)\n\n| Role | Hex |\n|------|-----|\n| Primary | #7C3AED |\n| Secondary | #A78BFA |\n| CTA | #22C55E |\n| Background | #FAF5FF |\n| Text | #4C1D95 |\n| Border | #DDD6FE |\n\n*Trust purple + transaction green*",
-      "tags": ["color-palette", "marketplace", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-medical-clinic",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Medical Clinic",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Medical Clinic\n\n## Medical Clinic\n\n| Role | Hex |\n|------|-----|\n| Primary | #0891B2 |\n| Secondary | #22D3EE |\n| CTA | #22C55E |\n| Background | #F0FDFA |\n| Text | #134E4A |\n| Border | #CCFBF1 |\n\n*Medical teal + health green*",
-      "tags": ["color-palette", "medical-clinic", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-membership-community",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Membership/Community",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Membership/Community\n\n## Membership/Community\n\n| Role | Hex |\n|------|-----|\n| Primary | #7C3AED |\n| Secondary | #A78BFA |\n| CTA | #22C55E |\n| Background | #FAF5FF |\n| Text | #4C1D95 |\n| Border | #DDD6FE |\n\n*Community purple + join green*",
-      "tags": ["color-palette", "membership-community", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-mental-health-app",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Mental Health App",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Mental Health App\n\n## Mental Health App\n\n| Role | Hex |\n|------|-----|\n| Primary | #8B5CF6 |\n| Secondary | #C4B5FD |\n| CTA | #10B981 |\n| Background | #FAF5FF |\n| Text | #4C1D95 |\n| Border | #EDE9FE |\n\n*Calming lavender + wellness green*",
-      "tags": ["color-palette", "mental-health-app", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-micro-credentials-badges-platform",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Micro-Credentials/Badges Platform",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Micro-Credentials/Badges Platform\n\n## Micro-Credentials/Badges Platform\n\n| Role | Hex |\n|------|-----|\n| Primary | #0369A1 |\n| Secondary | #0EA5E9 |\n| CTA | #CA8A04 |\n| Background | #F0F9FF |\n| Text | #0C4A6E |\n| Border | #BAE6FD |\n\n*Trust blue + achievement gold*",
-      "tags": ["color-palette", "micro-credentials-badges-platform", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-micro-saas",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Micro SaaS",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Micro SaaS\n\n## Micro SaaS\n\n| Role | Hex |\n|------|-----|\n| Primary | #6366F1 |\n| Secondary | #818CF8 |\n| CTA | #10B981 |\n| Background | #F5F3FF |\n| Text | #1E1B4B |\n| Border | #E0E7FF |\n\n*Indigo primary + emerald CTA*",
-      "tags": ["color-palette", "micro-saas", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-museum-gallery",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Museum/Gallery",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Museum/Gallery\n\n## Museum/Gallery\n\n| Role | Hex |\n|------|-----|\n| Primary | #18181B |\n| Secondary | #27272A |\n| CTA | #F8FAFC |\n| Background | #FAFAFA |\n| Text | #09090B |\n| Border | #E4E4E7 |\n\n*Gallery black + white space*",
-      "tags": ["color-palette", "museum-gallery", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-music-streaming",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Music Streaming",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Music Streaming\n\n## Music Streaming\n\n| Role | Hex |\n|------|-----|\n| Primary | #1E1B4B |\n| Secondary | #4338CA |\n| CTA | #22C55E |\n| Background | #0F0F23 |\n| Text | #F8FAFC |\n| Border | #312E81 |\n\n*Dark audio + play green*",
-      "tags": ["color-palette", "music-streaming", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-news-media-platform",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for News/Media Platform",
-      "severity": "suggestion",
-      "description": "# Color Palettes: News/Media Platform\n\n## News/Media Platform\n\n| Role | Hex |\n|------|-----|\n| Primary | #DC2626 |\n| Secondary | #EF4444 |\n| CTA | #1E40AF |\n| Background | #FEF2F2 |\n| Text | #450A0A |\n| Border | #FECACA |\n\n*Breaking red + link blue*",
-      "tags": ["color-palette", "news-media-platform", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-newsletter-platform",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Newsletter Platform",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Newsletter Platform\n\n## Newsletter Platform\n\n| Role | Hex |\n|------|-----|\n| Primary | #0369A1 |\n| Secondary | #0EA5E9 |\n| CTA | #F97316 |\n| Background | #F0F9FF |\n| Text | #0C4A6E |\n| Border | #BAE6FD |\n\n*Trust blue + subscribe orange*",
-      "tags": ["color-palette", "newsletter-platform", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-nft-web3-platform",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for NFT/Web3 Platform",
-      "severity": "suggestion",
-      "description": "# Color Palettes: NFT/Web3 Platform\n\n## NFT/Web3 Platform\n\n| Role | Hex |\n|------|-----|\n| Primary | #8B5CF6 |\n| Secondary | #A78BFA |\n| CTA | #FBBF24 |\n| Background | #0F0F23 |\n| Text | #F8FAFC |\n| Border | #4C1D95 |\n\n*Purple tech + gold value*",
-      "tags": ["color-palette", "nft-web3-platform", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-non-profit-charity",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Non-profit/Charity",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Non-profit/Charity\n\n## Non-profit/Charity\n\n| Role | Hex |\n|------|-----|\n| Primary | #0891B2 |\n| Secondary | #22D3EE |\n| CTA | #F97316 |\n| Background | #ECFEFF |\n| Text | #164E63 |\n| Border | #A5F3FC |\n\n*Compassion blue + action orange*",
-      "tags": ["color-palette", "non-profit-charity", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-online-course-e-learning",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Online Course/E-learning",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Online Course/E-learning\n\n## Online Course/E-learning\n\n| Role | Hex |\n|------|-----|\n| Primary | #0D9488 |\n| Secondary | #2DD4BF |\n| CTA | #F97316 |\n| Background | #F0FDFA |\n| Text | #134E4A |\n| Border | #5EEAD4 |\n\n*Progress teal + achievement orange*",
-      "tags": ["color-palette", "online-course-e-learning", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-pet-tech-app",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Pet Tech App",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Pet Tech App\n\n## Pet Tech App\n\n| Role | Hex |\n|------|-----|\n| Primary | #F97316 |\n| Secondary | #FB923C |\n| CTA | #2563EB |\n| Background | #FFF7ED |\n| Text | #9A3412 |\n| Border | #FED7AA |\n\n*Playful orange + trust blue*",
-      "tags": ["color-palette", "pet-tech-app", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-pharmacy-drug-store",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Pharmacy/Drug Store",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Pharmacy/Drug Store\n\n## Pharmacy/Drug Store\n\n| Role | Hex |\n|------|-----|\n| Primary | #15803D |\n| Secondary | #22C55E |\n| CTA | #0369A1 |\n| Background | #F0FDF4 |\n| Text | #14532D |\n| Border | #BBF7D0 |\n\n*Pharmacy green + trust blue*",
-      "tags": ["color-palette", "pharmacy-drug-store", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-photography-studio",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Photography Studio",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Photography Studio\n\n## Photography Studio\n\n| Role | Hex |\n|------|-----|\n| Primary | #18181B |\n| Secondary | #27272A |\n| CTA | #F8FAFC |\n| Background | #000000 |\n| Text | #FAFAFA |\n| Border | #3F3F46 |\n\n*Pure black + white contrast*",
-      "tags": ["color-palette", "photography-studio", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-podcast-platform",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Podcast Platform",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Podcast Platform\n\n## Podcast Platform\n\n| Role | Hex |\n|------|-----|\n| Primary | #1E1B4B |\n| Secondary | #312E81 |\n| CTA | #F97316 |\n| Background | #0F0F23 |\n| Text | #F8FAFC |\n| Border | #4338CA |\n\n*Dark audio + warm accent*",
-      "tags": ["color-palette", "podcast-platform", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-portfolio-personal",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Portfolio/Personal",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Portfolio/Personal\n\n## Portfolio/Personal\n\n| Role | Hex |\n|------|-----|\n| Primary | #18181B |\n| Secondary | #3F3F46 |\n| CTA | #2563EB |\n| Background | #FAFAFA |\n| Text | #09090B |\n| Border | #E4E4E7 |\n\n*Monochrome + blue accent*",
-      "tags": ["color-palette", "portfolio-personal", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-productivity-tool",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Productivity Tool",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Productivity Tool\n\n## Productivity Tool\n\n| Role | Hex |\n|------|-----|\n| Primary | #0D9488 |\n| Secondary | #14B8A6 |\n| CTA | #F97316 |\n| Background | #F0FDFA |\n| Text | #134E4A |\n| Border | #99F6E4 |\n\n*Teal focus + action orange*",
-      "tags": ["color-palette", "productivity-tool", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-quantum-computing",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Quantum Computing",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Quantum Computing\n\n## Quantum Computing\n\n| Role | Hex |\n|------|-----|\n| Primary | #00FFFF |\n| Secondary | #7B61FF |\n| CTA | #FF00FF |\n| Background | #050510 |\n| Text | #E0E0FF |\n| Border | #333344 |\n\n*Quantum cyan + interference purple*",
-      "tags": ["color-palette", "quantum-computing", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-real-estate-property",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Real Estate/Property",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Real Estate/Property\n\n## Real Estate/Property\n\n| Role | Hex |\n|------|-----|\n| Primary | #0F766E |\n| Secondary | #14B8A6 |\n| CTA | #0369A1 |\n| Background | #F0FDFA |\n| Text | #134E4A |\n| Border | #99F6E4 |\n\n*Trust teal + professional blue*",
-      "tags": ["color-palette", "real-estate-property", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-remote-work-collaboration-tool",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Remote Work/Collaboration Tool",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Remote Work/Collaboration Tool\n\n## Remote Work/Collaboration Tool\n\n| Role | Hex |\n|------|-----|\n| Primary | #6366F1 |\n| Secondary | #818CF8 |\n| CTA | #10B981 |\n| Background | #F5F3FF |\n| Text | #312E81 |\n| Border | #E0E7FF |\n\n*Calm indigo + success green*",
-      "tags": ["color-palette", "remote-work-collaboration-tool", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-restaurant-food-service",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Restaurant/Food Service",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Restaurant/Food Service\n\n## Restaurant/Food Service\n\n| Role | Hex |\n|------|-----|\n| Primary | #DC2626 |\n| Secondary | #F87171 |\n| CTA | #CA8A04 |\n| Background | #FEF2F2 |\n| Text | #450A0A |\n| Border | #FECACA |\n\n*Appetizing red + warm gold*",
-      "tags": ["color-palette", "restaurant-food-service", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-saas",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for SaaS",
-      "severity": "suggestion",
-      "description": "# Color Palettes: SaaS\n\n## SaaS (General)\n\n| Role | Hex |\n|------|-----|\n| Primary | #2563EB |\n| Secondary | #3B82F6 |\n| CTA | #F97316 |\n| Background | #F8FAFC |\n| Text | #1E293B |\n| Border | #E2E8F0 |\n\n*Trust blue + orange CTA contrast*",
-      "tags": ["color-palette", "saas", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-senior-care-elderly",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Senior Care/Elderly",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Senior Care/Elderly\n\n## Senior Care/Elderly\n\n| Role | Hex |\n|------|-----|\n| Primary | #0369A1 |\n| Secondary | #38BDF8 |\n| CTA | #22C55E |\n| Background | #F0F9FF |\n| Text | #0C4A6E |\n| Border | #E0F2FE |\n\n*Calm blue + reassuring green*",
-      "tags": ["color-palette", "senior-care-elderly", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-service-landing-page",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Service Landing Page",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Service Landing Page\n\n## Service Landing Page\n\n| Role | Hex |\n|------|-----|\n| Primary | #0EA5E9 |\n| Secondary | #38BDF8 |\n| CTA | #F97316 |\n| Background | #F0F9FF |\n| Text | #0C4A6E |\n| Border | #BAE6FD |\n\n*Sky blue trust + warm CTA*",
-      "tags": ["color-palette", "service-landing-page", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-smart-home-iot-dashboard",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Smart Home/IoT Dashboard",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Smart Home/IoT Dashboard\n\n## Smart Home/IoT Dashboard\n\n| Role | Hex |\n|------|-----|\n| Primary | #1E293B |\n| Secondary | #334155 |\n| CTA | #22C55E |\n| Background | #0F172A |\n| Text | #F8FAFC |\n| Border | #475569 |\n\n*Dark tech + status green*",
-      "tags": ["color-palette", "smart-home-iot-dashboard", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-social-media-app",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Social Media App",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Social Media App\n\n## Social Media App\n\n| Role | Hex |\n|------|-----|\n| Primary | #E11D48 |\n| Secondary | #FB7185 |\n| CTA | #2563EB |\n| Background | #FFF1F2 |\n| Text | #881337 |\n| Border | #FECDD3 |\n\n*Vibrant rose + engagement blue*",
-      "tags": ["color-palette", "social-media-app", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-space-tech-aerospace",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Space Tech / Aerospace",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Space Tech / Aerospace\n\n## Space Tech / Aerospace\n\n| Role | Hex |\n|------|-----|\n| Primary | #F8FAFC |\n| Secondary | #94A3B8 |\n| CTA | #3B82F6 |\n| Background | #0B0B10 |\n| Text | #F8FAFC |\n| Border | #1E293B |\n\n*Star white + launch blue*",
-      "tags": ["color-palette", "space-tech-aerospace", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-spatial-vision-os",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Spatial / Vision OS",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Spatial / Vision OS\n\n## Spatial / Vision OS\n\n| Role | Hex |\n|------|-----|\n| Primary | #FFFFFF |\n| Secondary | #E5E5E5 |\n| CTA | #007AFF |\n| Background | #888888 |\n| Text | #000000 |\n| Border | #CCCCCC |\n\n*Glass white + system blue*",
-      "tags": ["color-palette", "spatial-vision-os", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-sports-team-club",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Sports Team/Club",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Sports Team/Club\n\n## Sports Team/Club\n\n| Role | Hex |\n|------|-----|\n| Primary | #DC2626 |\n| Secondary | #EF4444 |\n| CTA | #FBBF24 |\n| Background | #FEF2F2 |\n| Text | #7F1D1D |\n| Border | #FECACA |\n\n*Team red + championship gold*",
-      "tags": ["color-palette", "sports-team-club", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-subscription-box-service",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Subscription Box Service",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Subscription Box Service\n\n## Subscription Box Service\n\n| Role | Hex |\n|------|-----|\n| Primary | #D946EF |\n| Secondary | #E879F9 |\n| CTA | #F97316 |\n| Background | #FDF4FF |\n| Text | #86198F |\n| Border | #F5D0FE |\n\n*Excitement purple + urgency orange*",
-      "tags": ["color-palette", "subscription-box-service", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-sustainability-esg-platform",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Sustainability/ESG Platform",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Sustainability/ESG Platform\n\n## Sustainability/ESG Platform\n\n| Role | Hex |\n|------|-----|\n| Primary | #059669 |\n| Secondary | #10B981 |\n| CTA | #0891B2 |\n| Background | #ECFDF5 |\n| Text | #064E3B |\n| Border | #A7F3D0 |\n\n*Nature green + ocean blue*",
-      "tags": ["color-palette", "sustainability-esg-platform", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-theater-cinema",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Theater/Cinema",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Theater/Cinema\n\n## Theater/Cinema\n\n| Role | Hex |\n|------|-----|\n| Primary | #1E1B4B |\n| Secondary | #312E81 |\n| CTA | #CA8A04 |\n| Background | #0F0F23 |\n| Text | #F8FAFC |\n| Border | #4338CA |\n\n*Dramatic dark + spotlight gold*",
-      "tags": ["color-palette", "theater-cinema", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-travel-tourism-agency",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Travel/Tourism Agency",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Travel/Tourism Agency\n\n## Travel/Tourism Agency\n\n| Role | Hex |\n|------|-----|\n| Primary | #0EA5E9 |\n| Secondary | #38BDF8 |\n| CTA | #F97316 |\n| Background | #F0F9FF |\n| Text | #0C4A6E |\n| Border | #BAE6FD |\n\n*Sky blue + adventure orange*",
-      "tags": ["color-palette", "travel-tourism-agency", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-veterinary-clinic",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Veterinary Clinic",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Veterinary Clinic\n\n## Veterinary Clinic\n\n| Role | Hex |\n|------|-----|\n| Primary | #0D9488 |\n| Secondary | #14B8A6 |\n| CTA | #F97316 |\n| Background | #F0FDFA |\n| Text | #134E4A |\n| Border | #99F6E4 |\n\n*Caring teal + warm orange*",
-      "tags": ["color-palette", "veterinary-clinic", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-video-streaming-ott",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Video Streaming/OTT",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Video Streaming/OTT\n\n## Video Streaming/OTT\n\n| Role | Hex |\n|------|-----|\n| Primary | #0F0F23 |\n| Secondary | #1E1B4B |\n| CTA | #E11D48 |\n| Background | #000000 |\n| Text | #F8FAFC |\n| Border | #312E81 |\n\n*Cinema dark + play red*",
-      "tags": ["color-palette", "video-streaming-ott", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-palette-wedding-event-planning",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Color Palettes for Wedding/Event Planning",
-      "severity": "suggestion",
-      "description": "# Color Palettes: Wedding/Event Planning\n\n## Wedding/Event Planning\n\n| Role | Hex |\n|------|-----|\n| Primary | #DB2777 |\n| Secondary | #F472B6 |\n| CTA | #CA8A04 |\n| Background | #FDF2F8 |\n| Text | #831843 |\n| Border | #FBCFE8 |\n\n*Romantic pink + elegant gold*",
-      "tags": ["color-palette", "wedding-event-planning", "design-inspiration"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-product-recommendations",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Product Type Design Recommendations",
-      "severity": "suggestion",
-      "description": "# Product Type Design Recommendations\n\n## SaaS (General)\n- **Keywords:*\\* app, b2b, cloud, general, saas, software, subscription\n- **Primary Style:*\\* Glassmorphism + Flat Design\n- **Secondary Styles:*\\* Soft UI Evolution, Minimalism\n- **Landing Pattern:*\\* Hero + Features + CTA\n- **Dashboard Style:*\\* Data-Dense + Real-Time Monitoring\n- **Color Focus:*\\* Trust blue + accent contrast\n- **Key Considerations:*\\* Balance modern feel with clarity. Focus on CTAs.\n- **Anti-Patterns:*\\* Excessive animation + Dark mode by default\n\n## Micro SaaS\n- **Keywords:*\\* app, b2b, cloud, indie, micro, micro-saas, niche, saas, small, software, solo, subscription\n- **Primary Style:*\\* Flat Design + Vibrant & Block\n- **Secondary Styles:*\\* Motion-Driven, Micro-interactions\n- **Landing Pattern:*\\* Minimal & Direct + Demo\n- **Dashboard Style:*\\* Executive Dashboard\n- **Color Focus:*\\* Vibrant primary + white space\n- **Key Considerations:*\\* Keep simple, show product quickly. Speed is key.\n- **Anti-Patterns:*\\* Complex onboarding flow + Cluttered layout\n\n## E-commerce\n- **Keywords:*\\* buy, commerce, e, ecommerce, products, retail, sell, shop, store\n- **Primary Style:*\\* Vibrant & Block-based\n- **Secondary Styles:*\\* Aurora UI, Motion-Driven\n- **Landing Pattern:*\\* Feature-Rich Showcase\n- **Dashboard Style:*\\* Sales Intelligence Dashboard\n- **Color Focus:*\\* Brand primary + success green\n- **Key Considerations:*\\* Engagement & conversions. High visual hierarchy.\n- **Anti-Patterns:*\\* Flat design without depth + Text-heavy pages\n\n## E-commerce Luxury\n- **Keywords:*\\* buy, commerce, e, ecommerce, elegant, exclusive, high-end, luxury, premium, products, retail, sell, shop, store\n- **Primary Style:*\\* Liquid Glass + Glassmorphism\n- **Secondary Styles:*\\* 3D & Hyperrealism, Aurora UI\n- **Landing Pattern:*\\* Feature-Rich Showcase\n- **Dashboard Style:*\\* Sales Intelligence Dashboard\n- **Color Focus:*\\* Premium colors + minimal accent\n- **Key Considerations:*\\* Elegance & sophistication. Premium materials.\n- **Anti-Patterns:*\\* Vibrant & Block-based + Playful colors\n\n## Service Landing Page\n- **Keywords:*\\* appointment, booking, consultation, conversion, landing, marketing, page, service\n- **Primary Style:*\\* Hero-Centric + Trust & Authority\n- **Secondary Styles:*\\* Social Proof-Focused, Storytelling\n- **Landing Pattern:*\\* Hero-Centric Design\n- **Dashboard Style:*\\* N/A - Analytics for conversions\n- **Color Focus:*\\* Brand primary + trust colors\n- **Key Considerations:*\\* Social proof essential. Show expertise.\n- **Anti-Patterns:*\\* Complex navigation + Hidden contact info\n\n## B2B Service\n- **Keywords:*\\* appointment, b, b2b, booking, business, consultation, corporate, enterprise, service\n- **Primary Style:*\\* Trust & Authority + Minimal\n- **Secondary Styles:*\\* Feature-Rich, Conversion-Optimized\n- **Landing Pattern:*\\* Feature-Rich Showcase\n- **Dashboard Style:*\\* Sales Intelligence Dashboard\n- **Color Focus:*\\* Professional blue + neutral grey\n- **Key Considerations:*\\* Credibility essential. Clear ROI messaging.\n- **Anti-Patterns:*\\* Playful design + Hidden credentials + AI purple/pink gradients\n\n## Financial Dashboard\n- **Keywords:*\\* admin, analytics, dashboard, data, financial, panel\n- **Primary Style:*\\* Dark Mode (OLED) + Data-Dense\n- **Secondary Styles:*\\* Minimalism, Accessible & Ethical\n- **Landing Pattern:*\\* N/A - Dashboard focused\n- **Dashboard Style:*\\* Financial Dashboard\n- **Color Focus:*\\* Dark bg + red/green alerts + trust blue\n- **Key Considerations:*\\* High contrast, real-time updates, accuracy paramount.\n- **Anti-Patterns:*\\* Light mode default + Slow rendering\n\n## Analytics Dashboard\n- **Keywords:*\\* admin, analytics, dashboard, data, panel\n- **Primary Style:*\\* Data-Dense + Heat Map & Heatmap\n- **Secondary Styles:*\\* Minimalism, Dark Mode (OLED)\n- **Landing Pattern:*\\* N/A - Analytics focused\n- **Dashboard Style:*\\* Drill-Down Analytics + Comparative\n- **Color Focus:*\\* Cool→Hot gradients + neutral grey\n- **Key Considerations:*\\* Clarity > aesthetics. Color-coded data priority.\n- **Anti-Patterns:*\\* Ornate design + No filtering\n\n## Healthcare App\n- **Keywords:*\\* app, clinic, health, healthcare, medical, patient\n- **Primary Style:*\\* Neumorphism + Accessible & Ethical\n- **Secondary Styles:*\\* Soft UI Evolution, Claymorphism (for patients)\n- **Landing Pattern:*\\* Social Proof-Focused\n- **Dashboard Style:*\\* User Behavior Analytics\n- **Color Focus:*\\* Calm blue + health green + trust\n- **Key Considerations:*\\* Accessibility mandatory. Calming aesthetic.\n- **Anti-Patterns:*\\* Bright neon colors + Motion-heavy animations + AI purple/pink gradients\n\n## Educational App\n- **Keywords:*\\* app, course, education, educational, learning, school, training\n- **Primary Style:*\\* Claymorphism + Micro-interactions\n- **Secondary Styles:*\\* Vibrant & Block-based, Flat Design\n- **Landing Pattern:*\\* Storytelling-Driven\n- **Dashboard Style:*\\* User Behavior Analytics\n- **Color Focus:*\\* Playful colors + clear hierarchy\n- **Key Considerations:*\\* Engagement & ease of use. Age-appropriate design.\n\n\n## Creative Agency\n- **Keywords:*\\* agency, creative, design, marketing, studio\n- **Primary Style:*\\* Brutalism + Motion-Driven\n- **Secondary Styles:*\\* Retro-Futurism, Storytelling-Driven\n- **Landing Pattern:*\\* Storytelling-Driven\n- **Dashboard Style:*\\* N/A - Portfolio focused\n- **Color Focus:*\\* Bold primaries + artistic freedom\n- **Key Considerations:*\\* Differentiation key. Wow-factor necessary.\n- **Anti-Patterns:*\\* Corporate minimalism + Hidden portfolio\n\n## Portfolio/Personal\n- **Keywords:*\\* creative, personal, portfolio, projects, showcase, work\n- **Primary Style:*\\* Motion-Driven + Minimalism\n- **Secondary Styles:*\\* Brutalism, Aurora UI\n- **Landing Pattern:*\\* Storytelling-Driven\n- **Dashboard Style:*\\* N/A - Personal branding\n- **Color Focus:*\\* Brand primary + artistic interpretation\n- **Key Considerations:*\\* Showcase work. Personality shine through.\n- **Anti-Patterns:*\\* Corporate templates + Generic layouts\n\n## Gaming\n- **Keywords:*\\* entertainment, esports, game, gaming, play\n- **Primary Style:*\\* 3D & Hyperrealism + Retro-Futurism\n- **Secondary Styles:*\\* Motion-Driven, Vibrant & Block\n- **Landing Pattern:*\\* Feature-Rich Showcase\n- **Dashboard Style:*\\* N/A - Game focused\n- **Color Focus:*\\* Vibrant + neon + immersive colors\n- **Key Considerations:*\\* Immersion priority. Performance critical.\n- **Anti-Patterns:*\\* Minimalist design + Static assets\n\n## Government/Public Service\n- **Keywords:*\\* appointment, booking, consultation, government, public, service\n- **Primary Style:*\\* Accessible & Ethical + Minimalism\n- **Secondary Styles:*\\* Flat Design, Inclusive Design\n- **Landing Pattern:*\\* Minimal & Direct\n- **Dashboard Style:*\\* Executive Dashboard\n- **Color Focus:*\\* Professional blue + high contrast\n- **Key Considerations:*\\* WCAG AAA mandatory. Trust paramount.\n\n\n## Fintech/Crypto\n- **Keywords:*\\* banking, blockchain, crypto, defi, finance, fintech, money, nft, payment, web3\n- **Primary Style:*\\* Glassmorphism + Dark Mode (OLED)\n- **Secondary Styles:*\\* Retro-Futurism, Motion-Driven\n- **Landing Pattern:*\\* Conversion-Optimized\n- **Dashboard Style:*\\* Real-Time Monitoring + Predictive\n- **Color Focus:*\\* Dark tech colors + trust + vibrant accents\n- **Key Considerations:*\\* Security perception. Real-time data critical.\n- **Anti-Patterns:*\\* Light backgrounds + No security indicators\n\n## Social Media App\n- **Keywords:*\\* app, community, content, entertainment, media, network, sharing, social, streaming, users, video\n- **Primary Style:*\\* Vibrant & Block-based + Motion-Driven\n- **Secondary Styles:*\\* Aurora UI, Micro-interactions\n- **Landing Pattern:*\\* Feature-Rich Showcase\n- **Dashboard Style:*\\* User Behavior Analytics\n- **Color Focus:*\\* Vibrant + engagement colors\n- **Key Considerations:*\\* Engagement & retention. Addictive design ethics.\n- **Anti-Patterns:*\\* Heavy skeuomorphism + Accessibility ignored\n\n## Productivity Tool\n- **Keywords:*\\* collaboration, productivity, project, task, tool, workflow\n- **Primary Style:*\\* Flat Design + Micro-interactions\n- **Secondary Styles:*\\* Minimalism, Soft UI Evolution\n- **Landing Pattern:*\\* Interactive Product Demo\n- **Dashboard Style:*\\* Drill-Down Analytics\n- **Color Focus:*\\* Clear hierarchy + functional colors\n- **Key Considerations:*\\* Ease of use. Speed & efficiency focus.\n- **Anti-Patterns:*\\* Complex onboarding + Slow performance\n\n## Design System/Component Library\n- **Keywords:*\\* component, design, library, system\n- **Primary Style:*\\* Minimalism + Accessible & Ethical\n- **Secondary Styles:*\\* Flat Design, Zero Interface\n- **Landing Pattern:*\\* Feature-Rich Showcase\n- **Dashboard Style:*\\* N/A - Dev focused\n- **Color Focus:*\\* Clear hierarchy + code-like structure\n- **Key Considerations:*\\* Consistency. Developer-first approach.\n- **Anti-Patterns:*\\* Poor documentation + No live preview\n\n## AI/Chatbot Platform\n- **Keywords:*\\* ai, artificial-intelligence, automation, chatbot, machine-learning, ml, platform\n- **Primary Style:*\\* AI-Native UI + Minimalism\n- **Secondary Styles:*\\* Zero Interface, Glassmorphism\n- **Landing Pattern:*\\* Interactive Product Demo\n- **Dashboard Style:*\\* AI/ML Analytics Dashboard\n- **Color Focus:*\\* Neutral + AI Purple (#6366F1)\n- **Key Considerations:*\\* Conversational UI. Streaming text. Context awareness. Minimal chrome.\n- **Anti-Patterns:*\\* Heavy chrome + Slow response feedback\n\n## NFT/Web3 Platform\n- **Keywords:*\\* nft, platform, web\n- **Primary Style:*\\* Cyberpunk UI + Glassmorphism\n- **Secondary Styles:*\\* Aurora UI, 3D & Hyperrealism\n- **Landing Pattern:*\\* Feature-Rich Showcase\n- **Dashboard Style:*\\* Crypto/Blockchain Dashboard\n- **Color Focus:*\\* Dark + Neon + Gold (#FFD700)\n- **Key Considerations:*\\* Wallet integration. Transaction feedback. Gas fees display. Dark mode essential.\n- **Anti-Patterns:*\\* Light mode default + No transaction status\n\n## Creator Economy Platform\n- **Keywords:*\\* creator, economy, platform\n- **Primary Style:*\\* Vibrant & Block-based + Bento Box Grid\n- **Secondary Styles:*\\* Motion-Driven, Aurora UI\n- **Landing Pattern:*\\* Social Proof-Focused\n- **Dashboard Style:*\\* User Behavior Analytics\n- **Color Focus:*\\* Vibrant + Brand colors\n- **Key Considerations:*\\* Creator profiles. Monetization display. Engagement metrics. Social proof.\n- **Anti-Patterns:*\\* Generic layout + Hidden earnings\n\n## Sustainability/ESG Platform\n- **Keywords:*\\* ai, artificial-intelligence, automation, esg, machine-learning, ml, platform, sustainability\n- **Primary Style:*\\* Organic Biophilic + Minimalism\n- **Secondary Styles:*\\* Accessible & Ethical, Flat Design\n- **Landing Pattern:*\\* Trust & Authority\n- **Dashboard Style:*\\* Energy/Utilities Dashboard\n- **Color Focus:*\\* Green (#228B22) + Earth tones\n- **Key Considerations:*\\* Carbon footprint visuals. Progress indicators. Certification badges. Eco-friendly imagery.\n- **Anti-Patterns:*\\* Greenwashing visuals + No data\n\n## Remote Work/Collaboration Tool\n- **Keywords:*\\* collaboration, remote, tool, work\n- **Primary Style:*\\* Soft UI Evolution + Minimalism\n- **Secondary Styles:*\\* Glassmorphism, Micro-interactions\n- **Landing Pattern:*\\* Feature-Rich Showcase\n- **Dashboard Style:*\\* Drill-Down Analytics\n- **Color Focus:*\\* Calm Blue + Neutral grey\n- **Key Considerations:*\\* Real-time collaboration. Status indicators. Video integration. Notification management.\n\n\n## Mental Health App\n- **Keywords:*\\* app, health, mental\n- **Primary Style:*\\* Neumorphism + Accessible & Ethical\n- **Secondary Styles:*\\* Claymorphism, Soft UI Evolution\n- **Landing Pattern:*\\* Social Proof-Focused\n- **Dashboard Style:*\\* Healthcare Analytics\n- **Color Focus:*\\* Calm Pastels + Trust colors\n- **Key Considerations:*\\* Calming aesthetics. Privacy-first. Crisis resources. Progress tracking. Accessibility mandatory.\n\n\n## Pet Tech App\n- **Keywords:*\\* app, pet, tech\n- **Primary Style:*\\* Claymorphism + Vibrant & Block-based\n- **Secondary Styles:*\\* Micro-interactions, Flat Design\n- **Landing Pattern:*\\* Storytelling-Driven\n- **Dashboard Style:*\\* User Behavior Analytics\n- **Color Focus:*\\* Playful + Warm colors\n- **Key Considerations:*\\* Pet profiles. Health tracking. Playful UI. Photo galleries. Vet integration.\n- **Anti-Patterns:*\\* Generic design + No personality\n\n## Smart Home/IoT Dashboard\n- **Keywords:*\\* admin, analytics, dashboard, data, home, iot, panel, smart\n- **Primary Style:*\\* Glassmorphism + Dark Mode (OLED)\n- **Secondary Styles:*\\* Minimalism, AI-Native UI\n- **Landing Pattern:*\\* Interactive Product Demo\n- **Dashboard Style:*\\* Real-Time Monitoring\n- **Color Focus:*\\* Dark + Status indicator colors\n- **Key Considerations:*\\* Device status. Real-time controls. Energy monitoring. Automation rules. Quick actions.\n- **Anti-Patterns:*\\* Slow updates + No automation\n\n## EV/Charging Ecosystem\n- **Keywords:*\\* charging, ecosystem, ev\n- **Primary Style:*\\* Minimalism + Aurora UI\n- **Secondary Styles:*\\* Glassmorphism, Organic Biophilic\n- **Landing Pattern:*\\* Hero-Centric Design\n- **Dashboard Style:*\\* Energy/Utilities Dashboard\n- **Color Focus:*\\* Electric Blue (#009CD1) + Green\n- **Key Considerations:*\\* Charging station maps. Range estimation. Cost calculation. Environmental impact.\n- **Anti-Patterns:*\\* Poor map UX + Hidden costs\n\n## Subscription Box Service\n- **Keywords:*\\* appointment, booking, box, consultation, membership, plan, recurring, service, subscription\n- **Primary Style:*\\* Vibrant & Block-based + Motion-Driven\n- **Secondary Styles:*\\* Claymorphism, Aurora UI\n- **Landing Pattern:*\\* Feature-Rich Showcase\n- **Dashboard Style:*\\* E-commerce Analytics\n- **Color Focus:*\\* Brand + Excitement colors\n- **Key Considerations:*\\* Unboxing experience. Personalization quiz. Subscription management. Product reveals.\n- **Anti-Patterns:*\\* Confusing pricing + No unboxing preview\n\n## Podcast Platform\n- **Keywords:*\\* platform, podcast\n- **Primary Style:*\\* Dark Mode (OLED) + Minimalism\n- **Secondary Styles:*\\* Motion-Driven, Vibrant & Block-based\n- **Landing Pattern:*\\* Storytelling-Driven\n- **Dashboard Style:*\\* Media/Entertainment Dashboard\n- **Color Focus:*\\* Dark + Audio waveform accents\n- **Key Considerations:*\\* Audio player UX. Episode discovery. Creator tools. Analytics for podcasters.\n- **Anti-Patterns:*\\* Poor audio player + Cluttered layout\n\n## Dating App\n- **Keywords:*\\* app, dating\n- **Primary Style:*\\* Vibrant & Block-based + Motion-Driven\n- **Secondary Styles:*\\* Aurora UI, Glassmorphism\n- **Landing Pattern:*\\* Social Proof-Focused\n- **Dashboard Style:*\\* User Behavior Analytics\n- **Color Focus:*\\* Warm + Romantic (Pink/Red gradients)\n- **Key Considerations:*\\* Profile cards. Swipe interactions. Match animations. Safety features. Video chat.\n- **Anti-Patterns:*\\* Generic profiles + No safety\n\n## Micro-Credentials/Badges Platform\n- **Keywords:*\\* badges, credentials, micro, platform\n- **Primary Style:*\\* Minimalism + Flat Design\n- **Secondary Styles:*\\* Accessible & Ethical, Swiss Modernism 2.0\n- **Landing Pattern:*\\* Trust & Authority\n- **Dashboard Style:*\\* Education Dashboard\n- **Color Focus:*\\* Trust Blue + Gold (#FFD700)\n- **Key Considerations:*\\* Credential verification. Badge display. Progress tracking. Issuer trust. LinkedIn integration.\n\n\n## Knowledge Base/Documentation\n- **Keywords:*\\* base, documentation, knowledge\n- **Primary Style:*\\* Minimalism + Accessible & Ethical\n- **Secondary Styles:*\\* Swiss Modernism 2.0, Flat Design\n- **Landing Pattern:*\\* FAQ/Documentation\n- **Dashboard Style:*\\* N/A - Documentation focused\n- **Color Focus:*\\* Clean hierarchy + minimal color\n- **Key Considerations:*\\* Search-first. Clear navigation. Code highlighting. Version switching. Feedback system.\n- **Anti-Patterns:*\\* Poor navigation + No search\n\n## Hyperlocal Services\n- **Keywords:*\\* appointment, booking, consultation, hyperlocal, service, services\n- **Primary Style:*\\* Minimalism + Vibrant & Block-based\n- **Secondary Styles:*\\* Micro-interactions, Flat Design\n- **Landing Pattern:*\\* Conversion-Optimized\n- **Dashboard Style:*\\* Drill-Down Analytics + Map\n- **Color Focus:*\\* Location markers + Trust colors\n- **Key Considerations:*\\* Map integration. Service categories. Provider profiles. Booking system. Reviews.\n- **Anti-Patterns:*\\* No map + Hidden reviews\n\n## Beauty/Spa/Wellness Service\n- **Keywords:*\\* appointment, beauty, booking, consultation, service, spa, wellness\n- **Primary Style:*\\* Soft UI Evolution + Neumorphism\n- **Secondary Styles:*\\* Glassmorphism, Minimalism\n- **Landing Pattern:*\\* Hero-Centric Design + Social Proof\n- **Dashboard Style:*\\* User Behavior Analytics\n- **Color Focus:*\\* Soft pastels (Pink #FFB6C1 Sage #90EE90) + Cream + Gold accents\n- **Key Considerations:*\\* Calming aesthetic. Booking system. Service menu. Before/after gallery. Testimonials. Relaxing imagery.\n- **Anti-Patterns:*\\* Bright neon colors + Harsh animations + Dark mode\n\n## Luxury/Premium Brand\n- **Keywords:*\\* brand, elegant, exclusive, high-end, luxury, premium\n- **Primary Style:*\\* Liquid Glass + Glassmorphism\n- **Secondary Styles:*\\* Minimalism, 3D & Hyperrealism\n- **Landing Pattern:*\\* Storytelling-Driven + Feature-Rich\n- **Dashboard Style:*\\* Sales Intelligence Dashboard\n- **Color Focus:*\\* Black + Gold (#FFD700) + White + Minimal accent\n- **Key Considerations:*\\* Elegance paramount. Premium imagery. Storytelling. High-quality visuals. Exclusive feel.\n- **Anti-Patterns:*\\* Cheap visuals + Fast animations\n\n## Restaurant/Food Service\n- **Keywords:*\\* appointment, booking, consultation, delivery, food, menu, order, restaurant, service\n- **Primary Style:*\\* Vibrant & Block-based + Motion-Driven\n- **Secondary Styles:*\\* Claymorphism, Flat Design\n- **Landing Pattern:*\\* Hero-Centric Design + Conversion\n- **Dashboard Style:*\\* N/A - Booking focused\n- **Color Focus:*\\* Warm colors (Orange Red Brown) + appetizing imagery\n- **Key Considerations:*\\* Menu display. Online ordering. Reservation system. Food photography. Location/hours prominent.\n\n\n## Fitness/Gym App\n- **Keywords:*\\* app, exercise, fitness, gym, health, workout\n- **Primary Style:*\\* Vibrant & Block-based + Dark Mode (OLED)\n- **Secondary Styles:*\\* Motion-Driven, Neumorphism\n- **Landing Pattern:*\\* Feature-Rich Showcase\n- **Dashboard Style:*\\* User Behavior Analytics\n- **Color Focus:*\\* Energetic (Orange #FF6B35 Electric Blue) + Dark bg\n- **Key Considerations:*\\* Progress tracking. Workout plans. Community features. Achievements. Motivational design.\n- **Anti-Patterns:*\\* Static design + No gamification\n\n## Real Estate/Property\n- **Keywords:*\\* buy, estate, housing, property, real, real-estate, rent\n- **Primary Style:*\\* Glassmorphism + Minimalism\n- **Secondary Styles:*\\* Motion-Driven, 3D & Hyperrealism\n- **Landing Pattern:*\\* Hero-Centric Design + Feature-Rich\n- **Dashboard Style:*\\* Sales Intelligence Dashboard\n- **Color Focus:*\\* Trust Blue (#0077B6) + Gold accents + White\n- **Key Considerations:*\\* Property listings. Virtual tours. Map integration. Agent profiles. Mortgage calculator. High-quality imagery.\n\n\n## Travel/Tourism Agency\n- **Keywords:*\\* agency, booking, creative, design, flight, hotel, marketing, studio, tourism, travel, vacation\n- **Primary Style:*\\* Aurora UI + Motion-Driven\n- **Secondary Styles:*\\* Vibrant & Block-based, Glassmorphism\n- **Landing Pattern:*\\* Storytelling-Driven + Hero-Centric\n- **Dashboard Style:*\\* Booking Analytics\n- **Color Focus:*\\* Vibrant destination colors + Sky Blue + Warm accents\n- **Key Considerations:*\\* Destination showcase. Booking system. Itinerary builder. Reviews. Inspiration galleries. Mobile-first.\n\n\n## Hotel/Hospitality\n- **Keywords:*\\* hospitality, hotel\n- **Primary Style:*\\* Liquid Glass + Minimalism\n- **Secondary Styles:*\\* Glassmorphism, Soft UI Evolution\n- **Landing Pattern:*\\* Hero-Centric Design + Social Proof\n- **Dashboard Style:*\\* Revenue Management Dashboard\n- **Color Focus:*\\* Warm neutrals + Gold (#D4AF37) + Brand accent\n- **Key Considerations:*\\* Room booking. Amenities showcase. Location maps. Guest reviews. Seasonal pricing. Luxury imagery.\n- **Anti-Patterns:*\\* Poor photos + Complex booking\n\n## Wedding/Event Planning\n- **Keywords:*\\* conference, event, meetup, planning, registration, ticket, wedding\n- **Primary Style:*\\* Soft UI Evolution + Aurora UI\n- **Secondary Styles:*\\* Glassmorphism, Motion-Driven\n- **Landing Pattern:*\\* Storytelling-Driven + Social Proof\n- **Dashboard Style:*\\* N/A - Planning focused\n- **Color Focus:*\\* Soft Pink (#FFD6E0) + Gold + Cream + Sage\n- **Key Considerations:*\\* Portfolio gallery. Vendor directory. Planning tools. Timeline. Budget tracker. Romantic aesthetic.\n- **Anti-Patterns:*\\* Generic templates + No portfolio\n\n## Legal Services\n- **Keywords:*\\* appointment, attorney, booking, compliance, consultation, contract, law, legal, service, services\n- **Primary Style:*\\* Trust & Authority + Minimalism\n- **Secondary Styles:*\\* Accessible & Ethical, Swiss Modernism 2.0\n- **Landing Pattern:*\\* Trust & Authority + Minimal\n- **Dashboard Style:*\\* Case Management Dashboard\n- **Color Focus:*\\* Navy Blue (#1E3A5F) + Gold + White\n- **Key Considerations:*\\* Credibility paramount. Practice areas. Attorney profiles. Case results. Contact forms. Professional imagery.\n- **Anti-Patterns:*\\* Outdated design + Hidden credentials + AI purple/pink gradients\n\n## Insurance Platform\n- **Keywords:*\\* insurance, platform\n- **Primary Style:*\\* Trust & Authority + Flat Design\n- **Secondary Styles:*\\* Accessible & Ethical, Minimalism\n- **Landing Pattern:*\\* Conversion-Optimized + Trust\n- **Dashboard Style:*\\* Claims Analytics Dashboard\n- **Color Focus:*\\* Trust Blue (#0066CC) + Green (security) + Neutral\n- **Key Considerations:*\\* Quote calculator. Policy comparison. Claims process. Trust signals. Clear pricing. Security badges.\n- **Anti-Patterns:*\\* Confusing pricing + No trust signals + AI purple/pink gradients\n\n## Banking/Traditional Finance\n- **Keywords:*\\* banking, finance, traditional\n- **Primary Style:*\\* Minimalism + Accessible & Ethical\n- **Secondary Styles:*\\* Trust & Authority, Dark Mode (OLED)\n- **Landing Pattern:*\\* Trust & Authority + Feature-Rich\n- **Dashboard Style:*\\* Financial Dashboard\n- **Color Focus:*\\* Navy (#0A1628) + Trust Blue + Gold accents\n- **Key Considerations:*\\* Security-first. Account overview. Transaction history. Mobile banking. Accessibility critical. Trust paramount.\n- **Anti-Patterns:*\\* Playful design + Poor security UX + AI purple/pink gradients\n\n## Online Course/E-learning\n- **Keywords:*\\* course, e, learning, online\n- **Primary Style:*\\* Claymorphism + Vibrant & Block-based\n- **Secondary Styles:*\\* Motion-Driven, Flat Design\n- **Landing Pattern:*\\* Feature-Rich Showcase + Social Proof\n- **Dashboard Style:*\\* Education Dashboard\n- **Color Focus:*\\* Vibrant learning colors + Progress green\n- **Key Considerations:*\\* Course catalog. Progress tracking. Video player. Quizzes. Certificates. Community forums. Gamification.\n- **Anti-Patterns:*\\* Boring design + No gamification\n\n## Non-profit/Charity\n- **Keywords:*\\* charity, non, profit\n- **Primary Style:*\\* Accessible & Ethical + Organic Biophilic\n- **Secondary Styles:*\\* Minimalism, Storytelling-Driven\n- **Landing Pattern:*\\* Storytelling-Driven + Trust\n- **Dashboard Style:*\\* Donation Analytics Dashboard\n- **Color Focus:*\\* Cause-related colors + Trust + Warm\n- **Key Considerations:*\\* Impact stories. Donation flow. Transparency reports. Volunteer signup. Event calendar. Emotional connection.\n- **Anti-Patterns:*\\* No impact data + Hidden financials\n\n## Music Streaming\n- **Keywords:*\\* music, streaming\n- **Primary Style:*\\* Dark Mode (OLED) + Vibrant & Block-based\n- **Secondary Styles:*\\* Motion-Driven, Aurora UI\n- **Landing Pattern:*\\* Feature-Rich Showcase\n- **Dashboard Style:*\\* Media/Entertainment Dashboard\n- **Color Focus:*\\* Dark (#121212) + Vibrant accents + Album art colors\n- **Key Considerations:*\\* Audio player. Playlist management. Artist pages. Personalization. Social features. Waveform visualizations.\n\n\n## Video Streaming/OTT\n- **Keywords:*\\* ott, streaming, video\n- **Primary Style:*\\* Dark Mode (OLED) + Motion-Driven\n- **Secondary Styles:*\\* Glassmorphism, Vibrant & Block-based\n- **Landing Pattern:*\\* Hero-Centric Design + Feature-Rich\n- **Dashboard Style:*\\* Media/Entertainment Dashboard\n- **Color Focus:*\\* Dark bg + Content poster colors + Brand accent\n- **Key Considerations:*\\* Video player. Content discovery. Watchlist. Continue watching. Personalized recommendations. Thumbnail-heavy.\n- **Anti-Patterns:*\\* Static layout + Slow video player\n\n## Job Board/Recruitment\n- **Keywords:*\\* board, job, recruitment\n- **Primary Style:*\\* Flat Design + Minimalism\n- **Secondary Styles:*\\* Vibrant & Block-based, Accessible & Ethical\n- **Landing Pattern:*\\* Conversion-Optimized + Feature-Rich\n- **Dashboard Style:*\\* HR Analytics Dashboard\n- **Color Focus:*\\* Professional Blue + Success Green + Neutral\n- **Key Considerations:*\\* Job listings. Search/filter. Company profiles. Application tracking. Resume upload. Salary insights.\n- **Anti-Patterns:*\\* Outdated forms + Hidden filters\n\n## Marketplace (P2P)\n- **Keywords:*\\* buyers, listings, marketplace, p, platform, sellers\n- **Primary Style:*\\* Vibrant & Block-based + Flat Design\n- **Secondary Styles:*\\* Micro-interactions, Trust & Authority\n- **Landing Pattern:*\\* Feature-Rich Showcase + Social Proof\n- **Dashboard Style:*\\* E-commerce Analytics\n- **Color Focus:*\\* Trust colors + Category colors + Success green\n- **Key Considerations:*\\* Seller/buyer profiles. Listings. Reviews/ratings. Secure payment. Messaging. Search/filter. Trust badges.\n- **Anti-Patterns:*\\* Low trust signals + Confusing layout\n\n## Logistics/Delivery\n- **Keywords:*\\* delivery, logistics\n- **Primary Style:*\\* Minimalism + Flat Design\n- **Secondary Styles:*\\* Dark Mode (OLED), Micro-interactions\n- **Landing Pattern:*\\* Feature-Rich Showcase + Conversion\n- **Dashboard Style:*\\* Real-Time Monitoring + Route Analytics\n- **Color Focus:*\\* Blue (#2563EB) + Orange (tracking) + Green (delivered)\n- **Key Considerations:*\\* Real-time tracking. Delivery scheduling. Route optimization. Driver management. Status updates. Map integration.\n- **Anti-Patterns:*\\* Static tracking + No map integration + AI purple/pink gradients\n\n## Agriculture/Farm Tech\n- **Keywords:*\\* agriculture, farm, tech\n- **Primary Style:*\\* Organic Biophilic + Flat Design\n- **Secondary Styles:*\\* Minimalism, Accessible & Ethical\n- **Landing Pattern:*\\* Feature-Rich Showcase + Trust\n- **Dashboard Style:*\\* IoT Sensor Dashboard\n- **Color Focus:*\\* Earth Green (#4A7C23) + Brown + Sky Blue\n- **Key Considerations:*\\* Crop monitoring. Weather data. IoT sensors. Yield tracking. Market prices. Sustainable imagery.\n- **Anti-Patterns:*\\* Generic design + Ignored accessibility + AI purple/pink gradients\n\n## Construction/Architecture\n- **Keywords:*\\* architecture, construction\n- **Primary Style:*\\* Minimalism + 3D & Hyperrealism\n- **Secondary Styles:*\\* Brutalism, Swiss Modernism 2.0\n- **Landing Pattern:*\\* Hero-Centric Design + Feature-Rich\n- **Dashboard Style:*\\* Project Management Dashboard\n- **Color Focus:*\\* Grey (#4A4A4A) + Orange (safety) + Blueprint Blue\n- **Key Considerations:*\\* Project portfolio. 3D renders. Timeline. Material specs. Team collaboration. Blueprint aesthetic.\n- **Anti-Patterns:*\\* 2D-only layouts + Poor image quality + AI purple/pink gradients\n\n## Automotive/Car Dealership\n- **Keywords:*\\* automotive, car, dealership\n- **Primary Style:*\\* Motion-Driven + 3D & Hyperrealism\n- **Secondary Styles:*\\* Dark Mode (OLED), Glassmorphism\n- **Landing Pattern:*\\* Hero-Centric Design + Feature-Rich\n- **Dashboard Style:*\\* Sales Intelligence Dashboard\n- **Color Focus:*\\* Brand colors + Metallic accents + Dark/Light\n- **Key Considerations:*\\* Vehicle showcase. 360° views. Comparison tools. Financing calculator. Test drive booking. High-quality imagery.\n- **Anti-Patterns:*\\* Static product pages + Poor UX\n\n## Photography Studio\n- **Keywords:*\\* photography, studio\n- **Primary Style:*\\* Motion-Driven + Minimalism\n- **Secondary Styles:*\\* Aurora UI, Glassmorphism\n- **Landing Pattern:*\\* Storytelling-Driven + Hero-Centric\n- **Dashboard Style:*\\* N/A - Portfolio focused\n- **Color Focus:*\\* Black + White + Minimal accent\n- **Key Considerations:*\\* Portfolio gallery. Before/after. Service packages. Booking system. Client galleries. Full-bleed imagery.\n- **Anti-Patterns:*\\* Heavy text + Poor image showcase\n\n## Coworking Space\n- **Keywords:*\\* coworking, space\n- **Primary Style:*\\* Vibrant & Block-based + Glassmorphism\n- **Secondary Styles:*\\* Minimalism, Motion-Driven\n- **Landing Pattern:*\\* Hero-Centric Design + Feature-Rich\n- **Dashboard Style:*\\* Occupancy Dashboard\n- **Color Focus:*\\* Energetic colors + Wood tones + Brand accent\n- **Key Considerations:*\\* Space tour. Membership plans. Booking system. Amenities. Community events. Virtual tour.\n- **Anti-Patterns:*\\* Outdated photos + Confusing layout\n\n## Cleaning Service\n- **Keywords:*\\* appointment, booking, cleaning, consultation, service\n- **Primary Style:*\\* Soft UI Evolution + Flat Design\n- **Secondary Styles:*\\* Minimalism, Micro-interactions\n- **Landing Pattern:*\\* Conversion-Optimized + Trust\n- **Dashboard Style:*\\* Service Analytics\n- **Color Focus:*\\* Fresh Blue (#00B4D8) + Clean White + Green\n- **Key Considerations:*\\* Service packages. Booking system. Price calculator. Before/after gallery. Reviews. Trust badges.\n- **Anti-Patterns:*\\* Poor before/after imagery + Hidden pricing\n\n## Home Services (Plumber/Electrician)\n- **Keywords:*\\* appointment, booking, consultation, electrician, home, plumber, service, services\n- **Primary Style:*\\* Flat Design + Trust & Authority\n- **Secondary Styles:*\\* Minimalism, Accessible & Ethical\n- **Landing Pattern:*\\* Conversion-Optimized + Trust\n- **Dashboard Style:*\\* Service Analytics\n- **Color Focus:*\\* Trust Blue + Safety Orange + Professional grey\n- **Key Considerations:*\\* Service list. Emergency contact. Booking. Price transparency. Certifications. Local trust signals.\n\n\n## Childcare/Daycare\n- **Keywords:*\\* childcare, daycare\n- **Primary Style:*\\* Claymorphism + Vibrant & Block-based\n- **Secondary Styles:*\\* Soft UI Evolution, Accessible & Ethical\n- **Landing Pattern:*\\* Social Proof-Focused + Trust\n- **Dashboard Style:*\\* Parent Dashboard\n- **Color Focus:*\\* Playful pastels + Safe colors + Warm accents\n- **Key Considerations:*\\* Programs. Staff profiles. Safety certifications. Parent portal. Activity updates. Cheerful imagery.\n- **Anti-Patterns:*\\* Generic design + Hidden safety info\n\n## Senior Care/Elderly\n- **Keywords:*\\* care, elderly, senior\n- **Primary Style:*\\* Accessible & Ethical + Soft UI Evolution\n- **Secondary Styles:*\\* Minimalism, Neumorphism\n- **Landing Pattern:*\\* Trust & Authority + Social Proof\n- **Dashboard Style:*\\* Healthcare Analytics\n- **Color Focus:*\\* Calm Blue + Warm neutrals + Large text\n- **Key Considerations:*\\* Care services. Staff qualifications. Facility tour. Family portal. Large touch targets. High contrast. Accessibility-first.\n- **Anti-Patterns:*\\* Small text + Complex navigation + AI purple/pink gradients\n\n## Medical Clinic\n- **Keywords:*\\* clinic, medical\n- **Primary Style:*\\* Accessible & Ethical + Minimalism\n- **Secondary Styles:*\\* Neumorphism, Trust & Authority\n- **Landing Pattern:*\\* Trust & Authority + Conversion\n- **Dashboard Style:*\\* Healthcare Analytics\n- **Color Focus:*\\* Medical Blue (#0077B6) + Trust White + Calm Green\n- **Key Considerations:*\\* Services. Doctor profiles. Online booking. Patient portal. Insurance info. HIPAA compliant. Trust signals.\n- **Anti-Patterns:*\\* Outdated interface + Confusing booking + AI purple/pink gradients\n\n## Pharmacy/Drug Store\n- **Keywords:*\\* drug, pharmacy, store\n- **Primary Style:*\\* Flat Design + Accessible & Ethical\n- **Secondary Styles:*\\* Minimalism, Trust & Authority\n- **Landing Pattern:*\\* Conversion-Optimized + Trust\n- **Dashboard Style:*\\* Inventory Dashboard\n- **Color Focus:*\\* Pharmacy Green + Trust Blue + Clean White\n- **Key Considerations:*\\* Product catalog. Prescription upload. Refill reminders. Health info. Store locator. Safety certifications.\n- **Anti-Patterns:*\\* Confusing layout + Privacy concerns + AI purple/pink gradients\n\n## Dental Practice\n- **Keywords:*\\* dental, practice\n- **Primary Style:*\\* Soft UI Evolution + Minimalism\n- **Secondary Styles:*\\* Accessible & Ethical, Trust & Authority\n- **Landing Pattern:*\\* Social Proof-Focused + Conversion\n- **Dashboard Style:*\\* Patient Analytics\n- **Color Focus:*\\* Fresh Blue + White + Smile Yellow accent\n- **Key Considerations:*\\* Services. Dentist profiles. Before/after. Online booking. Insurance. Patient testimonials. Friendly imagery.\n- **Anti-Patterns:*\\* Poor imagery + No testimonials\n\n## Veterinary Clinic\n- **Keywords:*\\* clinic, veterinary\n- **Primary Style:*\\* Claymorphism + Accessible & Ethical\n- **Secondary Styles:*\\* Soft UI Evolution, Flat Design\n- **Landing Pattern:*\\* Social Proof-Focused + Trust\n- **Dashboard Style:*\\* Pet Health Dashboard\n- **Color Focus:*\\* Caring Blue + Pet-friendly colors + Warm accents\n- **Key Considerations:*\\* Pet services. Vet profiles. Online booking. Pet portal. Emergency info. Friendly animal imagery.\n- **Anti-Patterns:*\\* Generic design + Hidden services\n\n## Florist/Plant Shop\n- **Keywords:*\\* florist, plant, shop\n- **Primary Style:*\\* Organic Biophilic + Vibrant & Block-based\n- **Secondary Styles:*\\* Aurora UI, Motion-Driven\n- **Landing Pattern:*\\* Hero-Centric Design + Conversion\n- **Dashboard Style:*\\* E-commerce Analytics\n- **Color Focus:*\\* Natural Green + Floral pinks/purples + Earth tones\n- **Key Considerations:*\\* Product catalog. Occasion categories. Delivery scheduling. Care guides. Seasonal collections. Beautiful imagery.\n- **Anti-Patterns:*\\* Poor imagery + No seasonal content\n\n## Bakery/Cafe\n- **Keywords:*\\* bakery, cafe\n- **Primary Style:*\\* Vibrant & Block-based + Soft UI Evolution\n- **Secondary Styles:*\\* Claymorphism, Motion-Driven\n- **Landing Pattern:*\\* Hero-Centric Design + Conversion\n- **Dashboard Style:*\\* N/A - Order focused\n- **Color Focus:*\\* Warm Brown + Cream + Appetizing accents\n- **Key Considerations:*\\* Menu display. Online ordering. Location/hours. Catering. Seasonal specials. Appetizing photography.\n- **Anti-Patterns:*\\* Poor food photos + Hidden hours\n\n## Coffee Shop\n- **Keywords:*\\* coffee, shop\n- **Primary Style:*\\* Minimalism + Organic Biophilic\n- **Secondary Styles:*\\* Soft UI Evolution, Flat Design\n- **Landing Pattern:*\\* Hero-Centric Design + Conversion\n- **Dashboard Style:*\\* N/A - Order focused\n- **Color Focus:*\\* Coffee Brown (#6F4E37) + Cream + Warm accents\n- **Key Considerations:*\\* Menu. Online ordering. Loyalty program. Location. Story/origin. Cozy aesthetic.\n- **Anti-Patterns:*\\* Generic design + No atmosphere\n\n## Brewery/Winery\n- **Keywords:*\\* brewery, winery\n- **Primary Style:*\\* Motion-Driven + Storytelling-Driven\n- **Secondary Styles:*\\* Dark Mode (OLED), Organic Biophilic\n- **Landing Pattern:*\\* Storytelling-Driven + Hero-Centric\n- **Dashboard Style:*\\* N/A - E-commerce focused\n- **Color Focus:*\\* Deep amber/burgundy + Gold + Craft aesthetic\n- **Key Considerations:*\\* Product showcase. Story/heritage. Tasting notes. Events. Club membership. Artisanal imagery.\n- **Anti-Patterns:*\\* Generic product pages + No story\n\n## Airline\n- **Keywords:*\\* ai, airline, artificial-intelligence, automation, machine-learning, ml\n- **Primary Style:*\\* Minimalism + Glassmorphism\n- **Secondary Styles:*\\* Motion-Driven, Accessible & Ethical\n- **Landing Pattern:*\\* Conversion-Optimized + Feature-Rich\n- **Dashboard Style:*\\* Operations Dashboard\n- **Color Focus:*\\* Sky Blue + Brand colors + Trust accents\n- **Key Considerations:*\\* Flight search. Booking. Check-in. Boarding pass. Loyalty program. Route maps. Mobile-first.\n- **Anti-Patterns:*\\* Complex booking + Poor mobile\n\n## News/Media Platform\n- **Keywords:*\\* content, entertainment, media, news, platform, streaming, video\n- **Primary Style:*\\* Minimalism + Flat Design\n- **Secondary Styles:*\\* Dark Mode (OLED), Accessible & Ethical\n- **Landing Pattern:*\\* Hero-Centric Design + Feature-Rich\n- **Dashboard Style:*\\* Media Analytics Dashboard\n- **Color Focus:*\\* Brand colors + High contrast + Category colors\n- **Key Considerations:*\\* Article layout. Breaking news. Categories. Search. Subscription. Mobile reading. Fast loading.\n- **Anti-Patterns:*\\* Cluttered layout + Slow loading\n\n## Magazine/Blog\n- **Keywords:*\\* articles, blog, content, magazine, posts, writing\n- **Primary Style:*\\* Swiss Modernism 2.0 + Motion-Driven\n- **Secondary Styles:*\\* Minimalism, Aurora UI\n- **Landing Pattern:*\\* Storytelling-Driven + Hero-Centric\n- **Dashboard Style:*\\* Content Analytics\n- **Color Focus:*\\* Editorial colors + Brand primary + Clean white\n- **Key Considerations:*\\* Article showcase. Category navigation. Author profiles. Newsletter signup. Related content. Typography-focused.\n- **Anti-Patterns:*\\* Poor typography + Slow loading\n\n## Freelancer Platform\n- **Keywords:*\\* freelancer, platform\n- **Primary Style:*\\* Flat Design + Minimalism\n- **Secondary Styles:*\\* Vibrant & Block-based, Micro-interactions\n- **Landing Pattern:*\\* Feature-Rich Showcase + Conversion\n- **Dashboard Style:*\\* Marketplace Analytics\n- **Color Focus:*\\* Professional Blue + Success Green + Neutral\n- **Key Considerations:*\\* Profile creation. Portfolio. Skill matching. Messaging. Payment. Reviews. Project management.\n- **Anti-Patterns:*\\* Poor profiles + No reviews\n\n## Consulting Firm\n- **Keywords:*\\* consulting, firm\n- **Primary Style:*\\* Trust & Authority + Minimalism\n- **Secondary Styles:*\\* Swiss Modernism 2.0, Accessible & Ethical\n- **Landing Pattern:*\\* Trust & Authority + Feature-Rich\n- **Dashboard Style:*\\* N/A - Lead generation\n- **Color Focus:*\\* Navy + Gold + Professional grey\n- **Key Considerations:*\\* Service areas. Case studies. Team profiles. Thought leadership. Contact. Professional credibility.\n- **Anti-Patterns:*\\* Generic content + No credentials + AI purple/pink gradients\n\n## Marketing Agency\n- **Keywords:*\\* agency, creative, design, marketing, studio\n- **Primary Style:*\\* Brutalism + Motion-Driven\n- **Secondary Styles:*\\* Vibrant & Block-based, Aurora UI\n- **Landing Pattern:*\\* Storytelling-Driven + Feature-Rich\n- **Dashboard Style:*\\* Campaign Analytics\n- **Color Focus:*\\* Bold brand colors + Creative freedom\n- **Key Considerations:*\\* Portfolio. Case studies. Services. Team. Creative showcase. Results-focused. Bold aesthetic.\n- **Anti-Patterns:*\\* Boring design + Hidden work\n\n## Event Management\n- **Keywords:*\\* conference, event, management, meetup, registration, ticket\n- **Primary Style:*\\* Vibrant & Block-based + Motion-Driven\n- **Secondary Styles:*\\* Glassmorphism, Aurora UI\n- **Landing Pattern:*\\* Hero-Centric Design + Feature-Rich\n- **Dashboard Style:*\\* Event Analytics\n- **Color Focus:*\\* Event theme colors + Excitement accents\n- **Key Considerations:*\\* Event showcase. Registration. Agenda. Speakers. Sponsors. Ticket sales. Countdown timer.\n- **Anti-Patterns:*\\* Confusing registration + No countdown\n\n## Conference/Webinar Platform\n- **Keywords:*\\* conference, platform, webinar\n- **Primary Style:*\\* Glassmorphism + Minimalism\n- **Secondary Styles:*\\* Motion-Driven, Flat Design\n- **Landing Pattern:*\\* Feature-Rich Showcase + Conversion\n- **Dashboard Style:*\\* Attendee Analytics\n- **Color Focus:*\\* Professional Blue + Video accent + Brand\n- **Key Considerations:*\\* Registration. Agenda. Speaker profiles. Live stream. Networking. Recording access. Virtual event features.\n- **Anti-Patterns:*\\* Poor video UX + No networking\n\n## Membership/Community\n- **Keywords:*\\* community, membership\n- **Primary Style:*\\* Vibrant & Block-based + Soft UI Evolution\n- **Secondary Styles:*\\* Bento Box Grid, Micro-interactions\n- **Landing Pattern:*\\* Social Proof-Focused + Conversion\n- **Dashboard Style:*\\* Community Analytics\n- **Color Focus:*\\* Community brand colors + Engagement accents\n- **Key Considerations:*\\* Member benefits. Pricing tiers. Community showcase. Events. Member directory. Exclusive content.\n- **Anti-Patterns:*\\* Hidden benefits + No community proof\n\n## Newsletter Platform\n- **Keywords:*\\* newsletter, platform\n- **Primary Style:*\\* Minimalism + Flat Design\n- **Secondary Styles:*\\* Swiss Modernism 2.0, Accessible & Ethical\n- **Landing Pattern:*\\* Minimal & Direct + Conversion\n- **Dashboard Style:*\\* Email Analytics\n- **Color Focus:*\\* Brand primary + Clean white + CTA accent\n- **Key Considerations:*\\* Subscribe form. Archive. About. Social proof. Sample content. Simple conversion.\n- **Anti-Patterns:*\\* Complex signup + No preview\n\n## Digital Products/Downloads\n- **Keywords:*\\* digital, downloads, products\n- **Primary Style:*\\* Vibrant & Block-based + Motion-Driven\n- **Secondary Styles:*\\* Glassmorphism, Bento Box Grid\n- **Landing Pattern:*\\* Feature-Rich Showcase + Conversion\n- **Dashboard Style:*\\* E-commerce Analytics\n- **Color Focus:*\\* Product category colors + Brand + Success green\n- **Key Considerations:*\\* Product showcase. Preview. Pricing. Instant delivery. License management. Customer reviews.\n- **Anti-Patterns:*\\* No preview + Slow delivery\n\n## Church/Religious Organization\n- **Keywords:*\\* church, organization, religious\n- **Primary Style:*\\* Accessible & Ethical + Soft UI Evolution\n- **Secondary Styles:*\\* Minimalism, Trust & Authority\n- **Landing Pattern:*\\* Hero-Centric Design + Social Proof\n- **Dashboard Style:*\\* N/A - Community focused\n- **Color Focus:*\\* Warm Gold + Deep Purple/Blue + White\n- **Key Considerations:*\\* Service times. Events. Sermons. Community. Giving. Location. Welcoming imagery.\n- **Anti-Patterns:*\\* Outdated design + Hidden info\n\n## Sports Team/Club\n- **Keywords:*\\* club, sports, team\n- **Primary Style:*\\* Vibrant & Block-based + Motion-Driven\n- **Secondary Styles:*\\* Dark Mode (OLED), 3D & Hyperrealism\n- **Landing Pattern:*\\* Hero-Centric Design + Feature-Rich\n- **Dashboard Style:*\\* Performance Analytics\n- **Color Focus:*\\* Team colors + Energetic accents\n- **Key Considerations:*\\* Schedule. Roster. News. Tickets. Merchandise. Fan engagement. Action imagery.\n- **Anti-Patterns:*\\* Static content + Poor fan engagement\n\n## Museum/Gallery\n- **Keywords:*\\* gallery, museum\n- **Primary Style:*\\* Minimalism + Motion-Driven\n- **Secondary Styles:*\\* Swiss Modernism 2.0, 3D & Hyperrealism\n- **Landing Pattern:*\\* Storytelling-Driven + Feature-Rich\n- **Dashboard Style:*\\* Visitor Analytics\n- **Color Focus:*\\* Art-appropriate neutrals + Exhibition accents\n- **Key Considerations:*\\* Exhibitions. Collections. Tickets. Events. Virtual tours. Educational content. Art-focused design.\n- **Anti-Patterns:*\\* Cluttered layout + No online access\n\n## Theater/Cinema\n- **Keywords:*\\* cinema, theater\n- **Primary Style:*\\* Dark Mode (OLED) + Motion-Driven\n- **Secondary Styles:*\\* Vibrant & Block-based, Glassmorphism\n- **Landing Pattern:*\\* Hero-Centric Design + Conversion\n- **Dashboard Style:*\\* Booking Analytics\n- **Color Focus:*\\* Dark + Spotlight accents + Gold\n- **Key Considerations:*\\* Showtimes. Seat selection. Trailers. Coming soon. Membership. Dramatic imagery.\n- **Anti-Patterns:*\\* Poor booking UX + No trailers\n\n## Language Learning App\n- **Keywords:*\\* app, language, learning\n- **Primary Style:*\\* Claymorphism + Vibrant & Block-based\n- **Secondary Styles:*\\* Micro-interactions, Flat Design\n- **Landing Pattern:*\\* Feature-Rich Showcase + Social Proof\n- **Dashboard Style:*\\* Learning Analytics\n- **Color Focus:*\\* Playful colors + Progress indicators + Country flags\n- **Key Considerations:*\\* Lesson structure. Progress tracking. Gamification. Speaking practice. Community. Achievement badges.\n- **Anti-Patterns:*\\* Boring design + No motivation\n\n## Coding Bootcamp\n- **Keywords:*\\* bootcamp, coding\n- **Primary Style:*\\* Dark Mode (OLED) + Minimalism\n- **Secondary Styles:*\\* Cyberpunk UI, Flat Design\n- **Landing Pattern:*\\* Feature-Rich Showcase + Social Proof\n- **Dashboard Style:*\\* Student Analytics\n- **Color Focus:*\\* Code editor colors + Brand + Success green\n- **Key Considerations:*\\* Curriculum. Projects. Career outcomes. Alumni. Pricing. Application. Terminal aesthetic.\n- **Anti-Patterns:*\\* Light mode only + Hidden results\n\n## Cybersecurity Platform\n- **Keywords:*\\* cyber, security, platform\n- **Primary Style:*\\* Cyberpunk UI + Dark Mode (OLED)\n- **Secondary Styles:*\\* Neubrutalism, Minimal & Direct\n- **Landing Pattern:*\\* Trust & Authority + Real-Time\n- **Dashboard Style:*\\* Real-Time Monitoring + Heat Map\n- **Color Focus:*\\* Matrix Green + Deep Black + Terminal feel\n- **Key Considerations:*\\* Data density. Threat visualization. Dark mode default.\n- **Anti-Patterns:*\\* Light mode + Poor data viz\n\n## Developer Tool / IDE\n- **Keywords:*\\* dev, developer, tool, ide\n- **Primary Style:*\\* Dark Mode (OLED) + Minimalism\n- **Secondary Styles:*\\* Flat Design, Bento Box Grid\n- **Landing Pattern:*\\* Minimal & Direct + Documentation\n- **Dashboard Style:*\\* Real-Time Monitor + Terminal\n- **Color Focus:*\\* Dark syntax theme colors + Blue focus\n- **Key Considerations:*\\* Keyboard shortcuts. Syntax highlighting. Fast performance.\n\n\n## Biotech / Life Sciences\n- **Keywords:*\\* biotech, biology, science\n- **Primary Style:*\\* Glassmorphism + Clean Science\n- **Secondary Styles:*\\* Minimalism, Organic Biophilic\n- **Landing Pattern:*\\* Storytelling-Driven + Research\n- **Dashboard Style:*\\* Data-Dense + Predictive\n- **Color Focus:*\\* Sterile White + DNA Blue + Life Green\n- **Key Considerations:*\\* Data accuracy. Cleanliness. Complex data viz.\n\n\n## Space Tech / Aerospace\n- **Keywords:*\\* aerospace, space, tech\n- **Primary Style:*\\* Holographic / HUD + Dark Mode\n- **Secondary Styles:*\\* Glassmorphism, 3D & Hyperrealism\n- **Landing Pattern:*\\* Immersive Experience + Hero\n- **Dashboard Style:*\\* Real-Time Monitoring + 3D\n- **Color Focus:*\\* Deep Space Black + Star White + Metallic\n- **Key Considerations:*\\* High-tech feel. Precision. Telemetry data.\n\n\n## Architecture / Interior\n- **Keywords:*\\* architecture, design, interior\n- **Primary Style:*\\* Exaggerated Minimalism + High Imagery\n- **Secondary Styles:*\\* Swiss Modernism 2.0, Parallax\n- **Landing Pattern:*\\* Portfolio Grid + Visuals\n- **Dashboard Style:*\\* Project Management + Gallery\n- **Color Focus:*\\* Monochrome + Gold Accent + High Imagery\n- **Key Considerations:*\\* High-res images. Typography. Space.\n\n\n## Quantum Computing Interface\n- **Keywords:*\\* quantum, computing, physics, qubit, future, science\n- **Primary Style:*\\* Holographic / HUD + Dark Mode\n- **Secondary Styles:*\\* Glassmorphism, Spatial UI\n- **Landing Pattern:*\\* Immersive/Interactive Experience\n- **Dashboard Style:*\\* 3D Spatial Data + Real-Time Monitor\n- **Color Focus:*\\* Quantum Blue #00FFFF + Deep Black + Interference patterns\n- **Key Considerations:*\\* Visualize complexity. Qubit states. Probability clouds. High-tech trust.\n\n\n## Biohacking / Longevity App\n- **Keywords:*\\* biohacking, health, longevity, tracking, wellness, science\n- **Primary Style:*\\* Biomimetic / Organic 2.0\n- **Secondary Styles:*\\* Minimalism, Dark Mode (OLED)\n- **Landing Pattern:*\\* Data-Dense + Storytelling\n- **Dashboard Style:*\\* Real-Time Monitor + Biological Data\n- **Color Focus:*\\* Cellular Pink/Red + DNA Blue + Clean White\n- **Key Considerations:*\\* Personal data privacy. Scientific credibility. Biological visualizations.\n\n\n## Autonomous Drone Fleet Manager\n- **Keywords:*\\* drone, autonomous, fleet, aerial, logistics, robotics\n- **Primary Style:*\\* HUD / Sci-Fi FUI\n- **Secondary Styles:*\\* Real-Time Monitor, Spatial UI\n- **Landing Pattern:*\\* Real-Time Monitor\n- **Dashboard Style:*\\* Geographic + Real-Time\n- **Color Focus:*\\* Tactical Green #00FF00 + Alert Red + Map Dark\n- **Key Considerations:*\\* Real-time telemetry. 3D spatial awareness. Latency indicators. Safety alerts.\n\n\n## Generative Art Platform\n- **Keywords:*\\* art, generative, ai, creative, platform, gallery\n- **Primary Style:*\\* Minimalism (Frame) + Gen Z Chaos\n- **Secondary Styles:*\\* Masonry Grid, Dark Mode\n- **Landing Pattern:*\\* Bento Grid Showcase\n- **Dashboard Style:*\\* Gallery / Portfolio\n- **Color Focus:*\\* Neutral #F5F5F5 (Canvas) + User Content\n- **Key Considerations:*\\* Content is king. Fast loading. Creator attribution. Minting flow.\n- **Anti-Patterns:*\\* Heavy chrome + Slow loading\n\n## Spatial Computing OS / App\n- **Keywords:*\\* spatial, vr, ar, vision, os, immersive, mixed-reality\n- **Primary Style:*\\* Spatial UI (VisionOS)\n- **Secondary Styles:*\\* Glassmorphism, 3D & Hyperrealism\n- **Landing Pattern:*\\* Immersive/Interactive Experience\n- **Dashboard Style:*\\* Spatial Dashboard\n- **Color Focus:*\\* Frosted Glass + System Colors + Depth\n- **Key Considerations:*\\* Gaze/Pinch interaction. Depth hierarchy. Environment awareness.\n\n\n## Sustainable Energy / Climate Tech\n- **Keywords:*\\* climate, energy, sustainable, green, tech, carbon\n- **Primary Style:*\\* Organic Biophilic + E-Ink / Paper\n- **Secondary Styles:*\\* Data-Dense, Swiss Modernism\n- **Landing Pattern:*\\* Interactive Demo + Data\n- **Dashboard Style:*\\* Energy/Utilities Dashboard\n- **Color Focus:*\\* Earth Green + Sky Blue + Solar Yellow\n- **Key Considerations:*\\* Data transparency. Impact visualization. Low-carbon web design.",
-      "tags": ["product-type", "design-system", "design-inspiration", "recommendation"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-stack-astro",
-      "type": "pattern",
-      "domain": "design",
-      "title": "astro Implementation Guidelines",
-      "severity": "suggestion",
-      "description": "# astro Implementation Guidelines\n\n## Architecture: Use Islands Architecture\n\nAstro's partial hydration only loads JS for interactive components\n\n**Do:*\\* Interactive components with client directives\n**Don't:*\\* Hydrate entire page like traditional SPA\n\n```\n<Counter client:load />\n```\n\n## Architecture: Default to zero JS\n\nAstro ships zero JS by default - add only when needed\n\n**Do:*\\* Static components without client directive\n**Don't:*\\* Add client:load to everything\n\n```\n<Header /> (static)\n```\n\n## Architecture: Choose right client directive\n\nDifferent directives for different hydration timing\n\n**Do:*\\* client:visible for below-fold client:idle for non-critical\n**Don't:*\\* client:load for everything\n\n```\n<Comments client:visible />\n```\n\n## Architecture: Use content collections\n\nType-safe content management for blogs docs\n\n**Do:*\\* Content collections for structured content\n**Don't:*\\* Loose markdown files without schema\n\n```\nconst posts = await getCollection('blog')\n```\n\n## Architecture: Define collection schemas\n\nZod schemas for content validation\n\n**Do:*\\* Schema with required fields and types\n**Don't:*\\* No schema validation\n\n```\ndefineCollection({ schema: z.object({...}) })\n```\n\n## Routing: Use file-based routing\n\nCreate routes by adding .astro files in pages/\n\n**Do:*\\* pages/ directory for routes\n**Don't:*\\* Manual route configuration\n\n```\nsrc/pages/about.astro\n```\n\n## Routing: Dynamic routes with brackets\n\nUse [param] for dynamic routes\n\n**Do:*\\* Bracket notation for params\n**Don't:*\\* Query strings for dynamic content\n\n```\npages/blog/[slug].astro\n```\n\n## Routing: Use getStaticPaths for SSG\n\nGenerate static pages at build time\n\n**Do:*\\* getStaticPaths for known dynamic routes\n**Don't:*\\* Fetch at runtime for static content\n\n```\nexport async function getStaticPaths() { return [...] }\n```\n\n## Routing: Enable SSR when needed\n\nServer-side rendering for dynamic content\n\n**Do:*\\* output: 'server' or 'hybrid' for dynamic\n**Don't:*\\* SSR for purely static sites\n\n```\nexport const prerender = false;\n```\n\n## Components: Keep .astro for static\n\nUse .astro components for static content\n\n**Do:*\\* Astro components for layout structure\n**Don't:*\\* React/Vue for static markup\n\n```\n<Layout><slot /></Layout>\n```\n\n## Components: Use framework components for interactivity\n\nReact Vue Svelte for complex interactivity\n\n**Do:*\\* Framework component with client directive\n**Don't:*\\* Astro component with inline scripts\n\n```\n<ReactCounter client:load />\n```\n\n## Components: Pass data via props\n\nAstro components receive props in frontmatter\n\n**Do:*\\* Astro.props for component data\n**Don't:*\\* Global state for simple data\n\n```\nconst { title } = Astro.props;\n```\n\n## Components: Use slots for composition\n\nNamed and default slots for flexible layouts\n\n**Do:** `<slot /> for child content`\n**Don't:*\\* Props for HTML content\n\n```\n<slot name=header />\n```\n\n## Components: Colocate component styles\n\nScoped styles in component file\n\n**Do:** `<style> in same .astro file`\n**Don't:*\\* Separate CSS files for component styles\n\n```\n<style> .card { } </style>\n```\n\n## Styling: Use scoped styles by default\n\nAstro scopes styles to component automatically\n\n**Do:** `<style> for component-specific styles`\n**Don't:*\\* Global styles for everything\n\n```\n<style> h1 { } </style> (scoped)\n```\n\n## Styling: Use is:global sparingly\n\nGlobal styles only when truly needed\n\n**Do:*\\* is:global for base styles or overrides\n**Don't:*\\* is:global for component styles\n\n```\n<style is:global> body { } </style>\n```\n\n## Styling: Integrate Tailwind properly\n\nUse @astrojs/tailwind integration\n\n**Do:*\\* Official Tailwind integration\n**Don't:*\\* Manual Tailwind setup\n\n```\nnpx astro add tailwind\n```\n\n## Styling: Use CSS variables for theming\n\nDefine tokens in :root\n\n**Do:*\\* CSS custom properties for themes\n**Don't:*\\* Hardcoded colors everywhere\n\n```\n:root { --primary: #3b82f6; }\n```\n\n## Data: Fetch in frontmatter\n\nData fetching in component frontmatter\n\n**Do:*\\* Top-level await in frontmatter\n**Don't:*\\* useEffect for initial data\n\n```\nconst data = await fetch(url)\n```\n\n## Data: Use Astro.glob for local files\n\nImport multiple local files\n\n**Do:*\\* Astro.glob for markdown/data files\n**Don't:*\\* Manual imports for each file\n\n```\nconst posts = await Astro.glob('./posts/*.md')\n```\n\n## Data: Prefer content collections over glob\n\nType-safe collections for structured content\n\n**Do:*\\* getCollection() for blog/docs\n**Don't:*\\* Astro.glob for structured content\n\n```\nawait getCollection('blog')\n```\n\n## Data: Use environment variables correctly\n\nImport.meta.env for env vars\n\n**Do:*\\* PUBLIC_ prefix for client vars\n**Don't:*\\* Expose secrets to client\n\n```\nimport.meta.env.PUBLIC_API_URL\n```\n\n## Performance: Preload critical assets\n\nUse link preload for important resources\n\n**Do:*\\* Preload fonts above-fold images\n**Don't:*\\* No preload hints\n\n```\n<link rel=\"preload\" href=\"font.woff2\" as=\"font\">\n```\n\n## Performance: Optimize images with astro:assets\n\nBuilt-in image optimization\n\n**Do:** `<Image /> component for optimization`\n**Don't:** `<img> for local images`\n\n```\nimport { Image } from 'astro:assets';\n```\n\n## Performance: Use picture for responsive images\n\nMultiple formats and sizes\n\n**Do:** `<Picture /> for art direction`\n**Don't:*\\* Single image size for all screens\n\n```\n<Picture /> with multiple sources\n```\n\n## Performance: Lazy load below-fold content\n\nDefer loading non-critical content\n\n**Do:*\\* loading=lazy for images client:visible for components\n**Don't:*\\* Load everything immediately\n\n```\n<img loading=\"lazy\">\n```\n\n## Performance: Minimize client directives\n\nEach directive adds JS bundle\n\n**Do:*\\* Audit client: usage regularly\n**Don't:*\\* Sprinkle client:load everywhere\n\n```\nOnly interactive components hydrated\n```\n\n## ViewTransitions: Enable View Transitions\n\nSmooth page transitions\n\n**Do:** `<ViewTransitions /> in head`\n**Don't:*\\* Full page reloads\n\n```\nimport { ViewTransitions } from 'astro:transitions';\n```\n\n## ViewTransitions: Use transition:name\n\nNamed elements for morphing\n\n**Do:*\\* transition:name for persistent elements\n**Don't:*\\* Unnamed transitions\n\n```\n<header transition:name=\"header\">\n```\n\n## ViewTransitions: Handle transition:persist\n\nKeep state across navigations\n\n**Do:*\\* transition:persist for media players\n**Don't:*\\* Re-initialize on every navigation\n\n```\n<video transition:persist id=\"player\">\n```\n\n## ViewTransitions: Add fallback for no-JS\n\nGraceful degradation\n\n**Do:*\\* Content works without JS\n**Don't:*\\* Require JS for basic navigation\n\n```\nStatic content accessible\n```\n\n## SEO: Use built-in SEO component\n\nHead management for meta tags\n\n**Do:*\\* Astro SEO integration or manual head\n**Don't:*\\* No meta tags\n\n```\n<title>{title}</title><meta name=\"description\">\n```\n\n## SEO: Generate sitemap\n\nAutomatic sitemap generation\n\n**Do:** @astrojs/sitemap integration\n**Don't:*\\* Manual sitemap maintenance\n\n```\nnpx astro add sitemap\n```\n\n## SEO: Add RSS feed for content\n\nRSS for blogs and content sites\n\n**Do:** @astrojs/rss for feed generation\n**Don't:*\\* No RSS feed\n\n```\nrss() helper in pages/rss.xml.js\n```\n\n## SEO: Use canonical URLs\n\nPrevent duplicate content issues\n\n**Do:*\\* Astro.url for canonical generation\n**Don't:** `<link rel=\"canonical\" href={Astro.url}>`\n\n```\nNo canonical tags\n```\n\n## Integrations: Use official integrations\n\nAstro's integration system\n\n**Do:*\\* npx astro add for integrations\n**Don't:*\\* Manual configuration\n\n```\nnpx astro add react\n```\n\n## Integrations: Configure integrations in astro.config\n\nCentralized configuration\n\n**Do:*\\* integrations array in config\n**Don't:*\\* Scattered configuration\n\n```\nintegrations: [react(), tailwind()]\n```\n\n## Integrations: Use adapter for deployment\n\nPlatform-specific adapters\n\n**Do:*\\* Correct adapter for host\n**Don't:*\\* Wrong or no adapter\n\n```\n@astrojs/vercel for Vercel\n```\n\n## TypeScript: Enable TypeScript\n\nType safety for Astro projects\n\n**Do:*\\* tsconfig.json with astro types\n**Don't:*\\* No TypeScript\n\n```\nAstro TypeScript template\n```\n\n## TypeScript: Type component props\n\nDefine prop interfaces\n\n**Do:*\\* Props interface in frontmatter\n**Don't:*\\* Untyped props\n\n```\ninterface Props { title: string }\n```\n\n## TypeScript: Use strict mode\n\nCatch errors early\n\n**Do:*\\* strict: true in tsconfig\n**Don't:*\\* Loose TypeScript config\n\n```\nstrictest template\n```\n\n## Markdown: Use MDX for components\n\nComponents in markdown content\n\n**Do:** @astrojs/mdx for interactive docs\n**Don't:*\\* Plain markdown with workarounds\n\n```\n<Component /> in .mdx\n```\n\n## Markdown: Configure markdown plugins\n\nExtend markdown capabilities\n\n**Do:*\\* remarkPlugins rehypePlugins in config\n**Don't:*\\* Manual HTML for features\n\n```\nremarkPlugins: [remarkToc]\n```\n\n## Markdown: Use frontmatter for metadata\n\nStructured post metadata\n\n**Do:*\\* Frontmatter with typed schema\n**Don't:*\\* Inline metadata\n\n```\ntitle date in frontmatter\n```\n\n## API: Use API routes for endpoints\n\nServer endpoints in pages/api\n\n**Do:*\\* pages/api/[endpoint].ts for APIs\n**Don't:*\\* External API for simple endpoints\n\n```\npages/api/posts.json.ts\n```\n\n## API: Return proper responses\n\nUse Response object\n\n**Do:*\\* new Response() with headers\n**Don't:*\\* Plain objects\n\n```\nreturn new Response(JSON.stringify(data))\n```\n\n## API: Handle methods correctly\n\nExport named method handlers\n\n**Do:*\\* export GET POST handlers\n**Don't:*\\* Single default export\n\n```\nexport const GET = async () => {}\n```\n\n## Security: Sanitize user content\n\nPrevent XSS in dynamic content\n\n**Do:*\\* set:html only for trusted content\n**Don't:*\\* set:html with user input\n\n```\n<Fragment set:html={sanitized} />\n```\n\n## Security: Use HTTPS in production\n\nSecure connections\n\n**Do:*\\* HTTPS for all production sites\n**Don't:*\\* HTTP in production\n\n```\nhttps://example.com\n```\n\n## Security: Validate API input\n\nCheck and sanitize all input\n\n**Do:*\\* Zod validation for API routes\n**Don't:*\\* Trust all input\n\n```\nconst body = schema.parse(data)\n```\n\n## Build: Use hybrid rendering\n\nMix static and dynamic pages\n\n**Do:*\\* output: 'hybrid' for flexibility\n**Don't:*\\* All SSR or all static\n\n```\nprerender per-page basis\n```\n\n## Build: Analyze bundle size\n\nMonitor JS bundle impact\n\n**Do:*\\* Build output shows bundle sizes\n**Don't:*\\* Ignore bundle growth\n\n```\nCheck astro build output\n```\n\n## Build: Use prefetch\n\nPreload linked pages\n\n**Do:*\\* prefetch integration\n**Don't:*\\* No prefetch for navigation\n\n```\nnpx astro add prefetch\n```",
-      "tags": ["stack", "astro", "implementation", "guidelines"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-stack-flutter",
-      "type": "pattern",
-      "domain": "design",
-      "title": "flutter Implementation Guidelines",
-      "severity": "suggestion",
-      "description": "# flutter Implementation Guidelines\n\n## Widgets: Use StatelessWidget when possible\n\nImmutable widgets are simpler\n\n**Do:*\\* StatelessWidget for static UI\n**Don't:*\\* StatefulWidget for everything\n\n```\nclass MyWidget extends StatelessWidget\n```\n\n## Widgets: Keep widgets small\n\nSingle responsibility principle\n\n**Do:*\\* Extract widgets into smaller pieces\n**Don't:*\\* Large build methods\n\n```\nColumn(children: [Header() Content()])\n```\n\n## Widgets: Use const constructors\n\nCompile-time constants for performance\n\n**Do:*\\* const MyWidget() when possible\n**Don't:*\\* Non-const for static widgets\n\n```\nconst Text('Hello')\n```\n\n## Widgets: Prefer composition over inheritance\n\nCombine widgets using children\n\n**Do:*\\* Compose widgets\n**Don't:*\\* Extend widget classes\n\n```\nContainer(child: MyContent())\n```\n\n## State: Use setState correctly\n\nMinimal state in StatefulWidget\n\n**Do:*\\* setState for UI state changes\n**Don't:*\\* setState for business logic\n\n```\nsetState(() { _counter++; })\n```\n\n## State: Avoid setState in build\n\nNever call setState during build\n\n**Do:*\\* setState in callbacks only\n**Don't:*\\* setState in build method\n\n```\nonPressed: () => setState(() {})\n```\n\n## State: Use state management for complex apps\n\nProvider Riverpod BLoC\n\n**Do:*\\* State management for shared state\n**Don't:*\\* setState for global state\n\n```\nProvider.of<MyState>(context)\n```\n\n## State: Prefer Riverpod or Provider\n\nRecommended state solutions\n\n**Do:*\\* Riverpod for new projects\n**Don't:*\\* InheritedWidget manually\n\n```\nref.watch(myProvider)\n```\n\n## State: Dispose resources\n\nClean up controllers and subscriptions\n\n**Do:*\\* dispose() for cleanup\n**Don't:*\\* Memory leaks from subscriptions\n\n```\n@override void dispose() { controller.dispose(); }\n```\n\n## Layout: Use Column and Row\n\nBasic layout widgets\n\n**Do:*\\* Column Row for linear layouts\n**Don't:*\\* Stack for simple layouts\n\n```\nColumn(children: [Text(), Button()])\n```\n\n## Layout: Use Expanded and Flexible\n\nControl flex behavior\n\n**Do:*\\* Expanded to fill space\n**Don't:*\\* Fixed sizes in flex containers\n\n```\nExpanded(child: Container())\n```\n\n## Layout: Use SizedBox for spacing\n\nConsistent spacing\n\n**Do:*\\* SizedBox for gaps\n**Don't:*\\* Container for spacing only\n\n```\nSizedBox(height: 16)\n```\n\n## Layout: Use LayoutBuilder for responsive\n\nRespond to constraints\n\n**Do:*\\* LayoutBuilder for adaptive layouts\n**Don't:*\\* Fixed sizes for responsive\n\n```\nLayoutBuilder(builder: (context constraints) {})\n```\n\n## Layout: Avoid deep nesting\n\nKeep widget tree shallow\n\n**Do:*\\* Extract deeply nested widgets\n**Don't:*\\* 10+ levels of nesting\n\n```\nExtract widget to method or class\n```\n\n## Lists: Use ListView.builder\n\nLazy list building\n\n**Do:*\\* ListView.builder for long lists\n**Don't:*\\* ListView with children for large lists\n\n```\nListView.builder(itemCount: 100, itemBuilder: ...)\n```\n\n## Lists: Provide itemExtent when known\n\nSkip measurement\n\n**Do:*\\* itemExtent for fixed height items\n**Don't:*\\* No itemExtent for uniform lists\n\n```\nListView.builder(itemExtent: 50)\n```\n\n## Lists: Use keys for stateful items\n\nPreserve widget state\n\n**Do:*\\* Key for stateful list items\n**Don't:*\\* No key for dynamic lists\n\n```\nListTile(key: ValueKey(item.id))\n```\n\n## Lists: Use SliverList for custom scroll\n\nCustom scroll effects\n\n**Do:*\\* CustomScrollView with Slivers\n**Don't:*\\* Nested ListViews\n\n```\nCustomScrollView(slivers: [SliverList()])\n```\n\n## Navigation: Use Navigator 2.0 or GoRouter\n\nDeclarative routing\n\n**Do:*\\* go_router for navigation\n**Don't:*\\* Navigator.push for complex apps\n\n```\nGoRouter(routes: [...])\n```\n\n## Navigation: Use named routes\n\nOrganized navigation\n\n**Do:*\\* Named routes for clarity\n**Don't:*\\* Anonymous routes\n\n```\nNavigator.pushNamed(context '/home')\n```\n\n## Navigation: Handle back button (PopScope)\n\nAndroid back behavior and predictive back (Android 14+)\n\n**Do:*\\* Use PopScope widget (WillPopScope is deprecated)\n**Don't:*\\* Use WillPopScope\n\n```\nPopScope(canPop: false, onPopInvoked: (didPop) => ...)\n```\n\n## Navigation: Pass typed arguments\n\nType-safe route arguments\n\n**Do:*\\* Typed route arguments\n**Don't:*\\* Dynamic arguments\n\n```\nMyRoute(id: '123')\n```\n\n## Async: Use FutureBuilder\n\nAsync UI building\n\n**Do:*\\* FutureBuilder for async data\n**Don't:*\\* setState for async\n\n```\nFutureBuilder(future: fetchData())\n```\n\n## Async: Use StreamBuilder\n\nStream UI building\n\n**Do:*\\* StreamBuilder for streams\n**Don't:*\\* Manual stream subscription\n\n```\nStreamBuilder(stream: myStream)\n```\n\n## Async: Handle loading and error states\n\nComplete async UI states\n\n**Do:*\\* ConnectionState checks\n**Don't:*\\* Only success state\n\n```\nif (snapshot.connectionState == ConnectionState.waiting)\n```\n\n## Async: Cancel subscriptions\n\nClean up stream subscriptions\n\n**Do:*\\* Cancel in dispose\n**Don't:*\\* Memory leaks\n\n```\nsubscription.cancel() in dispose\n```\n\n## Theming: Use ThemeData\n\nConsistent theming\n\n**Do:*\\* ThemeData for app theme\n**Don't:*\\* Hardcoded colors\n\n```\nTheme.of(context).primaryColor\n```\n\n## Theming: Use ColorScheme\n\nMaterial 3 color system\n\n**Do:*\\* ColorScheme for colors\n**Don't:*\\* Individual color properties\n\n```\ncolorScheme: ColorScheme.fromSeed()\n```\n\n## Theming: Access theme via context\n\nDynamic theme access\n\n**Do:*\\* Theme.of(context)\n**Don't:*\\* Static theme reference\n\n```\nTheme.of(context).textTheme.bodyLarge\n```\n\n## Theming: Support dark mode\n\nRespect system theme\n\n**Do:*\\* darkTheme in MaterialApp\n**Don't:*\\* Light theme only\n\n```\nMaterialApp(theme: light, darkTheme: dark)\n```\n\n## Animation: Use implicit animations\n\nSimple animations\n\n**Do:*\\* AnimatedContainer AnimatedOpacity\n**Don't:*\\* Explicit for simple transitions\n\n```\nAnimatedContainer(duration: Duration())\n```\n\n## Animation: Use AnimationController for complex\n\nFine-grained control\n\n**Do:*\\* AnimationController with Ticker\n**Don't:*\\* Implicit for complex sequences\n\n```\nAnimationController(vsync: this)\n```\n\n## Animation: Dispose AnimationControllers\n\nClean up animation resources\n\n**Do:*\\* dispose() for controllers\n**Don't:*\\* Memory leaks\n\n```\ncontroller.dispose() in dispose\n```\n\n## Animation: Use Hero for transitions\n\nShared element transitions\n\n**Do:*\\* Hero for navigation animations\n**Don't:*\\* Manual shared element\n\n```\nHero(tag: 'image' child: Image())\n```\n\n## Forms: Use Form widget\n\nForm validation\n\n**Do:*\\* Form with GlobalKey\n**Don't:*\\* Individual validation\n\n```\nForm(key: _formKey child: ...)\n```\n\n## Forms: Use TextEditingController\n\nControl text input\n\n**Do:*\\* Controller for text fields\n**Don't:*\\* onChanged for all text\n\n```\nfinal controller = TextEditingController()\n```\n\n## Forms: Validate on submit\n\nForm validation flow\n\n**Do:*\\* _formKey.currentState!.validate()\n**Don't:*\\* Skip validation\n\n```\nif (_formKey.currentState!.validate())\n```\n\n## Forms: Dispose controllers\n\nClean up text controllers\n\n**Do:*\\* dispose() for controllers\n**Don't:*\\* Memory leaks\n\n```\ncontroller.dispose() in dispose\n```\n\n## Performance: Use const widgets\n\nReduce rebuilds\n\n**Do:*\\* const for static widgets\n**Don't:*\\* No const for literals\n\n```\nconst Icon(Icons.add)\n```\n\n## Performance: Avoid rebuilding entire tree\n\nMinimal rebuild scope\n\n**Do:*\\* Isolate changing widgets\n**Don't:*\\* setState on parent\n\n```\nConsumer only around changing widget\n```\n\n## Performance: Use RepaintBoundary\n\nIsolate repaints\n\n**Do:*\\* RepaintBoundary for animations\n**Don't:*\\* Full screen repaints\n\n```\nRepaintBoundary(child: AnimatedWidget())\n```\n\n## Performance: Profile with DevTools\n\nMeasure before optimizing\n\n**Do:*\\* Flutter DevTools profiling\n**Don't:*\\* Guess at performance\n\n```\nDevTools performance tab\n```\n\n## Accessibility: Use Semantics widget\n\nScreen reader support\n\n**Do:*\\* Semantics for accessibility\n**Don't:*\\* Missing accessibility info\n\n```\nSemantics(label: 'Submit button')\n```\n\n## Accessibility: Support large fonts\n\nMediaQuery text scaling\n\n**Do:*\\* MediaQuery.textScaleFactor\n**Don't:*\\* Fixed font sizes\n\n```\nstyle: Theme.of(context).textTheme\n```\n\n## Accessibility: Test with screen readers\n\nTalkBack and VoiceOver\n\n**Do:*\\* Test accessibility regularly\n**Don't:*\\* Skip accessibility testing\n\n```\nRegular TalkBack testing\n```\n\n## Testing: Use widget tests\n\nTest widget behavior\n\n**Do:*\\* WidgetTester for UI tests\n**Don't:*\\* Unit tests only\n\n```\ntestWidgets('...' (tester) async {})\n```\n\n## Testing: Use integration tests\n\nFull app testing\n\n**Do:*\\* integration_test package\n**Don't:*\\* Manual testing only\n\n```\nIntegrationTestWidgetsFlutterBinding\n```\n\n## Testing: Mock dependencies\n\nIsolate tests\n\n**Do:*\\* Mockito or mocktail\n**Don't:*\\* Real dependencies in tests\n\n```\nwhen(mock.method()).thenReturn()\n```\n\n## Platform: Use Platform checks\n\nPlatform-specific code\n\n**Do:*\\* Platform.isIOS Platform.isAndroid\n**Don't:*\\* Same code for all platforms\n\n```\nif (Platform.isIOS) {}\n```\n\n## Platform: Use kIsWeb for web\n\nWeb platform detection\n\n**Do:*\\* kIsWeb for web checks\n**Don't:*\\* Platform for web\n\n```\nif (kIsWeb) {}\n```\n\n## Packages: Use pub.dev packages\n\nCommunity packages\n\n**Do:*\\* Popular maintained packages\n**Don't:*\\* Custom implementations\n\n```\ncached_network_image\n```\n\n## Packages: Check package quality\n\nQuality before adding\n\n**Do:*\\* Pub points and popularity\n**Don't:*\\* Any package without review\n\n```\n100+ pub points\n```",
-      "tags": ["stack", "flutter", "implementation", "guidelines"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-stack-html-tailwind",
-      "type": "pattern",
-      "domain": "design",
-      "title": "html-tailwind Implementation Guidelines",
-      "severity": "suggestion",
-      "description": "# html-tailwind Implementation Guidelines\n\n## Animation: Use Tailwind animate utilities\n\nBuilt-in animations are optimized and respect reduced-motion\n\n**Do:*\\* Use animate-pulse animate-spin animate-ping\n**Don't:*\\* Custom @keyframes for simple effects\n\n```\nanimate-pulse\n```\n\n## Animation: Limit bounce animations\n\nContinuous bounce is distracting and causes motion sickness\n\n**Do:*\\* Use animate-bounce sparingly on CTAs only\n**Don't:*\\* Multiple bounce animations on page\n\n```\nSingle CTA with animate-bounce\n```\n\n## Animation: Transition duration\n\nUse appropriate transition speeds for UI feedback\n\n**Do:*\\* duration-150 to duration-300 for UI\n**Don't:*\\* duration-1000 or longer for UI elements\n\n```\ntransition-all duration-200\n```\n\n## Animation: Hover transitions\n\nAdd smooth transitions on hover state changes\n\n**Do:*\\* Add transition class with hover states\n**Don't:*\\* Instant hover changes without transition\n\n```\nhover:bg-gray-100 transition-colors\n```\n\n## Z-Index: Use Tailwind z-\\* scale\n\nConsistent stacking context with predefined scale\n\n**Do:*\\* z-0 z-10 z-20 z-30 z-40 z-50\n**Don't:*\\* Arbitrary z-index values\n\n```\nz-50 for modals\n```\n\n## Z-Index: Fixed elements z-index\n\nFixed navigation and modals need explicit z-index\n\n**Do:*\\* z-50 for nav z-40 for dropdowns\n**Don't:*\\* Relying on DOM order for stacking\n\n```\nfixed top-0 z-50\n```\n\n## Z-Index: Negative z-index for backgrounds\n\nUse negative z-index for decorative backgrounds\n\n**Do:*\\* z-[-1] for background elements\n**Don't:*\\* Positive z-index for backgrounds\n\n```\n-z-10 for decorative\n```\n\n## Layout: Container max-width\n\nLimit content width for readability\n\n**Do:*\\* max-w-7xl mx-auto for main content\n**Don't:*\\* Full-width content on large screens\n\n```\nmax-w-7xl mx-auto px-4\n```\n\n## Layout: Responsive padding\n\nAdjust padding for different screen sizes\n\n**Do:*\\* px-4 md:px-6 lg:px-8\n**Don't:*\\* Same padding all sizes\n\n```\npx-4 sm:px-6 lg:px-8\n```\n\n## Layout: Grid gaps\n\nUse consistent gap utilities for spacing\n\n**Do:*\\* gap-4 gap-6 gap-8\n**Don't:*\\* Margins on individual items\n\n```\ngrid gap-6\n```\n\n## Layout: Flexbox alignment\n\nUse flex utilities for alignment\n\n**Do:*\\* items-center justify-between\n**Don't:*\\* Multiple nested wrappers\n\n```\nflex items-center justify-between\n```\n\n## Images: Aspect ratio\n\nMaintain consistent image aspect ratios\n\n**Do:*\\* aspect-video aspect-square\n**Don't:*\\* No aspect ratio on containers\n\n```\naspect-video rounded-lg\n```\n\n## Images: Object fit\n\nControl image scaling within containers\n\n**Do:*\\* object-cover object-contain\n**Don't:*\\* Stretched distorted images\n\n```\nobject-cover w-full h-full\n```\n\n## Images: Lazy loading\n\nDefer loading of off-screen images\n\n**Do:*\\* loading='lazy' on images\n**Don't:*\\* All images eager load\n\n```\n<img loading='lazy'>\n```\n\n## Images: Responsive images\n\nServe appropriate image sizes\n\n**Do:*\\* srcset and sizes attributes\n**Don't:*\\* Same large image all devices\n\n```\nsrcset with multiple sizes\n```\n\n## Typography: Prose plugin\n\nUse @tailwindcss/typography for rich text\n\n**Do:*\\* prose prose-lg for article content\n**Don't:*\\* Custom styles for markdown\n\n```\nprose prose-lg max-w-none\n```\n\n## Typography: Line height\n\nUse appropriate line height for readability\n\n**Do:*\\* leading-relaxed for body text\n**Don't:*\\* Default tight line height\n\n```\nleading-relaxed (1.625)\n```\n\n## Typography: Font size scale\n\nUse consistent text size scale\n\n**Do:*\\* text-sm text-base text-lg text-xl\n**Don't:*\\* Arbitrary font sizes\n\n```\ntext-lg\n```\n\n## Typography: Text truncation\n\nHandle long text gracefully\n\n**Do:*\\* truncate or line-clamp-*\n**Don't:*\\* Overflow breaking layout\n\n```\nline-clamp-2\n```\n\n## Colors: Opacity utilities\n\nUse color opacity utilities\n\n**Do:*\\* bg-black/50 text-white/80\n**Don't:*\\* Separate opacity class\n\n```\nbg-black/50\n```\n\n## Colors: Dark mode\n\nSupport dark mode with dark: prefix\n\n**Do:*\\* dark:bg-gray-900 dark:text-white\n**Don't:*\\* No dark mode support\n\n```\ndark:bg-gray-900\n```\n\n## Colors: Semantic colors\n\nUse semantic color naming in config\n\n**Do:*\\* primary secondary danger success\n**Don't:*\\* Generic color names in components\n\n```\nbg-primary\n```\n\n## Spacing: Consistent spacing scale\n\nUse Tailwind spacing scale consistently\n\n**Do:*\\* p-4 m-6 gap-8\n**Don't:*\\* Arbitrary pixel values\n\n```\np-4 (1rem)\n```\n\n## Spacing: Negative margins\n\nUse sparingly for overlapping effects\n\n**Do:** -mt-4 for overlapping elements\n**Don't:*\\* Negative margins for layout fixing\n\n```\n-mt-8 for card overlap\n```\n\n## Spacing: Space between\n\nUse space-y-\\* for vertical lists\n\n**Do:*\\* space-y-4 on flex/grid column\n**Don't:*\\* Margin on each child\n\n```\nspace-y-4\n```\n\n## Forms: Focus states\n\nAlways show focus indicators\n\n**Do:*\\* focus:ring-2 focus:ring-blue-500\n**Don't:*\\* Remove focus outline\n\n```\nfocus:ring-2 focus:ring-offset-2\n```\n\n## Forms: Input sizing\n\nConsistent input dimensions\n\n**Do:*\\* h-10 px-3 for inputs\n**Don't:*\\* Inconsistent input heights\n\n```\nh-10 w-full px-3\n```\n\n## Forms: Disabled states\n\nClear disabled styling\n\n**Do:*\\* disabled:opacity-50 disabled:cursor-not-allowed\n**Don't:*\\* No disabled indication\n\n```\ndisabled:opacity-50\n```\n\n## Forms: Placeholder styling\n\nStyle placeholder text appropriately\n\n**Do:*\\* placeholder:text-gray-400\n**Don't:*\\* Dark placeholder text\n\n```\nplaceholder:text-gray-400\n```\n\n## Responsive: Mobile-first approach\n\nStart with mobile styles and add breakpoints\n\n**Do:*\\* Default mobile + md: lg: xl:\n**Don't:*\\* Desktop-first approach\n\n```\ntext-sm md:text-base\n```\n\n## Responsive: Breakpoint testing\n\nTest at standard breakpoints\n\n**Do:*\\* 320 375 768 1024 1280 1536\n**Don't:*\\* Only test on development device\n\n```\nTest all breakpoints\n```\n\n## Responsive: Hidden/shown utilities\n\nControl visibility per breakpoint\n\n**Do:*\\* hidden md:block\n**Don't:*\\* Different content per breakpoint\n\n```\nhidden md:flex\n```\n\n## Buttons: Button sizing\n\nConsistent button dimensions\n\n**Do:*\\* px-4 py-2 or px-6 py-3\n**Don't:*\\* Inconsistent button sizes\n\n```\npx-4 py-2 text-sm\n```\n\n## Buttons: Touch targets\n\nMinimum 44px touch target on mobile\n\n**Do:*\\* min-h-[44px] on mobile\n**Don't:*\\* Small buttons on mobile\n\n```\nmin-h-[44px] min-w-[44px]\n```\n\n## Buttons: Loading states\n\nShow loading feedback\n\n**Do:*\\* disabled + spinner icon\n**Don't:*\\* Clickable during loading\n\n```\n<Button disabled><Spinner/></Button>\n```\n\n## Buttons: Icon buttons\n\nAccessible icon-only buttons\n\n**Do:*\\* aria-label on icon buttons\n**Don't:*\\* Icon button without label\n\n```\n<button aria-label='Close'><XIcon/></button>\n```\n\n## Cards: Card structure\n\nConsistent card styling\n\n**Do:*\\* rounded-lg shadow-md p-6\n**Don't:*\\* Inconsistent card styles\n\n```\nrounded-2xl shadow-lg p-6\n```\n\n## Cards: Card hover states\n\nInteractive cards should have hover feedback\n\n**Do:*\\* hover:shadow-lg transition-shadow\n**Don't:*\\* No hover on clickable cards\n\n```\nhover:shadow-xl transition-shadow\n```\n\n## Cards: Card spacing\n\nConsistent internal card spacing\n\n**Do:*\\* space-y-4 for card content\n**Don't:*\\* Inconsistent internal spacing\n\n```\nspace-y-4 or p-6\n```\n\n## Accessibility: Screen reader text\n\nProvide context for screen readers\n\n**Do:*\\* sr-only for hidden labels\n**Don't:*\\* Missing context for icons\n\n```\n<span class='sr-only'>Close menu</span>\n```\n\n## Accessibility: Focus visible\n\nShow focus only for keyboard users\n\n**Do:*\\* focus-visible:ring-2\n**Don't:*\\* Focus on all interactions\n\n```\nfocus-visible:ring-2\n```\n\n## Accessibility: Reduced motion\n\nRespect user motion preferences\n\n**Do:*\\* motion-reduce:animate-none\n**Don't:*\\* Ignore motion preferences\n\n```\nmotion-reduce:transition-none\n```\n\n## Performance: Configure content paths\n\nTailwind needs to know where classes are used\n\n**Do:*\\* Use 'content' array in config\n**Don't:*\\* Use deprecated 'purge' option (v2)\n\n```\ncontent: ['./src/**/*.{js,ts,jsx,tsx}']\n```\n\n## Performance: JIT mode\n\nUse JIT for faster builds and smaller bundles\n\n**Do:*\\* JIT enabled (default in v3)\n**Don't:*\\* Full CSS in development\n\n```\nTailwind v3 defaults\n```\n\n## Performance: Avoid @apply bloat\n\nUse @apply sparingly\n\n**Do:*\\* Direct utilities in HTML\n**Don't:*\\* Heavy @apply usage\n\n```\nclass='px-4 py-2 rounded'\n```\n\n## Plugins: Official plugins\n\nUse official Tailwind plugins\n\n**Do:** @tailwindcss/forms typography aspect-ratio\n**Don't:*\\* Custom implementations\n\n```\n@tailwindcss/forms\n```\n\n## Plugins: Custom utilities\n\nCreate utilities for repeated patterns\n\n**Do:*\\* Custom utility in config\n**Don't:*\\* Repeated arbitrary values\n\n```\nCustom shadow utility\n```\n\n## Layout: Container Queries\n\nUse @container for component-based responsiveness\n\n**Do:*\\* Use @container and @lg: etc.\n**Don't:*\\* Media queries for component internals\n\n```\n@container @lg:grid-cols-2\n```\n\n## Interactivity: Group and Peer\n\nStyle based on parent/sibling state\n\n**Do:*\\* group-hover peer-checked\n**Don't:*\\* JS for simple state interactions\n\n```\ngroup-hover:text-blue-500\n```\n\n## Customization: Arbitrary Values\n\nUse [] for one-off values\n\n**Do:*\\* w-[350px] for specific needs\n**Don't:*\\* Creating config for single use\n\n```\ntop-[117px] (if strictly needed)\n```\n\n## Colors: Theme color variables\n\nDefine colors in Tailwind theme and use directly\n\n**Do:*\\* bg-primary text-success border-cta\n**Don't:*\\* bg-[var(--color-primary)] text-[var(--color-success)]\n\n```\nbg-primary\n```\n\n## Colors: Use bg-linear-to-\\* for gradients\n\nTailwind v4 uses bg-linear-to-\\* syntax for gradients\n\n**Do:*\\* bg-linear-to-r bg-linear-to-b\n**Don't:*\\* bg-gradient-to-* (deprecated in v4)\n\n```\nbg-linear-to-r from-blue-500 to-purple-500\n```\n\n## Layout: Use shrink-0 shorthand\n\nShorter class name for flex-shrink-0\n\n**Do:*\\* shrink-0 shrink\n**Don't:*\\* flex-shrink-0 flex-shrink\n\n```\nshrink-0\n```\n\n## Layout: Use size-\\* for square dimensions\n\nSingle utility for equal width and height\n\n**Do:*\\* size-4 size-8 size-12\n**Don't:*\\* Separate h-\\* w-\\* for squares\n\n```\nsize-6\n```\n\n## Images: SVG explicit dimensions\n\nAdd width/height attributes to SVGs to prevent layout shift before CSS loads\n\n**Do:** `<svg class='size-6' width='24' height='24'>`\n**Don't:*\\* SVG without explicit dimensions\n\n```\n<svg class='size-6' width='24' height='24'>\n```",
-      "tags": ["stack", "html-tailwind", "implementation", "guidelines"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-stack-jetpack-compose",
-      "type": "pattern",
-      "domain": "design",
-      "title": "jetpack-compose Implementation Guidelines",
-      "severity": "suggestion",
-      "description": "# jetpack-compose Implementation Guidelines\n\n## Composable: Pure UI composables\n\nComposable functions should only render UI\n\n**Do:*\\* Accept state and callbacks\n**Don't:*\\* Calling usecase/repo\n\n```\nPure UI composable\n```\n\n## Composable: Small composables\n\nEach composable has single responsibility\n\n**Do:*\\* Split into components\n**Don't:*\\* Huge composable\n\n```\nReusable UI\n```\n\n## Composable: Stateless by default\n\nPrefer stateless composables\n\n**Do:*\\* Hoist state\n**Don't:*\\* Local mutable state\n\n```\nStateless UI\n```\n\n## State: Single source of truth\n\nUI state comes from one source\n\n**Do:*\\* StateFlow from VM\n**Don't:*\\* Multiple states\n\n```\nUnified UiState\n```\n\n## State: Model UI State\n\nUse sealed interface/data class\n\n**Do:*\\* UiState.Loading\n**Don't:*\\* Boolean flags\n\n```\nExplicit state\n```\n\n## State: remember only UI state\n\nremember for UI-only state\n\n**Do:*\\* Scroll, animation\n**Don't:*\\* Business state\n\n```\nCorrect remember\n```\n\n## State: rememberSaveable\n\nPersist state across config\n\n**Do:*\\* rememberSaveable\n**Don't:*\\* remember\n\n```\nState survives\n```\n\n## State: derivedStateOf\n\nOptimize recomposition\n\n**Do:*\\* derivedStateOf\n**Don't:*\\* Recompute always\n\n```\nOptimized\n```\n\n## SideEffect: LaunchedEffect keys\n\nUse correct keys\n\n**Do:*\\* LaunchedEffect(id)\n**Don't:*\\* LaunchedEffect(Unit)\n\n```\nScoped effect\n```\n\n## SideEffect: rememberUpdatedState\n\nAvoid stale lambdas\n\n**Do:*\\* rememberUpdatedState\n**Don't:*\\* Capture directly\n\n```\nSafe callback\n```\n\n## SideEffect: DisposableEffect\n\nClean up resources\n\n**Do:*\\* onDispose\n**Don't:*\\* No cleanup\n\n```\nNo leak\n```\n\n## Architecture: Unidirectional data flow\n\nUI → VM → State\n\n**Do:*\\* onEvent\n**Don't:*\\* Two-way binding\n\n```\nPredictable flow\n```\n\n## Architecture: No business logic in UI\n\nLogic belongs to VM\n\n**Do:*\\* Collect state\n**Don't:*\\* Call repo\n\n```\nClean UI\n```\n\n## Architecture: Expose immutable state\n\nExpose StateFlow\n\n**Do:*\\* asStateFlow\n**Don't:*\\* Mutable exposed\n\n```\nSafe API\n```\n\n## Lifecycle: Lifecycle-aware collect\n\nUse collectAsStateWithLifecycle\n\n**Do:*\\* Lifecycle aware\n**Don't:*\\* collectAsState\n\n```\nNo leak\n```\n\n## Navigation: Event-based navigation\n\nVM emits navigation event\n\n**Do:*\\* VM: Channel + receiveAsFlow(), V: Collect with Dispatchers.Main.immediate\n**Don't:*\\* Nav in UI\n\n```\nDecoupled nav\n```\n\n## Navigation: Typed routes\n\nUse sealed routes\n\n**Do:*\\* sealed class Route\n**Don't:*\\* String routes\n\n```\nType-safe\n```\n\n## Performance: Stable parameters\n\nPrefer immutable/stable params\n\n**Do:** @Immutable\n**Don't:*\\* Mutable params\n\n```\nStable recomposition\n```\n\n## Performance: Use key in Lazy\n\nProvide stable keys\n\n**Do:*\\* key=id\n**Don't:*\\* No key\n\n```\nStable list\n```\n\n## Performance: Avoid heavy work\n\nNo heavy computation in UI\n\n**Do:*\\* Precompute in VM\n**Don't:*\\* Compute in UI\n\n```\nSmooth UI\n```\n\n## Performance: Remember expensive objects\n\nremember heavy objects\n\n**Do:*\\* remember\n**Don't:*\\* Recreate each recomposition\n\n```\nEfficient\n```\n\n## Theming: Design system\n\nCentralized theme\n\n**Do:*\\* Material3 tokens\n**Don't:*\\* Hardcoded values\n\n```\nConsistent UI\n```\n\n## Theming: Dark mode support\n\nTheme-based colors\n\n**Do:*\\* colorScheme\n**Don't:*\\* Fixed color\n\n```\nAdaptive UI\n```\n\n## Layout: Prefer Modifier over extra layouts\n\nUse Modifier to adjust layout instead of adding wrapper composables\n\n**Do:*\\* Use Modifier.padding()\n**Don't:*\\* Wrap content with extra Box\n\n```\nPadding via modifier\n```\n\n## Layout: Avoid deep layout nesting\n\nDeep layout trees increase measure & layout cost\n\n**Do:*\\* Keep layout flat\n**Don't:*\\* Box ? Column ? Box ? Row\n\n```\nFlat hierarchy\n```\n\n## Layout: Use Row/Column for linear layout\n\nLinear layouts are simpler and more performant\n\n**Do:*\\* Use Row / Column\n**Don't:*\\* Custom layout for simple cases\n\n```\nRow/Column usage\n```\n\n## Layout: Use Box only for overlapping content\n\nBox should be used only when children overlap\n\n**Do:*\\* Stack elements\n**Don't:*\\* Use Box as Column\n\n```\nProper overlay\n```\n\n## Layout: Prefer LazyColumn over Column scroll\n\nLazy layouts are virtualized and efficient\n\n**Do:*\\* LazyColumn\n**Don't:*\\* Column.verticalScroll()\n\n```\nLazy list\n```\n\n## Layout: Avoid nested scroll containers\n\nNested scrolling causes UX & performance issues\n\n**Do:*\\* Single scroll container\n**Don't:*\\* Scroll inside scroll\n\n```\nOne scroll per screen\n```\n\n## Layout: Avoid fillMaxSize by default\n\nfillMaxSize may break parent constraints\n\n**Do:*\\* Use exact size\n**Don't:*\\* Fill max everywhere\n\n```\nConstraint-aware size\n```\n\n## Layout: Avoid intrinsic size unless necessary\n\nIntrinsic measurement is expensive\n\n**Do:*\\* Explicit sizing\n**Don't:*\\* IntrinsicSize.Min\n\n```\nPredictable layout\n```\n\n## Layout: Use Arrangement and Alignment APIs\n\nDeclare layout intent explicitly\n\n**Do:*\\* Use Arrangement / Alignment\n**Don't:*\\* Manual spacing hacks\n\n```\nDeclarative spacing\n```\n\n## Layout: Extract reusable layout patterns\n\nRepeated layouts should be shared\n\n**Do:*\\* Create layout composable\n**Don't:*\\* Copy-paste layouts\n\n```\nReusable scaffold\n```\n\n## Theming: No hardcoded text style\n\nUse typography\n\n**Do:*\\* MaterialTheme.typography\n**Don't:*\\* Hardcode sp\n\n```\nScalable\n```\n\n## Testing: Stateless UI testing\n\nComposable easy to test\n\n**Do:*\\* Pass state\n**Don't:*\\* Hidden state\n\n```\nTestable\n```\n\n## Testing: Use testTag\n\nStable UI selectors\n\n**Do:*\\* Modifier.testTag\n**Don't:*\\* Find by text\n\n```\nStable tests\n```\n\n## Preview: Multiple previews\n\nPreview multiple states\n\n**Do:** @Preview\n**Don't:*\\* Single preview\n\n```\nBetter dev UX\n```\n\n## DI: Inject VM via Hilt\n\nUse hiltViewModel\n\n**Do:** @HiltViewModel\n**Don't:*\\* Manual VM\n\n```\nClean DI\n```\n\n## DI: No DI in UI\n\nInject in VM\n\n**Do:*\\* Constructor inject\n**Don't:*\\* Inject composable\n\n```\nProper scope\n```\n\n## Accessibility: Content description\n\nAccessible UI\n\n**Do:*\\* contentDescription\n**Don't:*\\* Ignore a11y\n\n```\nInclusive\n```\n\n## Accessibility: Semantics\n\nUse semantics API\n\n**Do:*\\* Modifier.semantics\n**Don't:*\\* None\n\n```\nTestable a11y\n```\n\n## Animation: Compose animation APIs\n\nUse animate*AsState\n\n**Do:*\\* AnimatedVisibility\n**Don't:*\\* Manual anim\n\n```\nSmooth\n```\n\n## Animation: Avoid animation logic in VM\n\nAnimation is UI concern\n\n**Do:*\\* Animate in UI\n**Don't:*\\* Animate in VM\n\n```\nCorrect layering\n```\n\n## Modularization: Feature-based UI modules\n\nUI per feature\n\n**Do:** :feature:ui\n**Don't:*\\* God module\n\n```\nScalable\n```\n\n## Modularization: Public UI contracts\n\nExpose minimal UI API\n\n**Do:*\\* Interface/Route\n**Don't:*\\* Expose impl\n\n```\nEncapsulated\n```\n\n## State: Snapshot state only\n\nUse Compose state\n\n**Do:*\\* mutableStateOf\n**Don't:*\\* Custom observable\n\n```\nCompose aware\n```\n\n## State: Avoid mutable collections\n\nImmutable list/map\n\n**Do:*\\* PersistentList\n**Don't:*\\* MutableList\n\n```\nStable UI\n```\n\n## Lifecycle: RememberCoroutineScope usage\n\nOnly for UI jobs\n\n**Do:*\\* UI coroutine\n**Don't:*\\* Long jobs\n\n```\nScoped job\n```\n\n## Interop: Interop View carefully\n\nUse AndroidView\n\n**Do:*\\* Isolated usage\n**Don't:*\\* Mix everywhere\n\n```\nSafe interop\n```\n\n## Interop: Avoid legacy patterns\n\nNo LiveData in UI\n\n**Do:*\\* StateFlow\n**Don't:*\\* LiveData\n\n```\nModern stack\n```\n\n## Debug: Use layout inspector\n\nInspect recomposition\n\n**Do:*\\* Tools\n**Don't:*\\* Blind debug\n\n```\nFast debug\n```\n\n## Debug: Enable recomposition counts\n\nTrack recomposition\n\n**Do:*\\* Debug flags\n**Don't:*\\* Ignore\n\n```\nPerformance aware\n```",
-      "tags": ["stack", "jetpack-compose", "implementation", "guidelines"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-stack-nextjs",
-      "type": "pattern",
-      "domain": "design",
-      "title": "nextjs Implementation Guidelines",
-      "severity": "suggestion",
-      "description": "# nextjs Implementation Guidelines\n\n## Routing: Use App Router for new projects\n\nApp Router is the recommended approach in Next.js 14+\n\n**Do:*\\* app/ directory with page.tsx\n**Don't:*\\* pages/ for new projects\n\n```\napp/dashboard/page.tsx\n```\n\n## Routing: Use file-based routing\n\nCreate routes by adding files in app directory\n\n**Do:*\\* page.tsx for routes layout.tsx for layouts\n**Don't:*\\* Manual route configuration\n\n```\napp/blog/[slug]/page.tsx\n```\n\n## Routing: Colocate related files\n\nKeep components styles tests with their routes\n\n**Do:*\\* Component files alongside page.tsx\n**Don't:*\\* Separate components folder\n\n```\napp/dashboard/_components/\n```\n\n## Routing: Use route groups for organization\n\nGroup routes without affecting URL\n\n**Do:*\\* Parentheses for route groups\n**Don't:*\\* Nested folders affecting URL\n\n```\n(marketing)/about/page.tsx\n```\n\n## Routing: Handle loading states\n\nUse loading.tsx for route loading UI\n\n**Do:*\\* loading.tsx alongside page.tsx\n**Don't:*\\* Manual loading state management\n\n```\napp/dashboard/loading.tsx\n```\n\n## Routing: Handle errors with error.tsx\n\nCatch errors at route level\n\n**Do:*\\* error.tsx with reset function\n**Don't:*\\* try/catch in every component\n\n```\napp/dashboard/error.tsx\n```\n\n## Rendering: Use Server Components by default\n\nServer Components reduce client JS bundle\n\n**Do:*\\* Keep components server by default\n**Don't:*\\* Add 'use client' unnecessarily\n\n```\nexport default function Page()\n```\n\n## Rendering: Mark Client Components explicitly\n\n'use client' for interactive components\n\n**Do:*\\* Add 'use client' only when needed\n**Don't:*\\* Server Component with hooks/events\n\n```\n('use client') for onClick useState\n```\n\n## Rendering: Push Client Components down\n\nKeep Client Components as leaf nodes\n\n**Do:*\\* Client wrapper for interactive parts only\n**Don't:*\\* Mark page as Client Component\n\n```\n<InteractiveButton/> in Server Page\n```\n\n## Rendering: Use streaming for better UX\n\nStream content with Suspense boundaries\n\n**Do:*\\* Suspense for slow data fetches\n**Don't:*\\* Wait for all data before render\n\n```\n<Suspense><SlowComponent/></Suspense>\n```\n\n## Rendering: Choose correct rendering strategy\n\nSSG for static SSR for dynamic ISR for semi-static\n\n**Do:*\\* generateStaticParams for known paths\n**Don't:*\\* SSR for static content\n\n```\nexport const revalidate = 3600\n```\n\n## DataFetching: Fetch data in Server Components\n\nFetch directly in async Server Components\n\n**Do:*\\* async function Page() { const data = await fetch() }\n**Don't:*\\* useEffect for initial data\n\n```\nconst data = await fetch(url)\n```\n\n## DataFetching: Configure caching explicitly (Next.js 15+)\n\nNext.js 15 changed defaults to uncached for fetch\n\n**Do:*\\* Explicitly set cache: 'force-cache' for static data\n**Don't:*\\* Assume default is cached (it's not in Next.js 15)\n\n```\nfetch(url { cache: 'force-cache' })\n```\n\n## DataFetching: Deduplicate fetch requests\n\nReact and Next.js dedupe same requests\n\n**Do:*\\* Same fetch call in multiple components\n**Don't:*\\* Manual request deduplication\n\n```\nMultiple components fetch same URL\n```\n\n## DataFetching: Use Server Actions for mutations\n\nServer Actions for form submissions\n\n**Do:*\\* action={serverAction} in forms\n**Don't:*\\* API route for every mutation\n\n```\n<form action={createPost}>\n```\n\n## DataFetching: Revalidate data appropriately\n\nUse revalidatePath/revalidateTag after mutations\n\n**Do:*\\* Revalidate after Server Action\n**Don't:** 'use client' with manual refetch\n\n```\nrevalidatePath('/posts')\n```\n\n## Images: Use next/image for optimization\n\nAutomatic image optimization and lazy loading\n\n**Do:** `<Image> component for all images`\n**Don't:** `<img> tags directly`\n\n```\n<Image src={} alt={} width={} height={}>\n```\n\n## Images: Provide width and height\n\nPrevent layout shift with dimensions\n\n**Do:*\\* width and height props or fill\n**Don't:*\\* Missing dimensions\n\n```\n<Image width={400} height={300}/>\n```\n\n## Images: Use fill for responsive images\n\nFill container with object-fit\n\n**Do:*\\* fill prop with relative parent\n**Don't:*\\* Fixed dimensions for responsive\n\n```\n<Image fill className=\"object-cover\"/>\n```\n\n## Images: Configure remote image domains\n\nWhitelist external image sources\n\n**Do:*\\* remotePatterns in next.config.js\n**Don't:*\\* Allow all domains\n\n```\nremotePatterns: [{ hostname: 'cdn.example.com' }]\n```\n\n## Images: Use priority for LCP images\n\nMark above-fold images as priority\n\n**Do:*\\* priority prop on hero images\n**Don't:*\\* All images with priority\n\n```\n<Image priority src={hero}/>\n```\n\n## Fonts: Use next/font for fonts\n\nSelf-hosted fonts with zero layout shift\n\n**Do:*\\* next/font/google or next/font/local\n**Don't:*\\* External font links\n\n```\nimport { Inter } from 'next/font/google'\n```\n\n## Fonts: Apply font to layout\n\nSet font in root layout for consistency\n\n**Do:*\\* className on body in layout.tsx\n**Don't:*\\* Font in individual pages\n\n```\n<body className={inter.className}>\n```\n\n## Fonts: Use variable fonts\n\nVariable fonts reduce bundle size\n\n**Do:*\\* Single variable font file\n**Don't:*\\* Multiple font weights as files\n\n```\nInter({ subsets: ['latin'] })\n```\n\n## Metadata: Use generateMetadata for dynamic\n\nGenerate metadata based on params\n\n**Do:*\\* export async function generateMetadata()\n**Don't:*\\* Hardcoded metadata everywhere\n\n```\ngenerateMetadata({ params })\n```\n\n## Metadata: Include OpenGraph images\n\nAdd OG images for social sharing\n\n**Do:*\\* opengraph-image.tsx or og property\n**Don't:*\\* Missing social preview images\n\n```\nopengraph: { images: ['/og.png'] }\n```\n\n## Metadata: Use metadata API\n\nExport metadata object for static metadata\n\n**Do:*\\* export const metadata = {}\n**Don't:*\\* Manual head tags\n\n```\nexport const metadata = { title: 'Page' }\n```\n\n## API: Use Route Handlers for APIs\n\napp/api routes for API endpoints\n\n**Do:*\\* app/api/users/route.ts\n**Don't:*\\* pages/api for new projects\n\n```\nexport async function GET(request)\n```\n\n## API: Return proper Response objects\n\nUse NextResponse for API responses\n\n**Do:*\\* NextResponse.json() for JSON\n**Don't:*\\* Plain objects or res.json()\n\n```\nreturn NextResponse.json({ data })\n```\n\n## API: Handle HTTP methods explicitly\n\nExport named functions for methods\n\n**Do:*\\* Export GET POST PUT DELETE\n**Don't:*\\* Single handler for all methods\n\n```\nexport async function POST()\n```\n\n## API: Validate request body\n\nValidate input before processing\n\n**Do:*\\* Zod or similar for validation\n**Don't:*\\* Trust client input\n\n```\nconst body = schema.parse(await req.json())\n```\n\n## Middleware: Use middleware for auth\n\nProtect routes with middleware.ts\n\n**Do:*\\* middleware.ts at root\n**Don't:*\\* Auth check in every page\n\n```\nexport function middleware(request)\n```\n\n## Middleware: Match specific paths\n\nConfigure middleware matcher\n\n**Do:*\\* config.matcher for specific routes\n**Don't:*\\* Run middleware on all routes\n\n```\nmatcher: ['/dashboard/:path*']\n```\n\n## Middleware: Keep middleware edge-compatible\n\nMiddleware runs on Edge runtime\n\n**Do:*\\* Edge-compatible code only\n**Don't:*\\* Node.js APIs in middleware\n\n```\nEdge-compatible auth check\n```\n\n## Environment: Use NEXT_PUBLIC prefix\n\nClient-accessible env vars need prefix\n\n**Do:*\\* NEXT_PUBLIC_ for client vars\n**Don't:*\\* Server vars exposed to client\n\n```\nNEXT_PUBLIC_API_URL\n```\n\n## Environment: Validate env vars\n\nCheck required env vars exist\n\n**Do:*\\* Validate on startup\n**Don't:*\\* Undefined env at runtime\n\n```\nif (!process.env.DATABASE_URL) throw\n```\n\n## Environment: Use .env.local for secrets\n\nLocal env file for development secrets\n\n**Do:** .env.local gitignored\n**Don't:*\\* Secrets in .env committed\n\n```\n.env.local with secrets\n```\n\n## Performance: Analyze bundle size\n\nUse @next/bundle-analyzer\n\n**Do:*\\* Bundle analyzer in dev\n**Don't:*\\* Ship large bundles blindly\n\n```\nANALYZE=true npm run build\n```\n\n## Performance: Use dynamic imports\n\nCode split with next/dynamic\n\n**Do:*\\* dynamic() for heavy components\n**Don't:*\\* Import everything statically\n\n```\nconst Chart = dynamic(() => import('./Chart'))\n```\n\n## Performance: Avoid layout shifts\n\nReserve space for dynamic content\n\n**Do:*\\* Skeleton loaders aspect ratios\n**Don't:*\\* Content popping in\n\n```\n<Skeleton className=\"h-48\"/>\n```\n\n## Performance: Use Partial Prerendering\n\nCombine static and dynamic in one route\n\n**Do:*\\* Static shell with Suspense holes\n**Don't:*\\* Full dynamic or static pages\n\n```\nStatic header + dynamic content\n```\n\n## Link: Use next/link for navigation\n\nClient-side navigation with prefetching\n\n**Do:** `<Link href=\"\"> for internal links`\n**Don't:** `<a> for internal navigation`\n\n```\n<Link href=\"/about\">About</Link>\n```\n\n## Link: Prefetch strategically\n\nControl prefetching behavior\n\n**Do:*\\* prefetch={false} for low-priority\n**Don't:*\\* Prefetch all links\n\n```\n<Link prefetch={false}>\n```\n\n## Link: Use scroll option appropriately\n\nControl scroll behavior on navigation\n\n**Do:*\\* scroll={false} for tabs pagination\n**Don't:*\\* Always scroll to top\n\n```\n<Link scroll={false}>\n```\n\n## Config: Use next.config.js correctly\n\nConfigure Next.js behavior\n\n**Do:*\\* Proper config options\n**Don't:*\\* Deprecated or wrong options\n\n```\nimages: { remotePatterns: [] }\n```\n\n## Config: Enable strict mode\n\nCatch potential issues early\n\n**Do:*\\* reactStrictMode: true\n**Don't:*\\* Strict mode disabled\n\n```\nreactStrictMode: true\n```\n\n## Config: Configure redirects and rewrites\n\nUse config for URL management\n\n**Do:*\\* redirects() rewrites() in config\n**Don't:*\\* Manual redirect handling\n\n```\nredirects: async () => [...]\n```\n\n## Deployment: Use Vercel for easiest deploy\n\nVercel optimized for Next.js\n\n**Do:*\\* Deploy to Vercel\n**Don't:*\\* Self-host without knowledge\n\n```\nvercel deploy\n```\n\n## Deployment: Configure output for self-hosting\n\nSet output option for deployment target\n\n**Do:*\\* output: 'standalone' for Docker\n**Don't:*\\* Default output for containers\n\n```\noutput: 'standalone'\n```\n\n## Security: Sanitize user input\n\nNever trust user input\n\n**Do:*\\* Escape sanitize validate all input\n**Don't:*\\* Direct interpolation of user data\n\n```\nDOMPurify.sanitize(userInput)\n```\n\n## Security: Use CSP headers\n\nContent Security Policy for XSS protection\n\n**Do:*\\* Configure CSP in next.config.js\n**Don't:*\\* No security headers\n\n```\nheaders() with CSP\n```\n\n## Security: Validate Server Action input\n\nServer Actions are public endpoints\n\n**Do:*\\* Validate and authorize in Server Action\n**Don't:*\\* Trust Server Action input\n\n```\nAuth check + validation in action\n```",
-      "tags": ["stack", "nextjs", "implementation", "guidelines"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-stack-nuxt-ui",
-      "type": "pattern",
-      "domain": "design",
-      "title": "nuxt-ui Implementation Guidelines",
-      "severity": "suggestion",
-      "description": "# nuxt-ui Implementation Guidelines\n\n## Installation: Add Nuxt UI module\n\nInstall and configure Nuxt UI in your Nuxt project\n\n**Do:*\\* pnpm add @nuxt/ui and add to modules\n**Don't:*\\* Manual component imports\n\n```\nmodules: ['@nuxt/ui']\n```\n\n## Installation: Import Tailwind and Nuxt UI CSS\n\nRequired CSS imports in main.css file\n\n**Do:** @import tailwindcss and @import @nuxt/ui\n**Don't:*\\* Skip CSS imports\n\n```\n@import \"tailwindcss\"; @import \"@nuxt/ui\";\n```\n\n## Installation: Wrap app with UApp component\n\nUApp provides global configs for Toast Tooltip and overlays\n\n**Do:** `<UApp> wrapper in app.vue`\n**Don't:*\\* Skip UApp wrapper\n\n```\n<UApp><NuxtPage/></UApp>\n```\n\n## Components: Use U prefix for components\n\nAll Nuxt UI components use U prefix by default\n\n**Do:*\\* UButton UInput UModal\n**Don't:*\\* Button Input Modal\n\n```\n<UButton>Click</UButton>\n```\n\n## Components: Use semantic color props\n\nUse semantic colors like primary secondary error\n\n**Do:*\\* color=primary color=error\n**Don't:*\\* Hardcoded colors\n\n```\n<UButton color=\"primary\">\n```\n\n## Components: Use variant prop for styling\n\nNuxt UI provides solid outline soft subtle ghost link variants\n\n**Do:*\\* variant=soft variant=outline\n**Don't:*\\* Custom button classes\n\n```\n<UButton variant=\"soft\">\n```\n\n## Components: Use size prop consistently\n\nComponents support xs sm md lg xl sizes\n\n**Do:*\\* size=sm size=lg\n**Don't:*\\* Arbitrary sizing classes\n\n```\n<UButton size=\"lg\">\n```\n\n## Icons: Use icon prop with Iconify format\n\nNuxt UI supports Iconify icons via icon prop\n\n**Do:*\\* icon=lucide:home icon=heroicons:user\n**Don't:*\\* i-lucide-home format\n\n```\n<UButton icon=\"lucide:home\">\n```\n\n## Icons: Use leadingIcon and trailingIcon\n\nPosition icons with dedicated props for clarity\n\n**Do:*\\* leadingIcon=lucide:plus trailingIcon=lucide:arrow-right\n**Don't:*\\* Manual icon positioning\n\n```\n<UButton leadingIcon=\"lucide:plus\">\n```\n\n## Theming: Configure colors in app.config.ts\n\nRuntime color configuration without restart\n\n**Do:*\\* ui.colors.primary in app.config.ts\n**Don't:*\\* Hardcoded colors in components\n\n```\ndefineAppConfig({ ui: { colors: { primary: 'blue' } } })\n```\n\n## Theming: Use @theme directive for custom colors\n\nDefine design tokens in CSS with Tailwind @theme\n\n**Do:** @theme { --color-brand-500: #xxx }\n**Don't:*\\* Inline color definitions\n\n```\n@theme { --color-brand-500: #ef4444; }\n```\n\n## Theming: Extend semantic colors in nuxt.config\n\nRegister new colors like tertiary in theme.colors\n\n**Do:*\\* theme.colors array in ui config\n**Don't:*\\* Use undefined colors\n\n```\nui: { theme: { colors: ['primary', 'tertiary'] } }\n```\n\n## Forms: Use UForm with schema validation\n\nUForm supports Zod Yup Joi Valibot schemas\n\n**Do:** :schema prop with validation schema\n**Don't:*\\* Manual form validation\n\n```\n<UForm :schema=\"schema\" :state=\"state\">\n```\n\n## Forms: Use UFormField for field wrapper\n\nProvides label error message and validation display\n\n**Do:*\\* UFormField with name prop\n**Don't:*\\* Manual error handling\n\n```\n<UFormField name=\"email\" label=\"Email\">\n```\n\n## Forms: Handle form submit with @submit\n\nUForm emits submit event with validated data\n\n**Do:** @submit handler on UForm\n**Don't:** @click on submit button\n\n```\n<UForm @submit=\"onSubmit\">\n```\n\n## Forms: Use validateOn prop for validation timing\n\nControl when validation triggers (blur change input)\n\n**Do:*\\* validateOn=['blur'] for performance\n**Don't:*\\* Always validate on input\n\n```\n<UForm :validateOn=\"['blur', 'change']\">\n```\n\n## Overlays: Use v-model:open for overlay control\n\nModal Slideover Drawer use v-model:open\n\n**Do:*\\* v-model:open for controlled state\n**Don't:*\\* Manual show/hide logic\n\n```\n<UModal v-model:open=\"isOpen\">\n```\n\n## Overlays: Use useOverlay composable for programmatic overlays\n\nOpen overlays programmatically without template refs\n\n**Do:*\\* useOverlay().open(MyModal)\n**Don't:*\\* Template ref and manual control\n\n```\nconst overlay = useOverlay(); overlay.open(MyModal, { props })\n```\n\n## Overlays: Use title and description props\n\nBuilt-in header support for overlays\n\n**Do:*\\* title=Confirm description=Are you sure?\n**Don't:*\\* Manual header content\n\n```\n<UModal title=\"Confirm\" description=\"Are you sure?\">\n```\n\n## Dashboard: Use UDashboardSidebar for navigation\n\nProvides collapsible resizable sidebar with mobile support\n\n**Do:*\\* UDashboardSidebar with header default footer slots\n**Don't:*\\* Custom sidebar implementation\n\n```\n<UDashboardSidebar><template #header>...</template></UDashboardSidebar>\n```\n\n## Dashboard: Use UDashboardGroup for layout\n\nWraps dashboard components with sidebar state management\n\n**Do:*\\* UDashboardGroup > UDashboardSidebar + UDashboardPanel\n**Don't:*\\* Manual layout flex containers\n\n```\n<UDashboardGroup><UDashboardSidebar/><UDashboardPanel/></UDashboardGroup>\n```\n\n## Dashboard: Use UDashboardNavbar for top navigation\n\nResponsive navbar with mobile menu support\n\n**Do:*\\* UDashboardNavbar in dashboard layout\n**Don't:*\\* Custom navbar implementation\n\n```\n<UDashboardNavbar :links=navLinks/>\n```\n\n## Tables: Use UTable with data and columns props\n\nPowered by TanStack Table with built-in features\n\n**Do:** :data and :columns props\n**Don't:*\\* Manual table markup\n\n```\n<UTable :data=\"users\" :columns=\"columns\"/>\n```\n\n## Tables: Define columns with accessorKey\n\nColumn definitions use accessorKey for data binding\n\n**Do:*\\* accessorKey: 'email' in column def\n**Don't:*\\* String column names only\n\n```\n{ accessorKey: 'email', header: 'Email' }\n```\n\n## Tables: Use cell slot for custom rendering\n\nCustomize cell content with scoped slots\n\n**Do:** #cell-columnName slot\n**Don't:*\\* Override entire table\n\n```\n<template #cell-status={ row }>\n```\n\n## Tables: Enable sorting with sortable column option\n\nAdd sortable: true to column definition\n\n**Do:*\\* sortable: true in column\n**Don't:*\\* Manual sort implementation\n\n```\n{ accessorKey: 'name', sortable: true }\n```\n\n## Navigation: Use UNavigationMenu for nav links\n\nHorizontal or vertical navigation with dropdown support\n\n**Do:*\\* UNavigationMenu with items array\n**Don't:*\\* Manual nav with v-for\n\n```\n<UNavigationMenu :items=\"navItems\"/>\n```\n\n## Navigation: Use UBreadcrumb for page hierarchy\n\nAutomatic breadcrumb with NuxtLink support\n\n**Do:** :items array with label and to\n**Don't:*\\* Manual breadcrumb links\n\n```\n<UBreadcrumb :items=\"breadcrumbs\"/>\n```\n\n## Navigation: Use UTabs for tabbed content\n\nTab navigation with content panels\n\n**Do:*\\* UTabs with items containing slot content\n**Don't:*\\* Manual tab state\n\n```\n<UTabs :items=\"tabs\"/>\n```\n\n## Feedback: Use useToast for notifications\n\nComposable for toast notifications\n\n**Do:*\\* useToast().add({ title description })\n**Don't:*\\* Alert components for toasts\n\n```\nconst toast = useToast(); toast.add({ title: 'Saved' })\n```\n\n## Feedback: Use UAlert for inline messages\n\nStatic alert messages with icon and actions\n\n**Do:*\\* UAlert with title description color\n**Don't:*\\* Toast for static messages\n\n```\n<UAlert title=\"Warning\" color=\"warning\"/>\n```\n\n## Feedback: Use USkeleton for loading states\n\nPlaceholder content during data loading\n\n**Do:*\\* USkeleton with appropriate size\n**Don't:*\\* Spinner for content loading\n\n```\n<USkeleton class=h-4 w-32/>\n```\n\n## Color Mode: Use UColorModeButton for theme toggle\n\nBuilt-in light/dark mode toggle button\n\n**Do:*\\* UColorModeButton component\n**Don't:*\\* Manual color mode logic\n\n```\n<UColorModeButton/>\n```\n\n## Color Mode: Use UColorModeSelect for theme picker\n\nDropdown to select system light or dark mode\n\n**Do:*\\* UColorModeSelect component\n**Don't:*\\* Custom select for theme\n\n```\n<UColorModeSelect/>\n```\n\n## Customization: Use ui prop for component styling\n\nOverride component styles via ui prop\n\n**Do:*\\* ui prop with slot class overrides\n**Don't:*\\* Global CSS overrides\n\n```\n<UButton :ui=\"{ base: 'rounded-full' }\"/>\n```\n\n## Customization: Configure default variants in nuxt.config\n\nSet default color and size for all components\n\n**Do:*\\* theme.defaultVariants in ui config\n**Don't:*\\* Repeat props on every component\n\n```\nui: { theme: { defaultVariants: { color: 'neutral' } } }\n```\n\n## Customization: Use app.config.ts for theme overrides\n\nRuntime theme customization\n\n**Do:*\\* defineAppConfig with ui key\n**Don't:*\\* nuxt.config for runtime values\n\n```\ndefineAppConfig({ ui: { button: { defaultVariants: { size: 'sm' } } } })\n```\n\n## Performance: Enable component detection\n\nTree-shake unused component CSS\n\n**Do:*\\* experimental.componentDetection: true\n**Don't:*\\* Include all component CSS\n\n```\nui: { experimental: { componentDetection: true } }\n```\n\n## Performance: Use UTable virtualize for large data\n\nEnable virtualization for 1000+ rows\n\n**Do:** :virtualize prop on UTable\n**Don't:*\\* Render all rows\n\n```\n<UTable :data=\"largeData\" virtualize/>\n```\n\n## Accessibility: Use semantic component props\n\nComponents have built-in ARIA support\n\n**Do:*\\* Use title description label props\n**Don't:*\\* Skip accessibility props\n\n```\n<UModal title=\"Settings\">\n```\n\n## Accessibility: Use UFormField for form accessibility\n\nAutomatic label-input association\n\n**Do:*\\* UFormField wraps inputs\n**Don't:*\\* Manual id and for attributes\n\n```\n<UFormField label=\"Email\"><UInput/></UFormField>\n```\n\n## Content: Use UContentToc for table of contents\n\nAutomatic TOC with active heading highlight\n\n**Do:*\\* UContentToc with :links\n**Don't:*\\* Manual TOC implementation\n\n```\n<UContentToc :links=\"toc\"/>\n```\n\n## Content: Use UContentSearch for docs search\n\nCommand palette for documentation search\n\n**Do:*\\* UContentSearch with Nuxt Content\n**Don't:*\\* Custom search implementation\n\n```\n<UContentSearch/>\n```\n\n## AI/Chat: Use UChatMessages for chat UI\n\nDesigned for Vercel AI SDK integration\n\n**Do:*\\* UChatMessages with messages array\n**Don't:*\\* Custom chat message list\n\n```\n<UChatMessages :messages=\"messages\"/>\n```\n\n## AI/Chat: Use UChatPrompt for input\n\nEnhanced textarea for AI prompts\n\n**Do:*\\* UChatPrompt with v-model\n**Don't:*\\* Basic textarea\n\n```\n<UChatPrompt v-model=prompt/>\n```\n\n## Editor: Use UEditor for rich text\n\nTipTap-based editor with toolbar support\n\n**Do:*\\* UEditor with v-model:content\n**Don't:*\\* Custom TipTap setup\n\n```\n<UEditor v-model:content=\"content\"/>\n```\n\n## Links: Use to prop for navigation\n\nUButton and ULink support NuxtLink to prop\n\n**Do:*\\* to=/dashboard for internal links\n**Don't:*\\* href for internal navigation\n\n```\n<UButton to=\"/dashboard\">\n```\n\n## Links: Use external prop for outside links\n\nExplicitly mark external links\n\n**Do:*\\* target=_blank with external URLs\n**Don't:*\\* Forget rel=noopener\n\n```\n<UButton to=\"https://example.com\" target=\"_blank\">\n```\n\n## Loading: Use loadingAuto on buttons\n\nAutomatic loading state from @click promise\n\n**Do:*\\* loadingAuto prop on UButton\n**Don't:*\\* Manual loading state\n\n```\n<UButton loadingAuto @click=\"async () => await save()\">\n```\n\n## Loading: Use UForm loadingAuto\n\nAuto-disable form during submit\n\n**Do:*\\* loadingAuto on UForm (default true)\n**Don't:*\\* Manual form disabled state\n\n```\n<UForm @submit=\"handleSubmit\">\n```",
-      "tags": ["stack", "nuxt-ui", "implementation", "guidelines"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-stack-nuxtjs",
-      "type": "pattern",
-      "domain": "design",
-      "title": "nuxtjs Implementation Guidelines",
-      "severity": "suggestion",
-      "description": "# nuxtjs Implementation Guidelines\n\n## Routing: Use file-based routing\n\nCreate routes by adding files in pages directory\n\n**Do:*\\* pages/ directory with index.vue\n**Don't:*\\* Manual route configuration\n\n```\npages/dashboard/index.vue\n```\n\n## Routing: Use dynamic route parameters\n\nCreate dynamic routes with bracket syntax\n\n**Do:** [id].vue for dynamic params\n**Don't:*\\* Hardcoded routes for dynamic content\n\n```\npages/posts/[id].vue\n```\n\n## Routing: Use catch-all routes\n\nHandle multiple path segments with [...slug]\n\n**Do:** [...slug].vue for catch-all\n**Don't:*\\* Multiple nested dynamic routes\n\n```\npages/[...slug].vue\n```\n\n## Routing: Define page metadata with definePageMeta\n\nSet page-level configuration and middleware\n\n**Do:*\\* definePageMeta for layout middleware title\n**Don't:*\\* Manual route meta configuration\n\n```\ndefinePageMeta({ layout: 'admin', middleware: 'auth' })\n```\n\n## Routing: Use validate for route params\n\nValidate dynamic route parameters before rendering\n\n**Do:*\\* validate function in definePageMeta\n**Don't:*\\* Manual validation in setup\n\n```\ndefinePageMeta({ validate: (route) => /^\\d+$/.test(route.params.id) })\n```\n\n## Rendering: Use SSR by default\n\nServer-side rendering is enabled by default\n\n**Do:*\\* Keep ssr: true (default)\n**Don't:*\\* Disable SSR unnecessarily\n\n```\nssr: true (default)\n```\n\n## Rendering: Use .client suffix for client-only components\n\nMark components to render only on client\n\n**Do:*\\* ComponentName.client.vue suffix\n**Don't:*\\* v-if with process.client check\n\n```\nComments.client.vue\n```\n\n## Rendering: Use .server suffix for server-only components\n\nMark components to render only on server\n\n**Do:*\\* ComponentName.server.vue suffix\n**Don't:*\\* Manual server check\n\n```\nHeavyMarkdown.server.vue\n```\n\n## DataFetching: Use useFetch for simple data fetching\n\nWrapper around useAsyncData for URL fetching\n\n**Do:*\\* useFetch for API calls\n**Don't:** $fetch in onMounted\n\n```\nconst { data } = await useFetch('/api/posts')\n```\n\n## DataFetching: Use useAsyncData for complex fetching\n\nFine-grained control over async data\n\n**Do:*\\* useAsyncData for CMS or custom fetching\n**Don't:*\\* useFetch for non-URL data sources\n\n```\nconst { data } = await useAsyncData('posts', () => cms.getPosts())\n```\n\n## DataFetching: Use $fetch for non-reactive requests\n\n$fetch for event handlers and non-component code\n\n**Do:** $fetch in event handlers or server routes\n**Don't:*\\* useFetch in click handlers\n\n```\nasync function submit() { await $fetch('/api/submit', { method: 'POST' }) }\n```\n\n## DataFetching: Use lazy option for non-blocking fetch\n\nDefer data fetching for better initial load\n\n**Do:*\\* lazy: true for below-fold content\n**Don't:*\\* Blocking fetch for non-critical data\n\n```\nuseFetch('/api/comments', { lazy: true })\n```\n\n## DataFetching: Use server option to control fetch location\n\nChoose where data is fetched\n\n**Do:*\\* server: false for client-only data\n**Don't:*\\* Server fetch for user-specific client data\n\n```\nuseFetch('/api/user-preferences', { server: false })\n```\n\n## DataFetching: Use pick to reduce payload size\n\nSelect only needed fields from response\n\n**Do:*\\* pick option for large responses\n**Don't:*\\* Fetching entire objects when few fields needed\n\n```\nuseFetch('/api/user', { pick: ['id', 'name'] })\n```\n\n## DataFetching: Use transform for data manipulation\n\nTransform data before storing in state\n\n**Do:*\\* transform option for data shaping\n**Don't:*\\* Manual transformation after fetch\n\n```\nuseFetch('/api/posts', { transform: (posts) => posts.map(p => p.title) })\n```\n\n## DataFetching: Handle loading and error states\n\nAlways handle pending and error states\n\n**Do:*\\* Check status pending error refs\n**Don't:*\\* Ignoring loading states\n\n```\n<div v-if=\"status === 'pending'\">Loading...</div>\n```\n\n## Lifecycle: Avoid side effects in script setup root\n\nMove side effects to lifecycle hooks\n\n**Do:*\\* Side effects in onMounted\n**Don't:*\\* setInterval in root script setup\n\n```\nonMounted(() => { interval = setInterval(...) })\n```\n\n## Lifecycle: Use onMounted for DOM access\n\nAccess DOM only after component is mounted\n\n**Do:*\\* onMounted for DOM manipulation\n**Don't:*\\* Direct DOM access in setup\n\n```\nonMounted(() => { document.getElementById('el') })\n```\n\n## Lifecycle: Use nextTick for post-render access\n\nWait for DOM updates before accessing elements\n\n**Do:*\\* await nextTick() after state changes\n**Don't:*\\* Immediate DOM access after state change\n\n```\ncount.value++; await nextTick(); el.value.focus()\n```\n\n## Lifecycle: Use onPrehydrate for pre-hydration logic\n\nRun code before Nuxt hydrates the page\n\n**Do:*\\* onPrehydrate for client setup\n**Don't:*\\* onMounted for hydration-critical code\n\n```\nonPrehydrate(() => { console.log(window) })\n```\n\n## Server: Use server/api for API routes\n\nCreate API endpoints in server/api directory\n\n**Do:*\\* server/api/users.ts for /api/users\n**Don't:*\\* Manual Express setup\n\n```\nserver/api/hello.ts -> /api/hello\n```\n\n## Server: Use defineEventHandler for handlers\n\nDefine server route handlers\n\n**Do:*\\* defineEventHandler for all handlers\n**Don't:*\\* export default function\n\n```\nexport default defineEventHandler((event) => { return { hello: 'world' } })\n```\n\n## Server: Use server/routes for non-api routes\n\nRoutes without /api prefix\n\n**Do:*\\* server/routes for custom paths\n**Don't:*\\* server/api for non-api routes\n\n```\nserver/routes/sitemap.xml.ts\n```\n\n## Server: Use getQuery and readBody for input\n\nAccess query params and request body\n\n**Do:*\\* getQuery(event) readBody(event)\n**Don't:*\\* Direct event access\n\n```\nconst { id } = getQuery(event)\n```\n\n## Server: Validate server input\n\nAlways validate input in server handlers\n\n**Do:*\\* Zod or similar for validation\n**Don't:*\\* Trust client input\n\n```\nconst body = await readBody(event); schema.parse(body)\n```\n\n## State: Use useState for shared reactive state\n\nSSR-friendly shared state across components\n\n**Do:*\\* useState for cross-component state\n**Don't:*\\* ref for shared state\n\n```\nconst count = useState('count', () => 0)\n```\n\n## State: Use unique keys for useState\n\nPrevent state conflicts with unique keys\n\n**Do:*\\* Descriptive unique keys for each state\n**Don't:*\\* Generic or duplicate keys\n\n```\nuseState('user-preferences', () => ({}))\n```\n\n## State: Use Pinia for complex state\n\nPinia for advanced state management\n\n**Do:** @pinia/nuxt for complex apps\n**Don't:*\\* Custom state management\n\n```\nuseMainStore() with Pinia\n```\n\n## State: Use callOnce for one-time async operations\n\nEnsure async operations run only once\n\n**Do:*\\* callOnce for store initialization\n**Don't:*\\* Direct await in component\n\n```\nawait callOnce(store.fetch)\n```\n\n## SEO: Use useSeoMeta for SEO tags\n\nType-safe SEO meta tag management\n\n**Do:*\\* useSeoMeta for meta tags\n**Don't:*\\* useHead for simple meta\n\n```\nuseSeoMeta({ title: 'Home', ogTitle: 'Home', description: '...' })\n```\n\n## SEO: Use reactive values in useSeoMeta\n\nDynamic SEO tags with refs or getters\n\n**Do:*\\* Computed getters for dynamic values\n**Don't:*\\* Static values for dynamic content\n\n```\nuseSeoMeta({ title: () => post.value.title })\n```\n\n## SEO: Use useHead for non-meta head elements\n\nScripts styles links in head\n\n**Do:*\\* useHead for scripts and links\n**Don't:*\\* useSeoMeta for scripts\n\n```\nuseHead({ script: [{ src: '/analytics.js' }] })\n```\n\n## SEO: Include OpenGraph tags\n\nAdd OG tags for social sharing\n\n**Do:*\\* ogTitle ogDescription ogImage\n**Don't:*\\* Missing social preview\n\n```\nuseSeoMeta({ ogImage: '/og.png', twitterCard: 'summary_large_image' })\n```\n\n## Middleware: Use defineNuxtRouteMiddleware\n\nDefine route middleware properly\n\n**Do:*\\* defineNuxtRouteMiddleware wrapper\n**Don't:*\\* export default function\n\n```\nexport default defineNuxtRouteMiddleware((to, from) => {})\n```\n\n## Middleware: Use navigateTo for redirects\n\nRedirect in middleware with navigateTo\n\n**Do:*\\* return navigateTo('/login')\n**Don't:*\\* router.push in middleware\n\n```\nif (!auth) return navigateTo('/login')\n```\n\n## Middleware: Reference middleware in definePageMeta\n\nApply middleware to specific pages\n\n**Do:*\\* middleware array in definePageMeta\n**Don't:*\\* Global middleware for page-specific\n\n```\ndefinePageMeta({ middleware: ['auth'] })\n```\n\n## Middleware: Use .global suffix for global middleware\n\nApply middleware to all routes\n\n**Do:*\\* auth.global.ts for app-wide auth\n**Don't:*\\* Manual middleware on every page\n\n```\nmiddleware/auth.global.ts\n```\n\n## ErrorHandling: Use createError for errors\n\nCreate errors with proper status codes\n\n**Do:*\\* createError with statusCode\n**Don't:*\\* throw new Error\n\n```\nthrow createError({ statusCode: 404, statusMessage: 'Not Found' })\n```\n\n## ErrorHandling: Use NuxtErrorBoundary for local errors\n\nHandle errors within component subtree\n\n**Do:*\\* NuxtErrorBoundary for component errors\n**Don't:*\\* Global error page for local errors\n\n```\n<NuxtErrorBoundary @error=\"log\"><template #error=\"{ error }\">\n```\n\n## ErrorHandling: Use clearError to recover from errors\n\nClear error state and optionally redirect\n\n**Do:*\\* clearError({ redirect: '/' })\n**Don't:*\\* Manual error state reset\n\n```\nclearError({ redirect: '/home' })\n```\n\n## ErrorHandling: Use short statusMessage\n\nKeep statusMessage brief for security\n\n**Do:*\\* Short generic messages\n**Don't:*\\* Detailed error info in statusMessage\n\n```\ncreateError({ statusCode: 400, statusMessage: 'Bad Request' })\n```\n\n## Link: Use NuxtLink for internal navigation\n\nClient-side navigation with prefetching\n\n**Do:** `<NuxtLink to> for internal links`\n**Don't:** `<a href> for internal links`\n\n```\n<NuxtLink to=/about>About</NuxtLink>\n```\n\n## Link: Configure prefetch behavior\n\nControl when prefetching occurs\n\n**Do:*\\* prefetchOn for interaction-based\n**Don't:*\\* Default prefetch for low-priority\n\n```\n<NuxtLink prefetch-on=\"interaction\">\n```\n\n## Link: Use useRouter for programmatic navigation\n\nNavigate programmatically\n\n**Do:*\\* useRouter().push() for navigation\n**Don't:*\\* Direct window.location\n\n```\nconst router = useRouter(); router.push('/dashboard')\n```\n\n## Link: Use navigateTo in composables\n\nNavigate outside components\n\n**Do:*\\* navigateTo() in middleware or plugins\n**Don't:*\\* useRouter in non-component code\n\n```\nreturn navigateTo('/login')\n```\n\n## AutoImports: Leverage auto-imports\n\nUse auto-imported composables directly\n\n**Do:*\\* Direct use of ref computed useFetch\n**Don't:*\\* Manual imports for Nuxt composables\n\n```\nconst count = ref(0)\n```\n\n## AutoImports: Use #imports for explicit imports\n\nExplicit imports when needed\n\n**Do:** #imports for clarity or disabled auto-imports\n**Don't:*\\* import from 'vue' when auto-import enabled\n\n```\nimport { ref } from '#imports'\n```\n\n## AutoImports: Configure third-party auto-imports\n\nAdd external package auto-imports\n\n**Do:*\\* imports.presets in nuxt.config\n**Don't:*\\* Manual imports everywhere\n\n```\nimports: { presets: [{ from: 'vue-i18n', imports: ['useI18n'] }] }\n```\n\n## Plugins: Use defineNuxtPlugin\n\nDefine plugins properly\n\n**Do:*\\* defineNuxtPlugin wrapper\n**Don't:*\\* export default function\n\n```\nexport default defineNuxtPlugin((nuxtApp) => {})\n```\n\n## Plugins: Use provide for injection\n\nProvide helpers across app\n\n**Do:*\\* return { provide: {} } for type safety\n**Don't:*\\* nuxtApp.provide without types\n\n```\nreturn { provide: { hello: (name) => `Hello ${name}!` } }\n```\n\n## Plugins: Use .client or .server suffix\n\nControl plugin execution environment\n\n**Do:*\\* plugin.client.ts for client-only\n**Don't:*\\* if (process.client) checks\n\n```\nanalytics.client.ts\n```\n\n## Environment: Use runtimeConfig for env vars\n\nAccess environment variables safely\n\n**Do:*\\* runtimeConfig in nuxt.config\n**Don't:*\\* process.env directly\n\n```\nruntimeConfig: { apiSecret: '', public: { apiBase: '' } }\n```\n\n## Environment: Use NUXT_ prefix for env override\n\nOverride config with environment variables\n\n**Do:*\\* NUXT_API_SECRET NUXT_PUBLIC_API_BASE\n**Don't:*\\* Custom env var names\n\n```\nNUXT_PUBLIC_API_BASE=https://api.example.com\n```\n\n## Environment: Access public config with useRuntimeConfig\n\nGet public config in components\n\n**Do:*\\* useRuntimeConfig().public\n**Don't:*\\* Direct process.env access\n\n```\nconst config = useRuntimeConfig(); config.public.apiBase\n```\n\n## Environment: Keep secrets in private config\n\nServer-only secrets in runtimeConfig root\n\n**Do:*\\* runtimeConfig.apiSecret (server only)\n**Don't:*\\* Secrets in public config\n\n```\nruntimeConfig: { dbPassword: '' }\n```\n\n## Performance: Use Lazy prefix for code splitting\n\nLazy load components with Lazy prefix\n\n**Do:** `<LazyComponent> for below-fold`\n**Don't:*\\* Eager load all components\n\n```\n<LazyMountainsList v-if=show/>\n```\n\n## Performance: Use useLazyFetch for non-blocking data\n\nAlias for useFetch with lazy: true\n\n**Do:*\\* useLazyFetch for secondary data\n**Don't:*\\* useFetch for all requests\n\n```\nconst { data } = useLazyFetch('/api/comments')\n```\n\n## Performance: Use lazy hydration for interactivity\n\nDelay component hydration until needed\n\n**Do:*\\* LazyComponent with hydration strategy\n**Don't:*\\* Immediate hydration for all\n\n```\n<LazyModal hydrate-on-visible/>\n```",
-      "tags": ["stack", "nuxtjs", "implementation", "guidelines"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-stack-react-native",
-      "type": "pattern",
-      "domain": "design",
-      "title": "react-native Implementation Guidelines",
-      "severity": "suggestion",
-      "description": "# react-native Implementation Guidelines\n\n## Components: Use functional components\n\nHooks-based components are standard\n\n**Do:*\\* Functional components with hooks\n**Don't:*\\* Class components\n\n```\nconst App = () => { }\n```\n\n## Components: Keep components small\n\nSingle responsibility principle\n\n**Do:*\\* Split into smaller components\n**Don't:*\\* Large monolithic components\n\n```\n<Header /><Content /><Footer />\n```\n\n## Components: Use TypeScript\n\nType safety for props and state\n\n**Do:*\\* TypeScript for new projects\n**Don't:*\\* JavaScript without types\n\n```\nconst Button: FC<Props> = () => { }\n```\n\n## Components: Colocate component files\n\nKeep related files together\n\n**Do:*\\* Component folder with styles\n**Don't:*\\* Flat structure\n\n```\ncomponents/Button/index.tsx styles.ts\n```\n\n## Styling: Use StyleSheet.create\n\nOptimized style objects\n\n**Do:*\\* StyleSheet for all styles\n**Don't:*\\* Inline style objects\n\n```\nStyleSheet.create({ container: {} })\n```\n\n## Styling: Avoid inline styles\n\nPrevent object recreation\n\n**Do:*\\* Styles in StyleSheet\n**Don't:*\\* Inline style objects in render\n\n```\nstyle={styles.container}\n```\n\n## Styling: Use flexbox for layout\n\nReact Native uses flexbox\n\n**Do:*\\* flexDirection alignItems justifyContent\n**Don't:*\\* Absolute positioning everywhere\n\n```\nflexDirection: 'row'\n```\n\n## Styling: Handle platform differences\n\nPlatform-specific styles\n\n**Do:*\\* Platform.select or .ios/.android files\n**Don't:*\\* Same styles for both platforms\n\n```\nPlatform.select({ ios: {}, android: {} })\n```\n\n## Styling: Use responsive dimensions\n\nScale for different screens\n\n**Do:*\\* Dimensions or useWindowDimensions\n**Don't:*\\* Fixed pixel values\n\n```\nuseWindowDimensions()\n```\n\n## Navigation: Use React Navigation\n\nStandard navigation library\n\n**Do:*\\* React Navigation for routing\n**Don't:*\\* Manual navigation management\n\n```\ncreateStackNavigator()\n```\n\n## Navigation: Type navigation params\n\nType-safe navigation\n\n**Do:*\\* Typed navigation props\n**Don't:*\\* Untyped navigation\n\n```\nnavigation.navigate<RootStackParamList>('Home', { id })\n```\n\n## Navigation: Use deep linking\n\nSupport URL-based navigation\n\n**Do:*\\* Configure linking prop\n**Don't:*\\* No deep link support\n\n```\nlinking: { prefixes: [] }\n```\n\n## Navigation: Handle back button\n\nAndroid back button handling\n\n**Do:*\\* useFocusEffect with BackHandler\n**Don't:*\\* Ignore back button\n\n```\nBackHandler.addEventListener\n```\n\n## State: Use useState for local state\n\nSimple component state\n\n**Do:*\\* useState for UI state\n**Don't:*\\* Class component state\n\n```\nconst [count, setCount] = useState(0)\n```\n\n## State: Use useReducer for complex state\n\nComplex state logic\n\n**Do:*\\* useReducer for related state\n**Don't:*\\* Multiple useState for related values\n\n```\nuseReducer(reducer initialState)\n```\n\n## State: Use context sparingly\n\nContext for global state\n\n**Do:*\\* Context for theme auth locale\n**Don't:*\\* Context for frequently changing data\n\n```\nThemeContext for app theme\n```\n\n## State: Consider Zustand or Redux\n\nExternal state management\n\n**Do:*\\* Zustand for simple Redux for complex\n**Don't:*\\* useState for global state\n\n```\ncreate((set) => ({ }))\n```\n\n## Lists: Use FlatList for long lists\n\nVirtualized list rendering\n\n**Do:*\\* FlatList for 50+ items\n**Don't:*\\* ScrollView with map\n\n```\n<FlatList data={items} />\n```\n\n## Lists: Provide keyExtractor\n\nUnique keys for list items\n\n**Do:*\\* keyExtractor with stable ID\n**Don't:*\\* Index as key\n\n```\nkeyExtractor={(item) => item.id}\n```\n\n## Lists: Optimize renderItem\n\nMemoize list item components\n\n**Do:*\\* React.memo for list items\n**Don't:*\\* Inline render function\n\n```\nrenderItem={({ item }) => <MemoizedItem item={item} />}\n```\n\n## Lists: Use getItemLayout for fixed height\n\nSkip measurement for performance\n\n**Do:*\\* getItemLayout when height known\n**Don't:*\\* Dynamic measurement for fixed items\n\n```\ngetItemLayout={(_, index) => ({ length: 50, offset: 50 \\* index, index })}\n```\n\n## Lists: Implement windowSize\n\nControl render window\n\n**Do:*\\* Smaller windowSize for memory\n**Don't:*\\* Default windowSize for large lists\n\n```\nwindowSize={5}\n```\n\n## Performance: Use React.memo\n\nPrevent unnecessary re-renders\n\n**Do:*\\* memo for pure components\n**Don't:*\\* No memoization\n\n```\nexport default memo(MyComponent)\n```\n\n## Performance: Use useCallback for handlers\n\nStable function references\n\n**Do:*\\* useCallback for props\n**Don't:*\\* New function on every render\n\n```\nuseCallback(() => {}, [deps])\n```\n\n## Performance: Use useMemo for expensive ops\n\nCache expensive calculations\n\n**Do:*\\* useMemo for heavy computations\n**Don't:*\\* Recalculate every render\n\n```\nuseMemo(() => expensive(), [deps])\n```\n\n## Performance: Avoid anonymous functions in JSX\n\nPrevent re-renders\n\n**Do:*\\* Named handlers or useCallback\n**Don't:*\\* Inline arrow functions\n\n```\nonPress={handlePress}\n```\n\n## Performance: Use Hermes engine\n\nImproved startup and memory\n\n**Do:*\\* Enable Hermes in build\n**Don't:*\\* JavaScriptCore for new projects\n\n```\nhermes_enabled: true\n```\n\n## Images: Use expo-image\n\nModern performant image component for React Native\n\n**Do:*\\* Use expo-image for caching, blurring, and performance\n**Don't:*\\* Use default Image for heavy lists or unmaintained libraries\n\n```\n<Image source={url} cachePolicy='memory-disk' /> (expo-image)\n```\n\n## Images: Specify image dimensions\n\nPrevent layout shifts\n\n**Do:*\\* width and height for remote images\n**Don't:*\\* No dimensions for network images\n\n```\n<Image style={{ width: 100 height: 100 }} />\n```\n\n## Images: Use resizeMode\n\nControl image scaling\n\n**Do:*\\* resizeMode cover contain\n**Don't:*\\* Stretch images\n\n```\nresizeMode=\"cover\"\n```\n\n## Forms: Use controlled inputs\n\nState-controlled form fields\n\n**Do:*\\* value + onChangeText\n**Don't:*\\* Uncontrolled inputs\n\n```\n<TextInput value={text} onChangeText={setText} />\n```\n\n## Forms: Handle keyboard\n\nManage keyboard visibility\n\n**Do:*\\* KeyboardAvoidingView\n**Don't:*\\* Content hidden by keyboard\n\n```\n<KeyboardAvoidingView behavior=\"padding\">\n```\n\n## Forms: Use proper keyboard types\n\nAppropriate keyboard for input\n\n**Do:*\\* keyboardType for input type\n**Don't:*\\* Default keyboard for all\n\n```\nkeyboardType=\"email-address\"\n```\n\n## Touch: Use Pressable\n\nModern touch handling\n\n**Do:*\\* Pressable for touch interactions\n**Don't:*\\* TouchableOpacity for new code\n\n```\n<Pressable onPress={} />\n```\n\n## Touch: Provide touch feedback\n\nVisual feedback on press\n\n**Do:*\\* Ripple or opacity change\n**Don't:*\\* No feedback on press\n\n```\nandroid_ripple={{ color: 'gray' }}\n```\n\n## Touch: Set hitSlop for small targets\n\nIncrease touch area\n\n**Do:*\\* hitSlop for icons and small buttons\n**Don't:*\\* Tiny touch targets\n\n```\nhitSlop={{ top: 10 bottom: 10 }}\n```\n\n## Animation: Use Reanimated\n\nHigh-performance animations\n\n**Do:*\\* react-native-reanimated\n**Don't:*\\* Animated API for complex\n\n```\nuseSharedValue useAnimatedStyle\n```\n\n## Animation: Run on UI thread\n\nworklets for smooth animation\n\n**Do:*\\* Run animations on UI thread\n**Don't:*\\* JS thread animations\n\n```\nrunOnUI(() => {})\n```\n\n## Animation: Use gesture handler\n\nNative gesture recognition\n\n**Do:*\\* react-native-gesture-handler\n**Don't:*\\* JS-based gesture handling\n\n```\n<GestureDetector>\n```\n\n## Async: Handle loading states\n\nShow loading indicators\n\n**Do:*\\* ActivityIndicator during load\n**Don't:*\\* Empty screen during load\n\n```\n{isLoading ? <ActivityIndicator /> : <Content />}\n```\n\n## Async: Handle errors gracefully\n\nError boundaries and fallbacks\n\n**Do:*\\* Error UI for failed requests\n**Don't:*\\* Crash on error\n\n```\n{error ? <ErrorView /> : <Content />}\n```\n\n## Async: Cancel async operations\n\nCleanup on unmount\n\n**Do:*\\* AbortController or cleanup\n**Don't:*\\* Memory leaks from async\n\n```\nuseEffect cleanup\n```\n\n## Accessibility: Add accessibility labels\n\nDescribe UI elements\n\n**Do:*\\* accessibilityLabel for all interactive\n**Don't:*\\* Missing labels\n\n```\naccessibilityLabel=\"Submit form\"\n```\n\n## Accessibility: Use accessibility roles\n\nSemantic meaning\n\n**Do:*\\* accessibilityRole for elements\n**Don't:*\\* Wrong roles\n\n```\naccessibilityRole=\"button\"\n```\n\n## Accessibility: Support screen readers\n\nTest with TalkBack/VoiceOver\n\n**Do:*\\* Test with screen readers\n**Don't:*\\* Skip accessibility testing\n\n```\nRegular TalkBack testing\n```\n\n## Testing: Use React Native Testing Library\n\nComponent testing\n\n**Do:*\\* render and fireEvent\n**Don't:*\\* Enzyme or manual testing\n\n```\nrender(<Component />)\n```\n\n## Testing: Test on real devices\n\nReal device behavior\n\n**Do:*\\* Test on iOS and Android devices\n**Don't:*\\* Simulator only\n\n```\nDevice testing in CI\n```\n\n## Testing: Use Detox for E2E\n\nEnd-to-end testing\n\n**Do:*\\* Detox for critical flows\n**Don't:*\\* Manual E2E testing\n\n```\ndetox test\n```\n\n## Native: Use native modules carefully\n\nBridge has overhead\n\n**Do:*\\* Batch native calls\n**Don't:*\\* Frequent bridge crossing\n\n```\nBatch updates\n```\n\n## Native: Use Expo when possible\n\nSimplified development\n\n**Do:*\\* Expo for standard features\n**Don't:*\\* Bare RN for simple apps\n\n```\nexpo install package\n```\n\n## Native: Handle permissions\n\nRequest permissions properly\n\n**Do:*\\* Check and request permissions\n**Don't:*\\* Assume permissions granted\n\n```\nPermissionsAndroid.request()\n```",
-      "tags": ["stack", "react-native", "implementation", "guidelines"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-stack-react",
-      "type": "pattern",
-      "domain": "design",
-      "title": "react Implementation Guidelines",
-      "severity": "suggestion",
-      "description": "# react Implementation Guidelines\n\n## State: Use useState for local state\n\nSimple component state should use useState hook\n\n**Do:*\\* useState for form inputs toggles counters\n**Don't:*\\* Class components this.state\n\n```\nconst [count, setCount] = useState(0)\n```\n\n## State: Lift state up when needed\n\nShare state between siblings by lifting to parent\n\n**Do:*\\* Lift shared state to common ancestor\n**Don't:*\\* Prop drilling through many levels\n\n```\nParent holds state passes down\n```\n\n## State: Use useReducer for complex state\n\nComplex state logic benefits from reducer pattern\n\n**Do:*\\* useReducer for state with multiple sub-values\n**Don't:*\\* Multiple useState for related values\n\n```\nuseReducer with action types\n```\n\n## State: Avoid unnecessary state\n\nDerive values from existing state when possible\n\n**Do:*\\* Compute derived values in render\n**Don't:*\\* Store derivable values in state\n\n```\nconst total = items.reduce(...)\n```\n\n## State: Initialize state lazily\n\nUse function form for expensive initial state\n\n**Do:*\\* useState(() => computeExpensive())\n**Don't:*\\* useState(computeExpensive())\n\n```\nuseState(() => JSON.parse(data))\n```\n\n## Effects: Clean up effects\n\nReturn cleanup function for subscriptions timers\n\n**Do:*\\* Return cleanup function in useEffect\n**Don't:*\\* No cleanup for subscriptions\n\n```\nuseEffect(() => { sub(); return unsub; })\n```\n\n## Effects: Specify dependencies correctly\n\nInclude all values used inside effect in deps array\n\n**Do:*\\* All referenced values in dependency array\n**Don't:*\\* Empty deps with external references\n\n```\n[value] when using value in effect\n```\n\n## Effects: Avoid unnecessary effects\n\nDon't use effects for transforming data or events\n\n**Do:*\\* Transform data during render handle events directly\n**Don't:*\\* useEffect for derived state or event handling\n\n```\nconst filtered = items.filter(...)\n```\n\n## Effects: Use refs for non-reactive values\n\nStore values that don't trigger re-renders in refs\n\n**Do:*\\* useRef for interval IDs DOM elements\n**Don't:*\\* useState for values that don't need render\n\n```\nconst intervalRef = useRef(null)\n```\n\n## Rendering: Use keys properly\n\nStable unique keys for list items\n\n**Do:*\\* Use stable IDs as keys\n**Don't:*\\* Array index as key for dynamic lists\n\n```\nkey={item.id}\n```\n\n## Rendering: Memoize expensive calculations\n\nUse useMemo for costly computations\n\n**Do:*\\* useMemo for expensive filtering/sorting\n**Don't:*\\* Recalculate every render\n\n```\nuseMemo(() => expensive(), [deps])\n```\n\n## Rendering: Memoize callbacks passed to children\n\nUse useCallback for functions passed as props\n\n**Do:*\\* useCallback for handlers passed to memoized children\n**Don't:*\\* New function reference every render\n\n```\nuseCallback(() => {}, [deps])\n```\n\n## Rendering: Use React.memo wisely\n\nWrap components that render often with same props\n\n**Do:*\\* memo for pure components with stable props\n**Don't:*\\* memo everything or nothing\n\n```\nmemo(ExpensiveList)\n```\n\n## Rendering: Avoid inline object/array creation in JSX\n\nCreate objects outside render or memoize\n\n**Do:*\\* Define style objects outside component\n**Don't:*\\* Inline objects in props\n\n```\n<div style={styles.container}>\n```\n\n## Components: Keep components small and focused\n\nSingle responsibility for each component\n\n**Do:*\\* One concern per component\n**Don't:*\\* Large multi-purpose components\n\n```\n<UserAvatar /><UserName />\n```\n\n## Components: Use composition over inheritance\n\nCompose components using children and props\n\n**Do:*\\* Use children prop for flexibility\n**Don't:*\\* Inheritance hierarchies\n\n```\n<Card>{content}</Card>\n```\n\n## Components: Colocate related code\n\nKeep related components and hooks together\n\n**Do:*\\* Related files in same directory\n**Don't:*\\* Flat structure with many files\n\n```\ncomponents/User/UserCard.tsx\n```\n\n## Components: Use fragments to avoid extra DOM\n\nFragment or <> for multiple elements without wrapper\n\n**Do:** <> for grouping without DOM node\n**Don't:*\\* Extra div wrappers\n\n```\n<>{items.map(...)}</>\n```\n\n## Props: Destructure props\n\nDestructure props for cleaner component code\n\n**Do:*\\* Destructure in function signature\n**Don't:*\\* props.name props.value throughout\n\n```\nfunction User({ name, age })\n```\n\n## Props: Provide default props values\n\nUse default parameters or defaultProps\n\n**Do:*\\* Default values in destructuring\n**Don't:*\\* Undefined checks throughout\n\n```\nfunction Button({ size = 'md' })\n```\n\n## Props: Avoid prop drilling\n\nUse context or composition for deeply nested data\n\n**Do:*\\* Context for global data composition for UI\n**Don't:*\\* Passing props through 5+ levels\n\n```\n<UserContext.Provider>\n```\n\n## Props: Validate props with TypeScript\n\nUse TypeScript interfaces for prop types\n\n**Do:*\\* interface Props { name: string }\n**Don't:*\\* PropTypes or no validation\n\n```\ninterface ButtonProps { onClick: () => void }\n```\n\n## Events: Use synthetic events correctly\n\nReact normalizes events across browsers\n\n**Do:*\\* e.preventDefault() e.stopPropagation()\n**Don't:*\\* Access native event unnecessarily\n\n```\nonClick={(e) => e.preventDefault()}\n```\n\n## Events: Avoid binding in render\n\nUse arrow functions in class or hooks\n\n**Do:*\\* Arrow functions in functional components\n**Don't:*\\* bind in render or constructor\n\n```\nconst handleClick = () => {}\n```\n\n## Events: Pass event handlers not call results\n\nPass function reference not invocation\n\n**Do:*\\* onClick={handleClick}\n**Don't:*\\* onClick={handleClick()} causing immediate call\n\n```\nonClick={handleClick}\n```\n\n## Forms: Controlled components for forms\n\nUse state to control form inputs\n\n**Do:*\\* value + onChange for inputs\n**Don't:*\\* Uncontrolled inputs with refs\n\n```\n<input value={val} onChange={setVal}>\n```\n\n## Forms: Handle form submission properly\n\nPrevent default and handle in submit handler\n\n**Do:*\\* onSubmit with preventDefault\n**Don't:*\\* onClick on submit button only\n\n```\n<form onSubmit={handleSubmit}>\n```\n\n## Forms: Debounce rapid input changes\n\nDebounce search/filter inputs\n\n**Do:*\\* useDeferredValue or debounce for search\n**Don't:*\\* Filter on every keystroke\n\n```\nuseDeferredValue(searchTerm)\n```\n\n## Hooks: Follow rules of hooks\n\nOnly call hooks at top level and in React functions\n\n**Do:*\\* Hooks at component top level\n**Don't:*\\* Hooks in conditions loops or callbacks\n\n```\nconst [x, setX] = useState()\n```\n\n## Hooks: Custom hooks for reusable logic\n\nExtract shared stateful logic to custom hooks\n\n**Do:*\\* useCustomHook for reusable patterns\n**Don't:*\\* Duplicate hook logic across components\n\n```\nconst { data } = useFetch(url)\n```\n\n## Hooks: Name custom hooks with use prefix\n\nCustom hooks must start with use\n\n**Do:*\\* useFetch useForm useAuth\n**Don't:*\\* fetchData or getData for hook\n\n```\nfunction useFetch(url)\n```\n\n## Context: Use context for global data\n\nContext for theme auth locale\n\n**Do:*\\* Context for app-wide state\n**Don't:*\\* Context for frequently changing data\n\n```\n<ThemeContext.Provider>\n```\n\n## Context: Split contexts by concern\n\nSeparate contexts for different domains\n\n**Do:*\\* ThemeContext + AuthContext\n**Don't:*\\* One giant AppContext\n\n```\n<ThemeProvider><AuthProvider>\n```\n\n## Context: Memoize context values\n\nPrevent unnecessary re-renders with useMemo\n\n**Do:*\\* useMemo for context value object\n**Don't:*\\* New object reference every render\n\n```\nvalue={useMemo(() => ({...}), [])}\n```\n\n## Performance: Use React DevTools Profiler\n\nProfile to identify performance bottlenecks\n\n**Do:*\\* Profile before optimizing\n**Don't:*\\* Optimize without measuring\n\n```\nReact DevTools Profiler\n```\n\n## Performance: Lazy load components\n\nUse React.lazy for code splitting\n\n**Do:*\\* lazy() for routes and heavy components\n**Don't:*\\* Import everything upfront\n\n```\nconst Page = lazy(() => import('./Page'))\n```\n\n## Performance: Virtualize long lists\n\nUse windowing for lists over 100 items\n\n**Do:*\\* react-window or react-virtual\n**Don't:*\\* Render thousands of DOM nodes\n\n```\n<VirtualizedList items={items}/>\n```\n\n## Performance: Batch state updates\n\nReact 18 auto-batches but be aware\n\n**Do:*\\* Let React batch related updates\n**Don't:*\\* Manual batching with flushSync\n\n```\nsetA(1); setB(2); // batched\n```\n\n## ErrorHandling: Use error boundaries\n\nCatch JavaScript errors in component tree\n\n**Do:*\\* ErrorBoundary wrapping sections\n**Don't:*\\* Let errors crash entire app\n\n```\n<ErrorBoundary><App/></ErrorBoundary>\n```\n\n## ErrorHandling: Handle async errors\n\nCatch errors in async operations\n\n**Do:*\\* try/catch in async handlers\n**Don't:*\\* Unhandled promise rejections\n\n```\ntry { await fetch() } catch(e) {}\n```\n\n## Testing: Test behavior not implementation\n\nTest what user sees and does\n\n**Do:*\\* Test renders and interactions\n**Don't:*\\* Test internal state or methods\n\n```\nexpect(screen.getByText('Hello'))\n```\n\n## Testing: Use testing-library queries\n\nUse accessible queries\n\n**Do:*\\* getByRole getByLabelText\n**Don't:*\\* getByTestId for everything\n\n```\ngetByRole('button')\n```\n\n## Accessibility: Use semantic HTML\n\nProper HTML elements for their purpose\n\n**Do:*\\* button for clicks nav for navigation\n**Don't:*\\* div with onClick for buttons\n\n```\n<button onClick={...}>\n```\n\n## Accessibility: Manage focus properly\n\nHandle focus for modals dialogs\n\n**Do:*\\* Focus trap in modals return focus on close\n**Don't:*\\* No focus management\n\n```\nuseEffect to focus input\n```\n\n## Accessibility: Announce dynamic content\n\nUse ARIA live regions for updates\n\n**Do:*\\* aria-live for dynamic updates\n**Don't:*\\* Silent updates to screen readers\n\n```\n<div aria-live=\"polite\">{msg}</div>\n```\n\n## Accessibility: Label form controls\n\nAssociate labels with inputs\n\n**Do:*\\* htmlFor matching input id\n**Don't:*\\* Placeholder as only label\n\n```\n<label htmlFor=\"email\">Email</label>\n```\n\n## TypeScript: Type component props\n\nDefine interfaces for all props\n\n**Do:*\\* interface Props with all prop types\n**Don't:*\\* any or missing types\n\n```\ninterface Props { name: string }\n```\n\n## TypeScript: Type state properly\n\nProvide types for useState\n\n**Do:** `useState<Type>() for complex state`\n**Don't:*\\* Inferred any types\n\n```\nuseState<User | null>(null)\n```\n\n## TypeScript: Type event handlers\n\nUse React event types\n\n**Do:** `React.ChangeEvent<HTMLInputElement>`\n**Don't:*\\* Generic Event type\n\n```\nonChange: React.ChangeEvent<HTMLInputElement>\n```\n\n## TypeScript: Use generics for reusable components\n\nGeneric components for flexible typing\n\n**Do:*\\* Generic props for list components\n**Don't:*\\* Union types for flexibility\n\n```\n<List<T> items={T[]}>\n```\n\n## Patterns: Container/Presentational split\n\nSeparate data logic from UI\n\n**Do:*\\* Container fetches presentational renders\n**Don't:*\\* Mixed data and UI in one\n\n```\n<UserContainer><UserView/></UserContainer>\n```\n\n## Patterns: Render props for flexibility\n\nShare code via render prop pattern\n\n**Do:*\\* Render prop for customizable rendering\n**Don't:*\\* Duplicate logic across components\n\n```\n<DataFetcher render={data => ...}/>\n```\n\n## Patterns: Compound components\n\nRelated components sharing state\n\n**Do:*\\* Tab + TabPanel sharing context\n**Don't:*\\* Prop drilling between related\n\n```\n<Tabs><Tab/><TabPanel/></Tabs>\n```",
-      "tags": ["stack", "react", "implementation", "guidelines"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-stack-shadcn",
-      "type": "pattern",
-      "domain": "design",
-      "title": "shadcn Implementation Guidelines",
-      "severity": "suggestion",
-      "description": "# shadcn Implementation Guidelines\n\n## Setup: Use CLI for installation\n\nInstall components via shadcn CLI for proper setup\n\n**Do:*\\* npx shadcn@latest add component-name\n**Don't:*\\* Manual copy-paste from docs\n\n```\nnpx shadcn@latest add button\n```\n\n## Setup: Initialize project properly\n\nRun init command to set up components.json and globals.css\n\n**Do:*\\* npx shadcn@latest init before adding components\n**Don't:*\\* Skip init and add components directly\n\n```\nnpx shadcn@latest init\n```\n\n## Setup: Configure path aliases\n\nSet up proper import aliases in tsconfig and components.json\n\n**Do:*\\* Use @/components/ui path aliases\n**Don't:*\\* Relative imports like ../../components\n\n```\nimport { Button } from @/components/ui/button\n```\n\n## Theming: Use CSS variables for colors\n\nDefine colors as CSS variables in globals.css for theming\n\n**Do:*\\* CSS variables in :root and .dark\n**Don't:*\\* Hardcoded color values in components\n\n```\nbg-primary text-primary-foreground\n```\n\n## Theming: Follow naming convention\n\nUse semantic color names with foreground pattern\n\n**Do:*\\* primary/primary-foreground secondary/secondary-foreground\n**Don't:*\\* Generic color names\n\n```\n--primary --primary-foreground\n```\n\n## Theming: Support dark mode\n\nInclude .dark class styles for all custom CSS\n\n**Do:*\\* Define both :root and .dark color schemes\n**Don't:*\\* Only light mode colors\n\n```\n.dark { --background: 240 10% 3.9%; }\n```\n\n## Components: Use component variants\n\nLeverage cva variants for consistent styling\n\n**Do:*\\* Use variant prop for different styles\n**Don't:*\\* Inline conditional classes\n\n```\n<Button variant=destructive>\n```\n\n## Components: Compose with className\n\nAdd custom classes via className prop for overrides\n\n**Do:*\\* Extend with className for one-off customizations\n**Don't:*\\* Modify component source directly\n\n```\n<Button className=w-full>\n```\n\n## Components: Use size variants consistently\n\nApply size prop for consistent sizing across components\n\n**Do:*\\* size=sm size=lg for sizing\n**Don't:*\\* Mix size classes inconsistently\n\n```\n<Button size=lg>\n```\n\n## Components: Prefer compound components\n\nUse provided sub-components for complex UI\n\n**Do:*\\* Card + CardHeader + CardContent pattern\n**Don't:*\\* Single component with many props\n\n```\n<Card><CardHeader><CardTitle>\n```\n\n## Dialog: Use Dialog for modal content\n\nDialog component for overlay modal windows\n\n**Do:*\\* Dialog for confirmations forms details\n**Don't:*\\* Alert for modal content\n\n```\n<Dialog><DialogContent>\n```\n\n## Dialog: Handle dialog state properly\n\nUse open and onOpenChange for controlled dialogs\n\n**Do:*\\* Controlled state with useState\n**Don't:*\\* Uncontrolled with default open only\n\n```\n<Dialog open={open} onOpenChange={setOpen}>\n```\n\n## Dialog: Include proper dialog structure\n\nUse DialogHeader DialogTitle DialogDescription\n\n**Do:*\\* Complete semantic structure\n**Don't:*\\* Missing title or description\n\n```\n<DialogHeader><DialogTitle><DialogDescription>\n```\n\n## Sheet: Use Sheet for side panels\n\nSheet component for slide-out panels and drawers\n\n**Do:*\\* Sheet for navigation filters settings\n**Don't:*\\* Dialog for side content\n\n```\n<Sheet side=right>\n```\n\n## Sheet: Specify sheet side\n\nSet side prop for sheet slide direction\n\n**Do:*\\* Explicit side=left or side=right\n**Don't:*\\* Default side without consideration\n\n```\n<Sheet><SheetContent side=left>\n```\n\n## Form: Use Form with react-hook-form\n\nIntegrate Form component with react-hook-form for validation\n\n**Do:*\\* useForm + Form + FormField pattern\n**Don't:*\\* Custom form handling without Form\n\n```\n<Form {...form}><FormField control={form.control}>\n```\n\n## Form: Use FormField for inputs\n\nWrap inputs in FormField for proper labeling and errors\n\n**Do:*\\* FormField + FormItem + FormLabel + FormControl\n**Don't:*\\* Input without FormField wrapper\n\n```\n<FormField><FormItem><FormLabel><FormControl><Input>\n```\n\n## Form: Display form messages\n\nUse FormMessage for validation error display\n\n**Do:*\\* FormMessage after FormControl\n**Don't:*\\* Custom error text without FormMessage\n\n```\n<FormControl><Input/></FormControl><FormMessage/>\n```\n\n## Form: Use Zod for validation\n\nDefine form schema with Zod for type-safe validation\n\n**Do:*\\* zodResolver with form schema\n**Don't:*\\* Manual validation logic\n\n```\nzodResolver(formSchema)\n```\n\n## Select: Use Select for dropdowns\n\nSelect component for option selection\n\n**Do:*\\* Select for choosing from list\n**Don't:*\\* Native select element\n\n```\n<Select><SelectTrigger><SelectContent>\n```\n\n## Select: Structure Select properly\n\nInclude Trigger Value Content and Items\n\n**Do:*\\* Complete Select structure\n**Don't:*\\* Missing SelectValue or SelectContent\n\n```\n<SelectTrigger><SelectValue/></SelectTrigger><SelectContent><SelectItem>\n```\n\n## Command: Use Command for search\n\nCommand component for searchable lists and palettes\n\n**Do:*\\* Command for command palette search\n**Don't:*\\* Input with custom dropdown\n\n```\n<Command><CommandInput><CommandList>\n```\n\n## Command: Group command items\n\nUse CommandGroup for categorized items\n\n**Do:*\\* CommandGroup with heading for sections\n**Don't:*\\* Flat list without grouping\n\n```\n<CommandGroup heading=Suggestions><CommandItem>\n```\n\n## Table: Use Table for data display\n\nTable component for structured data\n\n**Do:*\\* Table for tabular data display\n**Don't:*\\* Div grid for table-like layouts\n\n```\n<Table><TableHeader><TableBody><TableRow>\n```\n\n## Table: Include proper table structure\n\nUse TableHeader TableBody TableRow TableCell\n\n**Do:*\\* Semantic table structure\n**Don't:*\\* Missing thead or tbody\n\n```\n<TableHeader><TableRow><TableHead>\n```\n\n## DataTable: Use DataTable for complex tables\n\nCombine Table with TanStack Table for features\n\n**Do:*\\* DataTable pattern for sorting filtering pagination\n**Don't:*\\* Custom table implementation\n\n```\nuseReactTable + Table components\n```\n\n## Tabs: Use Tabs for content switching\n\nTabs component for tabbed interfaces\n\n**Do:*\\* Tabs for related content sections\n**Don't:*\\* Custom tab implementation\n\n```\n<Tabs><TabsList><TabsTrigger><TabsContent>\n```\n\n## Tabs: Set default tab value\n\nSpecify defaultValue for initial tab\n\n**Do:*\\* defaultValue on Tabs component\n**Don't:*\\* No default leaving first tab\n\n```\n<Tabs defaultValue=account>\n```\n\n## Accordion: Use Accordion for collapsible\n\nAccordion for expandable content sections\n\n**Do:*\\* Accordion for FAQ settings panels\n**Don't:*\\* Custom collapse implementation\n\n```\n<Accordion><AccordionItem><AccordionTrigger>\n```\n\n## Accordion: Choose accordion type\n\nUse type=single or type=multiple appropriately\n\n**Do:*\\* type=single for one open type=multiple for many\n**Don't:*\\* Default type without consideration\n\n```\n<Accordion type=single collapsible>\n```\n\n## Toast: Use Sonner for toasts\n\nSonner integration for toast notifications\n\n**Do:*\\* toast() from sonner for notifications\n**Don't:*\\* Custom toast implementation\n\n```\ntoast(Event created)\n```\n\n## Toast: Add Toaster to layout\n\nInclude Toaster component in root layout\n\n**Do:** `<Toaster /> in app layout`\n**Don't:*\\* Toaster in individual pages\n\n```\napp/layout.tsx: <Toaster />\n```\n\n## Toast: Use toast variants\n\nApply toast.success toast.error for context\n\n**Do:*\\* Semantic toast methods\n**Don't:*\\* Generic toast for all messages\n\n```\ntoast.success(Saved!) toast.error(Failed)\n```\n\n## Popover: Use Popover for floating content\n\nPopover for dropdown menus and floating panels\n\n**Do:*\\* Popover for contextual actions\n**Don't:*\\* Absolute positioned divs\n\n```\n<Popover><PopoverTrigger><PopoverContent>\n```\n\n## Popover: Handle popover alignment\n\nUse align and side props for positioning\n\n**Do:*\\* Explicit alignment configuration\n**Don't:*\\* Default alignment for all\n\n```\n<PopoverContent align=start side=bottom>\n```\n\n## DropdownMenu: Use DropdownMenu for actions\n\nDropdownMenu for action lists and context menus\n\n**Do:*\\* DropdownMenu for user menu actions\n**Don't:*\\* Popover for action lists\n\n```\n<DropdownMenu><DropdownMenuTrigger><DropdownMenuContent>\n```\n\n## DropdownMenu: Group menu items\n\nUse DropdownMenuGroup and DropdownMenuSeparator\n\n**Do:*\\* Organized menu with separators\n**Don't:*\\* Flat list of items\n\n```\n<DropdownMenuGroup><DropdownMenuItem><DropdownMenuSeparator>\n```\n\n## Tooltip: Use Tooltip for hints\n\nTooltip for icon buttons and truncated text\n\n**Do:*\\* Tooltip for additional context\n**Don't:*\\* Title attribute for tooltips\n\n```\n<Tooltip><TooltipTrigger><TooltipContent>\n```\n\n## Tooltip: Add TooltipProvider\n\nWrap app or section in TooltipProvider\n\n**Do:*\\* TooltipProvider at app level\n**Don't:*\\* TooltipProvider per tooltip\n\n```\n<TooltipProvider><App/></TooltipProvider>\n```\n\n## Skeleton: Use Skeleton for loading\n\nSkeleton component for loading placeholders\n\n**Do:*\\* Skeleton matching content layout\n**Don't:*\\* Spinner for content loading\n\n```\n<Skeleton className=h-4 w-[200px]/>\n```\n\n## Skeleton: Match skeleton dimensions\n\nSize skeleton to match loaded content\n\n**Do:*\\* Skeleton same size as expected content\n**Don't:*\\* Generic skeleton size\n\n```\n<Skeleton className=h-12 w-12 rounded-full/>\n```\n\n## AlertDialog: Use AlertDialog for confirms\n\nAlertDialog for destructive action confirmation\n\n**Do:*\\* AlertDialog for delete confirmations\n**Don't:*\\* Dialog for confirmations\n\n```\n<AlertDialog><AlertDialogTrigger><AlertDialogContent>\n```\n\n## AlertDialog: Include action buttons\n\nUse AlertDialogAction and AlertDialogCancel\n\n**Do:*\\* Standard confirm/cancel pattern\n**Don't:*\\* Custom buttons in AlertDialog\n\n```\n<AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction>\n```\n\n## Sidebar: Use Sidebar for navigation\n\nSidebar component for app navigation\n\n**Do:*\\* Sidebar for main app navigation\n**Don't:*\\* Custom sidebar implementation\n\n```\n<SidebarProvider><Sidebar><SidebarContent>\n```\n\n## Sidebar: Wrap in SidebarProvider\n\nUse SidebarProvider for sidebar state management\n\n**Do:*\\* SidebarProvider at layout level\n**Don't:*\\* Sidebar without provider\n\n```\n<SidebarProvider><Sidebar></SidebarProvider>\n```\n\n## Sidebar: Use SidebarTrigger\n\nInclude SidebarTrigger for mobile toggle\n\n**Do:*\\* SidebarTrigger for responsive toggle\n**Don't:*\\* Custom toggle button\n\n```\n<SidebarTrigger/>\n```\n\n## Chart: Use Chart for data viz\n\nChart component with Recharts integration\n\n**Do:*\\* Chart component for dashboards\n**Don't:*\\* Direct Recharts without wrapper\n\n```\n<ChartContainer config={chartConfig}>\n```\n\n## Chart: Define chart config\n\nCreate chartConfig for consistent theming\n\n**Do:*\\* chartConfig with color definitions\n**Don't:*\\* Inline colors in charts\n\n```\n{ desktop: { label: \"Desktop\", color: \"#2563eb\" } }\n```\n\n## Chart: Use ChartTooltip\n\nApply ChartTooltip for interactive charts\n\n**Do:*\\* ChartTooltip with ChartTooltipContent\n**Don't:*\\* Recharts Tooltip directly\n\n```\n<ChartTooltip content={<ChartTooltipContent/>}/>\n```\n\n## Blocks: Use blocks for scaffolding\n\nStart from shadcn blocks for common layouts\n\n**Do:*\\* npx shadcn@latest add dashboard-01\n**Don't:*\\* Build dashboard from scratch\n\n```\nnpx shadcn@latest add login-01\n```\n\n## Blocks: Customize block components\n\nModify copied block code to fit needs\n\n**Do:*\\* Edit block files after installation\n**Don't:*\\* Use blocks without modification\n\n```\nCustomize dashboard-01 layout\n```\n\n## A11y: Use semantic components\n\nShadcn components have built-in ARIA\n\n**Do:*\\* Rely on component accessibility\n**Don't:*\\* Override ARIA attributes\n\n```\n<Button> has button role\n```\n\n## A11y: Maintain focus management\n\nDialog Sheet handle focus automatically\n\n**Do:*\\* Let components manage focus\n**Don't:*\\* Custom focus handling\n\n```\n<Dialog> traps focus\n```\n\n## A11y: Provide labels\n\nUse FormLabel and aria-label appropriately\n\n**Do:*\\* FormLabel for form inputs\n**Don't:*\\* Placeholder as only label\n\n```\n<FormLabel>Email</FormLabel><Input/>\n```\n\n## Performance: Import components individually\n\nImport only needed components\n\n**Do:*\\* Named imports from component files\n**Don't:*\\* Import all from index\n\n```\nimport { Button } from @/components/ui/button\n```\n\n## Performance: Lazy load dialogs\n\nDynamic import for heavy dialog content\n\n**Do:*\\* React.lazy for dialog content\n**Don't:*\\* Import all dialogs upfront\n\n```\nconst HeavyContent = lazy(() => import('./Heavy'))\n```\n\n## Customization: Extend variants with cva\n\nAdd new variants using class-variance-authority\n\n**Do:*\\* Extend buttonVariants for new styles\n**Don't:*\\* Inline classes for variants\n\n```\nvariants: { size: { xl: \"h-14 px-8\" } }\n```\n\n## Customization: Create custom components\n\nBuild new components following shadcn patterns\n\n**Do:*\\* Use cn() and cva for custom components\n**Don't:*\\* Different patterns for custom\n\n```\nconst Custom = ({ className }) => <div className={cn(base className)}>\n```\n\n## Patterns: Use asChild for composition\n\nasChild prop for component composition\n\n**Do:*\\* Slot pattern with asChild\n**Don't:*\\* Wrapper divs for composition\n\n```\n<Button asChild><Link href=/>\n```\n\n## Patterns: Combine with React Hook Form\n\nForm + useForm for complete forms\n\n**Do:*\\* RHF Controller with shadcn inputs\n**Don't:*\\* Custom form state management\n\n```\n<FormField control={form.control} name=email>\n```",
-      "tags": ["stack", "shadcn", "implementation", "guidelines"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-stack-svelte",
-      "type": "pattern",
-      "domain": "design",
-      "title": "svelte Implementation Guidelines",
-      "severity": "suggestion",
-      "description": "# svelte Implementation Guidelines\n\n## Reactivity: Use $: for reactive statements\n\nAutomatic dependency tracking\n\n**Do:** $: for derived values\n**Don't:*\\* Manual recalculation\n\n```\n$: doubled = count \\* 2\n```\n\n## Reactivity: Trigger reactivity with assignment\n\nSvelte tracks assignments not mutations\n\n**Do:*\\* Reassign arrays/objects to trigger update\n**Don't:*\\* Mutate without reassignment\n\n```\nitems = [...items, newItem]\n```\n\n## Reactivity: Use $state in Svelte 5\n\nRunes for explicit reactivity\n\n**Do:*\\* let count = $state(0)\n**Don't:*\\* Implicit reactivity in Svelte 5\n\n```\nlet count = $state(0)\n```\n\n## Reactivity: Use $derived for computed values\n\n$derived replaces $: in Svelte 5\n\n**Do:*\\* let doubled = $derived(count \\* 2)\n**Don't:** $: in Svelte 5\n\n```\nlet doubled = $derived(count \\* 2)\n```\n\n## Reactivity: Use $effect for side effects\n\n$effect replaces $: side effects\n\n**Do:*\\* Use $effect for subscriptions\n**Don't:** $: for side effects in Svelte 5\n\n```\n$effect(() => console.log(count))\n```\n\n## Props: Export let for props\n\nDeclare props with export let\n\n**Do:*\\* export let propName\n**Don't:*\\* Props without export\n\n```\nexport let count = 0\n```\n\n## Props: Use $props in Svelte 5\n\n$props rune for prop access\n\n**Do:*\\* let { name } = $props()\n**Don't:*\\* export let in Svelte 5\n\n```\nlet { name, age = 0 } = $props()\n```\n\n## Props: Provide default values\n\nDefault props with assignment\n\n**Do:*\\* export let count = 0\n**Don't:*\\* Required props without defaults\n\n```\nexport let count = 0\n```\n\n## Props: Use spread props\n\nPass through unknown props\n\n**Do:** {...$$restProps} on elements\n**Don't:*\\* Manual prop forwarding\n\n```\n<button {...$$restProps}>\n```\n\n## Bindings: Use bind: for two-way binding\n\nSimplified input handling\n\n**Do:*\\* bind:value for inputs\n**Don't:*\\* on:input with manual update\n\n```\n<input bind:value={name}>\n```\n\n## Bindings: Bind to DOM elements\n\nReference DOM nodes\n\n**Do:*\\* bind:this for element reference\n**Don't:*\\* querySelector in onMount\n\n```\n<div bind:this={el}>\n```\n\n## Bindings: Use bind:group for radios/checkboxes\n\nSimplified group handling\n\n**Do:*\\* bind:group for radio/checkbox groups\n**Don't:*\\* Manual checked handling\n\n```\n<input type=\"radio\" bind:group={selected}>\n```\n\n## Events: Use on: for event handlers\n\nEvent directive syntax\n\n**Do:*\\* on:click={handler}\n**Don't:*\\* addEventListener in onMount\n\n```\n<button on:click={handleClick}>\n```\n\n## Events: Forward events with on:event\n\nPass events to parent\n\n**Do:*\\* on:click without handler\n**Don't:*\\* createEventDispatcher for DOM events\n\n```\n<button on:click>\n```\n\n## Events: Use createEventDispatcher\n\nCustom component events\n\n**Do:*\\* dispatch for custom events\n**Don't:*\\* on:event for custom events\n\n```\ndispatch('save', { data })\n```\n\n## Lifecycle: Use onMount for initialization\n\nRun code after component mounts\n\n**Do:*\\* onMount for setup and data fetching\n**Don't:*\\* Code in script body for side effects\n\n```\nonMount(() => fetchData())\n```\n\n## Lifecycle: Return cleanup from onMount\n\nAutomatic cleanup on destroy\n\n**Do:*\\* Return function from onMount\n**Don't:*\\* Separate onDestroy for paired cleanup\n\n```\nonMount(() => { sub(); return unsub })\n```\n\n## Lifecycle: Use onDestroy sparingly\n\nOnly when onMount cleanup not possible\n\n**Do:*\\* onDestroy for non-mount cleanup\n**Don't:*\\* onDestroy for mount-related cleanup\n\n```\nonDestroy for store unsubscribe\n```\n\n## Lifecycle: Avoid beforeUpdate/afterUpdate\n\nUsually not needed\n\n**Do:*\\* Reactive statements instead\n**Don't:*\\* beforeUpdate for derived state\n\n```\n$: if (x) doSomething()\n```\n\n## Stores: Use writable for mutable state\n\nBasic reactive store\n\n**Do:*\\* writable for shared mutable state\n**Don't:*\\* Local variables for shared state\n\n```\nconst count = writable(0)\n```\n\n## Stores: Use readable for read-only state\n\nExternal data sources\n\n**Do:*\\* readable for derived/external data\n**Don't:*\\* writable for read-only data\n\n```\nreadable(0, set => interval(set))\n```\n\n## Stores: Use derived for computed stores\n\nCombine or transform stores\n\n**Do:*\\* derived for computed values\n**Don't:*\\* Manual subscription for derived\n\n```\nderived(count, $c => $c \\* 2)\n```\n\n## Stores: Use $ prefix for auto-subscription\n\nAutomatic subscribe/unsubscribe\n\n**Do:** $storeName in components\n**Don't:*\\* Manual subscription\n\n```\n{$count}\n```\n\n## Stores: Clean up custom subscriptions\n\nUnsubscribe when component destroys\n\n**Do:*\\* Return unsubscribe from onMount\n**Don't:*\\* Leave subscriptions open\n\n```\nonMount(() => store.subscribe(fn))\n```\n\n## Slots: Use slots for composition\n\nContent projection\n\n**Do:** `<slot> for flexible content`\n**Don't:*\\* Props for all content\n\n```\n<slot>Default</slot>\n```\n\n## Slots: Name slots for multiple areas\n\nMultiple content areas\n\n**Do:** `<slot name=\"header\">`\n**Don't:*\\* Single slot for complex layouts\n\n```\n<slot name=\"header\"><slot name=\"footer\">\n```\n\n## Slots: Check slot content with $$slots\n\nConditional slot rendering\n\n**Do:** $$slots.name for conditional rendering\n**Don't:*\\* Always render slot wrapper\n\n```\n{#if $$slots.footer}<slot name=\"footer\"/>{/if}\n```\n\n## Styling: Use scoped styles by default\n\nStyles scoped to component\n\n**Do:** `<style> for component styles`\n**Don't:*\\* Global styles for component\n\n```\n:global() only when needed\n```\n\n## Styling: Use :global() sparingly\n\nEscape scoping when needed\n\n**Do:** :global for third-party styling\n**Don't:*\\* Global for all styles\n\n```\n:global(.external-lib)\n```\n\n## Styling: Use CSS variables for theming\n\nDynamic styling\n\n**Do:*\\* CSS custom properties\n**Don't:*\\* Inline styles for themes\n\n```\nstyle=\"--color: {color}\"\n```\n\n## Transitions: Use built-in transitions\n\nSvelte transition directives\n\n**Do:*\\* transition:fade for simple effects\n**Don't:*\\* Manual CSS transitions\n\n```\n<div transition:fade>\n```\n\n## Transitions: Use in: and out: separately\n\nDifferent enter/exit animations\n\n**Do:*\\* in:fly out:fade for asymmetric\n**Don't:*\\* Same transition for both\n\n```\n<div in:fly out:fade>\n```\n\n## Transitions: Add local modifier\n\nPrevent ancestor trigger\n\n**Do:*\\* transition:fade|local\n**Don't:*\\* Global transitions for lists\n\n```\n<div transition:slide|local>\n```\n\n## Actions: Use actions for DOM behavior\n\nReusable DOM logic\n\n**Do:*\\* use:action for DOM enhancements\n**Don't:*\\* onMount for each usage\n\n```\n<div use:clickOutside>\n```\n\n## Actions: Return update and destroy\n\nLifecycle methods for actions\n\n**Do:*\\* Return { update, destroy }\n**Don't:*\\* Only initial setup\n\n```\nreturn { update(params) {}, destroy() {} }\n```\n\n## Actions: Pass parameters to actions\n\nConfigure action behavior\n\n**Do:*\\* use:action={params}\n**Don't:*\\* Hardcoded action behavior\n\n```\n<div use:tooltip={options}>\n```\n\n## Logic: Use {#if} for conditionals\n\nTemplate conditionals\n\n**Do:** {#if} {:else if} {:else}\n**Don't:*\\* Ternary in expressions\n\n```\n{#if cond}...{:else}...{/if}\n```\n\n## Logic: Use {#each} for lists\n\nList rendering\n\n**Do:** {#each} with key\n**Don't:*\\* Map in expression\n\n```\n{#each items as item (item.id)}\n```\n\n## Logic: Always use keys in {#each}\n\nProper list reconciliation\n\n**Do:** (item.id) for unique key\n**Don't:*\\* Index as key or no key\n\n```\n{#each items as item (item.id)}\n```\n\n## Logic: Use {#await} for promises\n\nHandle async states\n\n**Do:** {#await} for loading/error states\n**Don't:*\\* Manual promise handling\n\n```\n{#await promise}...{:then}...{:catch}\n```\n\n## SvelteKit: Use +page.svelte for routes\n\nFile-based routing\n\n**Do:** +page.svelte for route components\n**Don't:*\\* Custom routing setup\n\n```\nroutes/about/+page.svelte\n```\n\n## SvelteKit: Use +page.js for data loading\n\nLoad data before render\n\n**Do:*\\* load function in +page.js\n**Don't:*\\* onMount for data fetching\n\n```\nexport function load() {}\n```\n\n## SvelteKit: Use +page.server.js for server-only\n\nServer-side data loading\n\n**Do:** +page.server.js for sensitive data\n**Don't:** +page.js for API keys\n\n```\n+page.server.js with DB access\n```\n\n## SvelteKit: Use form actions\n\nServer-side form handling\n\n**Do:** +page.server.js actions\n**Don't:*\\* API routes for forms\n\n```\nexport const actions = { default }\n```\n\n## SvelteKit: Use $app/stores for app state\n\n$page $navigating $updated\n\n**Do:** $page for current page data\n**Don't:*\\* Manual URL parsing\n\n```\nimport { page } from '$app/stores'\n```\n\n## Performance: Use {#key} for forced re-render\n\nReset component state\n\n**Do:** {#key id} for fresh instance\n**Don't:*\\* Manual destroy/create\n\n```\n{#key item.id}<Component/>{/key}\n```\n\n## Performance: Avoid unnecessary reactivity\n\nNot everything needs $:\n\n**Do:** $: only for side effects\n**Don't:** $: for simple assignments\n\n```\n$: if (x) console.log(x)\n```\n\n## Performance: Use immutable compiler option\n\nSkip equality checks\n\n**Do:*\\* immutable: true for large lists\n**Don't:*\\* Default for all components\n\n```\n<svelte:options immutable/>\n```\n\n## TypeScript: Use lang=\"ts\" in script\n\nTypeScript support\n\n**Do:** `<script lang=\"ts\">`\n**Don't:*\\* JavaScript for typed projects\n\n```\n<script lang=\"ts\">\n```\n\n## TypeScript: Type props with interface\n\nExplicit prop types\n\n**Do:*\\* interface $$Props for types\n**Don't:*\\* Untyped props\n\n```\ninterface $$Props { name: string }\n```\n\n## TypeScript: Type events with createEventDispatcher\n\nType-safe events\n\n**Do:** `createEventDispatcher<Events>()`\n**Don't:*\\* Untyped dispatch\n\n```\ncreateEventDispatcher<{ save: Data }>()\n```\n\n## Accessibility: Use semantic elements\n\nProper HTML in templates\n\n**Do:*\\* button nav main appropriately\n**Don't:*\\* div for everything\n\n```\n<button on:click>\n```\n\n## Accessibility: Add aria to dynamic content\n\nAccessible state changes\n\n**Do:*\\* aria-live for updates\n**Don't:*\\* Silent dynamic updates\n\n```\n<div aria-live=\"polite\">{message}</div>\n```",
-      "tags": ["stack", "svelte", "implementation", "guidelines"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-stack-swiftui",
-      "type": "pattern",
-      "domain": "design",
-      "title": "swiftui Implementation Guidelines",
-      "severity": "suggestion",
-      "description": "# swiftui Implementation Guidelines\n\n## Views: Use struct for views\n\nSwiftUI views are value types\n\n**Do:*\\* struct MyView: View\n**Don't:*\\* class MyView: View\n\n```\nstruct ContentView: View { var body: some View }\n```\n\n## Views: Keep views small and focused\n\nSingle responsibility for each view\n\n**Do:*\\* Extract subviews for complex layouts\n**Don't:*\\* Large monolithic views\n\n```\nExtract HeaderView FooterView\n```\n\n## Views: Use body computed property\n\nbody returns the view hierarchy\n\n**Do:*\\* var body: some View { }\n**Don't:*\\* func body() -> some View\n\n```\nvar body: some View { Text(\"Hello\") }\n```\n\n## Views: Prefer composition over inheritance\n\nCompose views using ViewBuilder\n\n**Do:*\\* Combine smaller views\n**Don't:*\\* Inheritance hierarchies\n\n```\nVStack { Header() Content() }\n```\n\n## State: Use @State for local state\n\nSimple value types owned by view\n\n**Do:** @State for view-local primitives\n**Don't:** @State for shared data\n\n```\n@State private var count = 0\n```\n\n## State: Use @Binding for two-way data\n\nPass mutable state to child views\n\n**Do:** @Binding for child input\n**Don't:** @State in child for parent data\n\n```\n@Binding var isOn: Bool\n```\n\n## State: Use @StateObject for reference types\n\nObservableObject owned by view\n\n**Do:** @StateObject for view-created objects\n**Don't:** @ObservedObject for owned objects\n\n```\n@StateObject private var vm = ViewModel()\n```\n\n## State: Use @ObservedObject for injected objects\n\nReference types passed from parent\n\n**Do:** @ObservedObject for injected dependencies\n**Don't:** @StateObject for injected objects\n\n```\n@ObservedObject var vm: ViewModel\n```\n\n## State: Use @EnvironmentObject for shared state\n\nApp-wide state injection\n\n**Do:** @EnvironmentObject for global state\n**Don't:*\\* Prop drilling through views\n\n```\n@EnvironmentObject var settings: Settings\n```\n\n## State: Use @Published in ObservableObject\n\nAutomatically publish property changes\n\n**Do:** @Published for observed properties\n**Don't:*\\* Manual objectWillChange calls\n\n```\n@Published var items: [Item] = []\n```\n\n## Observable: Use @Observable macro (iOS 17+)\n\nModern observation without Combine\n\n**Do:** @Observable class for view models\n**Don't:*\\* ObservableObject for new projects\n\n```\n@Observable class ViewModel { }\n```\n\n## Observable: Use @Bindable for @Observable\n\nCreate bindings from @Observable\n\n**Do:** @Bindable var vm for bindings\n**Don't:** @Binding with @Observable\n\n```\n@Bindable var viewModel\n```\n\n## Layout: Use VStack HStack ZStack\n\nStandard stack-based layouts\n\n**Do:*\\* Stacks for linear arrangements\n**Don't:*\\* GeometryReader for simple layouts\n\n```\nVStack { Text() Image() }\n```\n\n## Layout: Use LazyVStack LazyHStack for lists\n\nLazy loading for performance\n\n**Do:*\\* Lazy stacks for long lists\n**Don't:*\\* Regular stacks for 100+ items\n\n```\nLazyVStack { ForEach(items) }\n```\n\n## Layout: Use GeometryReader sparingly\n\nOnly when needed for sizing\n\n**Do:*\\* GeometryReader for responsive layouts\n**Don't:*\\* GeometryReader everywhere\n\n```\nGeometryReader for aspect ratio\n```\n\n## Layout: Use spacing and padding consistently\n\nConsistent spacing throughout app\n\n**Do:*\\* Design system spacing values\n**Don't:*\\* Magic numbers for spacing\n\n```\n.padding(16) or .padding()\n```\n\n## Layout: Use frame modifiers correctly\n\nSet explicit sizes when needed\n\n**Do:** .frame(maxWidth: .infinity)\n**Don't:*\\* Fixed sizes for responsive content\n\n```\n.frame(maxWidth: .infinity)\n```\n\n## Modifiers: Order modifiers correctly\n\nModifier order affects rendering\n\n**Do:*\\* Background before padding for full coverage\n**Don't:*\\* Wrong modifier order\n\n```\n.padding().background(Color.red)\n```\n\n## Modifiers: Create custom ViewModifiers\n\nReusable modifier combinations\n\n**Do:*\\* ViewModifier for repeated styling\n**Don't:*\\* Duplicate modifier chains\n\n```\nstruct CardStyle: ViewModifier\n```\n\n## Modifiers: Use conditional modifiers carefully\n\nAvoid changing view identity\n\n**Do:*\\* if-else with same view type\n**Don't:*\\* Conditional that changes view identity\n\n```\nText(title).foregroundColor(isActive ? .blue : .gray)\n```\n\n## Navigation: Use NavigationStack (iOS 16+)\n\nModern navigation with type-safe paths\n\n**Do:*\\* NavigationStack with navigationDestination\n**Don't:*\\* NavigationView for new projects\n\n```\nNavigationStack { }\n```\n\n## Navigation: Use navigationDestination\n\nType-safe navigation destinations\n\n**Do:** .navigationDestination(for:)\n**Don't:*\\* NavigationLink(destination:)\n\n```\n.navigationDestination(for: Item.self)\n```\n\n## Navigation: Use @Environment for dismiss\n\nProgrammatic navigation dismissal\n\n**Do:** @Environment(\\.dismiss) var dismiss\n**Don't:*\\* presentationMode (deprecated)\n\n```\n@Environment(\\.dismiss) var dismiss\n```\n\n## Lists: Use List for scrollable content\n\nBuilt-in scrolling and styling\n\n**Do:*\\* List for standard scrollable content\n**Don't:*\\* ScrollView + VStack for simple lists\n\n```\nList { ForEach(items) { } }\n```\n\n## Lists: Provide stable identifiers\n\nUse Identifiable or explicit id\n\n**Do:*\\* Identifiable protocol or id parameter\n**Don't:*\\* Index as identifier\n\n```\nForEach(items) where Item: Identifiable\n```\n\n## Lists: Use onDelete and onMove\n\nStandard list editing\n\n**Do:*\\* onDelete for swipe to delete\n**Don't:*\\* Custom delete implementation\n\n```\n.onDelete(perform: delete)\n```\n\n## Forms: Use Form for settings\n\nGrouped input controls\n\n**Do:*\\* Form for settings screens\n**Don't:*\\* Manual grouping for forms\n\n```\nForm { Section { Toggle() } }\n```\n\n## Forms: Use @FocusState for keyboard\n\nManage keyboard focus\n\n**Do:** @FocusState for text field focus\n**Don't:*\\* Manual first responder handling\n\n```\n@FocusState private var isFocused: Bool\n```\n\n## Forms: Validate input properly\n\nShow validation feedback\n\n**Do:*\\* Real-time validation feedback\n**Don't:*\\* Submit without validation\n\n```\nTextField with validation state\n```\n\n## Async: Use .task for async work\n\nAutomatic cancellation on view disappear\n\n**Do:** .task for view lifecycle async\n**Don't:*\\* onAppear with Task\n\n```\n.task { await loadData() }\n```\n\n## Async: Handle loading states\n\nShow progress during async operations\n\n**Do:*\\* ProgressView during loading\n**Don't:*\\* Empty view during load\n\n```\nif isLoading { ProgressView() }\n```\n\n## Async: Use @MainActor for UI updates\n\nEnsure UI updates on main thread\n\n**Do:** @MainActor on view models\n**Don't:*\\* Manual DispatchQueue.main\n\n```\n@MainActor class ViewModel\n```\n\n## Animation: Use withAnimation\n\nAnimate state changes\n\n**Do:*\\* withAnimation for state transitions\n**Don't:*\\* No animation for state changes\n\n```\nwithAnimation { isExpanded.toggle() }\n```\n\n## Animation: Use .animation modifier\n\nApply animations to views\n\n**Do:** .animation(.spring()) on view\n**Don't:*\\* Manual animation timing\n\n```\n.animation(.easeInOut)\n```\n\n## Animation: Respect reduced motion\n\nCheck accessibility settings\n\n**Do:*\\* Check accessibilityReduceMotion\n**Don't:*\\* Ignore motion preferences\n\n```\n@Environment(\\.accessibilityReduceMotion)\n```\n\n## Preview: Use #Preview macro (Xcode 15+)\n\nModern preview syntax\n\n**Do:** #Preview for view previews\n**Don't:*\\* PreviewProvider protocol\n\n```\n`#Preview { ContentView() }`\n```\n\n## Preview: Create multiple previews\n\nTest different states and devices\n\n**Do:*\\* Multiple previews for states\n**Don't:*\\* Single preview only\n\n```\n`#Preview(\"Light\") { } #Preview(\"Dark\") { }`\n```\n\n## Preview: Use preview data\n\nDedicated preview mock data\n\n**Do:*\\* Static preview data\n**Don't:*\\* Production data in previews\n\n```\nItem.preview for preview\n```\n\n## Performance: Avoid expensive body computations\n\nBody should be fast to compute\n\n**Do:*\\* Precompute in view model\n**Don't:*\\* Heavy computation in body\n\n```\nvm.computedValue in body\n```\n\n## Performance: Use Equatable views\n\nSkip unnecessary view updates\n\n**Do:*\\* Equatable for complex views\n**Don't:*\\* Default equality for all views\n\n```\nstruct MyView: View Equatable\n```\n\n## Performance: Profile with Instruments\n\nMeasure before optimizing\n\n**Do:*\\* Use SwiftUI Instruments\n**Don't:*\\* Guess at performance issues\n\n```\nProfile with Instruments\n```\n\n## Accessibility: Add accessibility labels\n\nDescribe UI elements\n\n**Do:** .accessibilityLabel for context\n**Don't:*\\* Missing labels\n\n```\n.accessibilityLabel(\"Close button\")\n```\n\n## Accessibility: Support Dynamic Type\n\nRespect text size preferences\n\n**Do:*\\* Scalable fonts and layouts\n**Don't:*\\* Fixed font sizes\n\n```\n.font(.body) with Dynamic Type\n```\n\n## Accessibility: Use semantic views\n\nProper accessibility traits\n\n**Do:*\\* Correct accessibilityTraits\n**Don't:*\\* Wrong semantic meaning\n\n```\nButton for actions Image for display\n```\n\n## Testing: Use ViewInspector for testing\n\nThird-party view testing\n\n**Do:*\\* ViewInspector for unit tests\n**Don't:*\\* UI tests only\n\n```\nViewInspector assertions\n```\n\n## Testing: Test view models\n\nUnit test business logic\n\n**Do:*\\* XCTest for view model\n**Don't:*\\* Skip view model testing\n\n```\nTest ViewModel methods\n```\n\n## Testing: Use preview as visual test\n\nPreviews catch visual regressions\n\n**Do:*\\* Multiple preview configurations\n**Don't:*\\* No visual verification\n\n```\nPreview different states\n```\n\n## Architecture: Use MVVM pattern\n\nSeparate view and logic\n\n**Do:*\\* ViewModel for business logic\n**Don't:*\\* Logic in View\n\n```\nObservableObject ViewModel\n```\n\n## Architecture: Keep views dumb\n\nViews display view model state\n\n**Do:*\\* View reads from ViewModel\n**Don't:*\\* Business logic in View\n\n```\nview.items from vm.items\n```\n\n## Architecture: Use dependency injection\n\nInject dependencies for testing\n\n**Do:*\\* Initialize with dependencies\n**Don't:*\\* Hard-coded dependencies\n\n```\ninit(service: ServiceProtocol)\n```",
-      "tags": ["stack", "swiftui", "implementation", "guidelines"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-stack-vue",
-      "type": "pattern",
-      "domain": "design",
-      "title": "vue Implementation Guidelines",
-      "severity": "suggestion",
-      "description": "# vue Implementation Guidelines\n\n## Composition: Use Composition API for new projects\n\nComposition API offers better TypeScript support and logic reuse\n\n**Do:** `<script setup> for components`\n**Don't:*\\* Options API for new projects\n\n```\n<script setup>\n```\n\n## Composition: Use script setup syntax\n\nCleaner syntax with automatic exports\n\n**Do:** `<script setup> with defineProps`\n**Don't:*\\* setup() function manually\n\n```\n<script setup>\n```\n\n## Reactivity: Use ref for primitives\n\nref() for primitive values that need reactivity\n\n**Do:*\\* ref() for strings numbers booleans\n**Don't:*\\* reactive() for primitives\n\n```\nconst count = ref(0)\n```\n\n## Reactivity: Use reactive for objects\n\nreactive() for complex objects and arrays\n\n**Do:*\\* reactive() for objects with multiple properties\n**Don't:*\\* ref() for complex objects\n\n```\nconst state = reactive({ user: null })\n```\n\n## Reactivity: Access ref values with .value\n\nRemember .value in script unwrap in template\n\n**Do:*\\* Use .value in script\n**Don't:*\\* Forget .value in script\n\n```\ncount.value++\n```\n\n## Reactivity: Use computed for derived state\n\nComputed properties cache and update automatically\n\n**Do:*\\* computed() for derived values\n**Don't:*\\* Methods for derived values\n\n```\nconst doubled = computed(() => count.value \\* 2)\n```\n\n## Reactivity: Use shallowRef for large objects\n\nAvoid deep reactivity for performance\n\n**Do:*\\* shallowRef for large data structures\n**Don't:*\\* ref for large nested objects\n\n```\nconst bigData = shallowRef(largeObject)\n```\n\n## Watchers: Use watchEffect for simple cases\n\nAuto-tracks dependencies\n\n**Do:*\\* watchEffect for simple reactive effects\n**Don't:*\\* watch with explicit deps when not needed\n\n```\nwatchEffect(() => console.log(count.value))\n```\n\n## Watchers: Use watch for specific sources\n\nExplicit control over what to watch\n\n**Do:*\\* watch with specific refs\n**Don't:*\\* watchEffect for complex conditional logic\n\n```\nwatch(userId, fetchUser)\n```\n\n## Watchers: Clean up side effects\n\nReturn cleanup function in watchers\n\n**Do:*\\* Return cleanup in watchEffect\n**Don't:*\\* Leave subscriptions open\n\n```\nwatchEffect((onCleanup) => { onCleanup(unsub) })\n```\n\n## Props: Define props with defineProps\n\nType-safe prop definitions\n\n**Do:*\\* defineProps with TypeScript\n**Don't:*\\* Props without types\n\n```\ndefineProps<{ msg: string }>()\n```\n\n## Props: Use withDefaults for default values\n\nProvide defaults for optional props\n\n**Do:*\\* withDefaults with defineProps\n**Don't:*\\* Defaults in destructuring\n\n```\nwithDefaults(defineProps<Props>(), { count: 0 })\n```\n\n## Props: Avoid mutating props\n\nProps should be read-only\n\n**Do:*\\* Emit events to parent for changes\n**Don't:*\\* Direct prop mutation\n\n```\nemit('update:modelValue', newVal)\n```\n\n## Emits: Define emits with defineEmits\n\nType-safe event emissions\n\n**Do:*\\* defineEmits with types\n**Don't:*\\* Emit without definition\n\n```\ndefineEmits<{ change: [id: number] }>()\n```\n\n## Emits: Use v-model for two-way binding\n\nSimplified parent-child data flow\n\n**Do:*\\* v-model with modelValue prop\n**Don't:** :value + @input manually\n\n```\n<Child v-model=\"value\"/>\n```\n\n## Lifecycle: Use onMounted for DOM access\n\nDOM is ready in onMounted\n\n**Do:*\\* onMounted for DOM operations\n**Don't:*\\* Access DOM in setup directly\n\n```\nonMounted(() => el.value.focus())\n```\n\n## Lifecycle: Clean up in onUnmounted\n\nRemove listeners and subscriptions\n\n**Do:*\\* onUnmounted for cleanup\n**Don't:*\\* Leave listeners attached\n\n```\nonUnmounted(() => window.removeEventListener())\n```\n\n## Lifecycle: Avoid onBeforeMount for data\n\nUse onMounted or setup for data fetching\n\n**Do:*\\* Fetch in onMounted or setup\n**Don't:*\\* Fetch in onBeforeMount\n\n```\nonMounted(async () => await fetchData())\n```\n\n## Components: Use single-file components\n\nKeep template script style together\n\n**Do:** .vue files for components\n**Don't:*\\* Separate template/script files\n\n```\nComponent.vue with all parts\n```\n\n## Components: Use PascalCase for components\n\nConsistent component naming\n\n**Do:*\\* PascalCase in imports and templates\n**Don't:*\\* kebab-case in script\n\n```\n<MyComponent/>\n```\n\n## Components: Prefer composition over mixins\n\nComposables replace mixins\n\n**Do:*\\* Composables for shared logic\n**Don't:*\\* Mixins for code reuse\n\n```\nconst { data } = useApi()\n```\n\n## Composables: Name composables with use prefix\n\nConvention for composable functions\n\n**Do:*\\* useFetch useAuth useForm\n**Don't:*\\* getData or fetchApi\n\n```\nexport function useFetch()\n```\n\n## Composables: Return refs from composables\n\nMaintain reactivity when destructuring\n\n**Do:*\\* Return ref values\n**Don't:*\\* Return reactive objects that lose reactivity\n\n```\nreturn { data: ref(null) }\n```\n\n## Composables: Accept ref or value params\n\nUse toValue for flexible inputs\n\n**Do:*\\* toValue() or unref() for params\n**Don't:*\\* Only accept ref or only value\n\n```\nconst val = toValue(maybeRef)\n```\n\n## Templates: Use v-bind shorthand\n\nCleaner template syntax\n\n**Do:** :prop instead of v-bind:prop\n**Don't:*\\* Full v-bind syntax\n\n```\n<div :class=\"cls\">\n```\n\n## Templates: Use v-on shorthand\n\nCleaner event binding\n\n**Do:** @event instead of v-on:event\n**Don't:*\\* Full v-on syntax\n\n```\n<button @click=\"handler\">\n```\n\n## Templates: Avoid v-if with v-for\n\nv-if has higher priority causes issues\n\n**Do:*\\* Wrap in template or computed filter\n**Don't:*\\* v-if on same element as v-for\n\n```\n<template v-for><div v-if>\n```\n\n## Templates: Use key with v-for\n\nProper list rendering and updates\n\n**Do:*\\* Unique key for each item\n**Don't:*\\* Index as key for dynamic lists\n\n```\nv-for=\"item in items\" :key=\"item.id\"\n```\n\n## State: Use Pinia for global state\n\nOfficial state management for Vue 3\n\n**Do:*\\* Pinia stores for shared state\n**Don't:*\\* Vuex for new projects\n\n```\nconst store = useCounterStore()\n```\n\n## State: Define stores with defineStore\n\nComposition API style stores\n\n**Do:*\\* Setup stores with defineStore\n**Don't:*\\* Options stores for complex state\n\n```\ndefineStore('counter', () => {})\n```\n\n## State: Use storeToRefs for destructuring\n\nMaintain reactivity when destructuring\n\n**Do:*\\* storeToRefs(store)\n**Don't:*\\* Direct destructuring\n\n```\nconst { count } = storeToRefs(store)\n```\n\n## Routing: Use useRouter and useRoute\n\nComposition API router access\n\n**Do:*\\* useRouter() useRoute() in setup\n**Don't:*\\* this.$router this.$route\n\n```\nconst router = useRouter()\n```\n\n## Routing: Lazy load route components\n\nCode splitting for routes\n\n**Do:** () => import() for components\n**Don't:*\\* Static imports for all routes\n\n```\ncomponent: () => import('./Page.vue')\n```\n\n## Routing: Use navigation guards\n\nProtect routes and handle redirects\n\n**Do:*\\* beforeEach for auth checks\n**Don't:*\\* Check auth in each component\n\n```\nrouter.beforeEach((to) => {})\n```\n\n## Performance: Use v-once for static content\n\nSkip re-renders for static elements\n\n**Do:*\\* v-once on never-changing content\n**Don't:*\\* v-once on dynamic content\n\n```\n<div v-once>{{ staticText }}</div>\n```\n\n## Performance: Use v-memo for expensive lists\n\nMemoize list items\n\n**Do:*\\* v-memo with dependency array\n**Don't:*\\* Re-render entire list always\n\n```\n<div v-for v-memo=\"[item.id]\">\n```\n\n## Performance: Use shallowReactive for flat objects\n\nAvoid deep reactivity overhead\n\n**Do:*\\* shallowReactive for flat state\n**Don't:*\\* reactive for simple objects\n\n```\nshallowReactive({ count: 0 })\n```\n\n## Performance: Use defineAsyncComponent\n\nLazy load heavy components\n\n**Do:*\\* defineAsyncComponent for modals dialogs\n**Don't:*\\* Import all components eagerly\n\n```\ndefineAsyncComponent(() => import())\n```\n\n## TypeScript: Use generic components\n\nType-safe reusable components\n\n**Do:*\\* Generic with defineComponent\n**Don't:*\\* Any types in components\n\n```\n<script setup lang=\"ts\" generic=\"T\">\n```\n\n## TypeScript: Type template refs\n\nProper typing for DOM refs\n\n**Do:** `ref<HTMLInputElement>(null)`\n**Don't:*\\* ref(null) without type\n\n```\nconst input = ref<HTMLInputElement>(null)\n```\n\n## TypeScript: Use PropType for complex props\n\nType complex prop types\n\n**Do:** `PropType<User> for object props`\n**Don't:*\\* Object without type\n\n```\ntype: Object as PropType<User>\n```\n\n## Testing: Use Vue Test Utils\n\nOfficial testing library\n\n**Do:*\\* mount shallowMount for components\n**Don't:*\\* Manual DOM testing\n\n```\nimport { mount } from '@vue/test-utils'\n```\n\n## Testing: Test component behavior\n\nFocus on inputs and outputs\n\n**Do:*\\* Test props emit and rendered output\n**Don't:*\\* Test internal implementation\n\n```\nexpect(wrapper.text()).toContain()\n```\n\n## Forms: Use v-model modifiers\n\nBuilt-in input handling\n\n**Do:** .lazy .number .trim modifiers\n**Don't:*\\* Manual input parsing\n\n```\n<input v-model.number=\"age\">\n```\n\n## Forms: Use VeeValidate or FormKit\n\nForm validation libraries\n\n**Do:*\\* VeeValidate for complex forms\n**Don't:*\\* Manual validation logic\n\n```\nuseField useForm from vee-validate\n```\n\n## Accessibility: Use semantic elements\n\nProper HTML elements in templates\n\n**Do:*\\* button nav main for purpose\n**Don't:*\\* div for everything\n\n```\n<button @click>\n```\n\n## Accessibility: Bind aria attributes dynamically\n\nKeep ARIA in sync with state\n\n**Do:** :aria-expanded=\"isOpen\"\n**Don't:*\\* Static ARIA values\n\n```\n:aria-expanded=\"menuOpen\"\n```\n\n## SSR: Use Nuxt for SSR\n\nFull-featured SSR framework\n\n**Do:*\\* Nuxt 3 for SSR apps\n**Don't:*\\* Manual SSR setup\n\n```\nnpx nuxi init my-app\n```\n\n## SSR: Handle hydration mismatches\n\nClient/server content must match\n\n**Do:*\\* ClientOnly for browser-only content\n**Don't:*\\* Different content server/client\n\n```\n<ClientOnly><BrowserWidget/></ClientOnly>\n```",
-      "tags": ["stack", "vue", "implementation", "guidelines"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-3d-hyperrealism",
-      "type": "pattern",
-      "domain": "design",
-      "title": "3D & Hyperrealism UI Style",
-      "severity": "suggestion",
-      "description": "# 3D & Hyperrealism UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* High\n- **Performance:** ❌ Poor\n\n## Keywords\nDepth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic elements, rich detail, immersive\n\n## Colors\n- **Primary:*\\* Deep Navy #001F3F, Forest Green #228B22, Burgundy #800020, Gold #FFD700, Silver #C0C0C0\n- **Secondary:*\\* Complex gradients (5-10 stops), realistic lighting, shadow variations (20-40% darker)\n\n## Effects & Animation\nWebGL/Three.js 3D, realistic shadows (layers), physics lighting, parallax (3-5 layers), smooth 3D (300-400ms)\n\n## Best For\n- Gaming\n- product showcase\n- immersive experiences\n- high-end e-commerce\n- architectural viz\n- VR/AR\n\n## Do Not Use For\n- Low-end mobile\n- performance-limited\n- critical accessibility\n- data tables/forms\n\n## Accessibility\n⚠ Not accessible\n\n## Implementation Checklist\n- [ ] WebGL/Three.js integrated\n- [ ] 3D models loaded\n- [ ] Parallax 3-5 layers\n- [ ] Realistic lighting verified\n- [ ] Complex shadows rendered\n- [ ] Physics animation smooth 300-400ms\n\n## CSS Variables\n--perspective: 1000px, --parallax-layers: 5, --lighting-intensity: realistic, --shadow-depth: 20-40%, --animation-duration: 300-400ms",
-      "tags": [
-        "ui-style",
-        "3d-hyperrealism",
-        "design-inspiration",
-        "Depth",
-        "realistic textures",
-        "3D models",
-        "spatial navigation",
-        "tactile"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-3d-product-preview",
-      "type": "pattern",
-      "domain": "design",
-      "title": "3D Product Preview UI Style",
-      "severity": "suggestion",
-      "description": "# 3D Product Preview UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2025+ E-commerce 3D\n- **Complexity:*\\* High\n- **Performance:** ❌ Poor (3D rendering)\n\n## Keywords\n360 product view, rotatable, zoomable, touch-to-spin, AR preview, product configurator, interactive 3D model\n\n## Colors\n- **Primary:*\\* Product-dependent, neutral backgrounds: Soft Grey #E8E8E8, Pure White #FFFFFF\n- **Secondary:*\\* Shadow gradients, reflection planes, environment lighting colors, accent highlights\n\n## Effects & Animation\nDrag-to-rotate, pinch-to-zoom, spin animation, AR placement, material switching, smooth orbit controls\n\n## Best For\n- E-commerce\n- furniture\n- fashion\n- automotive\n- electronics\n- jewelry\n- product configurators\n\n## Do Not Use For\n- Content-heavy sites\n- blogs\n- dashboards\n- low-bandwidth\n- accessibility-critical\n\n## Accessibility\n⚠ Alt content needed\n\n## Implementation Checklist\n- [ ] 3D model loads fast\n- [ ] Rotation smooth\n- [ ] Zoom works (pinch/scroll)\n- [ ] AR button functional\n- [ ] Colors switchable\n- [ ] Mobile touch works\n\n## CSS Variables\n--canvas-bg: #F5F5F5, --hotspot-color: #3B82F6, --loading-spinner: primary, --rotation-speed: 0.5, --zoom-min: 0.5, --zoom-max: 2",
-      "tags": [
-        "ui-style",
-        "3d-product-preview",
-        "design-inspiration",
-        "360 product view",
-        "rotatable",
-        "zoomable",
-        "touch-to-spin",
-        "AR preview"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-accessible-ethical",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Accessible & Ethical UI Style",
-      "severity": "suggestion",
-      "description": "# Accessible & Ethical UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* Universal\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\nHigh contrast, large text (16px+), keyboard navigation, screen reader friendly, WCAG compliant, focus state, semantic\n\n## Colors\n- **Primary:*\\* WCAG AA/AAA (4.5:1 min), simple primary, clear secondary, high luminosity (7:1+)\n- **Secondary:*\\* Symbol-based colors (not color-only), supporting patterns, inclusive combinations\n\n## Effects & Animation\nClear focus rings (3-4px), ARIA labels, skip links, responsive design, reduced motion, 44x44px touch targets\n\n## Best For\n- Government\n- healthcare\n- education\n- inclusive products\n- large audience\n- legal compliance\n- public\n\n## Do Not Use For\n- None - accessibility universal\n\n## Accessibility\n✓ WCAG AAA\n\n## Implementation Checklist\n- [ ] WCAG AAA verified\n- [ ] 7:1+ contrast checked\n- [ ] Keyboard navigation tested\n- [ ] Screen reader tested\n- [ ] Focus visible 3-4px\n- [ ] Semantic HTML used\n- [ ] Touch targets 44x44px\n\n## CSS Variables\n--contrast-ratio: 7:1, --font-size-min: 16px, --focus-ring: 3-4px, --touch-target: 44x44px, --wcag-level: AAA, --keyboard-accessible: true, --sr-tested: true",
-      "tags": [
-        "ui-style",
-        "accessible-ethical",
-        "design-inspiration",
-        "High contrast",
-        "large text (16px+)",
-        "keyboard navigation",
-        "screen reader friendly",
-        "WCAG compliant"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-ai-native-ui",
-      "type": "pattern",
-      "domain": "design",
-      "title": "AI-Native UI UI Style",
-      "severity": "suggestion",
-      "description": "# AI-Native UI UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s AI-Era\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\nChatbot, conversational, voice, assistant, agentic, ambient, minimal chrome, streaming text, AI interactions\n\n## Colors\n- **Primary:*\\* Neutral + single accent, #6366F1 (AI Purple), #10B981 (Success), #F5F5F5 (Background)\n- **Secondary:*\\* Status indicators, streaming highlights, context card colors, subtle accent variations\n\n## Effects & Animation\nTyping indicators (3-dot pulse), streaming text animations, pulse animations, context cards, smooth reveals\n\n## Best For\n- AI products\n- chatbots\n- voice assistants\n- copilots\n- AI-powered tools\n- conversational interfaces\n\n## Do Not Use For\n- Traditional forms\n- data-heavy dashboards\n- print-first content\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Chat layout responsive\n- [ ] Typing indicator smooth\n- [ ] Input always visible\n- [ ] Context cards styled\n- [ ] AI responses distinct\n- [ ] User messages aligned right\n\n## CSS Variables\n--ai-accent: #6366F1, --user-bubble-bg: #E0E7FF, --ai-bubble-bg: #F9FAFB, --input-height: 48px, --typing-dot-size: 8px, --message-gap: 16px",
-      "tags": [
-        "ui-style",
-        "ai-native-ui",
-        "design-inspiration",
-        "Chatbot",
-        "conversational",
-        "voice",
-        "assistant",
-        "agentic"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-anti-polish-raw-aesthetic",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Anti-Polish / Raw Aesthetic UI Style",
-      "severity": "suggestion",
-      "description": "# Anti-Polish / Raw Aesthetic UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2025+ Anti-Digital\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\nHand-drawn, collage, scanned textures, unfinished, imperfect, authentic, human, sketch, raw marks, creative process\n\n## Colors\n- **Primary:*\\* Paper White #FAFAF8, Pencil Grey #4A4A4A, Marker Black #1A1A1A, Kraft Brown #C4A77D\n- **Secondary:*\\* Watercolor washes, pencil shading, ink splatters, tape textures, aged paper tones\n\n## Effects & Animation\nNo smooth transitions, hand-drawn animations, paper texture overlays, jitter effects, sketch reveal\n\n## Best For\n- Creative portfolios\n- artist sites\n- indie brands\n- handmade products\n- authentic storytelling\n- editorial\n\n## Do Not Use For\n- Corporate enterprise\n- fintech\n- healthcare\n- government\n- polished SaaS\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Textures loaded\n- [ ] Hand-drawn elements present\n- [ ] Imperfections intentional\n- [ ] Authentic feel achieved\n- [ ] Performance ok with textures\n- [ ] Accessibility maintained\n\n## CSS Variables\n--paper-bg: #FAFAF8, --pencil-color: #4A4A4A, --marker-black: #1A1A1A, --kraft-brown: #C4A77D, --sketch-rotation: random(-3deg, 3deg), --texture-opacity: 0.3",
-      "tags": [
-        "ui-style",
-        "anti-polish-raw-aesthetic",
-        "design-inspiration",
-        "Hand-drawn",
-        "collage",
-        "scanned textures",
-        "unfinished",
-        "imperfect"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-aurora-ui",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Aurora UI UI Style",
-      "severity": "suggestion",
-      "description": "# Aurora UI UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nVibrant gradients, smooth blend, Northern Lights effect, mesh gradient, luminous, atmospheric, abstract\n\n## Colors\n- **Primary:*\\* Complementary: Blue-Orange, Purple-Yellow, Electric Blue #0080FF, Magenta #FF1493, Cyan #00FFFF\n- **Secondary:*\\* Smooth transitions (Blue→Purple→Pink→Teal), iridescent effects, blend modes (screen, multiply)\n\n## Effects & Animation\nLarge flowing CSS/SVG gradients, subtle 8-12s animations, depth via color layering, smooth morph\n\n## Best For\n- Modern SaaS\n- creative agencies\n- branding\n- music platforms\n- lifestyle\n- premium products\n- hero sections\n\n## Do Not Use For\n- Data-heavy dashboards\n- critical accessibility\n- content-heavy where distraction issues\n\n## Accessibility\n⚠ Text contrast\n\n## Implementation Checklist\n- [ ] Mesh/flowing gradients applied\n- [ ] 8-12s animation loop\n- [ ] Complementary colors used\n- [ ] Smooth color transitions\n- [ ] Iridescent effect subtle\n- [ ] Text contrast verified\n\n## CSS Variables\n--gradient-colors: complementary pairs, --animation-duration: 8-12s, --blend-mode: screen, --color-saturation: 1.2, --effect: iridescent, --loop-smooth: true",
-      "tags": [
-        "ui-style",
-        "aurora-ui",
-        "design-inspiration",
-        "Vibrant gradients",
-        "smooth blend",
-        "Northern Lights effect",
-        "mesh gradient",
-        "luminous"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-bento-box-grid",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Bento Box Grid UI Style",
-      "severity": "suggestion",
-      "description": "# Bento Box Grid UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Apple\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\nModular cards, asymmetric grid, varied sizes, Apple-style, dashboard tiles, negative space, clean hierarchy, cards\n\n## Colors\n- **Primary:*\\* Neutral base + brand accent, #FFFFFF, #F5F5F5, brand primary\n- **Secondary:*\\* Subtle gradients, shadow variations, accent highlights for interactive cards\n\n## Effects & Animation\ngrid-template with varied spans, rounded-xl (16px), subtle shadows, hover scale (1.02), smooth transitions\n\n## Best For\n- Dashboards\n- product pages\n- portfolios\n- Apple-style marketing\n- feature showcases\n- SaaS\n\n## Do Not Use For\n- Dense data tables\n- text-heavy content\n- real-time monitoring\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Grid responsive (4→2→1 cols)\n- [ ] Card spans varied\n- [ ] Rounded corners consistent\n- [ ] Shadows subtle\n- [ ] Content fits cards\n- [ ] Hover scale (1.02)\n\n## CSS Variables\n--grid-gap: 16px, --card-radius: 24px, --card-bg: #FFFFFF, --page-bg: #F5F5F7, --shadow: 0 4px 6px rgba(0,0,0,0.05), --hover-scale: 1.02",
-      "tags": [
-        "ui-style",
-        "bento-box-grid",
-        "design-inspiration",
-        "Modular cards",
-        "asymmetric grid",
-        "varied sizes",
-        "Apple-style",
-        "dashboard tiles"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-bento-grids",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Bento Grids UI Style",
-      "severity": "suggestion",
-      "description": "# Bento Grids UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Apple/Linear\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\nApple-style, modular, cards, organized, clean, hierarchy, grid, rounded, soft\n\n## Colors\n- **Primary:*\\* Off-white #F5F5F7, Clean White #FFFFFF, Text #1D1D1F\n- **Secondary:*\\* Subtle accents, soft shadows, blurred backdrops\n\n## Effects & Animation\nHover scale (1.02), soft shadow expansion, smooth layout shifts, content reveal\n\n## Best For\n- Product features\n- dashboards\n- personal sites\n- marketing summaries\n- galleries\n\n## Do Not Use For\n- Long-form reading\n- data tables\n- complex forms\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Grid layout (CSS Grid)\n- [ ] Rounded corners 16-24px\n- [ ] Varied card spans\n- [ ] Content fits card size\n- [ ] Responsive re-flow\n- [ ] Apple-like aesthetic\n\n## CSS Variables\n--grid-gap: 20px, --card-radius: 24px, --card-bg: #FFFFFF, --page-bg: #F5F5F7, --shadow: soft",
-      "tags": [
-        "ui-style",
-        "bento-grids",
-        "design-inspiration",
-        "Apple-style",
-        "modular",
-        "cards",
-        "organized",
-        "clean"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-biomimetic-organic-2-0",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Biomimetic / Organic 2.0 UI Style",
-      "severity": "suggestion",
-      "description": "# Biomimetic / Organic 2.0 UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2024+ Generative\n- **Complexity:*\\* High\n- **Performance:*\\* Moderate\n\n## Keywords\nNature-inspired, cellular, fluid, breathing, generative, algorithms, life-like\n\n## Colors\n- **Primary:*\\* Cellular Pink #FF9999, Chlorophyll Green #00FF41, Bioluminescent Blue\n- **Secondary:*\\* Deep Ocean #001E3C, Coral #FF7F50, Organic gradients\n\n## Effects & Animation\nBreathing animations, fluid morphing, generative growth, physics-based movement\n\n## Best For\n- Sustainability tech\n- biotech\n- advanced health\n- meditation\n- generative art platforms\n\n## Do Not Use For\n- Standard SaaS\n- data grids\n- strict corporate\n- accounting\n\n## Accessibility\n✓ Good\n\n## Implementation Checklist\n- [ ] Organic shapes present\n- [ ] Animations feel alive\n- [ ] Generative elements\n- [ ] Performance monitored\n- [ ] Mobile fallback\n- [ ] Accessibility alt content\n\n## CSS Variables\n--cellular-pink: #FF9999, --chlorophyll: #00FF41, --bioluminescent: #00FFFF, --breathing-duration: 4s, --morph-ease: cubic-bezier(0.4, 0, 0.2, 1), --organic-blur: 20px",
-      "tags": [
-        "ui-style",
-        "biomimetic-organic-2-0",
-        "design-inspiration",
-        "Nature-inspired",
-        "cellular",
-        "fluid",
-        "breathing",
-        "generative"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-brutalism",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Brutalism UI Style",
-      "severity": "suggestion",
-      "description": "# Brutalism UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 1950s Brutalist\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\nRaw, unpolished, stark, high contrast, plain text, default fonts, visible borders, asymmetric, anti-design\n\n## Colors\n- **Primary:*\\* Primary: Red #FF0000, Blue #0000FF, Yellow #FFFF00, Black #000000, White #FFFFFF\n- **Secondary:*\\* Limited: Neon Green #00FF00, Hot Pink #FF00FF, minimal secondary\n\n## Effects & Animation\nNo smooth transitions (instant), sharp corners (0px), bold typography (700+), visible grid, large blocks\n\n## Best For\n- Design portfolios\n- artistic projects\n- counter-culture brands\n- editorial/media sites\n- tech blogs\n\n## Do Not Use For\n- Corporate environments\n- conservative industries\n- critical accessibility\n- customer-facing professional\n\n## Accessibility\n✓ WCAG AAA\n\n## Implementation Checklist\n- [ ] No border-radius (0px)\n- [ ] No transitions (instant)\n- [ ] Bold typography (700+)\n- [ ] Pure primary colors used\n- [ ] Visible grid/borders\n- [ ] Asymmetric layout intentional\n\n## CSS Variables\n--border-radius: 0px, --transition-duration: 0s, --font-weight: 700-900, --colors: primary only, --border-style: visible, --grid-visible: true",
-      "tags": [
-        "ui-style",
-        "brutalism",
-        "design-inspiration",
-        "Raw",
-        "unpolished",
-        "stark",
-        "high contrast",
-        "plain text"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-chromatic-aberration-rgb-split",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Chromatic Aberration / RGB Split UI Style",
-      "severity": "suggestion",
-      "description": "# Chromatic Aberration / RGB Split UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Retro-Tech\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nRGB split, color fringing, glitch, retro tech, VHS, analog error, distortion, lens effect\n\n## Colors\n- **Primary:*\\* Offset RGB: Red #FF0000, Green #00FF00, Blue #0000FF, Black #000000\n- **Secondary:*\\* Neon accents, scan lines, noise overlays, error colors\n\n## Effects & Animation\nRGB offset animation, glitch timing, scan line movement, noise flicker, distortion on hover\n\n## Best For\n- Music platforms\n- gaming\n- tech brands\n- creative portfolios\n- nightlife\n- entertainment\n- video platforms\n\n## Do Not Use For\n- Corporate\n- healthcare\n- finance\n- accessibility-critical\n- elderly users\n\n## Accessibility\n⚠ Can cause strain\n\n## Implementation Checklist\n- [ ] RGB split visible\n- [ ] Glitch effect controlled\n- [ ] Scan lines subtle\n- [ ] Performance ok\n- [ ] Readability maintained\n- [ ] Reduced motion option\n\n## CSS Variables\n--rgb-offset: 2px, --red-channel: #FF0000, --green-channel: #00FF00, --blue-channel: #0000FF, --glitch-duration: 0.3s, --scanline-opacity: 0.1",
-      "tags": [
-        "ui-style",
-        "chromatic-aberration-rgb-split",
-        "design-inspiration",
-        "RGB split",
-        "color fringing",
-        "glitch",
-        "retro tech",
-        "VHS"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-claymorphism",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Claymorphism UI Style",
-      "severity": "suggestion",
-      "description": "# Claymorphism UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nSoft 3D, chunky, playful, toy-like, bubbly, thick borders (3-4px), double shadows, rounded (16-24px)\n\n## Colors\n- **Primary:*\\* Pastel: Soft Peach #FDBCB4, Baby Blue #ADD8E6, Mint #98FF98, Lilac #E6E6FA, light BG\n- **Secondary:*\\* Soft gradients (pastel-to-pastel), light/dark variations (20-30%), gradient subtle\n\n## Effects & Animation\nInner+outer shadows (subtle, no hard lines), soft press (200ms ease-out), fluffy elements, smooth transitions\n\n## Best For\n- Educational apps\n- children's apps\n- SaaS platforms\n- creative tools\n- fun-focused\n- onboarding\n- casual games\n\n## Do Not Use For\n- Formal corporate\n- professional services\n- data-critical\n- serious/medical\n- legal apps\n- finance\n\n## Accessibility\n⚠ Ensure 4.5:1\n\n## Implementation Checklist\n- [ ] Border-radius 16-24px\n- [ ] Thick borders 3-4px\n- [ ] Double shadows (inner+outer)\n- [ ] Pastel colors used\n- [ ] Soft bounce animations\n- [ ] Playful interactions\n\n## CSS Variables\n--border-radius: 20px, --border-width: 3-4px, --shadow-inner: inset -2px -2px 8px, --shadow-outer: 4px 4px 8px, --color-palette: pastels, --animation: bounce",
-      "tags": [
-        "ui-style",
-        "claymorphism",
-        "design-inspiration",
-        "Soft 3D",
-        "chunky",
-        "playful",
-        "toy-like",
-        "bubbly"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-comparative-analysis-dashboard",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Comparative Analysis Dashboard UI Style",
-      "severity": "suggestion",
-      "description": "# Comparative Analysis Dashboard UI Style\n\n## Overview\n- **Type:*\\* BI/Analytics\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Excellent\n\n## Keywords\nSide-by-side comparisons, period-over-period metrics, A/B test results, regional comparisons, performance benchmarks\n\n## Colors\n- **Primary:*\\* Comparison colors: primary (blue), comparison (orange/purple), delta indicator (green/red)\n- **Secondary:*\\* Winning metric color (green), losing metric color (red), neutral comparison (grey), benchmark colors\n\n## Effects & Animation\nComparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare\n\n## Best For\n- Period-over-period reporting\n- A/B test dashboards\n- market comparison\n- competitive analysis\n- regional performance\n\n## Do Not Use For\n- Single metric dashboards\n- future projections (use forecasting)\n- real-time only (no historical)\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Period selector works\n- [ ] Deltas calculated\n- [ ] Colors meaningful\n- [ ] Benchmarks shown\n- [ ] Mobile stacks properly\n- [ ] Export comparison\n\n## CSS Variables\n--positive-color: #22C55E, --negative-color: #EF4444, --neutral-color: #6B7280, --comparison-gap: 2rem, --arrow-size: 16px, --badge-padding: 4px 8px",
-      "tags": [
-        "ui-style",
-        "comparative-analysis-dashboard",
-        "design-inspiration",
-        "Side-by-side comparisons",
-        "period-over-period metrics",
-        "A/B test results",
-        "regional comparisons",
-        "performance benchmarks"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-conversion-optimized",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Conversion-Optimized UI Style",
-      "severity": "suggestion",
-      "description": "# Conversion-Optimized UI Style\n\n## Overview\n- **Type:*\\* Landing Page\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Excellent\n\n## Keywords\nForm-focused, minimalist design, single CTA focus, high contrast, urgency elements, trust signals, social proof, clear value\n\n## Colors\n- **Primary:*\\* Primary brand color, high-contrast white/light backgrounds, warning/urgency colors for time-limited offers\n- **Secondary:*\\* Secondary CTA color (muted), trust element colors (testimonial highlights), accent for key benefits\n\n## Effects & Animation\nHover states on CTA (color shift, slight scale), form field focus animations, loading spinner, success feedback\n\n## Best For\n- E-commerce product pages\n- free trial signups\n- lead generation\n- SaaS pricing pages\n- limited-time offers\n\n## Do Not Use For\n- Complex feature explanations\n- multi-product showcases\n- technical documentation\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Single primary CTA visible\n- [ ] Form fields minimal (3-5)\n- [ ] Trust badges present\n- [ ] Social proof above fold\n- [ ] Mobile form optimized\n- [ ] Loading states implemented\n- [ ] A/B test ready\n\n## CSS Variables\n--cta-color: high contrast primary, --form-max-width: 600px, --input-height: 48px, --focus-ring: 3px solid accent, --success-color: #22C55E, --error-color: #EF4444",
-      "tags": [
-        "ui-style",
-        "conversion-optimized",
-        "design-inspiration",
-        "Form-focused",
-        "minimalist design",
-        "single CTA focus",
-        "high contrast",
-        "urgency elements"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-cyberpunk-ui",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Cyberpunk UI UI Style",
-      "severity": "suggestion",
-      "description": "# Cyberpunk UI UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Cyberpunk\n- **Complexity:*\\* Medium\n- **Performance:*\\* Moderate\n\n## Keywords\nNeon, dark mode, terminal, HUD, sci-fi, glitch, dystopian, futuristic, matrix, tech noir\n\n## Colors\n- **Primary:** #00FF00 (Matrix Green), #FF00FF (Magenta), #00FFFF (Cyan), #0D0D0D (Dark)\n- **Secondary:*\\* Neon gradients, scanline overlays, glitch colors, terminal green accents\n\n## Effects & Animation\nNeon glow (text-shadow), glitch animations (skew/offset), scanlines (::before overlay), terminal fonts\n\n## Best For\n- Gaming platforms\n- tech products\n- crypto apps\n- sci-fi applications\n- developer tools\n- entertainment\n\n## Do Not Use For\n- Corporate enterprise\n- healthcare\n- family apps\n- conservative brands\n- elderly users\n\n## Accessibility\n⚠ Limited (dark+neon)\n\n## Implementation Checklist\n- [ ] Dark background only\n- [ ] Neon accents visible\n- [ ] Glitch effect subtle\n- [ ] Scanlines optional\n- [ ] Monospace font\n- [ ] Terminal aesthetic\n\n## CSS Variables\n--bg-dark: #0D0D0D, --neon-green: #00FF00, --neon-magenta: #FF00FF, --neon-cyan: #00FFFF, --scanline-opacity: 0.1, --glitch-duration: 0.3s",
-      "tags": [
-        "ui-style",
-        "cyberpunk-ui",
-        "design-inspiration",
-        "Neon",
-        "dark mode",
-        "terminal",
-        "HUD",
-        "sci-fi"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-dark-mode-oled",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Dark Mode (OLED) UI Style",
-      "severity": "suggestion",
-      "description": "# Dark Mode (OLED) UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\nDark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, night mode, power efficient\n\n## Colors\n- **Primary:*\\* Deep Black #000000, Dark Grey #121212, Midnight Blue #0A0E27\n- **Secondary:*\\* Vibrant accents: Neon Green #39FF14, Electric Blue #0080FF, Gold #FFD700, Plasma Purple #BF00FF\n\n## Effects & Animation\nMinimal glow (text-shadow: 0 0 10px), dark-to-light transitions, low white emission, high readability, visible focus\n\n## Best For\n- Night-mode apps\n- coding platforms\n- entertainment\n- eye-strain prevention\n- OLED devices\n- low-light\n\n## Do Not Use For\n- Print-first content\n- high-brightness outdoor\n- color-accuracy-critical\n\n## Accessibility\n✓ WCAG AAA\n\n## Implementation Checklist\n- [ ] Deep black #000000 or #121212\n- [ ] Vibrant neon accents used\n- [ ] Text contrast 7:1+\n- [ ] Minimal glow effects\n- [ ] OLED power optimization\n- [ ] No white (#FFFFFF) background\n\n## CSS Variables\n--bg-black: #000000, --bg-dark-grey: #121212, --text-primary: #FFFFFF, --accent-neon: neon colors, --glow-effect: minimal, --oled-optimized: true",
-      "tags": [
-        "ui-style",
-        "dark-mode-oled",
-        "design-inspiration",
-        "Dark theme",
-        "low light",
-        "high contrast",
-        "deep black",
-        "midnight blue"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-data-dense-dashboard",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Data-Dense Dashboard UI Style",
-      "severity": "suggestion",
-      "description": "# Data-Dense Dashboard UI Style\n\n## Overview\n- **Type:*\\* BI/Analytics\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Excellent\n\n## Keywords\nMultiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility\n\n## Colors\n- **Primary:*\\* Neutral primary (light grey/white #F5F5F5), data colors (blue/green/red), dark text #333333\n- **Secondary:*\\* Chart colors: success (green #22C55E), warning (amber #F59E0B), alert (red #EF4444), neutral (grey)\n\n## Effects & Animation\nHover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners\n\n## Best For\n- Business intelligence dashboards\n- financial analytics\n- enterprise reporting\n- operational dashboards\n- data warehousing\n\n## Do Not Use For\n- Marketing dashboards\n- consumer-facing analytics\n- simple reporting\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Grid layout 12 columns\n- [ ] KPI cards responsive\n- [ ] Tables sortable\n- [ ] Filters functional\n- [ ] Loading states for data\n- [ ] Export functionality\n\n## CSS Variables\n--grid-gap: 8px, --card-padding: 12px, --font-size-small: 12px, --table-row-height: 36px, --sidebar-width: 240px, --header-height: 56px",
-      "tags": [
-        "ui-style",
-        "data-dense-dashboard",
-        "design-inspiration",
-        "Multiple charts/widgets",
-        "data tables",
-        "KPI cards",
-        "minimal padding",
-        "grid layout"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-dimensional-layering",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Dimensional Layering UI Style",
-      "severity": "suggestion",
-      "description": "# Dimensional Layering UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nDepth, overlapping, z-index, layers, 3D, shadows, elevation, floating, cards, spatial hierarchy\n\n## Colors\n- **Primary:*\\* Neutral base (#FFFFFF, #F5F5F5, #E0E0E0) + brand accent for elevated elements\n- **Secondary:*\\* Shadow variations (sm/md/lg/xl), elevation colors, highlight colors for top layers\n\n## Effects & Animation\nz-index stacking, box-shadow elevation (4 levels), transform: translateZ(), backdrop-filter, parallax\n\n## Best For\n- Dashboards\n- card layouts\n- modals\n- navigation\n- product showcases\n- SaaS interfaces\n\n## Do Not Use For\n- Print-style layouts\n- simple blogs\n- low-end devices\n- flat design requirements\n\n## Accessibility\n⚠ Moderate (SR issues)\n\n## Implementation Checklist\n- [ ] Layers clearly defined\n- [ ] Shadows show depth\n- [ ] Overlaps intentional\n- [ ] Hierarchy clear\n- [ ] Performance optimized\n- [ ] Mobile depth maintained\n\n## CSS Variables\n--elevation-1: 0 1px 3px rgba(0,0,0,0.1), --elevation-2: 0 4px 6px rgba(0,0,0,0.1), --elevation-3: 0 10px 20px rgba(0,0,0,0.1), --elevation-4: 0 20px 40px rgba(0,0,0,0.15), --blur-amount: 8px",
-      "tags": [
-        "ui-style",
-        "dimensional-layering",
-        "design-inspiration",
-        "Depth",
-        "overlapping",
-        "z-index",
-        "layers",
-        "3D"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-drill-down-analytics",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Drill-Down Analytics UI Style",
-      "severity": "suggestion",
-      "description": "# Drill-Down Analytics UI Style\n\n## Overview\n- **Type:*\\* BI/Analytics\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nHierarchical data exploration, expandable sections, interactive drill-down paths, summary-to-detail flow, context preservation\n\n## Colors\n- **Primary:*\\* Primary brand, breadcrumb colors, drill-level indicator colors, hierarchy depth colors\n- **Secondary:*\\* Drill-down path indicator colors, level-specific colors, highlight colors for selected level, transition colors\n\n## Effects & Animation\nDrill-down expand animations, breadcrumb click transitions, smooth detail reveal, level change smooth, data reload animation\n\n## Best For\n- Sales analytics\n- product analytics\n- funnel analysis\n- multi-dimensional data exploration\n- business intelligence\n\n## Do Not Use For\n- Simple linear data\n- single-metric dashboards\n- streaming real-time dashboards\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Breadcrumbs clear\n- [ ] Back navigation easy\n- [ ] Expand animation smooth\n- [ ] Context preserved\n- [ ] Mobile drill works\n- [ ] Deep links supported\n\n## CSS Variables\n--breadcrumb-separator: /, --expand-duration: 300ms, --level-indent: 24px, --back-button-size: 40px, --context-bar-height: 48px, --drill-transition: 300ms ease",
-      "tags": [
-        "ui-style",
-        "drill-down-analytics",
-        "design-inspiration",
-        "Hierarchical data exploration",
-        "expandable sections",
-        "interactive drill-down paths",
-        "summary-to-detail flow",
-        "context preservation"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-e-ink-paper",
-      "type": "pattern",
-      "domain": "design",
-      "title": "E-Ink / Paper UI Style",
-      "severity": "suggestion",
-      "description": "# E-Ink / Paper UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Digital Well-being\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\nPaper-like, matte, high contrast, texture, reading, calm, slow tech, monochrome\n\n## Colors\n- **Primary:*\\* Off-White #FDFBF7, Paper White #F5F5F5, Ink Black #1A1A1A\n- **Secondary:*\\* Pencil Grey #4A4A4A, Highlighter Yellow #FFFF00 (accent)\n\n## Effects & Animation\nNo motion blur, distinct page turns, grain/noise texture, sharp transitions (no fade)\n\n## Best For\n- Reading apps\n- digital newspapers\n- minimal journals\n- distraction-free writing\n- slow-living brands\n\n## Do Not Use For\n- Gaming\n- video platforms\n- high-energy marketing\n- dark mode dependent apps\n\n## Accessibility\n✓ WCAG AAA\n\n## Implementation Checklist\n- [ ] Paper background color\n- [ ] High contrast text\n- [ ] No animations\n- [ ] Reading optimized\n- [ ] Distraction-free\n- [ ] Print-friendly\n\n## CSS Variables\n--paper-bg: #FDFBF7, --ink-color: #1A1A1A, --pencil-grey: #4A4A4A, --border-color: #E0E0E0, --font-reading: Georgia, --transition: none",
-      "tags": [
-        "ui-style",
-        "e-ink-paper",
-        "design-inspiration",
-        "Paper-like",
-        "matte",
-        "high contrast",
-        "texture",
-        "reading"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-editorial-grid-magazine",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Editorial Grid / Magazine UI Style",
-      "severity": "suggestion",
-      "description": "# Editorial Grid / Magazine UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Editorial Digital\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\nMagazine layout, asymmetric grid, editorial typography, pull quotes, drop caps, column layout, print-inspired\n\n## Colors\n- **Primary:*\\* High contrast: Black #000000, White #FFFFFF, accent brand color\n- **Secondary:*\\* Muted supporting, pull quote highlights, byline colors, section dividers\n\n## Effects & Animation\nSmooth scroll, reveal on scroll, parallax images, text animations, page-flip transitions\n\n## Best For\n- News sites\n- blogs\n- magazines\n- editorial content\n- long-form articles\n- journalism\n- publishing\n\n## Do Not Use For\n- Dashboards\n- apps\n- e-commerce catalogs\n- real-time data\n- short-form content\n\n## Accessibility\n✓ WCAG AAA\n\n## Implementation Checklist\n- [ ] Grid asymmetric\n- [ ] Typography editorial\n- [ ] Pull quotes styled\n- [ ] Drop caps present\n- [ ] Images large/impactful\n- [ ] Mobile reflows well\n\n## CSS Variables\n--grid-cols: asymmetric, --body-font: Georgia/Merriweather, --heading-font: bold sans, --drop-cap-size: 4em, --pull-quote-size: 1.5em, --column-gap: 2rem",
-      "tags": [
-        "ui-style",
-        "editorial-grid-magazine",
-        "design-inspiration",
-        "Magazine layout",
-        "asymmetric grid",
-        "editorial typography",
-        "pull quotes",
-        "drop caps"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-exaggerated-minimalism",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Exaggerated Minimalism UI Style",
-      "severity": "suggestion",
-      "description": "# Exaggerated Minimalism UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\nBold minimalism, oversized typography, high contrast, negative space, loud minimal, statement design\n\n## Colors\n- **Primary:** #000000 (Black), #FFFFFF (White), single vibrant accent only\n- **Secondary:*\\* Minimal - single accent color, no secondary colors, extreme restraint\n\n## Effects & Animation\nfont-size: clamp(3rem 10vw 12rem), font-weight: 900, letter-spacing: -0.05em, massive whitespace\n\n## Best For\n- Fashion\n- architecture\n- portfolios\n- agency landing pages\n- luxury brands\n- editorial\n\n## Do Not Use For\n- E-commerce catalogs\n- dashboards\n- forms\n- data-heavy\n- elderly users\n- complex apps\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Typography oversized\n- [ ] White space extreme\n- [ ] Black/white dominant\n- [ ] Single accent only\n- [ ] Elements minimal\n- [ ] Statement clear\n\n## CSS Variables\n--type-giant: clamp(3rem, 10vw, 12rem), --type-weight: 900, --spacing-huge: 8rem, --color-primary: #000000, --color-bg: #FFFFFF, --accent: single color only",
-      "tags": [
-        "ui-style",
-        "exaggerated-minimalism",
-        "design-inspiration",
-        "Bold minimalism",
-        "oversized typography",
-        "high contrast",
-        "negative space",
-        "loud minimal"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-executive-dashboard",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Executive Dashboard UI Style",
-      "severity": "suggestion",
-      "description": "# Executive Dashboard UI Style\n\n## Overview\n- **Type:*\\* BI/Analytics\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Excellent\n\n## Keywords\nHigh-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights, executive summary\n\n## Colors\n- **Primary:*\\* Brand colors, professional palette (blue/grey/white), accent for KPIs, red for alerts/concerns\n- **Secondary:*\\* KPI highlight colors: positive (green), negative (red), neutral (grey), trend arrow colors\n\n## Effects & Animation\nKPI value animations (count-up), trend arrow direction animations, metric card hover lift, alert pulse effect\n\n## Best For\n- C-suite dashboards\n- business summary reports\n- decision-maker dashboards\n- strategic planning views\n\n## Do Not Use For\n- Detailed analyst dashboards\n- technical deep-dives\n- operational monitoring\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] KPIs 4-6 maximum\n- [ ] Trends visible\n- [ ] Status colors clear\n- [ ] One-page view\n- [ ] Mobile simplified\n- [ ] Print-friendly layout\n\n## CSS Variables\n--kpi-font-size: 48px, --sparkline-height: 32px, --status-green: #22C55E, --status-yellow: #F59E0B, --status-red: #EF4444, --card-min-width: 280px",
-      "tags": [
-        "ui-style",
-        "executive-dashboard",
-        "design-inspiration",
-        "High-level KPIs",
-        "large key metrics",
-        "minimal detail",
-        "summary view",
-        "trend indicators"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-feature-rich-showcase",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Feature-Rich Showcase UI Style",
-      "severity": "suggestion",
-      "description": "# Feature-Rich Showcase UI Style\n\n## Overview\n- **Type:*\\* Landing Page\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nMultiple feature sections, grid layout, benefit cards, visual feature demonstrations, interactive elements, problem-solution pairs\n\n## Colors\n- **Primary:*\\* Primary brand, bright secondary colors for feature cards, contrasting accent for CTAs\n- **Secondary:*\\* Supporting colors for: benefits (green), problems (red/orange), features (blue/purple), social proof (neutral)\n\n## Effects & Animation\nCard hover effects (lift/scale), icon animations on scroll, feature toggle animations, smooth section transitions\n\n## Best For\n- Enterprise SaaS\n- software tools landing pages\n- platform services\n- complex product explanations\n- B2B products\n\n## Do Not Use For\n- Simple product pages\n- early-stage startups with few features\n- entertainment landing pages\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Feature grid responsive\n- [ ] Icons consistent style\n- [ ] Card hover effects smooth\n- [ ] Alternating sections contrast\n- [ ] Benefits clearly stated\n- [ ] Mobile stacks properly\n\n## CSS Variables\n--card-padding: 2rem, --card-radius: 12px, --icon-size: 48px, --grid-gap: 2rem, --section-padding: 4rem 0, --hover-transform: translateY(-4px)",
-      "tags": [
-        "ui-style",
-        "feature-rich-showcase",
-        "design-inspiration",
-        "Multiple feature sections",
-        "grid layout",
-        "benefit cards",
-        "visual feature demonstrations",
-        "interactive elements"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-financial-dashboard",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Financial Dashboard UI Style",
-      "severity": "suggestion",
-      "description": "# Financial Dashboard UI Style\n\n## Overview\n- **Type:*\\* BI/Analytics\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Excellent\n\n## Keywords\nRevenue metrics, profit/loss visualization, budget tracking, financial ratios, portfolio performance, cash flow, audit trail\n\n## Colors\n- **Primary:*\\* Financial colors: profit (green #22C55E), loss (red #EF4444), neutral (grey), trust (dark blue #003366)\n- **Secondary:*\\* Revenue highlight (green), expenses (red), budget variance (orange/red), balance (grey), accuracy (blue)\n\n## Effects & Animation\nNumber animations (count-up), trend direction indicators, percentage change animations, profit/loss color transitions\n\n## Best For\n- Financial reporting\n- accounting dashboards\n- portfolio tracking\n- budget monitoring\n- banking analytics\n\n## Do Not Use For\n- Simple business dashboards\n- entertainment/social metrics\n- non-financial data\n\n## Accessibility\n✓ WCAG AAA\n\n## Implementation Checklist\n- [ ] Currency formatted\n- [ ] Decimals consistent\n- [ ] P&L clear\n- [ ] Budget variance shown\n- [ ] Audit trail complete\n- [ ] Export to Excel\n\n## CSS Variables\n--currency-symbol: $, --decimal-places: 2, --profit-color: #22C55E, --loss-color: #EF4444, --variance-threshold: 10%, --table-header-bg: #F3F4F6",
-      "tags": [
-        "ui-style",
-        "financial-dashboard",
-        "design-inspiration",
-        "Revenue metrics",
-        "profit/loss visualization",
-        "budget tracking",
-        "financial ratios",
-        "portfolio performance"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-flat-design",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Flat Design UI Style",
-      "severity": "suggestion",
-      "description": "# Flat Design UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2010s Modern\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\n2D, minimalist, bold colors, no shadows, clean lines, simple shapes, typography-focused, modern, icon-heavy\n\n## Colors\n- **Primary:*\\* Solid bright: Red, Orange, Blue, Green, limited palette (4-6 max)\n- **Secondary:*\\* Complementary colors, muted secondaries, high saturation, clean accents\n\n## Effects & Animation\nNo gradients/shadows, simple hover (color/opacity shift), fast loading, clean transitions (150-200ms ease), minimal icons\n\n## Best For\n- Web apps\n- mobile apps\n- cross-platform\n- startup MVPs\n- user-friendly\n- SaaS\n- dashboards\n- corporate\n\n## Do Not Use For\n- Complex 3D\n- premium/luxury\n- artistic portfolios\n- immersive experiences\n- high-detail\n\n## Accessibility\n✓ WCAG AAA\n\n## Implementation Checklist\n- [ ] No shadows/gradients\n- [ ] 4-6 solid colors max\n- [ ] Clean lines consistent\n- [ ] Simple shapes used\n- [ ] Icon-heavy layout\n- [ ] High saturation colors\n- [ ] Fast loading verified\n\n## CSS Variables\n--shadow: none, --color-palette: 4-6 solid, --border-radius: 2px, --gradient: none, --icons: simplified SVG, --animation: minimal 150-200ms",
-      "tags": [
-        "ui-style",
-        "flat-design",
-        "design-inspiration",
-        "2D",
-        "minimalist",
-        "bold colors",
-        "no shadows",
-        "clean lines"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-gen-z-chaos-maximalism",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Gen Z Chaos / Maximalism UI Style",
-      "severity": "suggestion",
-      "description": "# Gen Z Chaos / Maximalism UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2023+ Internet Core\n- **Complexity:*\\* High\n- **Performance:*\\* Poor (heavy assets)\n\n## Keywords\nChaos, clutter, stickers, raw, collage, mixed media, loud, internet culture, ironic\n\n## Colors\n- **Primary:*\\* Clashing Brights: #FF00FF, #00FF00, #FFFF00, #0000FF\n- **Secondary:*\\* Gradients, rainbow, glitch, noise, heavily saturated mix\n\n## Effects & Animation\nMarquee scrolls, jitter, sticker layering, GIF overload, random placement, drag-and-drop\n\n## Best For\n- Gen Z lifestyle brands\n- music artists\n- creative portfolios\n- viral marketing\n- fashion\n\n## Do Not Use For\n- Corporate\n- government\n- healthcare\n- banking\n- serious tools\n\n## Accessibility\n❌ Poor\n\n## Implementation Checklist\n- [ ] Colors clash intentionally\n- [ ] Stickers/overlays present\n- [ ] Layout chaotic but usable\n- [ ] GIFs optimized\n- [ ] Mobile scrollable\n- [ ] Performance acceptable\n\n## CSS Variables\n--chaos-pink: #FF00FF, --chaos-green: #00FF00, --chaos-yellow: #FFFF00, --chaos-blue: #0000FF, --jitter-amount: 5deg, --saturate: 150%",
-      "tags": [
-        "ui-style",
-        "gen-z-chaos-maximalism",
-        "design-inspiration",
-        "Chaos",
-        "clutter",
-        "stickers",
-        "raw",
-        "collage"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-glassmorphism",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Glassmorphism UI Style",
-      "severity": "suggestion",
-      "description": "# Glassmorphism UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nFrosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer\n\n## Colors\n- **Primary:*\\* Translucent white: rgba(255,255,255,0.1-0.3)\n- **Secondary:*\\* Vibrant: Electric Blue #0080FF, Neon Purple #8B00FF, Vivid Pink #FF1493, Teal #20B2AA\n\n## Effects & Animation\nBackdrop blur (10-20px), subtle border (1px solid rgba white 0.2), light reflection, Z-depth\n\n## Best For\n- Modern SaaS\n- financial dashboards\n- high-end corporate\n- lifestyle apps\n- modal overlays\n- navigation\n\n## Do Not Use For\n- Low-contrast backgrounds\n- critical accessibility\n- performance-limited\n- dark text on dark\n\n## Accessibility\n⚠ Ensure 4.5:1\n\n## Implementation Checklist\n- [ ] Backdrop-filter blur 10-20px\n- [ ] Translucent white 15-30% opacity\n- [ ] Subtle border 1px light\n- [ ] Vibrant background verified\n- [ ] Text contrast 4.5:1 checked\n\n## CSS Variables\n--blur-amount: 15px, --glass-opacity: 0.15, --border-color: rgba(255,255,255,0.2), --background: vibrant color, --text-color: light/dark based on BG",
-      "tags": [
-        "ui-style",
-        "glassmorphism",
-        "design-inspiration",
-        "Frosted glass",
-        "transparent",
-        "blurred background",
-        "layered",
-        "vibrant background"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-gradient-mesh-aurora-evolved",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Gradient Mesh / Aurora Evolved UI Style",
-      "severity": "suggestion",
-      "description": "# Gradient Mesh / Aurora Evolved UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2025+ Gradient Evolution\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nComplex gradients, mesh gradients, multi-color blend, aurora effect, flowing colors, iridescent, holographic, prismatic\n\n## Colors\n- **Primary:*\\* Multi-stop gradients: Cyan #00FFFF, Magenta #FF00FF, Yellow #FFFF00, Blue #0066FF, Green #00FF66\n- **Secondary:*\\* Complementary mesh points, smooth color transitions, iridescent overlays, chromatic shifts\n\n## Effects & Animation\nCSS mesh-gradient (experimental), SVG gradients, canvas gradients, smooth color morphing, flowing animation\n\n## Best For\n- Hero sections\n- backgrounds\n- creative brands\n- music platforms\n- fashion\n- lifestyle\n- premium products\n\n## Do Not Use For\n- Data interfaces\n- text-heavy content\n- accessibility-critical\n- conservative brands\n\n## Accessibility\n⚠ Text contrast\n\n## Implementation Checklist\n- [ ] Mesh gradient visible\n- [ ] Colors flow smoothly\n- [ ] Aurora effect achieved\n- [ ] Performance acceptable\n- [ ] Text remains readable\n- [ ] Mobile renders ok\n\n## CSS Variables\n--mesh-color-1: #00FFFF, --mesh-color-2: #FF00FF, --mesh-color-3: #FFFF00, --mesh-color-4: #00FF66, --flow-duration: 10s, --shimmer-intensity: 0.3",
-      "tags": [
-        "ui-style",
-        "gradient-mesh-aurora-evolved",
-        "design-inspiration",
-        "Complex gradients",
-        "mesh gradients",
-        "multi-color blend",
-        "aurora effect",
-        "flowing colors"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-heat-map-heatmap-style",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Heat Map & Heatmap Style UI Style",
-      "severity": "suggestion",
-      "description": "# Heat Map & Heatmap Style UI Style\n\n## Overview\n- **Type:*\\* BI/Analytics\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Excellent\n\n## Keywords\nColor-coded grid/matrix, data intensity visualization, geographical heat maps, correlation matrices, cell-based representation, gradient coloring\n\n## Colors\n- **Primary:*\\* Gradient scale: Cool (blue #0080FF) to hot (red #FF0000), neutral middle (white/yellow)\n- **Secondary:*\\* Support gradients: Light (cool blue) to dark (warm red), divergent for positive/negative data, monochromatic options\n\n## Effects & Animation\nColor gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation\n\n## Best For\n- Geographical analysis\n- performance matrices\n- correlation analysis\n- user behavior heatmaps\n- temperature/intensity data\n\n## Do Not Use For\n- Linear data representation\n- categorical comparisons (use bar charts)\n- small datasets\n\n## Accessibility\n⚠ Colorblind considerations\n\n## Implementation Checklist\n- [ ] Color scale clear\n- [ ] Legend visible\n- [ ] Tooltips informative\n- [ ] Colorblind alternatives\n- [ ] Zoom/pan for geo\n- [ ] Performance for large data\n\n## CSS Variables\n--heatmap-cool: #0080FF, --heatmap-neutral: #FFFFFF, --heatmap-hot: #FF0000, --cell-size: 24px, --legend-width: 200px, --tooltip-bg: rgba(0,0,0,0.9)",
-      "tags": [
-        "ui-style",
-        "heat-map-heatmap-style",
-        "design-inspiration",
-        "Color-coded grid/matrix",
-        "data intensity visualization",
-        "geographical heat maps",
-        "correlation matrices",
-        "cell-based representation"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-hero-centric-design",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Hero-Centric Design UI Style",
-      "severity": "suggestion",
-      "description": "# Hero-Centric Design UI Style\n\n## Overview\n- **Type:*\\* Landing Page\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nLarge hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video, dramatic visual\n\n## Colors\n- **Primary:*\\* Brand primary color, white/light backgrounds for contrast, accent color for CTA\n- **Secondary:*\\* Supporting colors for secondary CTAs, accent highlights, trust elements (testimonials, logos)\n\n## Effects & Animation\nSmooth scroll reveal, fade-in animations on hero, subtle background parallax, CTA glow/pulse effect\n\n## Best For\n- SaaS landing pages\n- product launches\n- service landing pages\n- B2B platforms\n- tech companies\n\n## Do Not Use For\n- Complex navigation\n- multi-page experiences\n- data-heavy applications\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Hero section full viewport height\n- [ ] Headline visible above fold\n- [ ] CTA button high contrast\n- [ ] Background image optimized (WebP)\n- [ ] Text readable on background\n- [ ] Mobile responsive layout\n\n## CSS Variables\n--hero-min-height: 100vh, --headline-size: clamp(2rem, 5vw, 4rem), --cta-padding: 1rem 2rem, --overlay-opacity: 0.5, --text-shadow: 0 2px 4px rgba(0,0,0,0.3)",
-      "tags": [
-        "ui-style",
-        "hero-centric-design",
-        "design-inspiration",
-        "Large hero section",
-        "compelling headline",
-        "high-contrast CTA",
-        "product showcase",
-        "value proposition"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-hud-sci-fi-fui",
-      "type": "pattern",
-      "domain": "design",
-      "title": "HUD / Sci-Fi FUI UI Style",
-      "severity": "suggestion",
-      "description": "# HUD / Sci-Fi FUI UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2010s Sci-Fi\n- **Complexity:*\\* High\n- **Performance:*\\* Moderate (renders)\n\n## Keywords\nFuturistic, technical, wireframe, neon, data, transparency, iron man, sci-fi, interface\n\n## Colors\n- **Primary:*\\* Neon Cyan #00FFFF, Holographic Blue #0080FF, Alert Red #FF0000\n- **Secondary:*\\* Transparent Black, Grid Lines #333333\n\n## Effects & Animation\nGlow effects, scanning animations, ticker text, blinking markers, fine line drawing\n\n## Best For\n- Sci-fi games\n- space tech\n- cybersecurity\n- movie props\n- immersive dashboards\n\n## Do Not Use For\n- Standard corporate\n- reading heavy content\n- accessible public services\n\n## Accessibility\n⚠ Poor (thin lines)\n\n## Implementation Checklist\n- [ ] Fine lines 1px\n- [ ] Neon glow text/borders\n- [ ] Monospaced font\n- [ ] Dark/Transparent BG\n- [ ] Decorative tech markers\n- [ ] Holographic feel\n\n## CSS Variables\n--hud-color: #00FFFF, --bg-color: rgba(0,10,20,0.9), --line-width: 1px, --glow: 0 0 5px, --font: monospace",
-      "tags": [
-        "ui-style",
-        "hud-sci-fi-fui",
-        "design-inspiration",
-        "Futuristic",
-        "technical",
-        "wireframe",
-        "neon",
-        "data"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-inclusive-design",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Inclusive Design UI Style",
-      "severity": "suggestion",
-      "description": "# Inclusive Design UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* Universal\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\nAccessible, color-blind friendly, high contrast, haptic feedback, voice interaction, screen reader, WCAG AAA, universal\n\n## Colors\n- **Primary:*\\* WCAG AAA (7:1+ contrast), avoid red-green only, symbol-based indicators, high contrast primary\n- **Secondary:*\\* Supporting patterns (stripes, dots, hatch), symbols, combinations, clear non-color indicators\n\n## Effects & Animation\nHaptic feedback (vibration), voice guidance, focus indicators (4px+ ring), motion options, alt content, semantic\n\n## Best For\n- Public services\n- education\n- healthcare\n- finance\n- government\n- accessible consumer\n- inclusive\n\n## Do Not Use For\n- None - accessibility universal\n\n## Accessibility\n✓ WCAG AAA\n\n## Implementation Checklist\n- [ ] WCAG AAA verified\n- [ ] 7:1+ contrast all text\n- [ ] Keyboard accessible (Tab/Enter)\n- [ ] Screen reader tested\n- [ ] Focus visible 3-4px\n- [ ] No color-only indicators\n- [ ] Haptic fallback\n\n## CSS Variables\n--contrast-ratio: 7:1, --font-size: 16px+, --keyboard-accessible: true, --sr-compatible: true, --wcag-level: AAA, --color-symbols: true, --haptic: enabled",
-      "tags": [
-        "ui-style",
-        "inclusive-design",
-        "design-inspiration",
-        "Accessible",
-        "color-blind friendly",
-        "high contrast",
-        "haptic feedback",
-        "voice interaction"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-interactive-cursor-design",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Interactive Cursor Design UI Style",
-      "severity": "suggestion",
-      "description": "# Interactive Cursor Design UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2025+ Interactive\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nCustom cursor, cursor as tool, hover effects, cursor feedback, pointer transformation, cursor trail, magnetic cursor\n\n## Colors\n- **Primary:*\\* Brand-dependent, cursor accent color, high contrast for visibility\n- **Secondary:*\\* Trail colors, hover state colors, magnetic zone indicators, feedback colors\n\n## Effects & Animation\nCursor scale on hover, magnetic pull to elements, cursor morphing, trail effects, blend mode cursors, click feedback\n\n## Best For\n- Creative portfolios\n- interactive experiences\n- agency sites\n- product showcases\n- gaming\n- entertainment\n\n## Do Not Use For\n- Mobile-first (no cursor)\n- accessibility-critical\n- data-heavy dashboards\n- forms\n\n## Accessibility\n⚠ Not for touch/SR\n\n## Implementation Checklist\n- [ ] Custom cursor works\n- [ ] Hover morph smooth\n- [ ] Magnetic pull subtle\n- [ ] Trail performance ok\n- [ ] Click feedback visible\n- [ ] Touch fallback provided\n\n## CSS Variables\n--cursor-size: 20px, --cursor-hover-scale: 1.5, --magnetic-distance: 100px, --trail-length: 10, --trail-fade: 0.1, --blend-mode: difference",
-      "tags": [
-        "ui-style",
-        "interactive-cursor-design",
-        "design-inspiration",
-        "Custom cursor",
-        "cursor as tool",
-        "hover effects",
-        "cursor feedback",
-        "pointer transformation"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-interactive-product-demo",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Interactive Product Demo UI Style",
-      "severity": "suggestion",
-      "description": "# Interactive Product Demo UI Style\n\n## Overview\n- **Type:*\\* Landing Page\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good (video/interactive)\n\n## Keywords\nEmbedded product mockup/video, interactive elements, product walkthrough, step-by-step guides, hover-to-reveal features, embedded demos\n\n## Colors\n- **Primary:*\\* Primary brand, interface colors matching product, demo highlight colors for interactive elements\n- **Secondary:*\\* Product UI colors, tutorial step colors (numbered progression), hover state indicators\n\n## Effects & Animation\nProduct animation playback, step progression animations, hover reveal effects, smooth zoom on interaction\n\n## Best For\n- SaaS platforms\n- tool/software products\n- productivity apps landing pages\n- developer tools\n- productivity software\n\n## Do Not Use For\n- Simple services\n- consulting\n- non-digital products\n- complexity-averse audiences\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Demo video loads fast\n- [ ] Fallback for no-JS\n- [ ] Step indicators clear\n- [ ] Hover states obvious\n- [ ] Mobile touch friendly\n- [ ] Demo CTA prominent\n\n## CSS Variables\n--video-aspect-ratio: 16/9, --overlay-bg: rgba(0,0,0,0.7), --step-indicator-size: 32px, --play-button-size: 80px, --transition-duration: 300ms",
-      "tags": [
-        "ui-style",
-        "interactive-product-demo",
-        "design-inspiration",
-        "Embedded product mockup/video",
-        "interactive elements",
-        "product walkthrough",
-        "step-by-step guides",
-        "hover-to-reveal features"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-kinetic-typography",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Kinetic Typography UI Style",
-      "severity": "suggestion",
-      "description": "# Kinetic Typography UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* High\n- **Performance:*\\* Moderate\n\n## Keywords\nMotion text, animated type, moving letters, dynamic, typing effect, morphing, scroll-triggered text\n\n## Colors\n- **Primary:*\\* Flexible - high contrast recommended, bold colors for emphasis, animation-friendly palette\n- **Secondary:*\\* Accent colors for emphasis, transition colors, gradient text fills\n\n## Effects & Animation\n@keyframes text animation, typing effect, background-clip: text, GSAP ScrollTrigger, split text\n\n## Best For\n- Hero sections\n- marketing sites\n- video platforms\n- storytelling\n- creative portfolios\n- landing pages\n\n## Do Not Use For\n- Long-form content\n- accessibility-critical\n- data interfaces\n- forms\n- elderly users\n\n## Accessibility\n❌ Poor (motion)\n\n## Implementation Checklist\n- [ ] Text animations smooth\n- [ ] Prefers-reduced-motion respected\n- [ ] Fallback for no-JS\n- [ ] Mobile performance ok\n- [ ] Typing effect timed\n- [ ] Scroll triggers work\n\n## CSS Variables\n--text-animation-duration: 1s, --letter-delay: 0.05s, --typing-speed: 100ms, --gradient-text: linear-gradient(90deg, #color1, #color2), --morph-duration: 0.5s",
-      "tags": [
-        "ui-style",
-        "kinetic-typography",
-        "design-inspiration",
-        "Motion text",
-        "animated type",
-        "moving letters",
-        "dynamic",
-        "typing effect"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-liquid-glass",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Liquid Glass UI Style",
-      "severity": "suggestion",
-      "description": "# Liquid Glass UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* High\n- **Performance:*\\* Moderate-Poor\n\n## Keywords\nFlowing glass, morphing, smooth transitions, fluid effects, translucent, animated blur, iridescent, chromatic aberration\n\n## Colors\n- **Primary:*\\* Vibrant iridescent (rainbow spectrum), translucent base with opacity shifts, gradient fluidity\n- **Secondary:*\\* Chromatic aberration (Red-Cyan), iridescent oil-spill, fluid gradient blends, holographic effects\n\n## Effects & Animation\nMorphing elements (SVG/CSS), fluid animations (400-600ms curves), dynamic blur (backdrop-filter), color transitions\n\n## Best For\n- Premium SaaS\n- high-end e-commerce\n- creative platforms\n- branding experiences\n- luxury portfolios\n\n## Do Not Use For\n- Performance-limited\n- critical accessibility\n- complex data\n- budget projects\n\n## Accessibility\n⚠ Text contrast\n\n## Implementation Checklist\n- [ ] Morphing animations 400-600ms\n- [ ] Chromatic aberration applied\n- [ ] Dynamic blur active\n- [ ] Iridescent gradients\n- [ ] Smooth color transitions\n- [ ] Premium feel achieved\n\n## CSS Variables\n--morph-duration: 400-600ms, --blur-amount: 15px, --chromatic-aberration: true, --iridescent: true, --blend-mode: screen, --smooth-transitions: true",
-      "tags": [
-        "ui-style",
-        "liquid-glass",
-        "design-inspiration",
-        "Flowing glass",
-        "morphing",
-        "smooth transitions",
-        "fluid effects",
-        "translucent"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-memphis-design",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Memphis Design UI Style",
-      "severity": "suggestion",
-      "description": "# Memphis Design UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 1980s Postmodern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Excellent\n\n## Keywords\n80s, geometric, playful, postmodern, shapes, patterns, squiggles, triangles, neon, abstract, bold\n\n## Colors\n- **Primary:** #FF71CE (Hot Pink), #FFCE5C (Yellow), #86CCCA (Teal), #6A7BB4 (Blue Purple)\n- **Secondary:*\\* Complementary geometric colors, pattern fills, contrasting accent shapes\n\n## Effects & Animation\ntransform: rotate(), clip-path: polygon(), mix-blend-mode, repeating patterns, bold shapes\n\n## Best For\n- Creative agencies\n- music sites\n- youth brands\n- event promotion\n- artistic portfolios\n- entertainment\n\n## Do Not Use For\n- Corporate finance\n- healthcare\n- legal\n- elderly users\n- conservative brands\n\n## Accessibility\n⚠ Check contrast\n\n## Implementation Checklist\n- [ ] Geometric shapes visible\n- [ ] Colors bold/clashing\n- [ ] Patterns present\n- [ ] Layout asymmetric\n- [ ] Playful decorations\n- [ ] 80s vibe achieved\n\n## CSS Variables\n--memphis-pink: #FF71CE, --memphis-yellow: #FFCE5C, --memphis-teal: #86CCCA, --memphis-purple: #6A7BB4, --pattern-size: 20px, --shape-rotation: 15deg",
-      "tags": [
-        "ui-style",
-        "memphis-design",
-        "design-inspiration",
-        "80s",
-        "geometric",
-        "playful",
-        "postmodern",
-        "shapes"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-micro-interactions",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Micro-interactions UI Style",
-      "severity": "suggestion",
-      "description": "# Micro-interactions UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Excellent\n\n## Keywords\nSmall animations, gesture-based, tactile feedback, subtle animations, contextual interactions, responsive\n\n## Colors\n- **Primary:*\\* Subtle color shifts (10-20%), feedback: Green #22C55E, Red #EF4444, Amber #F59E0B\n- **Secondary:*\\* Accent feedback, neutral supporting, clear action indicators\n\n## Effects & Animation\nSmall hover (50-100ms), loading spinners, success/error state anim, gesture-triggered (swipe/pinch), haptic\n\n## Best For\n- Mobile apps\n- touchscreen UIs\n- productivity tools\n- user-friendly\n- consumer apps\n- interactive components\n\n## Do Not Use For\n- Desktop-only\n- critical performance\n- accessibility-first (alternatives needed)\n\n## Accessibility\n✓ Good\n\n## Implementation Checklist\n- [ ] Micro-animations 50-100ms\n- [ ] Gesture-responsive\n- [ ] Tactile feedback visual/haptic\n- [ ] Loading spinners smooth\n- [ ] Success/error states clear\n- [ ] Hover effects subtle\n\n## CSS Variables\n--micro-animation-duration: 50-100ms, --gesture-responsive: true, --haptic-feedback: true, --loading-animation: smooth, --state-feedback: success+error",
-      "tags": [
-        "ui-style",
-        "micro-interactions",
-        "design-inspiration",
-        "Small animations",
-        "gesture-based",
-        "tactile feedback",
-        "subtle animations",
-        "contextual interactions"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-minimal-direct",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Minimal & Direct UI Style",
-      "severity": "suggestion",
-      "description": "# Minimal & Direct UI Style\n\n## Overview\n- **Type:*\\* Landing Page\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Excellent\n\n## Keywords\nMinimal text, white space heavy, single column layout, direct messaging, clean typography, visual-centric, fast-loading\n\n## Colors\n- **Primary:*\\* Monochromatic primary, white background, single accent color for CTA, black/dark grey text\n- **Secondary:*\\* Minimal secondary colors, reserved for critical CTAs only, neutral supporting elements\n\n## Effects & Animation\nVery subtle hover effects, minimal animations, fast page load (no heavy animations), smooth scroll\n\n## Best For\n- Simple service landing pages\n- indie products\n- consulting services\n- micro SaaS\n- freelancer portfolios\n\n## Do Not Use For\n- Feature-heavy products\n- complex explanations\n- multi-product showcases\n\n## Accessibility\n✓ WCAG AAA\n\n## Implementation Checklist\n- [ ] Single column centered\n- [ ] White space generous\n- [ ] One primary CTA only\n- [ ] No decorative images\n- [ ] Page weight < 500KB\n- [ ] Load time < 2s\n\n## CSS Variables\n--content-max-width: 680px, --spacing-large: 4rem, --font-size-body: 18px, --line-height: 1.6, --color-text: #1a1a1a, --color-bg: #ffffff",
-      "tags": [
-        "ui-style",
-        "minimal-direct",
-        "design-inspiration",
-        "Minimal text",
-        "white space heavy",
-        "single column layout",
-        "direct messaging",
-        "clean typography"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-minimalism-swiss-style",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Minimalism & Swiss Style UI Style",
-      "severity": "suggestion",
-      "description": "# Minimalism & Swiss Style UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 1950s Swiss\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\nClean, simple, spacious, functional, white space, high contrast, geometric, sans-serif, grid-based, essential\n\n## Colors\n- **Primary:*\\* Monochromatic, Black #000000, White #FFFFFF\n- **Secondary:*\\* Neutral (Beige #F5F1E8, Grey #808080, Taupe #B38B6D), Primary accent\n\n## Effects & Animation\nSubtle hover (200-250ms), smooth transitions, sharp shadows if any, clear type hierarchy, fast loading\n\n## Best For\n- Enterprise apps\n- dashboards\n- documentation sites\n- SaaS platforms\n- professional tools\n\n## Do Not Use For\n- Creative portfolios\n- entertainment\n- playful brands\n- artistic experiments\n\n## Accessibility\n✓ WCAG AAA\n\n## Implementation Checklist\n- [ ] Grid-based layout 12-16 columns\n- [ ] Typography hierarchy clear\n- [ ] No unnecessary decorations\n- [ ] WCAG AAA contrast verified\n- [ ] Mobile responsive grid\n\n## CSS Variables\n--spacing: 2rem, --border-radius: 0px, --font-weight: 400-700, --shadow: none, --accent-color: single primary only",
-      "tags": [
-        "ui-style",
-        "minimalism-swiss-style",
-        "design-inspiration",
-        "Clean",
-        "simple",
-        "spacious",
-        "functional",
-        "white space"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-motion-driven",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Motion-Driven UI Style",
-      "severity": "suggestion",
-      "description": "# Motion-Driven UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* High\n- **Performance:*\\* Good\n\n## Keywords\nAnimation-heavy, microinteractions, smooth transitions, scroll effects, parallax, entrance anim, page transitions\n\n## Colors\n- **Primary:*\\* Bold colors emphasize movement, high contrast animated, dynamic gradients, accent action colors\n- **Secondary:*\\* Transitional states, success (Green #22C55E), error (Red #EF4444), neutral feedback\n\n## Effects & Animation\nScroll anim (Intersection Observer), hover (300-400ms), entrance, parallax (3-5 layers), page transitions\n\n## Best For\n- Portfolio sites\n- storytelling platforms\n- interactive experiences\n- entertainment apps\n- creative\n- SaaS\n\n## Do Not Use For\n- Data dashboards\n- critical accessibility\n- low-power devices\n- content-heavy\n- motion-sensitive\n\n## Accessibility\n⚠ Prefers-reduced-motion\n\n## Implementation Checklist\n- [ ] Scroll animations active\n- [ ] Parallax 3-5 layers\n- [ ] Entrance animations smooth\n- [ ] Page transitions fluid\n- [ ] GPU accelerated\n- [ ] Prefers-reduced-motion respected\n\n## CSS Variables\n--animation-duration: 300-400ms, --parallax-layers: 5, --scroll-behavior: smooth, --gpu-accelerated: true, --entrance-animation: true, --page-transition: smooth",
-      "tags": [
-        "ui-style",
-        "motion-driven",
-        "design-inspiration",
-        "Animation-heavy",
-        "microinteractions",
-        "smooth transitions",
-        "scroll effects",
-        "parallax"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-nature-distilled",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Nature Distilled UI Style",
-      "severity": "suggestion",
-      "description": "# Nature Distilled UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2025+ Handmade Warmth\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\nMuted earthy, skin tones, wood, soil, sand, terracotta, warmth, organic materials, handmade warmth\n\n## Colors\n- **Primary:*\\* Terracotta #C67B5C, Sand Beige #D4C4A8, Warm Clay #B5651D, Soft Cream #F5F0E1\n- **Secondary:*\\* Earth Brown #8B4513, Olive Green #6B7B3C, Warm Stone #9C8B7A, muted gradients\n\n## Effects & Animation\nSubtle parallax, natural easing (ease-out), texture overlays, grain effects, soft shadows\n\n## Best For\n- Wellness brands\n- sustainable products\n- artisan goods\n- organic food\n- spa/beauty\n- home decor\n\n## Do Not Use For\n- Tech startups\n- gaming\n- nightlife\n- corporate finance\n- high-energy brands\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Earth tones dominant\n- [ ] Warm feel achieved\n- [ ] Textures subtle\n- [ ] Handmade quality\n- [ ] Sustainable messaging\n- [ ] Calming aesthetic\n\n## CSS Variables\n--terracotta: #C67B5C, --sand-beige: #D4C4A8, --warm-clay: #B5651D, --soft-cream: #F5F0E1, --olive-green: #6B7B3C, --grain-opacity: 0.1",
-      "tags": [
-        "ui-style",
-        "nature-distilled",
-        "design-inspiration",
-        "Muted earthy",
-        "skin tones",
-        "wood",
-        "soil",
-        "sand"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-neubrutalism",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Neubrutalism UI Style",
-      "severity": "suggestion",
-      "description": "# Neubrutalism UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\nBold borders, black outlines, primary colors, thick shadows, no gradients, flat colors, 45° shadows, playful, Gen Z\n\n## Colors\n- **Primary:** #FFEB3B (Yellow), #FF5252 (Red), #2196F3 (Blue), #000000 (Black borders)\n- **Secondary:*\\* Limited accent colors, high contrast combinations, no gradients allowed\n\n## Effects & Animation\nbox-shadow: 4px 4px 0 #000, border: 3px solid #000, no gradients, sharp corners (0px), bold typography\n\n## Best For\n- Gen Z brands\n- startups\n- creative agencies\n- Figma-style apps\n- Notion-style interfaces\n- tech blogs\n\n## Do Not Use For\n- Luxury brands\n- finance\n- healthcare\n- conservative industries (too playful)\n\n## Accessibility\n✓ WCAG AAA\n\n## Implementation Checklist\n- [ ] Hard borders (2-4px)\n- [ ] Hard offset shadows\n- [ ] High saturation colors\n- [ ] Bold typography\n- [ ] No blurs/gradients\n- [ ] Distinctive 'ugly-cute' look\n\n## CSS Variables\n--border-width: 3px, --shadow-offset: 4px, --shadow-color: #000, --colors: high saturation, --font: bold sans",
-      "tags": [
-        "ui-style",
-        "neubrutalism",
-        "design-inspiration",
-        "Bold borders",
-        "black outlines",
-        "primary colors",
-        "thick shadows",
-        "no gradients"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-neumorphism",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Neumorphism UI Style",
-      "severity": "suggestion",
-      "description": "# Neumorphism UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nSoft UI, embossed, debossed, convex, concave, light source, subtle depth, rounded (12-16px), monochromatic\n\n## Colors\n- **Primary:*\\* Light pastels: Soft Blue #C8E0F4, Soft Pink #F5E0E8, Soft Grey #E8E8E8\n- **Secondary:*\\* Tints/shades (±30%), gradient subtlety, color harmony\n\n## Effects & Animation\nSoft box-shadow (multiple: -5px -5px 15px, 5px 5px 15px), smooth press (150ms), inner subtle shadow\n\n## Best For\n- Health/wellness apps\n- meditation platforms\n- fitness trackers\n- minimal interaction UIs\n\n## Do Not Use For\n- Complex apps\n- critical accessibility\n- data-heavy dashboards\n- high-contrast required\n\n## Accessibility\n⚠ Low contrast\n\n## Implementation Checklist\n- [ ] Rounded corners 12-16px consistent\n- [ ] Multiple shadow layers (2-3)\n- [ ] Pastel color verified\n- [ ] Monochromatic palette checked\n- [ ] Press animation smooth 150ms\n\n## CSS Variables\n--border-radius: 14px, --shadow-soft-1: -5px -5px 15px, --shadow-soft-2: 5px 5px 15px, --color-light: #F5F5F5, --color-primary: single pastel",
-      "tags": [
-        "ui-style",
-        "neumorphism",
-        "design-inspiration",
-        "Soft UI",
-        "embossed",
-        "debossed",
-        "convex",
-        "concave"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-organic-biophilic",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Organic Biophilic UI Style",
-      "severity": "suggestion",
-      "description": "# Organic Biophilic UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Sustainable\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\nNature, organic shapes, green, sustainable, rounded, flowing, wellness, earthy, natural textures\n\n## Colors\n- **Primary:** #228B22 (Forest Green), #8B4513 (Earth Brown), #87CEEB (Sky Blue), #F5F5DC (Beige)\n- **Secondary:*\\* Natural gradients, earth tones, sky blues, organic textures, wood/stone colors\n\n## Effects & Animation\nRounded corners (16-24px), organic curves (border-radius variations), natural shadows, flowing SVG shapes\n\n## Best For\n- Wellness apps\n- sustainability brands\n- eco products\n- health apps\n- meditation\n- organic food brands\n\n## Do Not Use For\n- Tech-focused products\n- gaming\n- industrial\n- urban brands\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Earth tones dominant\n- [ ] Organic curves present\n- [ ] Natural textures subtle\n- [ ] Green accents\n- [ ] Rounded everywhere\n- [ ] Calming feel\n\n## CSS Variables\n--forest-green: #228B22, --earth-brown: #8B4513, --sky-blue: #87CEEB, --cream-bg: #F5F5DC, --organic-radius: 24px, --shadow-soft: 0 8px 32px rgba(0,0,0,0.08)",
-      "tags": [
-        "ui-style",
-        "organic-biophilic",
-        "design-inspiration",
-        "Nature",
-        "organic shapes",
-        "green",
-        "sustainable",
-        "rounded"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-parallax-storytelling",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Parallax Storytelling UI Style",
-      "severity": "suggestion",
-      "description": "# Parallax Storytelling UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* High\n- **Performance:** ❌ Poor\n\n## Keywords\nScroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic, scroll-triggered\n\n## Colors\n- **Primary:*\\* Story-dependent, often gradients and natural colors, section-specific palettes\n- **Secondary:*\\* Section transition colors, depth layer colors, narrative mood colors\n\n## Effects & Animation\ntransform: translateY(scroll), position: fixed/sticky, perspective: 1px, scroll-triggered animations\n\n## Best For\n- Brand storytelling\n- product launches\n- case studies\n- portfolios\n- annual reports\n- marketing campaigns\n\n## Do Not Use For\n- E-commerce\n- dashboards\n- mobile-first\n- SEO-critical\n- accessibility-required\n\n## Accessibility\n❌ Poor (motion)\n\n## Implementation Checklist\n- [ ] Layers parallax smoothly\n- [ ] Story flows naturally\n- [ ] Mobile alternative provided\n- [ ] Performance optimized\n- [ ] Skip option available\n- [ ] Reduced motion fallback\n\n## CSS Variables\n--parallax-speed-bg: 0.3, --parallax-speed-mid: 0.6, --parallax-speed-fg: 1, --section-height: 100vh, --transition-duration: 600ms, --perspective: 1px",
-      "tags": [
-        "ui-style",
-        "parallax-storytelling",
-        "design-inspiration",
-        "Scroll-driven",
-        "narrative",
-        "layered scrolling",
-        "immersive",
-        "progressive disclosure"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-pixel-art",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Pixel Art UI Style",
-      "severity": "suggestion",
-      "description": "# Pixel Art UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 1980s Arcade\n- **Complexity:*\\* Medium\n- **Performance:*\\* Excellent\n\n## Keywords\nRetro, 8-bit, 16-bit, gaming, blocky, nostalgic, pixelated, arcade\n\n## Colors\n- **Primary:*\\* Primary colors (NES Palette), brights, limited palette\n- **Secondary:*\\* Black outlines, shading via dithering or block colors\n\n## Effects & Animation\nFrame-by-frame sprite animation, blinking cursor, instant transitions, marquee text\n\n## Best For\n- Indie games\n- retro tools\n- creative portfolios\n- nostalgia marketing\n- Web3/NFT\n\n## Do Not Use For\n- Professional corporate\n- modern SaaS\n- high-res photography sites\n\n## Accessibility\n✓ Good (if contrast ok)\n\n## Implementation Checklist\n- [ ] Pixelated fonts loaded\n- [ ] Images sharp (no blur)\n- [ ] CSS box-shadow for pixel borders\n- [ ] Retro palette\n- [ ] Blocky layout\n\n## CSS Variables\n--pixel-size: 4px, --font: pixel font, --border-style: pixel-shadow, --anti-alias: none",
-      "tags": [
-        "ui-style",
-        "pixel-art",
-        "design-inspiration",
-        "Retro",
-        "8-bit",
-        "16-bit",
-        "gaming",
-        "blocky"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-predictive-analytics",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Predictive Analytics UI Style",
-      "severity": "suggestion",
-      "description": "# Predictive Analytics UI Style\n\n## Overview\n- **Type:*\\* BI/Analytics\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good (computation)\n\n## Keywords\nForecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection visualization\n\n## Colors\n- **Primary:*\\* Forecast line color (distinct from actual), confidence interval shading, anomaly highlight (red alert), trend colors\n- **Secondary:*\\* High confidence (dark color), low confidence (light color), anomaly colors (red/orange), normal trend (green/blue)\n\n## Effects & Animation\nForecast line animation on draw, confidence band fade-in, anomaly pulse alert, smoothing function animations\n\n## Best For\n- Forecasting dashboards\n- anomaly detection systems\n- trend prediction dashboards\n- AI-powered analytics\n- budget planning\n\n## Do Not Use For\n- Historical-only dashboards\n- simple reporting\n- real-time operational dashboards\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Forecast line distinct\n- [ ] Confidence bands visible\n- [ ] Anomalies highlighted\n- [ ] Scenarios switchable\n- [ ] Predictions dated\n- [ ] Accuracy shown\n\n## CSS Variables\n--forecast-dash: 5 5, --confidence-opacity: 0.2, --anomaly-color: #F59E0B, --prediction-color: #8B5CF6, --scenario-toggle-width: 48px, --ai-accent: #6366F1",
-      "tags": [
-        "ui-style",
-        "predictive-analytics",
-        "design-inspiration",
-        "Forecast lines",
-        "confidence intervals",
-        "trend projections",
-        "scenario modeling",
-        "AI-driven insights"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-real-time-monitoring",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Real-Time Monitoring UI Style",
-      "severity": "suggestion",
-      "description": "# Real-Time Monitoring UI Style\n\n## Overview\n- **Type:*\\* BI/Analytics\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good (real-time load)\n\n## Keywords\nLive data updates, status indicators, alert notifications, streaming data visualization, active monitoring, streaming charts\n\n## Colors\n- **Primary:*\\* Alert colors: critical (red #FF0000), warning (orange #FFA500), normal (green #22C55E), updating (blue animation)\n- **Secondary:*\\* Status indicator colors, chart line colors varying by metric, streaming data highlight colors\n\n## Effects & Animation\nReal-time chart animations, alert pulse/glow, status indicator blink animation, smooth data stream updates, loading effect\n\n## Best For\n- System monitoring dashboards\n- DevOps dashboards\n- real-time analytics\n- stock market dashboards\n- live event tracking\n\n## Do Not Use For\n- Historical analysis\n- long-term trend reports\n- archived data dashboards\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Live updates working\n- [ ] Alert sounds optional\n- [ ] Connection status shown\n- [ ] Auto-refresh indicated\n- [ ] Critical alerts prominent\n- [ ] Offline fallback\n\n## CSS Variables\n--pulse-animation: pulse 2s infinite, --alert-z-index: 1000, --live-indicator: #22C55E, --critical-color: #DC2626, --update-interval: 5s, --toast-duration: 5s",
-      "tags": [
-        "ui-style",
-        "real-time-monitoring",
-        "design-inspiration",
-        "Live data updates",
-        "status indicators",
-        "alert notifications",
-        "streaming data visualization",
-        "active monitoring"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-retro-futurism",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Retro-Futurism UI Style",
-      "severity": "suggestion",
-      "description": "# Retro-Futurism UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 1980s Retro\n- **Complexity:*\\* Medium\n- **Performance:*\\* Moderate\n\n## Keywords\nVintage sci-fi, 80s aesthetic, neon glow, geometric patterns, CRT scanlines, pixel art, cyberpunk, synthwave\n\n## Colors\n- **Primary:*\\* Neon Blue #0080FF, Hot Pink #FF006E, Cyan #00FFFF, Deep Black #1A1A2E, Purple #5D34D0\n- **Secondary:*\\* Metallic Silver #C0C0C0, Gold #FFD700, duotone, 80s Pink #FF10F0, neon accents\n\n## Effects & Animation\nCRT scanlines (::before overlay), neon glow (text-shadow+box-shadow), glitch effects (skew/offset keyframes)\n\n## Best For\n- Gaming\n- entertainment\n- music platforms\n- tech brands\n- artistic projects\n- nostalgic\n- cyberpunk\n\n## Do Not Use For\n- Conservative industries\n- critical accessibility\n- professional/corporate\n- elderly\n- legal/finance\n\n## Accessibility\n⚠ High contrast/strain\n\n## Implementation Checklist\n- [ ] Neon colors used\n- [ ] CRT scanlines effect\n- [ ] Glitch animations active\n- [ ] Monospace font\n- [ ] Deep black background\n- [ ] Glow effects applied\n- [ ] 80s patterns present\n\n## CSS Variables\n--neon-colors: #0080FF #FF006E #00FFFF, --background: #000000, --font-family: monospace, --effect: glitch+glow, --scanline-opacity: 0.3, --crt-effect: true",
-      "tags": [
-        "ui-style",
-        "retro-futurism",
-        "design-inspiration",
-        "Vintage sci-fi",
-        "80s aesthetic",
-        "neon glow",
-        "geometric patterns",
-        "CRT scanlines"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-sales-intelligence-dashboard",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Sales Intelligence Dashboard UI Style",
-      "severity": "suggestion",
-      "description": "# Sales Intelligence Dashboard UI Style\n\n## Overview\n- **Type:*\\* BI/Analytics\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nDeal pipeline, sales metrics, territory performance, sales rep leaderboard, win-loss analysis, quota tracking, forecast accuracy\n\n## Colors\n- **Primary:*\\* Sales colors: won (green), lost (red), in-progress (blue), blocked (orange), quota met (gold), quota missed (grey)\n- **Secondary:*\\* Pipeline stage colors, rep performance colors, quota achievement colors, forecast accuracy colors\n\n## Effects & Animation\nDeal movement animations, metric updates, leaderboard ranking changes, gauge needle movements, status change highlights\n\n## Best For\n- CRM dashboards\n- sales management\n- opportunity tracking\n- performance management\n- quota planning\n\n## Do Not Use For\n- Marketing analytics\n- customer support metrics\n- HR dashboards\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Pipeline stages shown\n- [ ] Deals draggable\n- [ ] Quotas visualized\n- [ ] Rankings updated\n- [ ] Territory clickable\n- [ ] CRM integration\n\n## CSS Variables\n--pipeline-colors: stage gradient, --gauge-track: #E5E7EB, --gauge-fill: primary, --rank-1-color: #FFD700, --rank-2-color: #C0C0C0, --rank-3-color: #CD7F32",
-      "tags": [
-        "ui-style",
-        "sales-intelligence-dashboard",
-        "design-inspiration",
-        "Deal pipeline",
-        "sales metrics",
-        "territory performance",
-        "sales rep leaderboard",
-        "win-loss analysis"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-skeuomorphism",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Skeuomorphism UI Style",
-      "severity": "suggestion",
-      "description": "# Skeuomorphism UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2007-2012 iOS\n- **Complexity:*\\* High\n- **Performance:** ❌ Poor\n\n## Keywords\nRealistic, texture, depth, 3D appearance, real-world metaphors, shadows, gradients, tactile, detailed, material\n\n## Colors\n- **Primary:*\\* Rich realistic: wood, leather, metal colors, detailed gradients (8-12 stops), metallic effects\n- **Secondary:*\\* Realistic lighting gradients, shadow variations (30-50% darker), texture overlays, material colors\n\n## Effects & Animation\nRealistic shadows (layers), depth (perspective), texture details (noise, grain), realistic animations (300-500ms)\n\n## Best For\n- Legacy apps\n- gaming\n- immersive storytelling\n- premium products\n- luxury\n- realistic simulations\n- education\n\n## Do Not Use For\n- Modern enterprise\n- critical accessibility\n- low-performance\n- web (use Flat/Modern)\n\n## Accessibility\n⚠ Textures reduce readability\n\n## Implementation Checklist\n- [ ] Realistic textures applied\n- [ ] Complex gradients 8-12 stops\n- [ ] Multi-layer shadows\n- [ ] Texture overlays present\n- [ ] Tactile animations smooth\n- [ ] Depth effect pronounced\n\n## CSS Variables\n--gradient-stops: 8-12, --texture-overlay: noise+grain, --shadow-layers: 3+, --animation-duration: 300-500ms, --depth-effect: pronounced, --tactile: true",
-      "tags": [
-        "ui-style",
-        "skeuomorphism",
-        "design-inspiration",
-        "Realistic",
-        "texture",
-        "depth",
-        "3D appearance",
-        "real-world metaphors"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-social-proof-focused",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Social Proof-Focused UI Style",
-      "severity": "suggestion",
-      "description": "# Social Proof-Focused UI Style\n\n## Overview\n- **Type:*\\* Landing Page\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nTestimonials prominent, client logos displayed, case studies sections, reviews/ratings, user avatars, success metrics, credibility markers\n\n## Colors\n- **Primary:*\\* Primary brand, trust colors (blue), success/growth colors (green), neutral backgrounds\n- **Secondary:*\\* Testimonial highlight colors, logo grid backgrounds (light grey), badge/achievement colors\n\n## Effects & Animation\nTestimonial carousel animations, logo grid fade-in, stat counter animations (number count-up), review star ratings\n\n## Best For\n- B2B SaaS\n- professional services\n- premium products\n- e-commerce conversion pages\n- established brands\n\n## Do Not Use For\n- Startup MVPs\n- products without users\n- niche/experimental products\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Testimonials with real photos\n- [ ] Logo grid 6-12 logos\n- [ ] Star ratings accessible\n- [ ] Metrics animated on scroll\n- [ ] Case studies linked\n- [ ] Mobile carousel works\n\n## CSS Variables\n--avatar-size: 64px, --logo-height: 40px, --star-color: #FBBF24, --metric-font-size: 3rem, --testimonial-bg: #F9FAFB, --blockquote-border: 4px solid accent",
-      "tags": [
-        "ui-style",
-        "social-proof-focused",
-        "design-inspiration",
-        "Testimonials prominent",
-        "client logos displayed",
-        "case studies sections",
-        "reviews/ratings",
-        "user avatars"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-soft-ui-evolution",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Soft UI Evolution UI Style",
-      "severity": "suggestion",
-      "description": "# Soft UI Evolution UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Excellent\n\n## Keywords\nEvolved soft UI, better contrast, modern aesthetics, subtle depth, accessibility-focused, improved shadows, hybrid\n\n## Colors\n- **Primary:*\\* Improved contrast pastels: Soft Blue #87CEEB, Soft Pink #FFB6C1, Soft Green #90EE90, better hierarchy\n- **Secondary:*\\* Better combinations, accessible secondary, supporting with improved contrast, modern accents\n\n## Effects & Animation\nImproved shadows (softer than flat, clearer than neumorphism), modern (200-300ms), focus visible, WCAG AA/AAA\n\n## Best For\n- Modern enterprise apps\n- SaaS platforms\n- health/wellness\n- modern business tools\n- professional\n- hybrid\n\n## Do Not Use For\n- Extreme minimalism\n- critical performance\n- systems without modern OS\n\n## Accessibility\n✓ WCAG AA+\n\n## Implementation Checklist\n- [ ] Improved contrast AA/AAA\n- [ ] Soft shadows modern\n- [ ] Border-radius 8-12px\n- [ ] Animations 200-300ms\n- [ ] Focus states visible\n- [ ] Color hierarchy clear\n\n## CSS Variables\n--shadow-soft: modern blend, --border-radius: 10px, --animation-duration: 200-300ms, --contrast-ratio: 4.5:1+, --color-hierarchy: improved, --wcag-level: AA+",
-      "tags": [
-        "ui-style",
-        "soft-ui-evolution",
-        "design-inspiration",
-        "Evolved soft UI",
-        "better contrast",
-        "modern aesthetics",
-        "subtle depth",
-        "accessibility-focused"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-spatial-ui-visionos",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Spatial UI (VisionOS) UI Style",
-      "severity": "suggestion",
-      "description": "# Spatial UI (VisionOS) UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2024 Spatial Era\n- **Complexity:*\\* High\n- **Performance:*\\* Moderate (blur cost)\n\n## Keywords\nGlass, depth, immersion, spatial, translucent, gaze, gesture, apple, vision-pro\n\n## Colors\n- **Primary:*\\* Frosted Glass #FFFFFF (15-30% opacity), System White\n- **Secondary:*\\* Vibrant system colors for active states, deep shadows for depth\n\n## Effects & Animation\nParallax depth, dynamic lighting response, gaze-hover effects, smooth scale on focus\n\n## Best For\n- Spatial computing apps\n- VR/AR interfaces\n- immersive media\n- futuristic dashboards\n\n## Do Not Use For\n- Text-heavy documents\n- high-contrast requirements\n- non-3D capable devices\n\n## Accessibility\n⚠ Contrast risks\n\n## Implementation Checklist\n- [ ] Glass effect visible\n- [ ] Depth layers clear\n- [ ] Hover states defined\n- [ ] Colors vibrant on active\n- [ ] Floating feel achieved\n- [ ] Contrast maintained\n\n## CSS Variables\n--glass-bg: rgba(255,255,255,0.2), --glass-blur: 40px, --glass-saturate: 180%, --window-radius: 24px, --depth-shadow: 0 8px 32px rgba(0,0,0,0.1), --focus-scale: 1.02",
-      "tags": [
-        "ui-style",
-        "spatial-ui-visionos",
-        "design-inspiration",
-        "Glass",
-        "depth",
-        "immersion",
-        "spatial",
-        "translucent"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-storytelling-driven",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Storytelling-Driven UI Style",
-      "severity": "suggestion",
-      "description": "# Storytelling-Driven UI Style\n\n## Overview\n- **Type:*\\* Landing Page\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Moderate (animations)\n\n## Keywords\nNarrative flow, visual story progression, section transitions, consistent character/brand voice, emotional messaging, journey visualization\n\n## Colors\n- **Primary:*\\* Brand primary, warm/emotional colors, varied accent colors per story section, high visual variety\n- **Secondary:*\\* Story section color coding, emotional state colors (calm, excitement, success), transitional gradients\n\n## Effects & Animation\nSection-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative\n\n## Best For\n- Brand/startup stories\n- mission-driven products\n- premium/lifestyle brands\n- documentary-style products\n- educational\n\n## Do Not Use For\n- Technical/complex products (unless narrative-driven)\n- traditional enterprise software\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Story flows naturally\n- [ ] Scroll reveals smooth\n- [ ] Sections timed well\n- [ ] Emotional hooks present\n- [ ] Mobile story readable\n- [ ] Skip option available\n\n## CSS Variables\n--section-min-height: 100vh, --reveal-duration: 600ms, --narrative-font: serif, --chapter-spacing: 8rem, --timeline-color: accent, --parallax-speed: 0.5",
-      "tags": [
-        "ui-style",
-        "storytelling-driven",
-        "design-inspiration",
-        "Narrative flow",
-        "visual story progression",
-        "section transitions",
-        "consistent character/brand voice",
-        "emotional messaging"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-swiss-modernism-2-0",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Swiss Modernism 2.0 UI Style",
-      "severity": "suggestion",
-      "description": "# Swiss Modernism 2.0 UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 1950s Swiss + 2020s\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\nGrid system, Helvetica, modular, asymmetric, international style, rational, clean, mathematical spacing\n\n## Colors\n- **Primary:** #000000, #FFFFFF, #F5F5F5, single vibrant accent only\n- **Secondary:*\\* Minimal secondary, accent for emphasis only, no gradients\n\n## Effects & Animation\ndisplay: grid, grid-template-columns: repeat(12 1fr), gap: 1rem, mathematical ratios, clear hierarchy\n\n## Best For\n- Corporate sites\n- architecture\n- editorial\n- SaaS\n- museums\n- professional services\n- documentation\n\n## Do Not Use For\n- Playful brands\n- children's sites\n- entertainment\n- gaming\n- emotional storytelling\n\n## Accessibility\n✓ WCAG AAA\n\n## Implementation Checklist\n- [ ] 12-column grid strict\n- [ ] Spacing mathematical\n- [ ] Typography hierarchy clear\n- [ ] Single accent only\n- [ ] No decorations\n- [ ] High contrast verified\n\n## CSS Variables\n--grid-columns: 12, --grid-gap: 1rem, --base-unit: 8px, --font-primary: Inter, --color-text: #000000, --color-bg: #FFFFFF, --accent: single vibrant",
-      "tags": [
-        "ui-style",
-        "swiss-modernism-2-0",
-        "design-inspiration",
-        "Grid system",
-        "Helvetica",
-        "modular",
-        "asymmetric",
-        "international style"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-tactile-digital-deformable-ui",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Tactile Digital / Deformable UI UI Style",
-      "severity": "suggestion",
-      "description": "# Tactile Digital / Deformable UI UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2025+ Tactile Era\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nJelly buttons, chrome, clay, squishy, deformable, bouncy, physical, tactile feedback, press response\n\n## Colors\n- **Primary:*\\* Gradient metallics, Chrome Silver #C0C0C0, Jelly Pink #FF9ECD, Soft Blue #87CEEB\n- **Secondary:*\\* Glossy highlights, shadow depth, reflection effects, material-specific colors\n\n## Effects & Animation\nPress deformation (scale + squish), bounce-back (cubic-bezier), material response, haptic-like feedback, spring physics\n\n## Best For\n- Modern mobile apps\n- playful brands\n- entertainment\n- gaming UI\n- consumer products\n- interactive demos\n\n## Do Not Use For\n- Enterprise software\n- data dashboards\n- accessibility-critical\n- professional tools\n\n## Accessibility\n⚠ Motion sensitive\n\n## Implementation Checklist\n- [ ] Press effect visible\n- [ ] Bounce-back smooth\n- [ ] Material feels tactile\n- [ ] Spring physics tuned\n- [ ] Mobile touch responsive\n- [ ] Reduced motion option\n\n## CSS Variables\n--press-scale: 0.95, --bounce-duration: 400ms, --spring-stiffness: 300, --spring-damping: 20, --material-glossy: linear-gradient(135deg, white 0%, transparent 60%), --depth-shadow: 0 10px 30px rgba(0,0,0,0.2)",
-      "tags": [
-        "ui-style",
-        "tactile-digital-deformable-ui",
-        "design-inspiration",
-        "Jelly buttons",
-        "chrome",
-        "clay",
-        "squishy",
-        "deformable"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-trust-authority",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Trust & Authority UI Style",
-      "severity": "suggestion",
-      "description": "# Trust & Authority UI Style\n\n## Overview\n- **Type:*\\* Landing Page\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Excellent\n\n## Keywords\nCertificates/badges displayed, expert credentials, case studies with metrics, before/after comparisons, industry recognition, security badges\n\n## Colors\n- **Primary:*\\* Professional colors (blue/grey), trust colors, certification badge colors (gold/silver accents)\n- **Secondary:*\\* Certificate highlight colors, metric showcase colors, comparison highlight (success green)\n\n## Effects & Animation\nBadge hover effects, metric pulse animations, certificate carousel, smooth stat reveal\n\n## Best For\n- Healthcare/medical landing pages\n- financial services\n- enterprise software\n- premium/luxury products\n- legal services\n\n## Do Not Use For\n- Casual products\n- entertainment\n- viral/social-first products\n\n## Accessibility\n✓ WCAG AAA\n\n## Implementation Checklist\n- [ ] Security badges visible\n- [ ] Certifications verified\n- [ ] Metrics with sources\n- [ ] Professional imagery\n- [ ] Guarantee clearly stated\n- [ ] Contact info accessible\n\n## CSS Variables\n--badge-height: 48px, --trust-color: #1E40AF, --security-green: #059669, --card-shadow: 0 4px 6px rgba(0,0,0,0.1), --metric-highlight: #F59E0B",
-      "tags": [
-        "ui-style",
-        "trust-authority",
-        "design-inspiration",
-        "Certificates/badges displayed",
-        "expert credentials",
-        "case studies with metrics",
-        "before/after comparisons",
-        "industry recognition"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-user-behavior-analytics",
-      "type": "pattern",
-      "domain": "design",
-      "title": "User Behavior Analytics UI Style",
-      "severity": "suggestion",
-      "description": "# User Behavior Analytics UI Style\n\n## Overview\n- **Type:*\\* BI/Analytics\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nFunnel visualization, user flow diagrams, conversion tracking, engagement metrics, user journey mapping, cohort analysis\n\n## Colors\n- **Primary:*\\* Funnel stage colors: high engagement (green), drop-off (red), conversion (blue), user flow arrows (grey)\n- **Secondary:*\\* Stage completion colors (success), abandonment colors (warning), engagement levels (gradient), cohort colors\n\n## Effects & Animation\nFunnel animation (fill-down), flow diagram animations (connection draw), conversion pulse, engagement bar fill\n\n## Best For\n- Conversion funnel analysis\n- user journey tracking\n- engagement analytics\n- cohort analysis\n- retention tracking\n\n## Do Not Use For\n- Real-time operational metrics\n- technical system monitoring\n- financial transactions\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Funnel stages clear\n- [ ] Flow diagram readable\n- [ ] Conversions calculated\n- [ ] Cohorts comparable\n- [ ] Retention trends visible\n- [ ] Privacy compliant\n\n## CSS Variables\n--funnel-width: 100%, --stage-colors: gradient, --flow-opacity: 0.6, --cohort-cell-size: 40px, --retention-line-color: #3B82F6, --engagement-scale: 5 levels",
-      "tags": [
-        "ui-style",
-        "user-behavior-analytics",
-        "design-inspiration",
-        "Funnel visualization",
-        "user flow diagrams",
-        "conversion tracking",
-        "engagement metrics",
-        "user journey mapping"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-vaporwave",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Vaporwave UI Style",
-      "severity": "suggestion",
-      "description": "# Vaporwave UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 1980s-90s Retro\n- **Complexity:*\\* Medium\n- **Performance:*\\* Moderate\n\n## Keywords\nSynthwave, retro-futuristic, 80s-90s, neon, glitch, nostalgic, sunset gradient, dreamy, aesthetic\n\n## Colors\n- **Primary:** #FF71CE (Pink), #01CDFE (Cyan), #05FFA1 (Mint), #B967FF (Purple)\n- **Secondary:*\\* Sunset gradients, glitch overlays, VHS effects, neon accents, pastel variations\n\n## Effects & Animation\ntext-shadow glow, linear-gradient, filter: hue-rotate(), glitch animations, retro scan lines\n\n## Best For\n- Music platforms\n- gaming\n- creative portfolios\n- tech startups\n- entertainment\n- artistic projects\n\n## Do Not Use For\n- Business apps\n- e-commerce\n- education\n- healthcare\n- enterprise software\n\n## Accessibility\n⚠ Poor (motion)\n\n## Implementation Checklist\n- [ ] Sunset gradient present\n- [ ] Neon glow applied\n- [ ] Retro grid visible\n- [ ] Glitch effects subtle\n- [ ] Dreamy atmosphere\n- [ ] 80s-90s aesthetic\n\n## CSS Variables\n--vapor-pink: #FF71CE, --vapor-cyan: #01CDFE, --vapor-mint: #05FFA1, --vapor-purple: #B967FF, --grid-color: rgba(255,255,255,0.1), --glow-intensity: 15px",
-      "tags": [
-        "ui-style",
-        "vaporwave",
-        "design-inspiration",
-        "Synthwave",
-        "retro-futuristic",
-        "80s-90s",
-        "neon",
-        "glitch"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-vibrant-block-based",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Vibrant & Block-based UI Style",
-      "severity": "suggestion",
-      "description": "# Vibrant & Block-based UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s Modern\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nBold, energetic, playful, block layout, geometric shapes, high color contrast, duotone, modern, energetic\n\n## Colors\n- **Primary:*\\* Neon Green #39FF14, Electric Purple #BF00FF, Vivid Pink #FF1493, Bright Cyan #00FFFF, Sunburst #FFAA00\n- **Secondary:*\\* Complementary: Orange #FF7F00, Shocking Pink #FF006E, Lime #CCFF00, triadic schemes\n\n## Effects & Animation\nLarge sections (48px+ gaps), animated patterns, bold hover (color shift), scroll-snap, large type (32px+), 200-300ms\n\n## Best For\n- Startups\n- creative agencies\n- gaming\n- social media\n- youth-focused\n- entertainment\n- consumer\n\n## Do Not Use For\n- Financial institutions\n- healthcare\n- formal business\n- government\n- conservative\n- elderly\n\n## Accessibility\n◐ Ensure WCAG\n\n## Implementation Checklist\n- [ ] Block layout with 48px+ gaps\n- [ ] Large typography 32px+\n- [ ] 4-6 vibrant colors max\n- [ ] Animated patterns active\n- [ ] Scroll-snap enabled\n- [ ] High contrast verified (7:1+)\n\n## CSS Variables\n--block-gap: 48px, --typography-size: 32px+, --color-palette: 4-6 vibrant colors, --animation: continuous pattern, --contrast-ratio: 7:1+",
-      "tags": [
-        "ui-style",
-        "vibrant-block-based",
-        "design-inspiration",
-        "Bold",
-        "energetic",
-        "playful",
-        "block layout",
-        "geometric shapes"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-vintage-analog-retro-film",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Vintage Analog / Retro Film UI Style",
-      "severity": "suggestion",
-      "description": "# Vintage Analog / Retro Film UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 1970s-90s Analog Revival\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nFilm grain, VHS, cassette tape, polaroid, analog warmth, faded colors, light leaks, vintage photography\n\n## Colors\n- **Primary:*\\* Faded Cream #F5E6C8, Warm Sepia #D4A574, Muted Teal #4A7B7C, Soft Pink #E8B4B8\n- **Secondary:*\\* Grain overlays, light leak oranges, shadow blues, vintage paper tones, desaturated accents\n\n## Effects & Animation\nFilm grain overlay, VHS tracking effect, polaroid shake, fade-in transitions, light leak animations\n\n## Best For\n- Photography portfolios\n- music/vinyl brands\n- vintage fashion\n- nostalgia marketing\n- film industry\n- cafes\n\n## Do Not Use For\n- Modern tech\n- SaaS\n- healthcare\n- children's apps\n- corporate enterprise\n\n## Accessibility\n✓ WCAG AA\n\n## Implementation Checklist\n- [ ] Film grain visible\n- [ ] Colors faded/warm\n- [ ] Light leaks present\n- [ ] Nostalgic feel achieved\n- [ ] Performance with filters\n- [ ] Images look vintage\n\n## CSS Variables\n--sepia-amount: 20%, --contrast: 1.1, --saturation: 0.8, --grain-opacity: 0.15, --light-leak-color: rgba(255,200,100,0.2), --warm-tint: #F5E6C8",
-      "tags": [
-        "ui-style",
-        "vintage-analog-retro-film",
-        "design-inspiration",
-        "Film grain",
-        "VHS",
-        "cassette tape",
-        "polaroid",
-        "analog warmth"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-voice-first-multimodal",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Voice-First Multimodal UI Style",
-      "severity": "suggestion",
-      "description": "# Voice-First Multimodal UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2025+ Voice Era\n- **Complexity:*\\* Medium\n- **Performance:*\\* Excellent\n\n## Keywords\nVoice UI, multimodal, audio feedback, conversational, hands-free, ambient, contextual, speech recognition\n\n## Colors\n- **Primary:*\\* Calm neutrals: Soft White #FAFAFA, Muted Blue #6B8FAF, Gentle Purple #9B8FBB\n- **Secondary:*\\* Audio waveform colors, status indicators (listening/processing/speaking), success/error tones\n\n## Effects & Animation\nVoice waveform visualization, listening pulse, processing spinner, speak animation, smooth transitions\n\n## Best For\n- Voice assistants\n- accessibility apps\n- hands-free tools\n- smart home\n- automotive UI\n- cooking apps\n\n## Do Not Use For\n- Visual-heavy content\n- data entry\n- complex forms\n- noisy environments\n\n## Accessibility\n✓ Excellent\n\n## Implementation Checklist\n- [ ] Voice recognition works\n- [ ] Visual feedback clear\n- [ ] Listening state obvious\n- [ ] Speaking animation smooth\n- [ ] Fallback UI provided\n- [ ] Accessibility excellent\n\n## CSS Variables\n--listening-color: #6B8FAF, --speaking-color: #22C55E, --waveform-height: 60px, --pulse-duration: 1.5s, --indicator-size: 24px, --voice-accent: #9B8FBB",
-      "tags": [
-        "ui-style",
-        "voice-first-multimodal",
-        "design-inspiration",
-        "Voice UI",
-        "multimodal",
-        "audio feedback",
-        "conversational",
-        "hands-free"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-y2k-aesthetic",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Y2K Aesthetic UI Style",
-      "severity": "suggestion",
-      "description": "# Y2K Aesthetic UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* Y2K 2000s\n- **Complexity:*\\* Medium\n- **Performance:*\\* Good\n\n## Keywords\nNeon pink, chrome, metallic, bubblegum, iridescent, glossy, retro-futurism, 2000s, futuristic nostalgia\n\n## Colors\n- **Primary:** #FF69B4 (Hot Pink), #00FFFF (Cyan), #C0C0C0 (Silver), #9400D3 (Purple)\n- **Secondary:*\\* Metallic gradients, glossy overlays, iridescent effects, chrome textures\n\n## Effects & Animation\nlinear-gradient metallic, glossy buttons, 3D chrome effects, glow animations, bubble shapes\n\n## Best For\n- Fashion brands\n- music platforms\n- Gen Z brands\n- nostalgia marketing\n- entertainment\n- youth-focused\n\n## Do Not Use For\n- B2B enterprise\n- healthcare\n- finance\n- conservative industries\n- elderly users\n\n## Accessibility\n⚠ Check contrast\n\n## Implementation Checklist\n- [ ] Neon colors balanced\n- [ ] Chrome effects visible\n- [ ] Glossy buttons styled\n- [ ] Bubble shapes decorative\n- [ ] Sparkle animations\n- [ ] Retro fonts loaded\n\n## CSS Variables\n--neon-pink: #FF69B4, --neon-cyan: #00FFFF, --chrome-silver: #C0C0C0, --glossy-gradient: linear-gradient(180deg, white 0%, transparent 50%), --glow-blur: 10px",
-      "tags": [
-        "ui-style",
-        "y2k-aesthetic",
-        "design-inspiration",
-        "Neon pink",
-        "chrome",
-        "metallic",
-        "bubblegum",
-        "iridescent"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-style-zero-interface",
-      "type": "pattern",
-      "domain": "design",
-      "title": "Zero Interface UI Style",
-      "severity": "suggestion",
-      "description": "# Zero Interface UI Style\n\n## Overview\n- **Type:*\\* General\n- **Era:*\\* 2020s AI-Era\n- **Complexity:*\\* Low\n- **Performance:*\\* Excellent\n\n## Keywords\nMinimal visible UI, voice-first, gesture-based, AI-driven, invisible controls, predictive, context-aware, ambient\n\n## Colors\n- **Primary:*\\* Neutral backgrounds: Soft white #FAFAFA, light grey #F0F0F0, warm off-white #F5F1E8\n- **Secondary:*\\* Subtle feedback: light green, light red, minimal UI elements, soft accents\n\n## Effects & Animation\nVoice recognition UI, gesture detection, AI predictions (smooth reveal), progressive disclosure, smart suggestions\n\n## Best For\n- Voice assistants\n- AI platforms\n- future-forward UX\n- smart home\n- contextual computing\n- ambient experiences\n\n## Do Not Use For\n- Complex workflows\n- data-entry heavy\n- traditional systems\n- legacy support\n- explicit control\n\n## Accessibility\n✓ Excellent\n\n## Implementation Checklist\n- [ ] Voice commands responsive\n- [ ] Gesture detection active\n- [ ] AI predictions hidden/revealed\n- [ ] Progressive disclosure working\n- [ ] Minimal visible UI\n- [ ] Smart suggestions contextual\n\n## CSS Variables\n--voice-ui: enabled, --gesture-detection: active, --ai-predictions: smart, --progressive-disclosure: true, --visible-ui: minimal, --context-aware: true",
-      "tags": [
-        "ui-style",
-        "zero-interface",
-        "design-inspiration",
-        "Minimal visible UI",
-        "voice-first",
-        "gesture-based",
-        "AI-driven",
-        "invisible controls"
-      ],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-accessibility",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: Accessibility",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: Accessibility\n\n## Color Contrast\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nText must be readable against background\n\n**Do:*\\* Minimum 4.5:1 ratio for normal text\n**Don't:*\\* Low contrast text\n\nGood: `#333 on white (7:1)`\nBad: `#999 on white (2.8:1)`\n\n## Color Only\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nDon't convey information by color alone\n\n**Do:*\\* Use icons/text in addition to color\n**Don't:*\\* Red/green only for error/success\n\nGood: `Red text + error icon`\nBad: `Red border only for error`\n\n## Alt Text\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nImages need text alternatives\n\n**Do:*\\* Descriptive alt text for meaningful images\n**Don't:*\\* Empty or missing alt attributes\n\nGood: `alt='Dog playing in park'`\nBad: `alt='' for content images`\n\n## Heading Hierarchy\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nScreen readers use headings for navigation\n\n**Do:*\\* Use sequential heading levels h1-h6\n**Don't:*\\* Skip heading levels or misuse for styling\n\nGood: `h1 then h2 then h3`\nBad: `h1 then h4`\n\n## ARIA Labels\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nInteractive elements need accessible names\n\n**Do:*\\* Add aria-label for icon-only buttons\n**Don't:*\\* Icon buttons without labels\n\nGood: `aria-label='Close menu'`\nBad: `<button><Icon/></button>`\n\n## Keyboard Navigation\n\n- **Platform:*\\* Web\n- **Severity:*\\* High\n\nAll functionality accessible via keyboard\n\n**Do:*\\* Tab order matches visual order\n**Don't:*\\* Keyboard traps or illogical tab order\n\nGood: `tabIndex for custom order`\nBad: `Unreachable elements`\n\n## Screen Reader\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nContent should make sense when read aloud\n\n**Do:*\\* Use semantic HTML and ARIA properly\n**Don't:*\\* Div soup with no semantics\n\nGood: `<nav> <main> <article>`\nBad: `<div> for everything`\n\n## Form Labels\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nInputs must have associated labels\n\n**Do:*\\* Use label with for attribute or wrap input\n**Don't:*\\* Placeholder-only inputs\n\nGood: `<label for='email'>`\nBad: `placeholder='Email' only`\n\n## Error Messages\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nError messages must be announced\n\n**Do:*\\* Use aria-live or role=alert for errors\n**Don't:*\\* Visual-only error indication\n\nGood: `role='alert'`\nBad: `Red border only`\n\n## Skip Links\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nAllow keyboard users to skip navigation\n\n**Do:*\\* Provide skip to main content link\n**Don't:*\\* No skip link on nav-heavy pages\n\nGood: `Skip to main content link`\nBad: `100 tabs to reach content`\n\n## Motion Sensitivity\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nParallax/Scroll-jacking causes nausea\n\n**Do:*\\* Respect prefers-reduced-motion\n**Don't:*\\* Force scroll effects\n\nGood: `@media (prefers-reduced-motion)`\nBad: `ScrollTrigger.create()`",
-      "tags": ["ux-guidelines", "accessibility", "best-practices"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-ai-interaction",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: AI Interaction",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: AI Interaction\n\n## Disclaimer\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nUsers need to know they talk to AI\n\n**Do:*\\* Clearly label AI generated content\n**Don't:*\\* Present AI as human\n\nGood: `AI Assistant label`\nBad: `Fake human name without label`\n\n## Streaming\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nWaiting for full text is slow\n\n**Do:*\\* Stream text response token by token\n**Don't:*\\* Show loading spinner for 10s+\n\nGood: `Typewriter effect`\nBad: `Spinner until 100% complete`\n\n## Feedback Loop\n\n- **Platform:*\\* All\n- **Severity:*\\* Low\n\nAI needs user feedback to improve\n\n**Do:*\\* Thumps up/down or 'Regenerate'\n**Don't:*\\* Static output only\n\nGood: `Feedback component`\nBad: `Read-only text`",
-      "tags": ["ux-guidelines", "ai-interaction", "best-practices"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-animation",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: Animation",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: Animation\n\n## Excessive Motion\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nToo many animations cause distraction and motion sickness\n\n**Do:*\\* Animate 1-2 key elements per view maximum\n**Don't:*\\* Animate everything that moves\n\nGood: `Single hero animation`\nBad: `animate-bounce on 5+ elements`\n\n## Duration Timing\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nAnimations should feel responsive not sluggish\n\n**Do:*\\* Use 150-300ms for micro-interactions\n**Don't:*\\* Use animations longer than 500ms for UI\n\nGood: `transition-all duration-200`\nBad: `duration-1000`\n\n## Reduced Motion\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nRespect user's motion preferences\n\n**Do:*\\* Check prefers-reduced-motion media query\n**Don't:*\\* Ignore accessibility motion settings\n\nGood: `@media (prefers-reduced-motion: reduce)`\nBad: `No motion query check`\n\n## Loading States\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nShow feedback during async operations\n\n**Do:*\\* Use skeleton screens or spinners\n**Don't:*\\* Leave UI frozen with no feedback\n\nGood: `animate-pulse skeleton`\nBad: `Blank screen while loading`\n\n## Hover vs Tap\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nHover effects don't work on touch devices\n\n**Do:*\\* Use click/tap for primary interactions\n**Don't:*\\* Rely only on hover for important actions\n\nGood: `onClick handler`\nBad: `onMouseEnter only`\n\n## Continuous Animation\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nInfinite animations are distracting\n\n**Do:*\\* Use for loading indicators only\n**Don't:*\\* Use for decorative elements\n\nGood: `animate-spin on loader`\nBad: `animate-bounce on icons`\n\n## Transform Performance\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nSome CSS properties trigger expensive repaints\n\n**Do:*\\* Use transform and opacity for animations\n**Don't:*\\* Animate width/height/top/left properties\n\nGood: `transform: translateY()`\nBad: `top: 10px animation`\n\n## Easing Functions\n\n- **Platform:*\\* All\n- **Severity:*\\* Low\n\nLinear motion feels robotic\n\n**Do:*\\* Use ease-out for entering ease-in for exiting\n**Don't:*\\* Use linear for UI transitions\n\nGood: `ease-out`\nBad: `linear`",
-      "tags": ["ux-guidelines", "animation", "best-practices"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-content",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: Content",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: Content\n\n## Truncation\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nHandle long content gracefully\n\n**Do:*\\* Truncate with ellipsis and expand option\n**Don't:*\\* Overflow or broken layout\n\nGood: `line-clamp-2 with expand`\nBad: `Overflow or cut off`\n\n## Date Formatting\n\n- **Platform:*\\* All\n- **Severity:*\\* Low\n\nUse locale-appropriate date formats\n\n**Do:*\\* Use relative or locale-aware dates\n**Don't:*\\* Ambiguous date formats\n\nGood: `2 hours ago or locale format`\nBad: `01/02/03`\n\n## Number Formatting\n\n- **Platform:*\\* All\n- **Severity:*\\* Low\n\nFormat large numbers for readability\n\n**Do:*\\* Use thousand separators or abbreviations\n**Don't:*\\* Long unformatted numbers\n\nGood: `1.2K or 1,234`\nBad: `1234567`\n\n## Placeholder Content\n\n- **Platform:*\\* All\n- **Severity:*\\* Low\n\nShow realistic placeholders during dev\n\n**Do:*\\* Use realistic sample data\n**Don't:*\\* Lorem ipsum everywhere\n\nGood: `Real sample content`\nBad: `Lorem ipsum`",
-      "tags": ["ux-guidelines", "content", "best-practices"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-data-entry",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: Data Entry",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: Data Entry\n\n## Bulk Actions\n\n- **Platform:*\\* Web\n- **Severity:*\\* Low\n\nEditing one by one is tedious\n\n**Do:*\\* Allow multi-select and bulk edit\n**Don't:*\\* Single row actions only\n\nGood: `Checkbox column + Action bar`\nBad: `Repeated actions per row`",
-      "tags": ["ux-guidelines", "data-entry", "best-practices"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-feedback",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: Feedback",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: Feedback\n\n## Loading Indicators\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nShow system status during waits\n\n**Do:*\\* Show spinner/skeleton for operations > 300ms\n**Don't:*\\* No feedback during loading\n\nGood: `Skeleton or spinner`\nBad: `Frozen UI`\n\n## Empty States\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nGuide users when no content exists\n\n**Do:*\\* Show helpful message and action\n**Don't:*\\* Blank empty screens\n\nGood: `No items yet. Create one!`\nBad: `Empty white space`\n\n## Error Recovery\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nHelp users recover from errors\n\n**Do:*\\* Provide clear next steps\n**Don't:*\\* Error without recovery path\n\nGood: `Try again button + help link`\nBad: `Error message only`\n\n## Progress Indicators\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nShow progress for multi-step processes\n\n**Do:*\\* Step indicators or progress bar\n**Don't:*\\* No indication of progress\n\nGood: `Step 2 of 4 indicator`\nBad: `No step information`\n\n## Toast Notifications\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nTransient messages for non-critical info\n\n**Do:*\\* Auto-dismiss after 3-5 seconds\n**Don't:*\\* Toasts that never disappear\n\nGood: `Auto-dismiss toast`\nBad: `Persistent toast`\n\n## Confirmation Messages\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nConfirm successful actions\n\n**Do:*\\* Brief success message\n**Don't:*\\* Silent success\n\nGood: `Saved successfully toast`\nBad: `No confirmation`",
-      "tags": ["ux-guidelines", "feedback", "best-practices"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-forms",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: Forms",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: Forms\n\n## Input Labels\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nEvery input needs a visible label\n\n**Do:*\\* Always show label above or beside input\n**Don't:*\\* Placeholder as only label\n\nGood: `<label>Email</label><input>`\nBad: `placeholder='Email' only`\n\n## Error Placement\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nErrors should appear near the problem\n\n**Do:*\\* Show error below related input\n**Don't:*\\* Single error message at top of form\n\nGood: `Error under each field`\nBad: `All errors at form top`\n\n## Inline Validation\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nValidate as user types or on blur\n\n**Do:*\\* Validate on blur for most fields\n**Don't:*\\* Validate only on submit\n\nGood: `onBlur validation`\nBad: `Submit-only validation`\n\n## Input Types\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nUse appropriate input types\n\n**Do:*\\* Use email tel number url etc\n**Don't:*\\* Text input for everything\n\nGood: `type='email'`\nBad: `type='text' for email`\n\n## Autofill Support\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nHelp browsers autofill correctly\n\n**Do:*\\* Use autocomplete attribute properly\n**Don't:*\\* Block or ignore autofill\n\nGood: `autocomplete='email'`\nBad: `autocomplete='off' everywhere`\n\n## Required Indicators\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nMark required fields clearly\n\n**Do:*\\* Use asterisk or (required) text\n**Don't:*\\* No indication of required fields\n\nGood: `\\* required indicator`\nBad: `Guess which are required`\n\n## Password Visibility\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nLet users see password while typing\n\n**Do:*\\* Toggle to show/hide password\n**Don't:*\\* No visibility toggle\n\nGood: `Show/hide password button`\nBad: `Password always hidden`\n\n## Submit Feedback\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nConfirm form submission status\n\n**Do:*\\* Show loading then success/error state\n**Don't:*\\* No feedback after submit\n\nGood: `Loading -> Success message`\nBad: `Button click with no response`\n\n## Input Affordance\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nInputs should look interactive\n\n**Do:*\\* Use distinct input styling\n**Don't:*\\* Inputs that look like plain text\n\nGood: `Border/background on inputs`\nBad: `Borderless inputs`\n\n## Mobile Keyboards\n\n- **Platform:*\\* Mobile\n- **Severity:*\\* Medium\n\nShow appropriate keyboard for input type\n\n**Do:*\\* Use inputmode attribute\n**Don't:*\\* Default keyboard for all inputs\n\nGood: `inputmode='numeric'`\nBad: `Text keyboard for numbers`",
-      "tags": ["ux-guidelines", "forms", "best-practices"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-interaction",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: Interaction",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: Interaction\n\n## Focus States\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nKeyboard users need visible focus indicators\n\n**Do:*\\* Use visible focus rings on interactive elements\n**Don't:*\\* Remove focus outline without replacement\n\nGood: `focus:ring-2 focus:ring-blue-500`\nBad: `outline-none without alternative`\n\n## Hover States\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nVisual feedback on interactive elements\n\n**Do:*\\* Change cursor and add subtle visual change\n**Don't:*\\* No hover feedback on clickable elements\n\nGood: `hover:bg-gray-100 cursor-pointer`\nBad: `No hover style`\n\n## Active States\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nShow immediate feedback on press/click\n\n**Do:*\\* Add pressed/active state visual change\n**Don't:*\\* No feedback during interaction\n\nGood: `active:scale-95`\nBad: `No active state`\n\n## Disabled States\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nClearly indicate non-interactive elements\n\n**Do:*\\* Reduce opacity and change cursor\n**Don't:*\\* Confuse disabled with normal state\n\nGood: `opacity-50 cursor-not-allowed`\nBad: `Same style as enabled`\n\n## Loading Buttons\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nPrevent double submission during async actions\n\n**Do:*\\* Disable button and show loading state\n**Don't:*\\* Allow multiple clicks during processing\n\nGood: `disabled={loading} spinner`\nBad: `Button clickable while loading`\n\n## Error Feedback\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nUsers need to know when something fails\n\n**Do:*\\* Show clear error messages near problem\n**Don't:*\\* Silent failures with no feedback\n\nGood: `Red border + error message`\nBad: `No indication of error`\n\n## Success Feedback\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nConfirm successful actions to users\n\n**Do:*\\* Show success message or visual change\n**Don't:*\\* No confirmation of completed action\n\nGood: `Toast notification or checkmark`\nBad: `Action completes silently`\n\n## Confirmation Dialogs\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nPrevent accidental destructive actions\n\n**Do:*\\* Confirm before delete/irreversible actions\n**Don't:*\\* Delete without confirmation\n\nGood: `Are you sure modal`\nBad: `Direct delete on click`",
-      "tags": ["ux-guidelines", "interaction", "best-practices"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-layout",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: Layout",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: Layout\n\n## Z-Index Management\n\n- **Platform:*\\* Web\n- **Severity:*\\* High\n\nStacking context conflicts cause hidden elements\n\n**Do:*\\* Define z-index scale system (10 20 30 50)\n**Don't:*\\* Use arbitrary large z-index values\n\nGood: `z-10 z-20 z-50`\nBad: `z-[9999]`\n\n## Overflow Hidden\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nHidden overflow can clip important content\n\n**Do:*\\* Test all content fits within containers\n**Don't:*\\* Blindly apply overflow-hidden\n\nGood: `overflow-auto with scroll`\nBad: `overflow-hidden truncating content`\n\n## Fixed Positioning\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nFixed elements can overlap or be inaccessible\n\n**Do:*\\* Account for safe areas and other fixed elements\n**Don't:*\\* Stack multiple fixed elements carelessly\n\nGood: `Fixed nav + fixed bottom with gap`\nBad: `Multiple overlapping fixed elements`\n\n## Stacking Context\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nNew stacking contexts reset z-index\n\n**Do:*\\* Understand what creates new stacking context\n**Don't:*\\* Expect z-index to work across contexts\n\nGood: `Parent with z-index isolates children`\nBad: `z-index: 9999 not working`\n\n## Content Jumping\n\n- **Platform:*\\* Web\n- **Severity:*\\* High\n\nLayout shift when content loads is jarring\n\n**Do:*\\* Reserve space for async content\n**Don't:*\\* Let images/content push layout around\n\nGood: `aspect-ratio or fixed height`\nBad: `No dimensions on images`\n\n## Viewport Units\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\n100vh can be problematic on mobile browsers\n\n**Do:*\\* Use dvh or account for mobile browser chrome\n**Don't:*\\* Use 100vh for full-screen mobile layouts\n\nGood: `min-h-dvh or min-h-screen`\nBad: `h-screen on mobile`\n\n## Container Width\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nContent too wide is hard to read\n\n**Do:*\\* Limit max-width for text content (65-75ch)\n**Don't:*\\* Let text span full viewport width\n\nGood: `max-w-prose or max-w-3xl`\nBad: `Full width paragraphs`",
-      "tags": ["ux-guidelines", "layout", "best-practices"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-navigation",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: Navigation",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: Navigation\n\n## Smooth Scroll\n\n- **Platform:*\\* Web\n- **Severity:*\\* High\n\nAnchor links should scroll smoothly to target section\n\n**Do:*\\* Use scroll-behavior: smooth on html element\n**Don't:*\\* Jump directly without transition\n\nGood: `html { scroll-behavior: smooth; }`\nBad: `<a href='#section'> without CSS`\n\n## Sticky Navigation\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nFixed nav should not obscure content\n\n**Do:*\\* Add padding-top to body equal to nav height\n**Don't:*\\* Let nav overlap first section content\n\nGood: `pt-20 (if nav is h-20)`\nBad: `No padding compensation`\n\n## Active State\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nCurrent page/section should be visually indicated\n\n**Do:*\\* Highlight active nav item with color/underline\n**Don't:*\\* No visual feedback on current location\n\nGood: `text-primary border-b-2`\nBad: `All links same style`\n\n## Back Button\n\n- **Platform:*\\* Mobile\n- **Severity:*\\* High\n\nUsers expect back to work predictably\n\n**Do:*\\* Preserve navigation history properly\n**Don't:*\\* Break browser/app back button behavior\n\nGood: `history.pushState()`\nBad: `location.replace()`\n\n## Deep Linking\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nURLs should reflect current state for sharing\n\n**Do:*\\* Update URL on state/view changes\n**Don't:*\\* Static URLs for dynamic content\n\nGood: `Use query params or hash`\nBad: `Single URL for all states`\n\n## Breadcrumbs\n\n- **Platform:*\\* Web\n- **Severity:*\\* Low\n\nShow user location in site hierarchy\n\n**Do:*\\* Use for sites with 3+ levels of depth\n**Don't:*\\* Use for flat single-level sites\n\nGood: `Home > Category > Product`\nBad: `Only on deep nested pages`",
-      "tags": ["ux-guidelines", "navigation", "best-practices"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-onboarding",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: Onboarding",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: Onboarding\n\n## User Freedom\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nUsers should be able to skip tutorials\n\n**Do:*\\* Provide Skip and Back buttons\n**Don't:*\\* Force linear unskippable tour\n\nGood: `Skip Tutorial button`\nBad: `Locked overlay until finished`",
-      "tags": ["ux-guidelines", "onboarding", "best-practices"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-performance",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: Performance",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: Performance\n\n## Image Optimization\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nLarge images slow page load\n\n**Do:*\\* Use appropriate size and format (WebP)\n**Don't:*\\* Unoptimized full-size images\n\nGood: `srcset with multiple sizes`\nBad: `4000px image for 400px display`\n\n## Lazy Loading\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nLoad content as needed\n\n**Do:*\\* Lazy load below-fold images and content\n**Don't:*\\* Load everything upfront\n\nGood: `loading='lazy'`\nBad: `All images eager load`\n\n## Code Splitting\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nLarge bundles slow initial load\n\n**Do:*\\* Split code by route/feature\n**Don't:*\\* Single large bundle\n\nGood: `dynamic import()`\nBad: `All code in main bundle`\n\n## Caching\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nRepeat visits should be fast\n\n**Do:*\\* Set appropriate cache headers\n**Don't:*\\* No caching strategy\n\nGood: `Cache-Control headers`\nBad: `Every request hits server`\n\n## Font Loading\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nWeb fonts can block rendering\n\n**Do:*\\* Use font-display swap or optional\n**Don't:*\\* Invisible text during font load\n\nGood: `font-display: swap`\nBad: `FOIT (Flash of Invisible Text)`\n\n## Third Party Scripts\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nExternal scripts can block rendering\n\n**Do:*\\* Load non-critical scripts async/defer\n**Don't:*\\* Synchronous third-party scripts\n\nGood: `async or defer attribute`\nBad: `<script src='...'> in head`\n\n## Bundle Size\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nLarge JavaScript slows interaction\n\n**Do:*\\* Monitor and minimize bundle size\n**Don't:*\\* Ignore bundle size growth\n\nGood: `Bundle analyzer`\nBad: `No size monitoring`\n\n## Render Blocking\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nCSS/JS can block first paint\n\n**Do:*\\* Inline critical CSS defer non-critical\n**Don't:*\\* Large blocking CSS files\n\nGood: `Critical CSS inline`\nBad: `All CSS in head`",
-      "tags": ["ux-guidelines", "performance", "best-practices"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-responsive",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: Responsive",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: Responsive\n\n## Mobile First\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nDesign for mobile then enhance for larger\n\n**Do:*\\* Start with mobile styles then add breakpoints\n**Don't:*\\* Desktop-first causing mobile issues\n\nGood: `Default mobile + md: lg: xl:`\nBad: `Desktop default + max-width queries`\n\n## Breakpoint Testing\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nTest at all common screen sizes\n\n**Do:*\\* Test at 320 375 414 768 1024 1440\n**Don't:*\\* Only test on your device\n\nGood: `Multiple device testing`\nBad: `Single device development`\n\n## Touch Friendly\n\n- **Platform:*\\* Web\n- **Severity:*\\* High\n\nMobile layouts need touch-sized targets\n\n**Do:*\\* Increase touch targets on mobile\n**Don't:*\\* Same tiny buttons on mobile\n\nGood: `Larger buttons on mobile`\nBad: `Desktop-sized targets on mobile`\n\n## Readable Font Size\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nText must be readable on all devices\n\n**Do:*\\* Minimum 16px body text on mobile\n**Don't:*\\* Tiny text on mobile\n\nGood: `text-base or larger`\nBad: `text-xs for body text`\n\n## Viewport Meta\n\n- **Platform:*\\* Web\n- **Severity:*\\* High\n\nSet viewport for mobile devices\n\n**Do:*\\* Use width=device-width initial-scale=1\n**Don't:*\\* Missing or incorrect viewport\n\nGood: `<meta name='viewport'...>`\nBad: `No viewport meta tag`\n\n## Horizontal Scroll\n\n- **Platform:*\\* Web\n- **Severity:*\\* High\n\nAvoid horizontal scrolling\n\n**Do:*\\* Ensure content fits viewport width\n**Don't:*\\* Content wider than viewport\n\nGood: `max-w-full overflow-x-hidden`\nBad: `Horizontal scrollbar on mobile`\n\n## Image Scaling\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nImages should scale with container\n\n**Do:*\\* Use max-width: 100% on images\n**Don't:*\\* Fixed width images overflow\n\nGood: `max-w-full h-auto`\nBad: `width='800' fixed`\n\n## Table Handling\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nTables can overflow on mobile\n\n**Do:*\\* Use horizontal scroll or card layout\n**Don't:*\\* Wide tables breaking layout\n\nGood: `overflow-x-auto wrapper`\nBad: `Table overflows viewport`",
-      "tags": ["ux-guidelines", "responsive", "best-practices"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-search",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: Search",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: Search\n\n## Autocomplete\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nHelp users find results faster\n\n**Do:*\\* Show predictions as user types\n**Don't:*\\* Require full type and enter\n\nGood: `Debounced fetch + dropdown`\nBad: `No suggestions`\n\n## No Results\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nDead ends frustrate users\n\n**Do:*\\* Show 'No results' with suggestions\n**Don't:*\\* Blank screen or '0 results'\n\nGood: `Try searching for X instead`\nBad: `No results found.`",
-      "tags": ["ux-guidelines", "search", "best-practices"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-spatial-ui",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: Spatial UI",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: Spatial UI\n\n## Gaze Hover\n\n- **Platform:*\\* VisionOS\n- **Severity:*\\* High\n\nElements should respond to eye tracking before pinch\n\n**Do:*\\* Scale/highlight element on look\n**Don't:*\\* Static element until pinch\n\nGood: `hoverEffect()`\nBad: `onTap only`\n\n## Depth Layering\n\n- **Platform:*\\* VisionOS\n- **Severity:*\\* Medium\n\nUI needs Z-depth to separate content from environment\n\n**Do:*\\* Use glass material and z-offset\n**Don't:*\\* Flat opaque panels blocking view\n\nGood: `.glassBackgroundEffect()`\nBad: `bg-white`",
-      "tags": ["ux-guidelines", "spatial-ui", "best-practices"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-sustainability",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: Sustainability",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: Sustainability\n\n## Auto-Play Video\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nVideo consumes massive data and energy\n\n**Do:*\\* Click-to-play or pause when off-screen\n**Don't:*\\* Auto-play high-res video loops\n\nGood: `playsInline muted preload='none'`\nBad: `autoplay loop`\n\n## Asset Weight\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nHeavy 3D/Image assets increase carbon footprint\n\n**Do:*\\* Compress and lazy load 3D models\n**Don't:*\\* Load 50MB textures\n\nGood: `Draco compression`\nBad: `Raw .obj files`",
-      "tags": ["ux-guidelines", "sustainability", "best-practices"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-touch",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: Touch",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: Touch\n\n## Touch Target Size\n\n- **Platform:*\\* Mobile\n- **Severity:*\\* High\n\nSmall buttons are hard to tap accurately\n\n**Do:*\\* Minimum 44x44px touch targets\n**Don't:*\\* Tiny clickable areas\n\nGood: `min-h-[44px] min-w-[44px]`\nBad: `w-6 h-6 buttons`\n\n## Touch Spacing\n\n- **Platform:*\\* Mobile\n- **Severity:*\\* Medium\n\nAdjacent touch targets need adequate spacing\n\n**Do:*\\* Minimum 8px gap between touch targets\n**Don't:*\\* Tightly packed clickable elements\n\nGood: `gap-2 between buttons`\nBad: `gap-0 or gap-1`\n\n## Gesture Conflicts\n\n- **Platform:*\\* Mobile\n- **Severity:*\\* Medium\n\nCustom gestures can conflict with system\n\n**Do:*\\* Avoid horizontal swipe on main content\n**Don't:*\\* Override system gestures\n\nGood: `Vertical scroll primary`\nBad: `Horizontal swipe carousel only`\n\n## Tap Delay\n\n- **Platform:*\\* Mobile\n- **Severity:*\\* Medium\n\n300ms tap delay feels laggy\n\n**Do:*\\* Use touch-action CSS or fastclick\n**Don't:*\\* Default mobile tap handling\n\nGood: `touch-action: manipulation`\nBad: `No touch optimization`\n\n## Pull to Refresh\n\n- **Platform:*\\* Mobile\n- **Severity:*\\* Low\n\nAccidental refresh is frustrating\n\n**Do:*\\* Disable where not needed\n**Don't:*\\* Enable by default everywhere\n\nGood: `overscroll-behavior: contain`\nBad: `Default overscroll`\n\n## Haptic Feedback\n\n- **Platform:*\\* Mobile\n- **Severity:*\\* Low\n\nTactile feedback improves interaction feel\n\n**Do:*\\* Use for confirmations and important actions\n**Don't:*\\* Overuse vibration feedback\n\nGood: `navigator.vibrate(10)`\nBad: `Vibrate on every tap`",
-      "tags": ["ux-guidelines", "touch", "best-practices"],
-      "tier": "agent"
-    },
-    {
-      "id": "uipro-ux-typography",
-      "type": "pattern",
-      "domain": "design",
-      "title": "UX Guidelines: Typography",
-      "severity": "suggestion",
-      "description": "# UX Guidelines: Typography\n\n## Line Height\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nAdequate line height improves readability\n\n**Do:*\\* Use 1.5-1.75 for body text\n**Don't:*\\* Cramped or excessive line height\n\nGood: `leading-relaxed (1.625)`\nBad: `leading-none (1)`\n\n## Line Length\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nLong lines are hard to read\n\n**Do:*\\* Limit to 65-75 characters per line\n**Don't:*\\* Full-width text on large screens\n\nGood: `max-w-prose`\nBad: `Full viewport width text`\n\n## Font Size Scale\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nConsistent type hierarchy aids scanning\n\n**Do:*\\* Use consistent modular scale\n**Don't:*\\* Random font sizes\n\nGood: `Type scale (12 14 16 18 24 32)`\nBad: `Arbitrary sizes`\n\n## Font Loading\n\n- **Platform:*\\* Web\n- **Severity:*\\* Medium\n\nFonts should load without layout shift\n\n**Do:*\\* Reserve space with fallback font\n**Don't:*\\* Layout shift when fonts load\n\nGood: `font-display: swap + similar fallback`\nBad: `No fallback font`\n\n## Contrast Readability\n\n- **Platform:*\\* All\n- **Severity:*\\* High\n\nBody text needs good contrast\n\n**Do:*\\* Use darker text on light backgrounds\n**Don't:*\\* Gray text on gray background\n\nGood: `text-gray-900 on white`\nBad: `text-gray-400 on gray-100`\n\n## Heading Clarity\n\n- **Platform:*\\* All\n- **Severity:*\\* Medium\n\nHeadings should stand out from body\n\n**Do:*\\* Clear size/weight difference\n**Don't:*\\* Headings similar to body text\n\nGood: `Bold + larger size`\nBad: `Same size as body`",
-      "tags": ["ux-guidelines", "typography", "best-practices"],
-      "tier": "agent"
-    }
-  ]
-}