codymaster 4.1.4 → 4.4.1

package/skills/cm-ux-master/data/animation.csv

@@ -0,0 +1,31 @@
+Category,Pattern,Keywords,Description,Do,Don't,CSS_Example,Library,Severity,Platform
+Micro-interaction,Button Press Feedback,button press click tap feedback,Provide immediate visual feedback when buttons are pressed,Scale down slightly on active state + color shift,No visual change on button press,.btn:active { transform: scale(0.97); },None (CSS only),High,All
+Micro-interaction,Hover State Transition,hover transition color opacity,Smooth color/opacity transitions on hover for interactive elements,Use transition-colors duration-200 ease,Instant color changes without transition,.card:hover { opacity: 0.9; transition: all 200ms; },None (CSS only),Medium,Web
+Micro-interaction,Toggle Switch Animation,toggle switch on off animate,Animate toggle switches between states with smooth sliding,Smooth slide with spring-like easing + color change,Instant state change without animation,.toggle-knob { transition: transform 300ms cubic-bezier(0.4 0 0.2 1); },Framer Motion,Medium,All
+Micro-interaction,Input Focus Glow,input focus ring glow border,Highlight input fields on focus with glowing border effect,Use box-shadow with primary color at low opacity,Only change border-color without glow,.input:focus { box-shadow: 0 0 0 3px rgba(37 99 235 / 0.2); },None (CSS only),High,Web
+Micro-interaction,Ripple Effect,ripple click material touch,Material-style ripple effect on touch/click targets,Use CSS pseudo-element or library for ripple spreading outward,Heavy JS-based ripple that blocks main thread,.btn::after { content:''; position:absolute; background:rgba(255 255 255 / 0.3); },Material UI,Low,Web Mobile
+Loading,Skeleton Loader,skeleton loading placeholder shimmer pulse,Show content-shaped placeholders while data loads,Match exact layout shape of loaded content + pulse animation,Generic spinner for content-heavy pages,.skeleton { animation: pulse 2s infinite; background: linear-gradient(90deg #f0f0f0 #e0e0e0 #f0f0f0); },None (CSS only),High,All
+Loading,Progress Bar,progress loading bar determinate,Show determinate progress for known-length operations,Use thin bar at top of page + percentage indication,Indeterminate spinner for operations with known progress,.progress-bar { transition: width 300ms ease; },NProgress,Medium,Web
+Loading,Spinner,spinner loading rotate indefinite,Rotating indicator for short indeterminate waits (<3s),Use lightweight CSS spinner with consistent sizing,Complex lottie animation for simple loading,.spinner { animation: spin 1s linear infinite; border: 3px solid; border-top-color: transparent; },None (CSS only),Medium,All
+Loading,Content Fade-in,fade in stagger content appear,Fade content in after loading completes,Stagger children with increasing delay for natural feel,All content appearing at once without transition,.item { animation: fadeIn 300ms ease forwards; animation-delay: calc(var(--i) * 50ms); },Framer Motion,Low,All
+Loading,Pull to Refresh,pull refresh mobile gesture,Pull-down gesture to refresh content on mobile,Show progress indicator during pull + snap-back animation,Refresh without visual feedback,Container with overscroll-behavior and custom indicator,React Native RefreshControl,Medium,Mobile
+Transition,Page Transition,page transition route navigate,Animate between page/route changes,Use shared element transitions where possible + 200-400ms duration,No transition between pages or >500ms transitions,View Transitions API: document.startViewTransition(),Framer Motion / View Transitions API,Medium,Web
+Transition,Modal Enter/Exit,modal dialog enter exit appear,Animate modal appearance and dismissal,Fade overlay + scale-up content from center,Instant appear/disappear of modals,.modal { animation: scaleIn 200ms ease; } @keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } },Radix UI / Headless UI,Medium,Web
+Transition,Slide Panel,slide panel drawer sidebar,Slide-in panels from edge of screen,Translate from off-screen edge + fade backdrop,Jump-cut appearance of side panels,.panel { transform: translateX(-100%); transition: transform 300ms ease; },None (CSS only),Medium,All
+Transition,Accordion Expand,accordion expand collapse height,Smooth height animation for expandable content,Use grid-template-rows: 0fr → 1fr for smooth height or max-height transition,display:none toggling without transition,.accordion-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms; },None (CSS only),Medium,Web
+Transition,Toast Notification,toast notification snackbar appear disappear,Animate toast entry/exit from edge of screen,Slide in from edge + auto-dismiss with progress bar,Toasts that appear without animation or block interaction,.toast { animation: slideInRight 300ms ease translateX(100%) to translateX(0); },Sonner / React Hot Toast,Low,Web
+Scroll,Scroll-triggered Reveal,scroll reveal intersection observer animate,Reveal elements as they enter the viewport,Use IntersectionObserver + CSS animation classes,Heavy scroll event listeners for animations,IntersectionObserver with threshold 0.1 + .reveal { opacity:0; transform:translateY(20px); },None (vanilla JS),Medium,Web
+Scroll,Parallax Effect,parallax scroll depth layer,Create depth illusion with different scroll speeds,Use transform: translateZ() with perspective or scroll-timeline,JavaScript-based parallax that causes jank,.parallax { transform: translateZ(-1px) scale(2); },None (CSS only),Low,Web
+Scroll,Sticky Header Shrink,sticky header shrink scroll compact,Shrink header height on scroll for more content space,Smooth height transition + reduce padding on scroll,Instant height change or content jump,.header.scrolled { height: 48px; padding: 8px 16px; transition: all 200ms; },None (CSS/JS),Medium,Web
+Scroll,Progress Indicator,scroll progress reading indicator,Show reading/scroll progress at top of page,Thin bar at top that fills based on scroll position,Chunky progress bar that takes too much space,.progress { width: calc(var(--scroll) * 100%); height: 3px; },None (CSS/JS),Low,Web
+Scroll,Infinite Scroll Loading,infinite scroll lazy load paginate,Load more content as user scrolls to bottom,Show loading indicator at bottom + intersection observer trigger,Load all data at once or no loading indicator,IntersectionObserver on sentinel element at bottom,React Virtuoso / TanStack Virtual,Medium,Web Mobile
+Feedback,Success Animation,success check complete done,Animate success state after action completion,Checkmark drawing animation + green color flash,Plain text "Success" without visual confirmation,.check { stroke-dasharray: 50; stroke-dashoffset: 50; animation: draw 500ms forwards; },Lottie,Medium,All
+Feedback,Error Shake,error shake invalid wrong,Shake element to indicate error/invalid input,Subtle horizontal shake (3-5px range) + red border,Aggressive shaking or only color change,.error { animation: shake 300ms; } @keyframes shake { 25% { transform:translateX(-5px); } 75% { transform:translateX(5px); } },None (CSS only),Medium,All
+Feedback,Copy to Clipboard,copy clipboard tooltip confirm,Confirm successful copy action with brief animation,Tooltip saying "Copied!" + icon change for 2s,No feedback after copy action,.copied::after { content:'Copied!'; animation: fadeInOut 2s; },None (CSS/JS),Low,Web
+Attention,Pulse Glow,pulse glow attention notification badge,Draw attention to important elements or notifications,Gentle pulse with low opacity glow on badges/alerts,Constant aggressive pulsing that causes distraction,.badge { animation: pulse 2s infinite; } @keyframes pulse { 50% { box-shadow: 0 0 12px rgba(239 68 68 / 0.4); } },None (CSS only),Low,All
+Attention,Bounce Entry,bounce enter attention cta,Bounce animation to draw attention to CTA buttons,Single bounce on load + stop (not continuous),Continuous bouncing that is distracting,.cta { animation: bounce 600ms ease 1; } @keyframes bounce { 50% { transform:translateY(-10px); } },None (CSS only),Low,Web
+Performance,Reduced Motion,reduced motion prefers accessibility a11y,Respect user motion preferences,Use prefers-reduced-motion media query to disable animations,Ignoring user motion preferences,@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } },None (CSS only),High,All
+Performance,GPU Acceleration,gpu accelerate transform will-change,Use GPU-accelerated properties for smooth animations,Animate transform and opacity only. Use will-change sparingly,Animating width height top left margin,.animated { will-change: transform; transform: translateZ(0); },None (CSS only),High,All
+Performance,Animation Duration,duration timing speed feedback,Use appropriate animation durations for different contexts,100-200ms for micro-interactions Á 300-500ms for emphasis,Animations longer than 500ms for UI feedback or <100ms (imperceptible),.fast { transition: 150ms; } .emphasis { transition: 400ms; },None (CSS only),Medium,All
+Performance,RequestAnimationFrame,raf frame animation javascript smooth,Use requestAnimationFrame for JS animations,rAF for smooth 60fps JS animations,setInterval or setTimeout for animations,requestAnimationFrame(animate),setInterval(animate 16),High,Web
+State,Loading to Content,state loading content transition swap,Animate transition from loading to content state,Cross-fade skeleton to real content + maintain layout dimensions,Content popping in with layout shift,.content { animation: fadeIn 200ms ease; } .skeleton { animation: fadeOut 200ms ease; },None (CSS only),Medium,All

package/skills/cm-ux-master/data/charts.csv

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

package/skills/cm-ux-master/data/colors.csv

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

package/skills/cm-ux-master/data/design-tests.csv

@@ -0,0 +1,37 @@
+Test_ID,Target,Component,UX_Law_ID,UX_Law_Name,Assertion,Pass_Criteria,Fail_Criteria,Severity,Test_Method,Metric,Platform,Notes
+DT-LP-001,Landing Page,Hero Section,UXL-001,Hick's Law,CTA count above-fold <= 2,"Count CTA buttons visible in viewport (1024px height): pass if <= 2","CTA count > 2 OR competing CTAs with equal visual weight",Critical,Visual Audit + DOM Count,"Conversion Rate, Time to First Click",All,"Count only primary CTA-styled buttons. Text links don't count. Include sticky header CTAs."
+DT-LP-002,Landing Page,CTA Button,UXL-002,Fitts's Law,"CTA height >= 48px AND touch target >= 44x44px AND contrast >= 4.5:1","Measure: button height >= 48px CSS / touch target area >= 44x44px / contrast ratio via WCAG tool","Button < 48px height OR touch target < 44x44px OR contrast < 4.5:1",Critical,Automated (axe-core) + Manual Measure,"Bounce Rate, Click-through Rate",All,"Use Chrome DevTools computed styles. Test contrast with WebAIM checker. Mobile: test actual touch target area."
+DT-LP-003,Landing Page,Above-fold Content,UXL-003,Pareto Principle,"Above-fold contains: 1 headline + 1 CTA + 1 visual","Check viewport (375px mobile / 1024px desktop): must contain value proposition headline + 1 clear CTA + supporting visual","Missing headline OR missing CTA OR above-fold is blank/loading",High,Visual Audit per Breakpoint,"First Impression Score, Engagement Rate","Mobile, Desktop","Test at both 375px and 1024px viewport. Above-fold = content visible without scrolling."
+DT-LP-004,Landing Page,Navigation,UXL-004,Jakob's Law,"Logo top-left AND nav top/right AND footer standard","Logo clickable at top-left. Nav at top or top-right. Footer contains: links / copyright / contact","Logo not top-left OR nav in unexpected position OR no footer",High,Visual Audit,"Task Completion Rate, Navigation Efficiency",All,"Exceptions: full-screen landing pages may hide nav. Document if intentional deviation."
+DT-LP-005,Landing Page,Multi-step Form,UXL-005,Goal-Gradient Effect,"Form > 3 fields has progress indicator showing step X/Y","Progress bar or step indicator visible. Shows current step / total. Visual advancement on step completion.","Form > 3 fields with no progress indicator OR indicator not updating",Medium,Functional Test + Visual,"Form Completion Rate, Drop-off per Step",All,"Test form progression. Verify indicator updates on each step. Check mobile layout."
+DT-WA-001,Website/Web App,Navigation Menu,UXL-006,Miller's Law,"Top-level nav items <= 9 AND grouping if > 7","Count top-level nav items. If > 7: verify grouping (dropdown/mega menu). Test at all breakpoints.","Top-level items > 9 OR > 7 items without grouping mechanism",Critical,DOM Count + Visual Audit,"Navigation Efficiency, Error Rate",All,"Count only visible top-level items. Dropdown children don't count toward limit."
+DT-WA-002,Website/Web App,Content Sections,UXL-007,Law of Proximity,"Related elements spacing < 50% of unrelated elements spacing","Measure: intra-group gap <= 16px while inter-group gap >= 32px (or equivalent ratio)","Uniform spacing everywhere OR related items farther than unrelated",High,Computed Styles Measurement,"Navigation Intuitiveness, Scan Pattern",All,"Use CSS gap/margin/padding measurements. Compare spacing within section vs between sections."
+DT-WA-003,Website/Web App,Design System,UXL-008,Consistency,"Same action = same style across all pages AND single icon library","Audit: primary buttons identical everywhere. Secondary buttons identical. Icons from 1 library. Spacing follows base unit.","Mixed button styles for same action OR multiple icon libraries OR inconsistent spacing base",Critical,Cross-page Visual Audit,"Learnability, Efficiency",All,"Create style inventory. Compare buttons/links/icons across >= 5 pages. Check design tokens consistency."
+DT-WA-004,Website/Web App,Lists/Navigation,UXL-009,Serial Position Effect,"Key info/actions at position 1 AND last in any list/nav","Audit nav: most important items first and last. Audit feature lists: key benefits at positions 1 and N.","Important items buried in middle positions only",Medium,Content Audit,"Information Retention, Click Distribution",All,"Check heatmap data if available. Primary nav items should be at edges."
+DT-WA-005,Website/Web App,Forms,UXL-010,Postel's Law,"Form accepts >= 2 formats AND inline validation AND specific errors","Test: phone accepts (0901234567 AND +84901234567). Date accepts (01/15/2025 AND 2025-01-15). Error messages specific.","Form rejects valid alternate formats OR only generic errors OR no inline validation",High,Functional Testing,"User Satisfaction, Support Tickets",All,"Test edge cases: spaces in phone numbers / different date formats / email with + sign."
+DT-MOB-001,Mobile App,Interactive Elements,UXL-011,Fitts's Law,"All interactive elements >= 44x44px AND primary actions in bottom 40%","Measure all buttons/links/toggles. Touch target >= 44x44px (including padding). Primary CTA in bottom zone.","Any interactive element < 44x44px OR primary action in top 20% of screen",Critical,Device Testing + Layout Audit,"Mis-tap Rate, Error Rate",Mobile,"Test on actual devices. Account for status bar / notch. Test landscape orientation too."
+DT-MOB-002,Mobile App,Loading States,UXL-012,Doherty Threshold,"Loading indicator < 400ms AND skeleton screens for loads > 1s","Measure: time from action to loading indicator visible. Skeleton screens for API calls > 1s. Progress for > 3s.","Blank screen > 400ms after action OR no skeleton for slow content",Critical,Performance Testing (Lighthouse),"Perceived Performance, User Retention",Mobile,"Use performance profiler. Test on mid-range device (not just high-end). Test poor network (3G Slow)."
+DT-MOB-003,Mobile App,Navigation Structure,UXL-013,Law of Common Region,"Related content in visual container AND main nav uses bottom tabs <= 5","Verify: cards group related info. Bottom tab bar for main sections (<= 5 tabs). Distinct visual boundaries.","Related content not visually grouped OR > 5 bottom tabs OR no clear boundaries",High,Visual Audit + Heuristic,"Orientation, Navigation Speed",Mobile,"Common pattern: 3-5 bottom tabs. Each tab = distinct section. Active tab clearly highlighted."
+DT-MOB-004,Mobile App,Visual Consistency,UXL-014,Aesthetic-Usability Effect,"Border-radius / shadow / spacing consistent AND animations ease-out","Audit: border-radius same across cards (e.g. all 12px). Shadows same depth per elevation. Animations use ease-out.","Mixed border-radius values OR inconsistent shadows OR linear/abrupt animations",Medium,Design Token Audit,"Error Tolerance, NPS",Mobile,"Export design tokens. Check for consistency. Animation curves: prefer ease-out for element entry."
+DT-MOB-005,Mobile App,Flow Completion,UXL-015,Peak-End Rule,"Key flows end with success screen + positive messaging","Test: signup -> success screen. Checkout -> confirmation. Form submit -> thank you. Each with positive copy.","Flow ends abruptly (back to home) OR no confirmation screen OR negative/neutral messaging",High,Flow Testing,"Re-engagement, App Rating",Mobile,"Each success screen should have: positive headline + next action suggestion + share option (optional)."
+DT-GAME-001,Game UI,Control Icons,UXL-016,Law of Similarity,"Icon style uniform AND color coding consistent","All icons same style (all filled OR all outlined OR all pixel). Item categories: same color = same type.","Mixed icon styles OR same color used for different item types",High,Asset Audit,"Quick Recognition, Error Rate",Game,"Audit entire icon set. Create icon style guide. Test colorblind accessibility."
+DT-GAME-002,Game UI,HUD Layout,UXL-017,Aesthetic-Usability Effect,"HUD <= 15% screen AND matches art direction","Measure HUD pixel area / total screen area. Visual style matches game art (not generic UI).","HUD > 20% screen area OR HUD style clashes with game aesthetic",Medium,Screenshot Analysis + Pixel Count,"Session Duration, Immersion Score",Game,"Measure at multiple resolutions. Account for transparent HUD areas. Test with actual gameplay footage."
+DT-GAME-003,Game UI,Special Items,UXL-018,Von Restorff Effect,"Important items have >= 2 visual differentiators","Verify: rare/special items differ by (color + size) OR (color + animation) OR (size + glow). Test recognition speed.","Special items look same as common items OR only 1 differentiator",High,Visual Comparison Test,"Focus Accuracy, Item Discovery Rate",Game,"Test with 5 users: can they spot the special item in < 2 seconds? If not -> fail."
+DT-GAME-004,Game UI,In-game Menu,UXL-019,Hick's Law,"Menu options <= 8 AND accessible in <= 2 interactions","Count options per menu level <= 8. Test: menu open -> select option in <= 2 taps/clicks. Test during gameplay.","> 8 options per level OR requires > 2 interactions to reach common action",Critical,Gameplay Testing,"Flow State Maintenance, Menu Speed",Game,"Critical: test DURING active gameplay. Menu should not break immersion. Consider radial/wheel menus."
+DT-GAME-005,Game UI,HUD Positioning,UXL-020,Law of Proximity,"HUD clusters at screen edges AND inter-cluster spacing >= 40px","Health cluster top-left. Minimap corner. Action bar bottom. Each cluster separated by >= 40px clear space.","HUD scattered randomly OR clusters touching/overlapping OR center-screen HUD blocking view",High,Layout Measurement,"Visual Disruption Score, Game View %",Game,"Measure on target resolution. Ensure >= 60% center screen clear for gameplay view."
+DT-DASH-001,Dashboard,Data Overview,UXL-021,Cognitive Load,"Default view <= 7 key metrics AND drill-down on interaction","Count visible metrics on default load <= 7. Each metric clickable for detail. Progressive disclosure implemented.","Default shows > 12 metrics OR no drill-down capability OR all data at same level",Critical,Visual Audit + Interaction Test,"Task Completion Time, Accuracy",All,"KPI cards: max 4-6 on first row. Supporting charts below. Detail on click/hover."
+DT-DASH-002,Dashboard,Charts,UXL-022,Law of Pragnanz,"Charts use 2D AND data labels present AND minimal chartjunk","All charts 2D (unless spatial data). Clear labels. No decorative gradients. Clean gridlines.","3D charts for non-spatial data OR missing data labels OR excessive decoration",High,Visual Audit,"Data Comprehension Speed, Decision Accuracy",All,"Exception: 3D justified for geographic/spatial data. Document justification."
+DT-DASH-003,Dashboard,Filtering,UXL-023,Selective Attention,"Filters visible without scroll AND active filters shown AND fade on filter","Filter bar in viewport. Applied filters as tags/pills. Filtered-out data dimmed (not hidden) initially.","Filters below fold OR active filters not visible OR no visual distinction on filtered data",High,Interaction Testing,"Data Discovery Speed, Filter Usage Rate",All,"Test: apply filter -> verify visual feedback. Remove filter -> verify reset. Test with multiple active filters."
+DT-SAAS-001,SaaS Web App,Onboarding,UXL-024,Zeigarnik Effect,"Onboarding has progress AND auto-save AND resume","Progress bar/checklist with %. Auto-save draft every 30s. On return: show 'Continue where you left off'.","No progress indicator OR lost data on browser close OR no resume capability",Medium,Functional Testing,"Onboarding Completion Rate, Time to Activate",All,"Test: close browser mid-onboarding -> reopen -> verify state preserved."
+DT-SAAS-002,SaaS Web App,Settings,UXL-025,Tesler's Law,"Advanced options hidden AND smart defaults AND auto-detect","Basic mode: pre-filled smart defaults. 'Advanced' toggle reveals power options. Auto-detect timezone/language/etc.","All settings exposed upfront OR no defaults OR manual config required for basic setup",High,First-run Test,"Time to Value, Setup Completion",All,"Test as brand-new user. Measure: account creation -> first value moment. Should be < 5 minutes."
+DT-SAAS-003,SaaS Web App,Screen Focus,UXL-026,Occam's Razor,"Each screen 1 primary action AND no redundant paths","Audit each screen: identify primary action. Should be visually dominant. No duplicate CTAs for same action.","Screen has 3+ equal-weight CTAs OR multiple paths to identical action",Medium,UX Audit,"SUS Score, Task Success Rate",All,"Map user flows. Each screen = 1 job. Primary CTA = 1 clear next step."
+DT-SAAS-004,SaaS Web App,First-use Experience,UXL-027,Paradox of Active User,"Core task completable without docs AND undo for destructive actions","Test: new user -> complete core task without help docs. All destructive actions have undo (7s window minimum).","Must read docs/tutorial to use basic feature OR no undo for delete/archive",High,Usability Testing,"Activation Rate, Support Ticket Volume",All,"5-second test: can user identify what to do first? If confused -> fail."
+DT-ECOM-001,E-commerce,Shopping Cart,UXL-029,Working Memory,"Cart indicator always visible AND recently viewed AND comparison <= 4","Cart badge (item count) in persistent header. 'Recently Viewed' section accessible. Compare feature <= 4 items.","Cart hidden behind menu OR no recently viewed OR comparison allows > 5 items",High,Visual Audit + Functional,"Cart Abandonment Rate, Return Visit Rate",All,"Cart badge should update in real-time (optimistic UI). Recently viewed: last 10-20 items."
+DT-ECOM-002,E-commerce,Product Listing,UXL-030,Choice Overload,"Products <= 24/page AND faceted filters AND sort >= 3 options AND recommendations","Count products per page. Verify filter sidebar/bar. Sort: price/rating/new/popular. Recommended section present.","Products > 50/page without pagination OR no filters OR no sort options",Critical,Content Audit + Functional,"Conversion Rate, Browse Duration",All,"Infinite scroll OK if virtualized + filter persistent. Test filter combinations."
+DT-ECOM-003,E-commerce,Checkout Flow,UXL-031,Mental Model,"Checkout follows Cart -> Shipping -> Payment -> Confirm","Map checkout steps. Verify sequential flow. Standard icons (cart/lock/check). Progress indicator present.","Non-sequential checkout OR confusing step order OR missing security indicators",High,Flow Mapping + User Testing,"Checkout Completion, Cart Abandonment",All,"Include guest checkout option. Show order summary at each step. Security badges at payment step."
+DT-RESP-001,Responsive,Touch Targets,UXL-042,Fitts's Law,"Mobile >= 48px / Tablet >= 44px / Desktop >= 36px targets","Test at each breakpoint: 375px -> targets 48px. 768px -> targets 44px. 1024px+ -> targets 36px.","Any target below threshold at corresponding breakpoint",Critical,Cross-device Testing,"Cross-device Usability, Error Rate","Mobile, Tablet, Desktop","Use browser DevTools device emulation + real devices. Test both portrait and landscape."
+DT-RESP-002,Responsive,Navigation Adaptation,UXL-043,Jakob's Law,"Mobile: hamburger/bottom nav AND Desktop: full nav AND breakpoints 375/768/1024/1440","Verify nav transformation at each breakpoint. Mobile -> hamburger OR bottom tabs. Desktop -> full visible nav.","Same nav forced on all breakpoints OR nav broken at any breakpoint",High,Cross-breakpoint Testing,"Navigation Success Rate, Cross-device Retention","Mobile, Tablet, Desktop","Test nav transition animation. Verify no layout shift on breakpoint change."
+DT-RESP-003,Responsive,Content Priority,UXL-044,Cognitive Load,"Mobile shows priority content AND hides non-essential AND lazy loads","Mobile viewport: verify critical content visible. Non-essential collapsed (accordion) or hidden. Images lazy-loaded.","Desktop content crammed into mobile OR no content prioritization OR all images eager-loaded",Critical,Mobile-first Audit + Lighthouse,"Mobile Performance Score, Mobile Engagement","Mobile, Tablet","Lighthouse mobile score >= 80. Test on 3G Slow throttling. Content priority matches user intent."
+DT-HEALTH-001,Healthcare App,Navigation,UXL-034,Hick's Law,"Main nav <= 5 AND booking <= 3 steps AND emergency always visible","Count nav items. Map booking flow steps. Verify emergency button visible on every screen.","Nav > 5 items OR booking > 5 steps OR emergency hidden behind menu",Critical,Audit + Flow Mapping,"Task Completion Time, Emergency Access Speed",Mobile,"Emergency button: red / always top-right or floating. Booking: select provider -> date -> confirm."
+DT-FIN-001,Fintech/Banking,Layout,UXL-037,Jakob's Law,"Account overview default AND standard layout AND security visible","App opens to account overview. Transactions list standard. Security indicators (lock/https/verified) on all screens.","Non-standard entry screen OR missing security indicators OR unfamiliar financial patterns",Critical,Heuristic Evaluation,"Trust Score, Security Perception",All,"Test: first-time open -> can user find balance in < 3 seconds? If not -> fail."
+DT-LUX-001,Luxury/Premium,Visual Quality,UXL-047,Aesthetic-Usability Effect,"Serif heading AND whitespace >= 40% AND animations 300-500ms AND 2x images","Verify: heading font = serif. Measure whitespace ratio. Animation timing. Image resolution >= 2x device pixel ratio.","System font for headings OR cramped layout < 25% whitespace OR jarring fast animations OR low-res images",Critical,Design Audit + Performance,"Brand Perception Score, Time on Site",All,"Premium feel requires: slow transitions / generous space / high-quality assets. No shortcuts."

package/skills/cm-ux-master/data/devices.csv

@@ -0,0 +1,21 @@
+Device,Category,Width_Min,Width_Max,Height,Aspect_Ratio,Touch,Pixel_Density,UX_Priority,Guidelines
+iPhone SE,Mobile Small,320,375,667,9:16,Yes,2x,Thumb zone bottom 1/3. Min touch target 44px. Single column layout only.,Test at 320px width. No horizontal scroll. Stack all content vertically.
+iPhone 14/15,Mobile Standard,390,393,852,9:19.5,Yes,3x,Primary test device. Thumb zone critical. Bottom nav preferred.,Design mobile-first at 390px. Safe area insets for notch. Bottom navigation pattern.
+iPhone Pro Max,Mobile Large,430,430,932,9:19.5,Yes,3x,Larger touch targets possible. Can fit 2-column grid for cards.,Test content density. Can show more data than standard mobile. Still single-hand use.
+Samsung Galaxy S,Mobile Android,360,412,800,9:20,Yes,2.75x,Material Design guidelines. System back button. Different safe areas.,Account for Android navigation bar. Test with different font scales. Edge-to-edge design.
+Android Compact,Mobile Budget,280,320,534,9:16,Yes,1.5x,Minimal device. Must work with reduced content.,Test with smallest viewport. Truncate text with ellipsis. Reduce image quality for performance.
+iPad Mini,Tablet Small,744,768,1024,3:4,Yes,2x,Split between mobile and tablet layout. Can show sidebar overlay.,Transition point for layout. Consider showing tablet layout with collapsible sidebar.
+iPad Air/Pro,Tablet Standard,820,1024,1180,4:3,Yes,2x,Full tablet layout. Persistent sidebar viable. Multi-column content.,Two-column layout minimum. Persistent navigation sidebar. Larger touch targets OK.
+iPad Pro 12.9,Tablet Large,1024,1366,1024,4:3,Yes,2x,Near-desktop experience. Full multi-pane layouts possible.,Three-column layout viable. Split view support. Desktop-like density acceptable.
+Samsung Galaxy Tab,Tablet Android,800,962,1280,5:8,Yes,2x,Android tablet. Bottom navigation still common. Material guidelines.,Material Design 3 tablet patterns. Navigation rail preferred over bottom bar.
+Laptop Standard,Desktop Small,1280,1366,768,16:9,No,1x,Primary desktop target. Hover states required. Mouse-first interaction.,Full desktop layout. Sidebar + content. Dropdown menus. Hover tooltips enabled.
+Desktop HD,Desktop Standard,1440,1920,900,16:9,No,1x,Maximum content width ~1280px for readability. Center content.,max-width container. Generous whitespace. Multi-column dashboards. Data tables.
+Desktop 4K,Desktop Large,2560,3840,2160,16:9,No,2x,Scale UI. Don't just stretch. Increase content density or zoom.,Use rem/em units. Test with browser zoom 150-200%. Don't hardcode pixel values.
+Apple Watch,Watch Smartwatch Wearable,272,396,340,1:1,Yes,2x,Glanceable information only. Single action per screen. Large text.,Max 3-4 items visible. Swipe navigation. No complex forms. Status-focused. Font 17pt minimum.
+Samsung Galaxy Watch,Watch Smartwatch Wearable Android,360,396,360,1:1,Yes,2x,Wear OS patterns. Tile-based layout. Quick actions only.,Circular layout consideration. Edge complications. Voice-first interaction support.
+Foldable Folded,Foldable Small,280,320,720,9:25,Yes,3x,Compact front screen. Quick tasks only. Notifications and status.,Cover screen UI. Simplified controls only. Large touch targets on narrow screen.
+Foldable Unfolded,Foldable Large,585,674,886,3:4,Yes,3x,Tablet-like when open. Adapt layout seamlessly on fold/unfold.,Flex mode support (half screen). Continuity from folded to unfolded state. Media queries for fold.
+Smart TV,TV,1920,3840,1080,16:9,No (Remote),1x,D-pad navigation. Large text (min 24px). 10-foot viewing distance.,Focus-based navigation. No hover states. Card-based grid. High contrast for viewing distance.
+Android TV,TV Android,1920,1920,1080,16:9,No (Remote),1x,Leanback library patterns. D-pad focus management. Overscan margin.,80px overscan margin. Focus ring on all items. Horizontal scrolling rows. No text input.
+CarPlay Display,Car,800,1280,480,8:3,Yes (Limited),2x,Glanceable. Large buttons. Minimal text. Drive-safe design.,Maximum 6 items visible. 76px minimum touch target. No scrolling. Voice-first.
+VR/AR Headset,Spatial,var,var,var,varies,Hand/Eye,varies,Spatial UI patterns. Depth layers. Gaze-based interaction. Comfort zones.,Place UI at 1-2m distance. Avoid rapid movement. Use spatial audio cues. Curved panels.

package/skills/cm-ux-master/data/icons.csv

@@ -0,0 +1,101 @@
+No,Category,Icon Name,Keywords,Library,Import Code,Usage,Best For,Style
+1,Navigation,menu,hamburger menu navigation toggle bars,Lucide,import { Menu } from 'lucide-react',<Menu />,Mobile navigation drawer toggle sidebar,Outline
+2,Navigation,arrow-left,back previous return navigate,Lucide,import { ArrowLeft } from 'lucide-react',<ArrowLeft />,Back button breadcrumb navigation,Outline
+3,Navigation,arrow-right,next forward continue navigate,Lucide,import { ArrowRight } from 'lucide-react',<ArrowRight />,Forward button next step CTA,Outline
+4,Navigation,chevron-down,dropdown expand accordion select,Lucide,import { ChevronDown } from 'lucide-react',<ChevronDown />,Dropdown toggle accordion header,Outline
+5,Navigation,chevron-up,collapse close accordion minimize,Lucide,import { ChevronUp } from 'lucide-react',<ChevronUp />,Accordion collapse minimize,Outline
+6,Navigation,home,homepage main dashboard start,Lucide,import { Home } from 'lucide-react',<Home />,Home navigation main page,Outline
+7,Navigation,x,close cancel dismiss remove exit,Lucide,import { X } from 'lucide-react',<X />,Modal close dismiss button,Outline
+8,Navigation,external-link,open new tab external link,Lucide,import { ExternalLink } from 'lucide-react',<ExternalLink />,External link indicator,Outline
+9,Action,plus,add create new insert,Lucide,import { Plus } from 'lucide-react',<Plus />,Add button create new item,Outline
+10,Action,minus,remove subtract decrease delete,Lucide,import { Minus } from 'lucide-react',<Minus />,Remove item quantity decrease,Outline
+11,Action,trash-2,delete remove discard bin,Lucide,import { Trash2 } from 'lucide-react',<Trash2 />,Delete action destructive,Outline
+12,Action,edit,pencil modify change update,Lucide,import { Edit } from 'lucide-react',<Edit />,Edit button modify content,Outline
+13,Action,save,disk store persist save,Lucide,import { Save } from 'lucide-react',<Save />,Save button persist changes,Outline
+14,Action,download,export save file download,Lucide,import { Download } from 'lucide-react',<Download />,Download file export,Outline
+15,Action,upload,import file attach upload,Lucide,import { Upload } from 'lucide-react',<Upload />,Upload file import,Outline
+16,Action,copy,duplicate clipboard paste,Lucide,import { Copy } from 'lucide-react',<Copy />,Copy to clipboard,Outline
+17,Action,share,social distribute send,Lucide,import { Share } from 'lucide-react',<Share />,Share button social,Outline
+18,Action,search,find lookup filter query,Lucide,import { Search } from 'lucide-react',<Search />,Search input bar,Outline
+19,Action,filter,sort refine narrow options,Lucide,import { Filter } from 'lucide-react',<Filter />,Filter dropdown sort,Outline
+20,Action,settings,gear cog preferences config,Lucide,import { Settings } from 'lucide-react',<Settings />,Settings page configuration,Outline
+21,Status,check,success done complete verified,Lucide,import { Check } from 'lucide-react',<Check />,Success state checkmark,Outline
+22,Status,check-circle,success verified approved complete,Lucide,import { CheckCircle } from 'lucide-react',<CheckCircle />,Success badge verified,Outline
+23,Status,x-circle,error failed cancel rejected,Lucide,import { XCircle } from 'lucide-react',<XCircle />,Error state failed,Outline
+24,Status,alert-triangle,warning caution attention danger,Lucide,import { AlertTriangle } from 'lucide-react',<AlertTriangle />,Warning message caution,Outline
+25,Status,alert-circle,info notice information help,Lucide,import { AlertCircle } from 'lucide-react',<AlertCircle />,Info notice alert,Outline
+26,Status,info,information help tooltip details,Lucide,import { Info } from 'lucide-react',<Info />,Information tooltip help,Outline
+27,Status,loader,loading spinner processing wait,Lucide,import { Loader } from 'lucide-react',<Loader className="animate-spin" />,Loading state spinner,Outline
+28,Status,clock,time schedule pending wait,Lucide,import { Clock } from 'lucide-react',<Clock />,Pending time schedule,Outline
+29,Communication,mail,email message inbox letter,Lucide,import { Mail } from 'lucide-react',<Mail />,Email contact inbox,Outline
+30,Communication,message-circle,chat comment bubble conversation,Lucide,import { MessageCircle } from 'lucide-react',<MessageCircle />,Chat comment message,Outline
+31,Communication,phone,call mobile telephone contact,Lucide,import { Phone } from 'lucide-react',<Phone />,Phone contact call,Outline
+32,Communication,send,submit dispatch message airplane,Lucide,import { Send } from 'lucide-react',<Send />,Send message submit,Outline
+33,Communication,bell,notification alert ring reminder,Lucide,import { Bell } from 'lucide-react',<Bell />,Notification bell alert,Outline
+34,User,user,profile account person avatar,Lucide,import { User } from 'lucide-react',<User />,User profile account,Outline
+35,User,users,team group people members,Lucide,import { Users } from 'lucide-react',<Users />,Team group members,Outline
+36,User,user-plus,add invite new member,Lucide,import { UserPlus } from 'lucide-react',<UserPlus />,Add user invite,Outline
+37,User,log-in,signin authenticate enter,Lucide,import { LogIn } from 'lucide-react',<LogIn />,Login signin,Outline
+38,User,log-out,signout exit leave logout,Lucide,import { LogOut } from 'lucide-react',<LogOut />,Logout signout,Outline
+39,Media,image,photo picture gallery thumbnail,Lucide,import { Image } from 'lucide-react',<Image />,Image photo gallery,Outline
+40,Media,video,movie film play record,Lucide,import { Video } from 'lucide-react',<Video />,Video player media,Outline
+41,Media,play,start video audio media,Lucide,import { Play } from 'lucide-react',<Play />,Play button video audio,Outline
+42,Media,pause,stop halt video audio,Lucide,import { Pause } from 'lucide-react',<Pause />,Pause button media,Outline
+43,Media,volume-2,sound audio speaker music,Lucide,import { Volume2 } from 'lucide-react',<Volume2 />,Volume audio sound,Outline
+44,Media,mic,microphone record voice audio,Lucide,import { Mic } from 'lucide-react',<Mic />,Microphone voice record,Outline
+45,Media,camera,photo capture snapshot picture,Lucide,import { Camera } from 'lucide-react',<Camera />,Camera photo capture,Outline
+46,Commerce,shopping-cart,cart checkout basket buy,Lucide,import { ShoppingCart } from 'lucide-react',<ShoppingCart />,Shopping cart e-commerce,Outline
+47,Commerce,shopping-bag,purchase buy store bag,Lucide,import { ShoppingBag } from 'lucide-react',<ShoppingBag />,Shopping bag purchase,Outline
+48,Commerce,credit-card,payment card checkout stripe,Lucide,import { CreditCard } from 'lucide-react',<CreditCard />,Payment credit card,Outline
+49,Commerce,dollar-sign,money price currency cost,Lucide,import { DollarSign } from 'lucide-react',<DollarSign />,Price money currency,Outline
+50,Commerce,tag,label price discount sale,Lucide,import { Tag } from 'lucide-react',<Tag />,Price tag label,Outline
+51,Commerce,gift,present reward bonus offer,Lucide,import { Gift } from 'lucide-react',<Gift />,Gift reward offer,Outline
+52,Commerce,percent,discount sale offer promo,Lucide,import { Percent } from 'lucide-react',<Percent />,Discount percentage sale,Outline
+53,Data,bar-chart,analytics statistics graph metrics,Lucide,import { BarChart } from 'lucide-react',<BarChart />,Bar chart analytics,Outline
+54,Data,pie-chart,statistics distribution breakdown,Lucide,import { PieChart } from 'lucide-react',<PieChart />,Pie chart distribution,Outline
+55,Data,trending-up,growth increase positive trend,Lucide,import { TrendingUp } from 'lucide-react',<TrendingUp />,Growth trend positive,Outline
+56,Data,trending-down,decline decrease negative trend,Lucide,import { TrendingDown } from 'lucide-react',<TrendingDown />,Decline trend negative,Outline
+57,Data,activity,pulse heartbeat monitor live,Lucide,import { Activity } from 'lucide-react',<Activity />,Activity monitor pulse,Outline
+58,Data,database,storage server data backend,Lucide,import { Database } from 'lucide-react',<Database />,Database storage,Outline
+59,Files,file,document page paper doc,Lucide,import { File } from 'lucide-react',<File />,File document,Outline
+60,Files,file-text,document text page article,Lucide,import { FileText } from 'lucide-react',<FileText />,Text document article,Outline
+61,Files,folder,directory organize group files,Lucide,import { Folder } from 'lucide-react',<Folder />,Folder directory,Outline
+62,Files,folder-open,expanded browse files view,Lucide,import { FolderOpen } from 'lucide-react',<FolderOpen />,Open folder browse,Outline
+63,Files,paperclip,attachment attach file link,Lucide,import { Paperclip } from 'lucide-react',<Paperclip />,Attachment paperclip,Outline
+64,Files,link,url hyperlink chain connect,Lucide,import { Link } from 'lucide-react',<Link />,Link URL hyperlink,Outline
+65,Files,clipboard,paste copy buffer notes,Lucide,import { Clipboard } from 'lucide-react',<Clipboard />,Clipboard paste,Outline
+66,Layout,grid,tiles gallery layout dashboard,Lucide,import { Grid } from 'lucide-react',<Grid />,Grid layout gallery,Outline
+67,Layout,list,rows table lines items,Lucide,import { List } from 'lucide-react',<List />,List view rows,Outline
+68,Layout,columns,layout split dual sidebar,Lucide,import { Columns } from 'lucide-react',<Columns />,Column layout split,Outline
+69,Layout,maximize,fullscreen expand enlarge zoom,Lucide,import { Maximize } from 'lucide-react',<Maximize />,Fullscreen maximize,Outline
+70,Layout,minimize,reduce shrink collapse exit,Lucide,import { Minimize } from 'lucide-react',<Minimize />,Minimize reduce,Outline
+71,Layout,sidebar,panel drawer navigation menu,Lucide,import { Sidebar } from 'lucide-react',<Sidebar />,Sidebar panel,Outline
+72,Social,heart,like love favorite wishlist,Lucide,import { Heart } from 'lucide-react',<Heart />,Like favorite love,Outline
+73,Social,star,rating review favorite bookmark,Lucide,import { Star } from 'lucide-react',<Star />,Star rating favorite,Outline
+74,Social,thumbs-up,like approve agree positive,Lucide,import { ThumbsUp } from 'lucide-react',<ThumbsUp />,Like approve thumb,Outline
+75,Social,thumbs-down,dislike disapprove disagree negative,Lucide,import { ThumbsDown } from 'lucide-react',<ThumbsDown />,Dislike disapprove,Outline
+76,Social,bookmark,save later favorite mark,Lucide,import { Bookmark } from 'lucide-react',<Bookmark />,Bookmark save,Outline
+77,Social,flag,report mark important highlight,Lucide,import { Flag } from 'lucide-react',<Flag />,Flag report,Outline
+78,Device,smartphone,mobile phone device touch,Lucide,import { Smartphone } from 'lucide-react',<Smartphone />,Mobile smartphone,Outline
+79,Device,tablet,ipad device touch screen,Lucide,import { Tablet } from 'lucide-react',<Tablet />,Tablet device,Outline
+80,Device,monitor,desktop screen computer display,Lucide,import { Monitor } from 'lucide-react',<Monitor />,Desktop monitor,Outline
+81,Device,laptop,notebook computer portable device,Lucide,import { Laptop } from 'lucide-react',<Laptop />,Laptop computer,Outline
+82,Device,printer,print document output paper,Lucide,import { Printer } from 'lucide-react',<Printer />,Printer print,Outline
+83,Security,lock,secure password protected private,Lucide,import { Lock } from 'lucide-react',<Lock />,Lock secure,Outline
+84,Security,unlock,open access unsecure public,Lucide,import { Unlock } from 'lucide-react',<Unlock />,Unlock open,Outline
+85,Security,shield,protection security safe guard,Lucide,import { Shield } from 'lucide-react',<Shield />,Shield protection,Outline
+86,Security,key,password access unlock login,Lucide,import { Key } from 'lucide-react',<Key />,Key password,Outline
+87,Security,eye,view show visible password,Lucide,import { Eye } from 'lucide-react',<Eye />,Show password view,Outline
+88,Security,eye-off,hide invisible password hidden,Lucide,import { EyeOff } from 'lucide-react',<EyeOff />,Hide password,Outline
+89,Location,map-pin,location marker place address,Lucide,import { MapPin } from 'lucide-react',<MapPin />,Location pin marker,Outline
+90,Location,map,directions navigate geography location,Lucide,import { Map } from 'lucide-react',<Map />,Map directions,Outline
+91,Location,navigation,compass direction pointer arrow,Lucide,import { Navigation } from 'lucide-react',<Navigation />,Navigation compass,Outline
+92,Location,globe,world international global web,Lucide,import { Globe } from 'lucide-react',<Globe />,Globe world,Outline
+93,Time,calendar,date schedule event appointment,Lucide,import { Calendar } from 'lucide-react',<Calendar />,Calendar date,Outline
+94,Time,refresh-cw,reload sync update refresh,Lucide,import { RefreshCw } from 'lucide-react',<RefreshCw />,Refresh reload,Outline
+95,Time,rotate-ccw,undo back revert history,Lucide,import { RotateCcw } from 'lucide-react',<RotateCcw />,Undo revert,Outline
+96,Time,rotate-cw,redo forward repeat history,Lucide,import { RotateCw } from 'lucide-react',<RotateCw />,Redo forward,Outline
+97,Development,code,develop programming syntax html,Lucide,import { Code } from 'lucide-react',<Code />,Code development,Outline
+98,Development,terminal,console cli command shell,Lucide,import { Terminal } from 'lucide-react',<Terminal />,Terminal console,Outline
+99,Development,git-branch,version control branch merge,Lucide,import { GitBranch } from 'lucide-react',<GitBranch />,Git branch,Outline
+100,Development,github,repository code open source,Lucide,import { Github } from 'lucide-react',<Github />,GitHub repository,Outline

package/skills/cm-ux-master/data/landing.csv

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