@litfamily/litopencode 1.0.0

package/skills/frontend-ui-ux/data/design-intelligence.json

@@ -0,0 +1 @@
+{"records":[{"Category":"Accessibility","Description":"Icon-only buttons must expose an accessible label","Do":"Set accessibilityLabel or label prop on icon buttons","Don't":"Icon buttons without accessible names","Issue":"Icon Button Labels","Keywords":"icon button accessibilityLabel","No":1,"Platform":"iOS/Android/React Native","Severity":"Critical","domain":"app-interface","record_id":"app-interface/1"},{"Category":"Accessibility","Description":"All inputs must have a visible label and an accessibility label","Do":"Pair Text label with input and set accessibilityLabel","Don't":"Inputs with placeholder only","Issue":"Form Control Labels","Keywords":"form input label accessibilityLabel","No":2,"Platform":"iOS/Android/React Native","Severity":"Critical","domain":"app-interface","record_id":"app-interface/2"},{"Category":"Accessibility","Description":"Interactive elements must expose correct roles/traits","Do":"Use accessibilityRole/button/link/checkbox etc.","Don't":"Rely on generic views with no roles","Issue":"Role & Traits","Keywords":"accessibilityRole accessibilityTraits","No":3,"Platform":"iOS/Android/React Native","Severity":"High","domain":"app-interface","record_id":"app-interface/3"},{"Category":"Accessibility","Description":"Async status updates should be announced to screen readers","Do":"Use accessibilityLiveRegion or announceForAccessibility","Don't":"Update text silently with no announcement","Issue":"Dynamic Updates","Keywords":"accessibilityLiveRegion announce","No":4,"Platform":"iOS/Android/React Native","Severity":"Medium","domain":"app-interface","record_id":"app-interface/4"},{"Category":"Accessibility","Description":"Decorative icons should be hidden from screen readers","Do":"Mark decorative icons as not accessible","Don't":"Have screen reader read every icon","Issue":"Decorative Icons","Keywords":"accessible={false} importantForAccessibility","No":5,"Platform":"iOS/Android/React Native","Severity":"Medium","domain":"app-interface","record_id":"app-interface/5"},{"Category":"Touch","Description":"Primary touch targets must be at least 44x44pt","Do":"Increase hitSlop or padding to meet minimum","Don't":"Small icons with tiny touch area","Issue":"Touch Target Size","Keywords":"touch 44x44 hitSlop","No":6,"Platform":"iOS/Android/React Native","Severity":"Critical","domain":"app-interface","record_id":"app-interface/6"},{"Category":"Touch","Description":"Adjacent touch targets need enough spacing","Do":"Keep at least 8dp spacing between touchables","Don't":"Cluster many buttons with no gap","Issue":"Touch Spacing","Keywords":"touch spacing gap 8px","No":7,"Platform":"iOS/Android/React Native","Severity":"Medium","domain":"app-interface","record_id":"app-interface/7"},{"Category":"Touch","Description":"Custom gestures must not break system scroll/back","Do":"Reserve horizontal swipes for carousels","Don't":"Full-screen custom swipe conflicting with back","Issue":"Gesture Conflicts","Keywords":"scroll swipe back gesture","No":8,"Platform":"iOS/Android/React Native","Severity":"High","domain":"app-interface","record_id":"app-interface/8"},{"Category":"Navigation","Description":"Back navigation should be predictable and preserve state","Do":"Use navigation.goBack and keep screen state","Don't":"Reset stack or exit app unexpectedly","Issue":"Back Behavior","Keywords":"back handler navigation stack","No":9,"Platform":"iOS/Android/React Native","Severity":"Critical","domain":"app-interface","record_id":"app-interface/9"},{"Category":"Navigation","Description":"Bottom tab bar should have at most 5 primary items","Do":"Use 3–5 tabs and move extras to More/Settings","Don't":"Overloaded tab bar with many icons","Issue":"Bottom Tabs","Keywords":"tab bar max items","No":10,"Platform":"iOS/Android/React Native","Severity":"Medium","domain":"app-interface","record_id":"app-interface/10"},{"Category":"Navigation","Description":"Modals/sheets must have clear close actions","Do":"Provide close button and swipe-down where platform expects","Don't":"Trapping users in modal with no obvious exit","Issue":"Modal Escape","Keywords":"modal dismiss close affordance","No":11,"Platform":"iOS/Android/React Native","Severity":"High","domain":"app-interface","record_id":"app-interface/11"},{"Category":"State","Description":"Returning to a screen should restore its scroll and form state","Do":"Keep components mounted or persist state","Don't":"Reset list scroll and form inputs on every visit","Issue":"Preserve Screen State","Keywords":"navigation preserve state","No":12,"Platform":"iOS/Android/React Native","Severity":"Medium","domain":"app-interface","record_id":"app-interface/12"},{"Category":"Feedback","Description":"Show visible feedback during network operations","Do":"Use ActivityIndicator or skeleton for >300ms operations","Don't":"Leave button and screen frozen","Issue":"Loading Indicators","Keywords":"activity indicator skeleton","No":13,"Platform":"iOS/Android/React Native","Severity":"High","domain":"app-interface","record_id":"app-interface/13"},{"Category":"Feedback","Description":"Confirm successful actions with brief feedback","Do":"Show toast/checkmark or banner","Don't":"Complete actions silently with no confirmation","Issue":"Success Feedback","Keywords":"toast checkmark banner","No":14,"Platform":"iOS/Android/React Native","Severity":"Medium","domain":"app-interface","record_id":"app-interface/14"},{"Category":"Feedback","Description":"Show clear error messages near the problem","Do":"input-level error + summary banner","Don't":"Only change border color with no explanation","Issue":"Error Feedback","Keywords":"inline error banner","No":15,"Platform":"iOS/Android/React Native","Severity":"High","domain":"app-interface","record_id":"app-interface/15"},{"Category":"Forms","Description":"Validate inputs on blur or submit with clear messaging","Do":"Validate onBlur and onSubmit","Don't":"Validate on every keystroke causing jank","Issue":"Inline Validation","Keywords":"onBlur validation","No":16,"Platform":"iOS/Android/React Native","Severity":"Medium","domain":"app-interface","record_id":"app-interface/16"},{"Category":"Forms","Description":"Use appropriate keyboardType and returnKeyType","Do":"Match email/tel/number/search types","Don't":"Use default keyboard for all inputs","Issue":"Keyboard Type","Keywords":"keyboardType returnKeyType","No":17,"Platform":"iOS/Android/React Native","Severity":"Medium","domain":"app-interface","record_id":"app-interface/17"},{"Category":"Forms","Description":"Guide users through form fields with Next/Done flows","Do":"Use onSubmitEditing to focus next input","Don't":"Force users to tap each field manually","Issue":"Auto Focus & Next","Keywords":"autoFocus blurOnSubmit onSubmitEditing","No":18,"Platform":"iOS/Android/React Native","Severity":"Low","domain":"app-interface","record_id":"app-interface/18"},{"Category":"Forms","Description":"Allow toggling password visibility securely","Do":"Provide Show/Hide icon toggling secureTextEntry","Don't":"Force users to type blind with no option","Issue":"Password Visibility","Keywords":"secureTextEntry toggle","No":19,"Platform":"iOS/Android/React Native","Severity":"Medium","domain":"app-interface","record_id":"app-interface/19"},{"Category":"Performance","Description":"Use FlatList/SectionList for lists over ~50 items","Do":"Use keyExtractor and initialNumToRender appropriately","Don't":"Render hundreds of items with ScrollView","Issue":"Virtualize Long Lists","Keywords":"FlatList SectionList virtualization","No":20,"Platform":"iOS/Android/React Native","Severity":"High","domain":"app-interface","record_id":"app-interface/20"},{"Category":"Performance","Description":"Use correctly sized and cached images","Do":"Use Image component with proper resizeMode and caching","Don't":"Load full-resolution images everywhere","Issue":"Image Size & Cache","Keywords":"Image resize cache","No":21,"Platform":"iOS/Android/React Native","Severity":"Medium","domain":"app-interface","record_id":"app-interface/21"},{"Category":"Performance","Description":"Debounce scroll/search callbacks to avoid jank","Do":"Wrap handlers with debounce/throttle","Don't":"Run heavy logic on every event","Issue":"Debounce High-Freq Events","Keywords":"debounce scroll search","No":22,"Platform":"iOS/Android/React Native","Severity":"Medium","domain":"app-interface","record_id":"app-interface/22"},{"Category":"Animation","Description":"Micro-interactions should be 150–300ms with native-like easing","Do":"Use ease-out for enter/ease-in for exit","Don't":"Use long or linear animations for core UI","Issue":"Duration & Easing","Keywords":"animation duration easing","No":23,"Platform":"iOS/Android/React Native","Severity":"Medium","domain":"app-interface","record_id":"app-interface/23"},{"Category":"Animation","Description":"Respect OS reduced-motion accessibility setting","Do":"Check reduceMotionEnabled and simplify animations","Don't":"Ignore user motion preferences","Issue":"Respect Reduced Motion","Keywords":"reduced motion accessibility","No":24,"Platform":"iOS/Android/React Native","Severity":"Critical","domain":"app-interface","record_id":"app-interface/24"},{"Category":"Animation","Description":"Reserve infinite animations for loaders and live data","Do":"Use looping only where necessary","Don't":"Keep decorative elements looping forever","Issue":"Limited Continuous Motion","Keywords":"loop animation loader","No":25,"Platform":"iOS/Android/React Native","Severity":"Medium","domain":"app-interface","record_id":"app-interface/25"},{"Category":"Typography","Description":"Body text must be readable and support Dynamic Type","Do":"Use platform fontScale and at least 14–16pt base","Don't":"Render critical text below 12pt","Issue":"Base Font Size","Keywords":"fontScale dynamic type","No":26,"Platform":"iOS/Android/React Native","Severity":"High","domain":"app-interface","record_id":"app-interface/26"},{"Category":"Typography","Description":"Support system text scaling without breaking layout","Do":"Set allowFontScaling and test large text","Don't":"Disable scaling on all text globally","Issue":"Dynamic Type Support","Keywords":"allowFontScaling adjustsFontSizeToFit","No":27,"Platform":"iOS/Android/React Native","Severity":"High","domain":"app-interface","record_id":"app-interface/27"},{"Category":"Safe Areas","Description":"Content must not overlap notches/gesture bars","Do":"Wrap screens in SafeAreaView or apply insets","Don't":"Place tappable content under system bars","Issue":"Safe Area Insets","Keywords":"safe area insets notch gesture","No":28,"Platform":"iOS/Android/React Native","Severity":"High","domain":"app-interface","record_id":"app-interface/28"},{"Category":"Theming","Description":"Ensure sufficient contrast in both light and dark themes","Do":"Use semantic tokens and test both themes","Don't":"Reuse light-theme grays directly in dark mode","Issue":"Light/Dark Contrast","Keywords":"dark mode contrast tokens","No":29,"Platform":"iOS/Android/React Native","Severity":"High","domain":"app-interface","record_id":"app-interface/29"},{"Category":"Anti-Pattern","Description":"Don't rely solely on hidden gestures for core actions","Do":"Provide visible buttons in addition to gestures","Don't":"Rely on swipe/shake only with no UI affordance","Issue":"No Gesture-Only Actions","Keywords":"gesture only hidden controls","No":30,"Platform":"iOS/Android/React Native","Severity":"Critical","domain":"app-interface","record_id":"app-interface/30"},{"A11y Fallback":"Dashed/dotted lines per series; togglable data table with timestamps and values","Accessibility Grade":"AA","Accessibility Notes":"Differentiate series by line style (solid/dashed/dotted) not color alone. Add pattern overlays for colorblind users.","Best Chart Type":"Line Chart","Color Guidance":"Primary: #0080FF. Multiple series: distinct colors + distinct line styles. Fill: 20% opacity","Data Type":"Trend Over Time","Data Volume Threshold":"<1000 pts: SVG; ≥1000 pts: Canvas + downsampling; >10000: aggregate to intervals","Interactive Level":"Hover + Zoom","Keywords":"trend, time-series, line, growth, timeline, progress","No":1,"Secondary Options":"Area Chart, Smooth Area","When NOT to Use":"Fewer than 4 data points (use stat card); more than 6 series (visual noise); no time dimension exists","When to Use":"Data has a time axis; user needs to observe rise/fall trends or rate of change over a continuous period","domain":"charts","record_id":"charts/1"},{"A11y Fallback":"Value labels always visible; provide CSV export","Accessibility Grade":"AAA","Accessibility Notes":"Value labels on each bar by default. Sort control for user reordering.","Best Chart Type":"Bar Chart (Horizontal or Vertical)","Color Guidance":"Each bar: distinct color. Grouped: same hue family. Always sort descending by value","Data Type":"Compare Categories","Data Volume Threshold":"<20 categories: vertical bar; 20–50: horizontal bar; >50: paginated table","Interactive Level":"Hover + Sort","Keywords":"compare, categories, bar, comparison, ranking","No":2,"Secondary Options":"Column Chart, Grouped Bar","When NOT to Use":"Categories > 15 (use table or search); data has time dimension (use line); showing proportions (use waffle/stacked)","When to Use":"Comparing discrete categories by magnitude; ranking or ordering is the core insight; categories ≤ 15","domain":"charts","record_id":"charts/2"},{"A11y Fallback":"Must provide stacked bar alternative + percentage data table as mandatory fallback","Accessibility Grade":"C","Accessibility Notes":"Pie charts fail WCAG for colorblind users. Slices rely on color alone. Avoid as primary chart in a11y contexts.","Best Chart Type":"Pie Chart or Donut","Color Guidance":"5–6 max colors. Contrasting palette. Largest slice at 12 o'clock. Always label slices with %","Data Type":"Part-to-Whole","Data Volume Threshold":"Max 6 slices; beyond that switch to stacked bar 100%","Interactive Level":"Hover + Drill","Keywords":"part-to-whole, pie, donut, percentage, proportion, share","No":3,"Secondary Options":"Stacked Bar, Waffle Chart","When NOT to Use":"Categories > 5; slice differences < 5% (visually indistinguishable); user needs precise values; accessibility-first context","When to Use":"≤5 categories; one dominant segment vs rest; emphasis on visual proportion over exact values","domain":"charts","record_id":"charts/3"},{"A11y Fallback":"Data table with correlation coefficient annotation; shape markers (circle/square/triangle) per group","Accessibility Grade":"B","Accessibility Notes":"Provide data table alternative. Combine color + shape distinction for colorblind users.","Best Chart Type":"Scatter Plot or Bubble Chart","Color Guidance":"Color axis: gradient (blue → red). Bubble size: relative to 3rd variable. Opacity: 0.6–0.8 to show density","Data Type":"Correlation / Distribution","Data Volume Threshold":"<500 pts: SVG; 500–5000: Canvas at 0.6–0.8 opacity; >5000: hexbin or aggregate first","Interactive Level":"Hover + Brush","Keywords":"correlation, distribution, scatter, relationship, pattern, cluster","No":4,"Secondary Options":"Heat Map, Matrix","When NOT to Use":"Variables are categorical (use grouped bar); fewer than 20 points (patterns aren't meaningful); mobile-primary context","When to Use":"Exploring relationship between two continuous variables; identifying clusters or outliers in a dataset","domain":"charts","record_id":"charts/4"},{"A11y Fallback":"Numerical overlay on hover; downloadable grid table with row/column labels","Accessibility Grade":"B","Accessibility Notes":"Pattern overlay for colorblind users. Numerical value on hover. Legend must include scale ticks.","Best Chart Type":"Heat Map or Choropleth","Color Guidance":"Gradient: Cool (blue) to Hot (red). Divergent scale for ±data. Always include numeric color legend","Data Type":"Heatmap / Intensity","Data Volume Threshold":"Up to 10,000 cells efficiently; beyond that aggregate; calendar heatmap: 365 cells max per SVG","Interactive Level":"Hover + Zoom","Keywords":"heatmap, heat-map, intensity, density, matrix, calendar","No":5,"Secondary Options":"Grid Heat Map, Bubble Heat","When NOT to Use":"Fewer than 20 cells (use bar); user needs to read exact values; colorblind users without pattern fallback","When to Use":"Showing intensity/density across a 2D grid; time-based patterns (e.g., activity by hour × day)","domain":"charts","record_id":"charts/5"},{"A11y Fallback":"Region text labels; sortable data table by region name and value; keyboard-navigable regions","Accessibility Grade":"B","Accessibility Notes":"Include text labels for major regions. Provide keyboard navigation between regions.","Best Chart Type":"Choropleth Map or Bubble Map","Color Guidance":"Single color gradient per region group. Categorized colors for discrete types. Legend with clear scale breaks","Data Type":"Geographic Data","Data Volume Threshold":"<1000 regions: SVG; ≥1000: Canvas/WebGL (Deck.gl); global maps: tile-based rendering","Interactive Level":"Pan + Zoom + Drill","Keywords":"geographic, map, location, region, geo, spatial, choropleth","No":6,"Secondary Options":"Geographic Heat Map","When NOT to Use":"Regions have very different sizes making visual comparison misleading (use bar); mobile-primary context","When to Use":"Data has a regional/location dimension; spatial distribution is the core insight for the user","domain":"charts","record_id":"charts/6"},{"A11y Fallback":"Provide linear list view with stage name + count + drop-off %; keyboard traversal","Accessibility Grade":"AA","Accessibility Notes":"Explicit conversion % as text per stage. Stage labels always visible. Linear list view as fallback.","Best Chart Type":"Funnel Chart or Sankey","Color Guidance":"Stages: single color gradient (start → end). Show conversion % between each stage. Highlight biggest drop","Data Type":"Funnel / Flow","Data Volume Threshold":"3–8 stages optimal; beyond 8 stages group minor steps into 'Other'","Interactive Level":"Hover + Drill","Keywords":"funnel, flow, conversion, drop-off, pipeline, stages","No":7,"Secondary Options":"Waterfall (for flows)","When NOT to Use":"Stages aren't sequential; values don't decrease monotonically (use bar); fewer than 3 stages","When to Use":"Sequential multi-stage process; showing conversion or drop-off rates between defined stages","domain":"charts","record_id":"charts/7"},{"A11y Fallback":"Numerical value + % of target shown as visible text; ARIA live region for real-time updates","Accessibility Grade":"AA","Accessibility Notes":"Always show numerical value + % of target as text beside chart. Never rely on color position alone.","Best Chart Type":"Gauge Chart or Bullet Chart","Color Guidance":"Performance: Red → Yellow → Green gradient. Target: marker line. Threshold zones clearly differentiated","Data Type":"Performance vs Target","Data Volume Threshold":"Single metric per gauge; for 3+ KPIs use bullet chart grid layout","Interactive Level":"Hover","Keywords":"performance, target, kpi, gauge, goal, threshold, progress","No":8,"Secondary Options":"Dial, Thermometer","When NOT to Use":"No target or benchmark exists; comparing multiple KPIs at once (use bullet chart grid)","When to Use":"Single KPI measured against a defined target or threshold; dashboard summary context","domain":"charts","record_id":"charts/8"},{"A11y Fallback":"Toggle actual/forecast independently; legend labels must include line-style description","Accessibility Grade":"AA","Accessibility Notes":"Toggle between actual-only and forecast views. Legend must distinguish lines beyond color (solid vs dashed).","Best Chart Type":"Line with Confidence Band","Color Guidance":"Actual: solid line #0080FF. Forecast: dashed #FF9500. Confidence band: 15% opacity fill same hue","Data Type":"Time-Series Forecast","Data Volume Threshold":"Keep historical window to 30–90 days for readability; forecast horizon ≤ 30% of visible x-axis range","Interactive Level":"Hover + Toggle","Keywords":"forecast, prediction, confidence, band, projection, estimate","No":9,"Secondary Options":"Ribbon Chart","When NOT to Use":"No historical baseline; prediction confidence is too low to be useful; audience is not data-literate","When to Use":"Historical data + model predictions; communicating uncertainty range to non-technical stakeholders","domain":"charts","record_id":"charts/9"},{"A11y Fallback":"Text alert annotation per anomaly; anomaly summary list panel alongside chart","Accessibility Grade":"AA","Accessibility Notes":"Use shape marker (not color only) for anomaly points. Add text annotation per anomaly event.","Best Chart Type":"Line Chart with Highlights","Color Guidance":"Normal: #0080FF solid line. Anomaly marker: #FF0000 circle + filled. Alert band: #FFF3CD background zone","Data Type":"Anomaly Detection","Data Volume Threshold":"Stream at ≤60fps with Canvas; batch: up to 10,000 pts; mark anomalies as a separate data layer","Interactive Level":"Hover + Alert","Keywords":"anomaly, outlier, spike, alert, detection, monitoring, deviation","No":10,"Secondary Options":"Scatter with Alert","When NOT to Use":"Anomalies are predefined categories (use bar with highlight); real-time context without a pause control","When to Use":"Monitoring a time-series for outliers; alerting users to unexpected spikes or dips in operational data","domain":"charts","record_id":"charts/10"},{"A11y Fallback":"Collapsible tree table as primary view; treemap as supplementary visual only","Accessibility Grade":"C","Accessibility Notes":"Poor baseline accessibility. Always provide table alternative as primary view. Label all large areas.","Best Chart Type":"Treemap","Color Guidance":"Parent nodes: distinct hues. Children: lighter shades of same hue. White separator borders: 2–3px","Data Type":"Hierarchical / Nested Data","Data Volume Threshold":"<200 nodes: SVG; 200–1000: Canvas; >1000: paginate or pre-filter before rendering","Interactive Level":"Hover + Drilldown","Keywords":"hierarchy, nested, treemap, parent, children, breakdown, drill","No":11,"Secondary Options":"Sunburst, Nested Donut, Icicle","When NOT to Use":"Hierarchy depth > 3 levels (too complex to read); user needs to compare sibling values precisely","When to Use":"Showing size relationships within a hierarchy; overview of proportional structure (e.g., budget breakdown)","domain":"charts","record_id":"charts/11"},{"A11y Fallback":"Flow table (Source → Target → Value); keyboard-traversable node list with tab stops","Accessibility Grade":"C","Accessibility Notes":"Structural flow charts cannot be conveyed by color alone. Provide flow table. Avoid on mobile.","Best Chart Type":"Sankey Diagram","Color Guidance":"Gradient from source to target color. Flow opacity: 0.4–0.6. Node labels always visible","Data Type":"Flow / Process Data","Data Volume Threshold":"<50 flows: SVG; ≥50: Canvas; >200 flows: aggregate minor flows into 'Other' node","Interactive Level":"Hover + Drilldown","Keywords":"flow, process, sankey, distribution, source, target, transfer","No":12,"Secondary Options":"Alluvial, Chord Diagram","When NOT to Use":"Flow directions form loops (use network graph); fewer than 3 source-target pairs; mobile-primary context","When to Use":"Showing how quantities flow between nodes; multi-source multi-target distribution","domain":"charts","record_id":"charts/12"},{"A11y Fallback":"Table with running total column; directional arrow icons per row","Accessibility Grade":"AA","Accessibility Notes":"Color + directional arrow icon per bar (not color alone). Labels on every bar.","Best Chart Type":"Waterfall Chart","Color Guidance":"Increases: #4CAF50. Decreases: #F44336. Start total: #2196F3. End total: #0D47A1. Running total line: dashed","Data Type":"Cumulative Changes","Data Volume Threshold":"4–12 bars optimal; beyond 12 aggregate minor items into a single 'Other' bar","Interactive Level":"Hover","Keywords":"waterfall, cumulative, variance, incremental, bridge, delta","No":13,"Secondary Options":"Stacked Bar, Cascade","When NOT to Use":"Changes are not additive; more than 12 bars (readability breaks); audience expects a simple total","When to Use":"Showing how individual positive/negative components add up to a final total (e.g., P&L, budget variance)","domain":"charts","record_id":"charts/13"},{"A11y Fallback":"Grouped bar chart as mandatory alternative; include raw data table","Accessibility Grade":"B","Accessibility Notes":"Limit axes to 5–8. Always provide grouped bar chart alternative for precise reading.","Best Chart Type":"Radar / Spider Chart","Color Guidance":"Single dataset: #0080FF at 20% fill. Multiple: distinct hues with 30% fill. Border: full opacity","Data Type":"Multi-Variable Comparison","Data Volume Threshold":"2–3 datasets maximum per chart; 5–8 axes; beyond 8 axes switch to parallel coordinates","Interactive Level":"Hover + Toggle","Keywords":"radar, spider, multi-variable, attributes, dimensions, comparison","No":14,"Secondary Options":"Parallel Coordinates, Grouped Bar","When NOT to Use":"Axes > 8 (unreadable); values need precise comparison (use grouped bar); audience unfamiliar with radar charts","When to Use":"Comparing multiple entities across the same fixed set of attributes (e.g., product feature comparison)","domain":"charts","record_id":"charts/14"},{"A11y Fallback":"OHLC data table with sortable columns; numeric summary panel (daily change %)","Accessibility Grade":"B","Accessibility Notes":"Provide OHLC data table. Colorblind: use fill vs outline pattern (bullish = filled, bearish = hollow).","Best Chart Type":"Candlestick Chart","Color Guidance":"Bullish: #26A69A. Bearish: #EF5350. Volume bars: 40% opacity below. Body fill vs hollow for OHLC style","Data Type":"Stock / Trading OHLC","Data Volume Threshold":"Real-time: Canvas required. Historical: paginate by time range. Max 500 candles visible at once","Interactive Level":"Real-time + Hover + Zoom","Keywords":"stock, trading, ohlc, candlestick, finance, price, volume","No":15,"Secondary Options":"OHLC Bar, Heikin-Ashi","When NOT to Use":"Non-financial audience; no OHLC data available (use line chart); accessibility-first context","When to Use":"Financial time-series with Open/High/Low/Close data; trading or investment product context only","domain":"charts","record_id":"charts/15"},{"A11y Fallback":"Adjacency list table (Node A → Node B → Weight); hierarchical tree view when structure allows","Accessibility Grade":"D","Accessibility Notes":"Fundamentally inaccessible without alternative. Never use as sole representation. Always provide list alternative.","Best Chart Type":"Network Graph","Color Guidance":"Node types: categorical colors. Edges: #90A4AE at 60% opacity. Highlight path: #F59E0B","Data Type":"Relationship / Connection Data","Data Volume Threshold":"≤100 nodes: SVG; 101–500: Canvas; >500: must apply clustering/LOD before rendering","Interactive Level":"Drilldown + Hover + Drag","Keywords":"network, graph, nodes, edges, connections, relationships, force","No":16,"Secondary Options":"Hierarchical Tree, Adjacency Matrix","When NOT to Use":"Node count > 500 without clustering pre-applied; user needs precise connection counts; mobile context","When to Use":"Mapping connections between entities; network topology or social graph exploration context","domain":"charts","record_id":"charts/16"},{"A11y Fallback":"Stats summary table (min / Q1 / median / Q3 / max / mean); outlier count annotation","Accessibility Grade":"AA","Accessibility Notes":"Include stats summary table. Annotate outlier count in chart subtitle.","Best Chart Type":"Box Plot","Color Guidance":"Box fill: #BBDEFB. Border: #1976D2. Median line: #D32F2F bold. Outlier dots: #F44336","Data Type":"Distribution / Statistical","Data Volume Threshold":"Any sample size; aggregated representation so rendering is ⚡ Excellent at any volume","Interactive Level":"Hover","Keywords":"distribution, statistical, spread, median, outlier, quartile, boxplot","No":17,"Secondary Options":"Violin Plot, Beeswarm","When NOT to Use":"Fewer than 20 data points per group (distribution is not meaningful); audience unfamiliar with statistical charts","When to Use":"Showing spread, median, and outliers of a dataset; comparing distributions across multiple groups","domain":"charts","record_id":"charts/17"},{"A11y Fallback":"Numerical values always visible (not hover-only); color ranges labeled with threshold text","Accessibility Grade":"AAA","Accessibility Notes":"All values always visible as text. Color ranges are labeled with text thresholds not color alone.","Best Chart Type":"Bullet Chart","Color Guidance":"Qualitative ranges: #FFCDD2 / #FFF9C4 / #C8E6C9 (bad/ok/good). Performance bar: #1976D2. Target: black 3px marker","Data Type":"Performance vs Target (Compact)","Data Volume Threshold":"Ideal for 3–10 bullet charts in a grid; scales to any count efficiently","Interactive Level":"Hover","Keywords":"bullet, compact, kpi, dashboard, target, benchmark, range","No":18,"Secondary Options":"Gauge, Progress Bar","When NOT to Use":"Single KPI with emphasis (use gauge); data has no defined target range; fewer than 3 KPIs","When to Use":"Dashboard with multiple KPIs side by side; space-constrained contexts where a gauge is too large","domain":"charts","record_id":"charts/18"},{"A11y Fallback":"Percentage text always visible; grid cells labeled with aria-label value; provide legend","Accessibility Grade":"AA","Accessibility Notes":"Better than pie for accessibility. Percentage text label always visible. Each cell has aria-label.","Best Chart Type":"Waffle Chart","Color Guidance":"3–5 categories max. 2–3px gap between cells. Each category a distinct accessible color pair","Data Type":"Proportional / Percentage","Data Volume Threshold":"10×10 grid standard (100 cells); for > 5 categories switch to stacked 100% bar","Interactive Level":"Hover","Keywords":"waffle, percentage, proportion, progress, filled, grid","No":19,"Secondary Options":"Pictogram, Stacked Bar 100%","When NOT to Use":"More than 5 categories (use stacked bar); exact values matter over visual proportion; very tight space","When to Use":"Showing what fraction of a whole is filled; percentage progress in a visually engaging and accessible format","domain":"charts","record_id":"charts/19"},{"A11y Fallback":"Collapsible indented list with percentages; breadcrumb trail for current drill-down state","Accessibility Grade":"C","Accessibility Notes":"Poor accessibility beyond 2 levels. Mandatory table alternative required for any production use.","Best Chart Type":"Sunburst Chart","Color Guidance":"Center to outer: darker to lighter hue. Each level 15–20% lighter. Contrasting border between sectors","Data Type":"Hierarchical Proportional","Data Volume Threshold":"<100 nodes: SVG; 100–500: Canvas; >500: filter to top N before rendering","Interactive Level":"Drilldown + Hover","Keywords":"sunburst, hierarchy, nested, proportion, radial, circle","No":20,"Secondary Options":"Treemap, Icicle, Circle Packing","When NOT to Use":"More than 3 hierarchy levels (outer rings become unreadable); precision matters over overview; mobile","When to Use":"Exploring nested proportions where both hierarchy and relative size matter (e.g., org spend breakdown)","domain":"charts","record_id":"charts/20"},{"A11y Fallback":"Keyboard expand/collapse tree; screen reader announces node label + value + % impact","Accessibility Grade":"AA","Accessibility Notes":"Keyboard-navigable expand/collapse. Screen reader announces node value and % contribution.","Best Chart Type":"Decomposition Tree","Color Guidance":"Positive impact nodes: #2563EB. Negative impact nodes: #EF4444. Neutral connectors: #94A3B8","Data Type":"Root Cause Analysis","Data Volume Threshold":"Up to 5 levels deep; limit visible nodes to 20 per level for readability; lazy-load deeper levels","Interactive Level":"Drill + Expand","Keywords":"root cause, decomposition, tree, hierarchy, drill-down, ai-split, attribution","No":21,"Secondary Options":"Decision Tree, Flow Chart","When NOT to Use":"No clear parent-child causal relationship; audience expects a summary rather than exploration","When to Use":"Decomposing a metric into contributing factors; AI-assisted analysis or BI drill-down scenarios","domain":"charts","record_id":"charts/21"},{"A11y Fallback":"Mandatory 2D projection view + data table; do not use as primary chart type in product UI","Accessibility Grade":"D","Accessibility Notes":"3D spatial charts are fundamentally inaccessible. Must not be used as primary chart type in any product UI.","Best Chart Type":"3D Scatter / Surface Plot","Color Guidance":"Depth cues: lighting and shading. Z-axis: color gradient (cool → warm). Transparent overlapping: opacity 0.4","Data Type":"3D Spatial Data","Data Volume Threshold":"WebGL required. Deck.gl: up to 1M points. Three.js: LOD required beyond 50,000 pts","Interactive Level":"Rotate + Zoom + VR","Keywords":"3d, spatial, immersive, terrain, molecular, volumetric, point-cloud","No":22,"Secondary Options":"Volumetric Rendering, Point Cloud","When NOT to Use":"2D projection conveys the same insight; mobile context; accessibility-required environments; standard business dashboards","When to Use":"Scientific/engineering context where Z-axis carries essential info not expressible in 2D","domain":"charts","record_id":"charts/22"},{"A11y Fallback":"Pause/resume button required; current value shown as large text KPI; prefers-reduced-motion: freeze animation","Accessibility Grade":"B","Accessibility Notes":"Pause/resume control required. Current value as large visible text KPI. Respect prefers-reduced-motion.","Best Chart Type":"Streaming Area Chart","Color Guidance":"Current pulse: #00FF00 (dark theme) or #0080FF (light theme). History: fading opacity. Grid: dark background","Data Type":"Real-Time Streaming","Data Volume Threshold":"Canvas/WebGL required. Buffer last 60–300s of data. Downsample older data on scroll","Interactive Level":"Real-time + Pause + Zoom","Keywords":"streaming, real-time, ticker, live, velocity, pulse, monitoring","No":23,"Secondary Options":"Ticker Tape, Moving Gauge","When NOT to Use":"Update frequency < 1/min (use periodic-refresh line chart); flashing content without reduced-motion support","When to Use":"Live monitoring dashboards; IoT/ops data updating at ≥1 Hz; user needs current value at a glance","domain":"charts","record_id":"charts/23"},{"A11y Fallback":"Sortable list view by frequency with sentiment label column; word cloud as supplementary only","Accessibility Grade":"C","Accessibility Notes":"Word clouds fail screen readers. Never use as sole output of NLP analysis. Always pair with list view.","Best Chart Type":"Word Cloud with Sentiment","Color Guidance":"Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Word size maps to frequency","Data Type":"Sentiment / Emotion","Data Volume Threshold":"50–5000 terms optimal. Beyond 5000: apply top-N filtering before render. Avoid on mobile","Interactive Level":"Hover + Filter","Keywords":"sentiment, emotion, nlp, opinion, feeling, text-analysis","No":24,"Secondary Options":"Sentiment Arc, Radar Chart","When NOT to Use":"Precise values matter (word size is inherently imprecise); screen-reader context; corpus < 50 items","When to Use":"NLP output visualization; exploratory analysis of text corpus sentiment; frequency-weighted keyword overview","domain":"charts","record_id":"charts/24"},{"A11y Fallback":"Path summary table (variant → frequency → avg duration); top 3 bottlenecks as text annotation panel","Accessibility Grade":"B","Accessibility Notes":"Complex graphs are hard to navigate. Provide path summary text. Highlight top 3 bottlenecks as annotations.","Best Chart Type":"Process Map / Graph","Color Guidance":"Happy path: #10B981 thick line. Deviations: #F59E0B thin line. Bottleneck nodes: #EF4444 fill","Data Type":"Process Mining","Data Volume Threshold":"<30 nodes: SVG; 30–100: Canvas; >100: apply variant filtering (top 80% of cases) before rendering","Interactive Level":"Drag + Node-Click","Keywords":"process, mining, variants, path, bottleneck, log, event","No":25,"Secondary Options":"Directed Acyclic Graph (DAG), Petri Net","When NOT to Use":"No event log data available; audience expects a static flowchart (use diagram tool); node count > 100 without pre-filtering","When to Use":"Analyzing event logs to visualize actual process flows; identifying bottlenecks and deviations in ops/product funnels","domain":"charts","record_id":"charts/25"},{"Accent":"#EA580C","Background":"#F8FAFC","Border":"#E2E8F0","Card":"#FFFFFF","Card Foreground":"#1E293B","Destructive":"#DC2626","Foreground":"#1E293B","Muted":"#E9EFF8","Muted Foreground":"#64748B","No":1,"Notes":"Trust blue + orange CTA contrast [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#2563EB","Product Type":"SaaS (General)","Ring":"#2563EB","Secondary":"#3B82F6","domain":"colors","record_id":"colors/1"},{"Accent":"#059669","Background":"#F5F3FF","Border":"#E0E7FF","Card":"#FFFFFF","Card Foreground":"#1E1B4B","Destructive":"#DC2626","Foreground":"#1E1B4B","Muted":"#EBEFF9","Muted Foreground":"#64748B","No":2,"Notes":"Indigo primary + emerald CTA [Accent adjusted from #10B981 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#6366F1","Product Type":"Micro SaaS","Ring":"#6366F1","Secondary":"#818CF8","domain":"colors","record_id":"colors/2"},{"Accent":"#EA580C","Background":"#ECFDF5","Border":"#A7F3D0","Card":"#FFFFFF","Card Foreground":"#064E3B","Destructive":"#DC2626","Foreground":"#064E3B","Muted":"#E8F1F3","Muted Foreground":"#64748B","No":3,"Notes":"Success green + urgency orange [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#059669","Product Type":"E-commerce","Ring":"#059669","Secondary":"#10B981","domain":"colors","record_id":"colors/3"},{"Accent":"#A16207","Background":"#FAFAF9","Border":"#D6D3D1","Card":"#FFFFFF","Card Foreground":"#0C0A09","Destructive":"#DC2626","Foreground":"#0C0A09","Muted":"#E8ECF0","Muted Foreground":"#64748B","No":4,"Notes":"Premium dark + gold accent [Accent adjusted from #CA8A04 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1C1917","Product Type":"E-commerce Luxury","Ring":"#1C1917","Secondary":"#44403C","domain":"colors","record_id":"colors/4"},{"Accent":"#0369A1","Background":"#F8FAFC","Border":"#E2E8F0","Card":"#FFFFFF","Card Foreground":"#020617","Destructive":"#DC2626","Foreground":"#020617","Muted":"#E8ECF1","Muted Foreground":"#64748B","No":5,"Notes":"Professional navy + blue CTA","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0F172A","Product Type":"B2B Service","Ring":"#0F172A","Secondary":"#334155","domain":"colors","record_id":"colors/5"},{"Accent":"#22C55E","Background":"#020617","Border":"#334155","Card":"#0E1223","Card Foreground":"#F8FAFC","Destructive":"#EF4444","Foreground":"#F8FAFC","Muted":"#1A1E2F","Muted Foreground":"#94A3B8","No":6,"Notes":"Dark bg + green positive indicators","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0F172A","Product Type":"Financial Dashboard","Ring":"#0F172A","Secondary":"#1E293B","domain":"colors","record_id":"colors/6"},{"Accent":"#D97706","Background":"#F8FAFC","Border":"#DBEAFE","Card":"#FFFFFF","Card Foreground":"#1E3A8A","Destructive":"#DC2626","Foreground":"#1E3A8A","Muted":"#E9EEF6","Muted Foreground":"#64748B","No":7,"Notes":"Blue data + amber highlights [Accent adjusted from #F59E0B for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E40AF","Product Type":"Analytics Dashboard","Ring":"#1E40AF","Secondary":"#3B82F6","domain":"colors","record_id":"colors/7"},{"Accent":"#059669","Background":"#ECFEFF","Border":"#A5F3FC","Card":"#FFFFFF","Card Foreground":"#164E63","Destructive":"#DC2626","Foreground":"#164E63","Muted":"#E8F1F6","Muted Foreground":"#64748B","No":8,"Notes":"Calm cyan + health green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#0891B2","Product Type":"Healthcare App","Ring":"#0891B2","Secondary":"#22D3EE","domain":"colors","record_id":"colors/8"},{"Accent":"#EA580C","Background":"#EEF2FF","Border":"#C7D2FE","Card":"#FFFFFF","Card Foreground":"#1E1B4B","Destructive":"#DC2626","Foreground":"#1E1B4B","Muted":"#EBEEF8","Muted Foreground":"#64748B","No":9,"Notes":"Playful indigo + energetic orange [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#4F46E5","Product Type":"Educational App","Ring":"#4F46E5","Secondary":"#818CF8","domain":"colors","record_id":"colors/9"},{"Accent":"#0891B2","Background":"#FDF2F8","Border":"#FBCFE8","Card":"#FFFFFF","Card Foreground":"#831843","Destructive":"#DC2626","Foreground":"#831843","Muted":"#F1EEF5","Muted Foreground":"#64748B","No":10,"Notes":"Bold pink + cyan accent [Accent adjusted from #06B6D4 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#EC4899","Product Type":"Creative Agency","Ring":"#EC4899","Secondary":"#F472B6","domain":"colors","record_id":"colors/10"},{"Accent":"#2563EB","Background":"#FAFAFA","Border":"#E4E4E7","Card":"#FFFFFF","Card Foreground":"#09090B","Destructive":"#DC2626","Foreground":"#09090B","Muted":"#E8ECF0","Muted Foreground":"#64748B","No":11,"Notes":"Monochrome + blue accent","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#18181B","Product Type":"Portfolio/Personal","Ring":"#18181B","Secondary":"#3F3F46","domain":"colors","record_id":"colors/11"},{"Accent":"#F43F5E","Background":"#0F0F23","Border":"#4C1D95","Card":"#1E1C35","Card Foreground":"#E2E8F0","Destructive":"#EF4444","Foreground":"#E2E8F0","Muted":"#27273B","Muted Foreground":"#94A3B8","No":12,"Notes":"Neon purple + rose action","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#7C3AED","Product Type":"Gaming","Ring":"#7C3AED","Secondary":"#A78BFA","domain":"colors","record_id":"colors/12"},{"Accent":"#0369A1","Background":"#F8FAFC","Border":"#E2E8F0","Card":"#FFFFFF","Card Foreground":"#020617","Destructive":"#DC2626","Foreground":"#020617","Muted":"#E8ECF1","Muted Foreground":"#64748B","No":13,"Notes":"High contrast navy + blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0F172A","Product Type":"Government/Public Service","Ring":"#0F172A","Secondary":"#334155","domain":"colors","record_id":"colors/13"},{"Accent":"#8B5CF6","Background":"#0F172A","Border":"#334155","Card":"#222735","Card Foreground":"#F8FAFC","Destructive":"#EF4444","Foreground":"#F8FAFC","Muted":"#272F42","Muted Foreground":"#94A3B8","No":14,"Notes":"Gold trust + purple tech","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#0F172A","On Secondary":"#0F172A","Primary":"#F59E0B","Product Type":"Fintech/Crypto","Ring":"#F59E0B","Secondary":"#FBBF24","domain":"colors","record_id":"colors/14"},{"Accent":"#2563EB","Background":"#FFF1F2","Border":"#FECDD3","Card":"#FFFFFF","Card Foreground":"#881337","Destructive":"#DC2626","Foreground":"#881337","Muted":"#F0ECF2","Muted Foreground":"#64748B","No":15,"Notes":"Vibrant rose + engagement blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#E11D48","Product Type":"Social Media App","Ring":"#E11D48","Secondary":"#FB7185","domain":"colors","record_id":"colors/15"},{"Accent":"#EA580C","Background":"#F0FDFA","Border":"#99F6E4","Card":"#FFFFFF","Card Foreground":"#134E4A","Destructive":"#DC2626","Foreground":"#134E4A","Muted":"#E8F1F4","Muted Foreground":"#64748B","No":16,"Notes":"Teal focus + action orange [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#0D9488","Product Type":"Productivity Tool","Ring":"#0D9488","Secondary":"#14B8A6","domain":"colors","record_id":"colors/16"},{"Accent":"#EA580C","Background":"#EEF2FF","Border":"#C7D2FE","Card":"#FFFFFF","Card Foreground":"#312E81","Destructive":"#DC2626","Foreground":"#312E81","Muted":"#EBEEF8","Muted Foreground":"#64748B","No":17,"Notes":"Indigo brand + doc hierarchy [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#4F46E5","Product Type":"Design System/Component Library","Ring":"#4F46E5","Secondary":"#6366F1","domain":"colors","record_id":"colors/17"},{"Accent":"#0891B2","Background":"#FAF5FF","Border":"#DDD6FE","Card":"#FFFFFF","Card Foreground":"#1E1B4B","Destructive":"#DC2626","Foreground":"#1E1B4B","Muted":"#ECEEF9","Muted Foreground":"#64748B","No":18,"Notes":"AI purple + cyan interactions [Accent adjusted from #06B6D4 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#7C3AED","Product Type":"AI/Chatbot Platform","Ring":"#7C3AED","Secondary":"#A78BFA","domain":"colors","record_id":"colors/18"},{"Accent":"#FBBF24","Background":"#0F0F23","Border":"#4C1D95","Card":"#1E1D35","Card Foreground":"#F8FAFC","Destructive":"#EF4444","Foreground":"#F8FAFC","Muted":"#27273B","Muted Foreground":"#94A3B8","No":19,"Notes":"Purple tech + gold value","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#8B5CF6","Product Type":"NFT/Web3 Platform","Ring":"#8B5CF6","Secondary":"#A78BFA","domain":"colors","record_id":"colors/19"},{"Accent":"#EA580C","Background":"#FDF2F8","Border":"#FBCFE8","Card":"#FFFFFF","Card Foreground":"#831843","Destructive":"#DC2626","Foreground":"#831843","Muted":"#F1EEF5","Muted Foreground":"#64748B","No":20,"Notes":"Creator pink + engagement orange [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#EC4899","Product Type":"Creator Economy Platform","Ring":"#EC4899","Secondary":"#F472B6","domain":"colors","record_id":"colors/20"},{"Accent":"#059669","Background":"#F5F3FF","Border":"#E0E7FF","Card":"#FFFFFF","Card Foreground":"#312E81","Destructive":"#DC2626","Foreground":"#312E81","Muted":"#EBEFF9","Muted Foreground":"#64748B","No":21,"Notes":"Calm indigo + success green [Accent adjusted from #10B981 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#6366F1","Product Type":"Remote Work/Collaboration Tool","Ring":"#6366F1","Secondary":"#818CF8","domain":"colors","record_id":"colors/21"},{"Accent":"#059669","Background":"#FAF5FF","Border":"#EDE9FE","Card":"#FFFFFF","Card Foreground":"#4C1D95","Destructive":"#DC2626","Foreground":"#4C1D95","Muted":"#EDEFF9","Muted Foreground":"#64748B","No":22,"Notes":"Calming lavender + wellness green [Accent adjusted from #10B981 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#8B5CF6","Product Type":"Mental Health App","Ring":"#8B5CF6","Secondary":"#C4B5FD","domain":"colors","record_id":"colors/22"},{"Accent":"#2563EB","Background":"#FFF7ED","Border":"#FED7AA","Card":"#FFFFFF","Card Foreground":"#9A3412","Destructive":"#DC2626","Foreground":"#9A3412","Muted":"#F1F0F0","Muted Foreground":"#64748B","No":23,"Notes":"Playful orange + trust blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#0F172A","On Secondary":"#0F172A","Primary":"#F97316","Product Type":"Pet Tech App","Ring":"#F97316","Secondary":"#FB923C","domain":"colors","record_id":"colors/23"},{"Accent":"#22C55E","Background":"#0F172A","Border":"#475569","Card":"#1B2336","Card Foreground":"#F8FAFC","Destructive":"#EF4444","Foreground":"#F8FAFC","Muted":"#272F42","Muted Foreground":"#94A3B8","No":24,"Notes":"Dark tech + status green","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E293B","Product Type":"Smart Home/IoT Dashboard","Ring":"#1E293B","Secondary":"#334155","domain":"colors","record_id":"colors/24"},{"Accent":"#16A34A","Background":"#ECFEFF","Border":"#A5F3FC","Card":"#FFFFFF","Card Foreground":"#164E63","Destructive":"#DC2626","Foreground":"#164E63","Muted":"#E8F1F6","Muted Foreground":"#64748B","No":25,"Notes":"Electric cyan + eco green [Accent adjusted from #22C55E for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#0891B2","Product Type":"EV/Charging Ecosystem","Ring":"#0891B2","Secondary":"#22D3EE","domain":"colors","record_id":"colors/25"},{"Accent":"#EA580C","Background":"#FDF4FF","Border":"#F5D0FE","Card":"#FFFFFF","Card Foreground":"#86198F","Destructive":"#DC2626","Foreground":"#86198F","Muted":"#F0EEF9","Muted Foreground":"#64748B","No":26,"Notes":"Excitement purple + urgency orange [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#D946EF","Product Type":"Subscription Box Service","Ring":"#D946EF","Secondary":"#E879F9","domain":"colors","record_id":"colors/26"},{"Accent":"#F97316","Background":"#0F0F23","Border":"#4338CA","Card":"#1B1B30","Card Foreground":"#F8FAFC","Destructive":"#EF4444","Foreground":"#F8FAFC","Muted":"#27273B","Muted Foreground":"#94A3B8","No":27,"Notes":"Dark audio + warm accent","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E1B4B","Product Type":"Podcast Platform","Ring":"#1E1B4B","Secondary":"#312E81","domain":"colors","record_id":"colors/27"},{"Accent":"#EA580C","Background":"#FFF1F2","Border":"#FECDD3","Card":"#FFFFFF","Card Foreground":"#881337","Destructive":"#DC2626","Foreground":"#881337","Muted":"#F0ECF2","Muted Foreground":"#64748B","No":28,"Notes":"Romantic rose + warm orange [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#E11D48","Product Type":"Dating App","Ring":"#E11D48","Secondary":"#FB7185","domain":"colors","record_id":"colors/28"},{"Accent":"#A16207","Background":"#F0F9FF","Border":"#BAE6FD","Card":"#FFFFFF","Card Foreground":"#0C4A6E","Destructive":"#DC2626","Foreground":"#0C4A6E","Muted":"#E7EFF5","Muted Foreground":"#64748B","No":29,"Notes":"Trust blue + achievement gold [Accent adjusted from #CA8A04 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#0369A1","Product Type":"Micro-Credentials/Badges Platform","Ring":"#0369A1","Secondary":"#0EA5E9","domain":"colors","record_id":"colors/29"},{"Accent":"#2563EB","Background":"#F8FAFC","Border":"#E2E8F0","Card":"#FFFFFF","Card Foreground":"#1E293B","Destructive":"#DC2626","Foreground":"#1E293B","Muted":"#EAEFF3","Muted Foreground":"#64748B","No":30,"Notes":"Neutral grey + link blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#475569","Product Type":"Knowledge Base/Documentation","Ring":"#475569","Secondary":"#64748B","domain":"colors","record_id":"colors/30"},{"Accent":"#EA580C","Background":"#ECFDF5","Border":"#A7F3D0","Card":"#FFFFFF","Card Foreground":"#064E3B","Destructive":"#DC2626","Foreground":"#064E3B","Muted":"#E8F1F3","Muted Foreground":"#64748B","No":31,"Notes":"Location green + action orange [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#059669","Product Type":"Hyperlocal Services","Ring":"#059669","Secondary":"#10B981","domain":"colors","record_id":"colors/31"},{"Accent":"#8B5CF6","Background":"#FDF2F8","Border":"#FBCFE8","Card":"#FFFFFF","Card Foreground":"#831843","Destructive":"#DC2626","Foreground":"#831843","Muted":"#F1EEF5","Muted Foreground":"#64748B","No":32,"Notes":"Soft pink + lavender luxury","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#EC4899","Product Type":"Beauty/Spa/Wellness Service","Ring":"#EC4899","Secondary":"#F9A8D4","domain":"colors","record_id":"colors/32"},{"Accent":"#A16207","Background":"#FAFAF9","Border":"#D6D3D1","Card":"#FFFFFF","Card Foreground":"#0C0A09","Destructive":"#DC2626","Foreground":"#0C0A09","Muted":"#E8ECF0","Muted Foreground":"#64748B","No":33,"Notes":"Premium black + gold accent [Accent adjusted from #CA8A04 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1C1917","Product Type":"Luxury/Premium Brand","Ring":"#1C1917","Secondary":"#44403C","domain":"colors","record_id":"colors/33"},{"Accent":"#A16207","Background":"#FEF2F2","Border":"#FECACA","Card":"#FFFFFF","Card Foreground":"#450A0A","Destructive":"#DC2626","Foreground":"#450A0A","Muted":"#F0EDF1","Muted Foreground":"#64748B","No":34,"Notes":"Appetizing red + warm gold [Accent adjusted from #CA8A04 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#DC2626","Product Type":"Restaurant/Food Service","Ring":"#DC2626","Secondary":"#F87171","domain":"colors","record_id":"colors/34"},{"Accent":"#22C55E","Background":"#1F2937","Border":"#374151","Card":"#313742","Card Foreground":"#F8FAFC","Destructive":"#EF4444","Foreground":"#F8FAFC","Muted":"#37414F","Muted Foreground":"#94A3B8","No":35,"Notes":"Energy orange + success green","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#0F172A","On Secondary":"#0F172A","Primary":"#F97316","Product Type":"Fitness/Gym App","Ring":"#F97316","Secondary":"#FB923C","domain":"colors","record_id":"colors/35"},{"Accent":"#0369A1","Background":"#F0FDFA","Border":"#99F6E4","Card":"#FFFFFF","Card Foreground":"#134E4A","Destructive":"#DC2626","Foreground":"#134E4A","Muted":"#E8F0F3","Muted Foreground":"#64748B","No":36,"Notes":"Trust teal + professional blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#0F766E","Product Type":"Real Estate/Property","Ring":"#0F766E","Secondary":"#14B8A6","domain":"colors","record_id":"colors/36"},{"Accent":"#EA580C","Background":"#F0F9FF","Border":"#BAE6FD","Card":"#FFFFFF","Card Foreground":"#0C4A6E","Destructive":"#DC2626","Foreground":"#0C4A6E","Muted":"#E8F2F8","Muted Foreground":"#64748B","No":37,"Notes":"Sky blue + adventure orange [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#0F172A","On Secondary":"#0F172A","Primary":"#0EA5E9","Product Type":"Travel/Tourism Agency","Ring":"#0EA5E9","Secondary":"#38BDF8","domain":"colors","record_id":"colors/37"},{"Accent":"#A16207","Background":"#F8FAFC","Border":"#BFDBFE","Card":"#FFFFFF","Card Foreground":"#1E40AF","Destructive":"#DC2626","Foreground":"#1E40AF","Muted":"#E9EEF5","Muted Foreground":"#64748B","No":38,"Notes":"Luxury navy + gold service [Accent adjusted from #CA8A04 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E3A8A","Product Type":"Hotel/Hospitality","Ring":"#1E3A8A","Secondary":"#3B82F6","domain":"colors","record_id":"colors/38"},{"Accent":"#A16207","Background":"#FDF2F8","Border":"#FBCFE8","Card":"#FFFFFF","Card Foreground":"#831843","Destructive":"#DC2626","Foreground":"#831843","Muted":"#F0EDF4","Muted Foreground":"#64748B","No":39,"Notes":"Romantic pink + elegant gold [Accent adjusted from #CA8A04 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#DB2777","Product Type":"Wedding/Event Planning","Ring":"#DB2777","Secondary":"#F472B6","domain":"colors","record_id":"colors/39"},{"Accent":"#B45309","Background":"#F8FAFC","Border":"#CBD5E1","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#E9EEF5","Muted Foreground":"#64748B","No":40,"Notes":"Authority navy + trust gold","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E3A8A","Product Type":"Legal Services","Ring":"#1E3A8A","Secondary":"#1E40AF","domain":"colors","record_id":"colors/40"},{"Accent":"#16A34A","Background":"#F0F9FF","Border":"#BAE6FD","Card":"#FFFFFF","Card Foreground":"#0C4A6E","Destructive":"#DC2626","Foreground":"#0C4A6E","Muted":"#E7EFF5","Muted Foreground":"#64748B","No":41,"Notes":"Security blue + protected green [Accent adjusted from #22C55E for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#0369A1","Product Type":"Insurance Platform","Ring":"#0369A1","Secondary":"#0EA5E9","domain":"colors","record_id":"colors/41"},{"Accent":"#A16207","Background":"#F8FAFC","Border":"#E2E8F0","Card":"#FFFFFF","Card Foreground":"#020617","Destructive":"#DC2626","Foreground":"#020617","Muted":"#E8ECF1","Muted Foreground":"#64748B","No":42,"Notes":"Trust navy + premium gold [Accent adjusted from #CA8A04 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0F172A","Product Type":"Banking/Traditional Finance","Ring":"#0F172A","Secondary":"#1E3A8A","domain":"colors","record_id":"colors/42"},{"Accent":"#EA580C","Background":"#F0FDFA","Border":"#5EEAD4","Card":"#FFFFFF","Card Foreground":"#134E4A","Destructive":"#DC2626","Foreground":"#134E4A","Muted":"#E8F1F4","Muted Foreground":"#64748B","No":43,"Notes":"Progress teal + achievement orange [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#0D9488","Product Type":"Online Course/E-learning","Ring":"#0D9488","Secondary":"#2DD4BF","domain":"colors","record_id":"colors/43"},{"Accent":"#EA580C","Background":"#ECFEFF","Border":"#A5F3FC","Card":"#FFFFFF","Card Foreground":"#164E63","Destructive":"#DC2626","Foreground":"#164E63","Muted":"#E8F1F6","Muted Foreground":"#64748B","No":44,"Notes":"Compassion blue + action orange [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#0891B2","Product Type":"Non-profit/Charity","Ring":"#0891B2","Secondary":"#22D3EE","domain":"colors","record_id":"colors/44"},{"Accent":"#22C55E","Background":"#0F0F23","Border":"#312E81","Card":"#1B1B30","Card Foreground":"#F8FAFC","Destructive":"#EF4444","Foreground":"#F8FAFC","Muted":"#27273B","Muted Foreground":"#94A3B8","No":45,"Notes":"Dark audio + play green","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E1B4B","Product Type":"Music Streaming","Ring":"#1E1B4B","Secondary":"#4338CA","domain":"colors","record_id":"colors/45"},{"Accent":"#E11D48","Background":"#000000","Border":"#312E81","Card":"#0C0C0D","Card Foreground":"#F8FAFC","Destructive":"#EF4444","Foreground":"#F8FAFC","Muted":"#181818","Muted Foreground":"#94A3B8","No":46,"Notes":"Cinema dark + play red","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0F0F23","Product Type":"Video Streaming/OTT","Ring":"#0F0F23","Secondary":"#1E1B4B","domain":"colors","record_id":"colors/46"},{"Accent":"#16A34A","Background":"#F0F9FF","Border":"#BAE6FD","Card":"#FFFFFF","Card Foreground":"#0C4A6E","Destructive":"#DC2626","Foreground":"#0C4A6E","Muted":"#E7EFF5","Muted Foreground":"#64748B","No":47,"Notes":"Professional blue + success green [Accent adjusted from #22C55E for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#0369A1","Product Type":"Job Board/Recruitment","Ring":"#0369A1","Secondary":"#0EA5E9","domain":"colors","record_id":"colors/47"},{"Accent":"#16A34A","Background":"#FAF5FF","Border":"#DDD6FE","Card":"#FFFFFF","Card Foreground":"#4C1D95","Destructive":"#DC2626","Foreground":"#4C1D95","Muted":"#ECEEF9","Muted Foreground":"#64748B","No":48,"Notes":"Trust purple + transaction green [Accent adjusted from #22C55E for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#7C3AED","Product Type":"Marketplace (P2P)","Ring":"#7C3AED","Secondary":"#A78BFA","domain":"colors","record_id":"colors/48"},{"Accent":"#EA580C","Background":"#EFF6FF","Border":"#BFDBFE","Card":"#FFFFFF","Card Foreground":"#1E40AF","Destructive":"#DC2626","Foreground":"#1E40AF","Muted":"#E9EFF8","Muted Foreground":"#64748B","No":49,"Notes":"Tracking blue + delivery orange [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#2563EB","Product Type":"Logistics/Delivery","Ring":"#2563EB","Secondary":"#3B82F6","domain":"colors","record_id":"colors/49"},{"Accent":"#A16207","Background":"#F0FDF4","Border":"#BBF7D0","Card":"#FFFFFF","Card Foreground":"#14532D","Destructive":"#DC2626","Foreground":"#14532D","Muted":"#E8F0F1","Muted Foreground":"#64748B","No":50,"Notes":"Earth green + harvest gold [Accent adjusted from #CA8A04 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#15803D","Product Type":"Agriculture/Farm Tech","Ring":"#15803D","Secondary":"#22C55E","domain":"colors","record_id":"colors/50"},{"Accent":"#EA580C","Background":"#F8FAFC","Border":"#E2E8F0","Card":"#FFFFFF","Card Foreground":"#334155","Destructive":"#DC2626","Foreground":"#334155","Muted":"#EBF0F5","Muted Foreground":"#64748B","No":51,"Notes":"Industrial grey + safety orange [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#64748B","Product Type":"Construction/Architecture","Ring":"#64748B","Secondary":"#94A3B8","domain":"colors","record_id":"colors/51"},{"Accent":"#DC2626","Background":"#F8FAFC","Border":"#E2E8F0","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#E9EDF1","Muted Foreground":"#64748B","No":52,"Notes":"Premium dark + action red","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E293B","Product Type":"Automotive/Car Dealership","Ring":"#1E293B","Secondary":"#334155","domain":"colors","record_id":"colors/52"},{"Accent":"#F8FAFC","Background":"#000000","Border":"#3F3F46","Card":"#0C0C0C","Card Foreground":"#FAFAFA","Destructive":"#EF4444","Foreground":"#FAFAFA","Muted":"#181818","Muted Foreground":"#94A3B8","No":53,"Notes":"Pure black + white contrast","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#18181B","Product Type":"Photography Studio","Ring":"#18181B","Secondary":"#27272A","domain":"colors","record_id":"colors/53"},{"Accent":"#2563EB","Background":"#FFFBEB","Border":"#FDE68A","Card":"#FFFFFF","Card Foreground":"#78350F","Destructive":"#DC2626","Foreground":"#78350F","Muted":"#F1F2EF","Muted Foreground":"#64748B","No":54,"Notes":"Energetic amber + booking blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#0F172A","On Secondary":"#0F172A","Primary":"#F59E0B","Product Type":"Coworking Space","Ring":"#F59E0B","Secondary":"#FBBF24","domain":"colors","record_id":"colors/54"},{"Accent":"#EA580C","Background":"#EFF6FF","Border":"#BFDBFE","Card":"#FFFFFF","Card Foreground":"#1E3A8A","Destructive":"#DC2626","Foreground":"#1E3A8A","Muted":"#E9EEF6","Muted Foreground":"#64748B","No":55,"Notes":"Professional blue + urgent orange [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E40AF","Product Type":"Home Services (Plumber/Electrician)","Ring":"#1E40AF","Secondary":"#3B82F6","domain":"colors","record_id":"colors/55"},{"Accent":"#16A34A","Background":"#FDF2F8","Border":"#FCE7F3","Card":"#FFFFFF","Card Foreground":"#9D174D","Destructive":"#DC2626","Foreground":"#9D174D","Muted":"#F1F0F6","Muted Foreground":"#64748B","No":56,"Notes":"Soft pink + safe green [Accent adjusted from #22C55E for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#0F172A","On Secondary":"#0F172A","Primary":"#F472B6","Product Type":"Childcare/Daycare","Ring":"#F472B6","Secondary":"#FBCFE8","domain":"colors","record_id":"colors/56"},{"Accent":"#16A34A","Background":"#F0F9FF","Border":"#E0F2FE","Card":"#FFFFFF","Card Foreground":"#0C4A6E","Destructive":"#DC2626","Foreground":"#0C4A6E","Muted":"#E7EFF5","Muted Foreground":"#64748B","No":57,"Notes":"Calm blue + reassuring green [Accent adjusted from #22C55E for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#0369A1","Product Type":"Senior Care/Elderly","Ring":"#0369A1","Secondary":"#38BDF8","domain":"colors","record_id":"colors/57"},{"Accent":"#16A34A","Background":"#F0FDFA","Border":"#CCFBF1","Card":"#FFFFFF","Card Foreground":"#134E4A","Destructive":"#DC2626","Foreground":"#134E4A","Muted":"#E8F1F6","Muted Foreground":"#64748B","No":58,"Notes":"Medical teal + health green [Accent adjusted from #22C55E for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#0891B2","Product Type":"Medical Clinic","Ring":"#0891B2","Secondary":"#22D3EE","domain":"colors","record_id":"colors/58"},{"Accent":"#0369A1","Background":"#F0FDF4","Border":"#BBF7D0","Card":"#FFFFFF","Card Foreground":"#14532D","Destructive":"#DC2626","Foreground":"#14532D","Muted":"#E8F0F1","Muted Foreground":"#64748B","No":59,"Notes":"Pharmacy green + trust blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#15803D","Product Type":"Pharmacy/Drug Store","Ring":"#15803D","Secondary":"#22C55E","domain":"colors","record_id":"colors/59"},{"Accent":"#0EA5E9","Background":"#F0F9FF","Border":"#BAE6FD","Card":"#FFFFFF","Card Foreground":"#0C4A6E","Destructive":"#DC2626","Foreground":"#0C4A6E","Muted":"#E8F2F8","Muted Foreground":"#64748B","No":60,"Notes":"Fresh blue + smile yellow [Accent adjusted from #FBBF24 for WCAG 3:1]","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#0F172A","On Secondary":"#0F172A","Primary":"#0EA5E9","Product Type":"Dental Practice","Ring":"#0EA5E9","Secondary":"#38BDF8","domain":"colors","record_id":"colors/60"},{"Accent":"#EA580C","Background":"#F0FDFA","Border":"#99F6E4","Card":"#FFFFFF","Card Foreground":"#134E4A","Destructive":"#DC2626","Foreground":"#134E4A","Muted":"#E8F1F4","Muted Foreground":"#64748B","No":61,"Notes":"Caring teal + warm orange [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#0D9488","Product Type":"Veterinary Clinic","Ring":"#0D9488","Secondary":"#14B8A6","domain":"colors","record_id":"colors/61"},{"Accent":"#EC4899","Background":"#F0FDF4","Border":"#BBF7D0","Card":"#FFFFFF","Card Foreground":"#14532D","Destructive":"#DC2626","Foreground":"#14532D","Muted":"#E8F0F1","Muted Foreground":"#64748B","No":62,"Notes":"Natural green + floral pink","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#15803D","Product Type":"Florist/Plant Shop","Ring":"#15803D","Secondary":"#22C55E","domain":"colors","record_id":"colors/62"},{"Accent":"#92400E","Background":"#FEF3C7","Border":"#FDE68A","Card":"#FFFFFF","Card Foreground":"#78350F","Destructive":"#DC2626","Foreground":"#78350F","Muted":"#EDEEF0","Muted Foreground":"#64748B","No":63,"Notes":"Warm brown + cream white [Accent adjusted from #F8FAFC for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#92400E","Product Type":"Bakery/Cafe","Ring":"#92400E","Secondary":"#B45309","domain":"colors","record_id":"colors/63"},{"Accent":"#A16207","Background":"#FEF2F2","Border":"#FECACA","Card":"#FFFFFF","Card Foreground":"#450A0A","Destructive":"#DC2626","Foreground":"#450A0A","Muted":"#ECEDF0","Muted Foreground":"#64748B","No":64,"Notes":"Deep burgundy + craft gold [Accent adjusted from #CA8A04 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#7C2D12","Product Type":"Brewery/Winery","Ring":"#7C2D12","Secondary":"#B91C1C","domain":"colors","record_id":"colors/64"},{"Accent":"#EA580C","Background":"#EFF6FF","Border":"#BFDBFE","Card":"#FFFFFF","Card Foreground":"#1E40AF","Destructive":"#DC2626","Foreground":"#1E40AF","Muted":"#E9EEF5","Muted Foreground":"#64748B","No":65,"Notes":"Sky blue + booking orange [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E3A8A","Product Type":"Airline","Ring":"#1E3A8A","Secondary":"#3B82F6","domain":"colors","record_id":"colors/65"},{"Accent":"#1E40AF","Background":"#FEF2F2","Border":"#FECACA","Card":"#FFFFFF","Card Foreground":"#450A0A","Destructive":"#DC2626","Foreground":"#450A0A","Muted":"#F0EDF1","Muted Foreground":"#64748B","No":66,"Notes":"Breaking red + link blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#DC2626","Product Type":"News/Media Platform","Ring":"#DC2626","Secondary":"#EF4444","domain":"colors","record_id":"colors/66"},{"Accent":"#EC4899","Background":"#FAFAFA","Border":"#E4E4E7","Card":"#FFFFFF","Card Foreground":"#09090B","Destructive":"#DC2626","Foreground":"#09090B","Muted":"#E8ECF0","Muted Foreground":"#64748B","No":67,"Notes":"Editorial black + accent pink","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#18181B","Product Type":"Magazine/Blog","Ring":"#18181B","Secondary":"#3F3F46","domain":"colors","record_id":"colors/67"},{"Accent":"#16A34A","Background":"#EEF2FF","Border":"#C7D2FE","Card":"#FFFFFF","Card Foreground":"#312E81","Destructive":"#DC2626","Foreground":"#312E81","Muted":"#EBEFF9","Muted Foreground":"#64748B","No":68,"Notes":"Creative indigo + hire green [Accent adjusted from #22C55E for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#6366F1","Product Type":"Freelancer Platform","Ring":"#6366F1","Secondary":"#818CF8","domain":"colors","record_id":"colors/68"},{"Accent":"#0891B2","Background":"#FDF2F8","Border":"#FBCFE8","Card":"#FFFFFF","Card Foreground":"#831843","Destructive":"#DC2626","Foreground":"#831843","Muted":"#F1EEF5","Muted Foreground":"#64748B","No":69,"Notes":"Bold pink + creative cyan [Accent adjusted from #06B6D4 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#EC4899","Product Type":"Marketing Agency","Ring":"#EC4899","Secondary":"#F472B6","domain":"colors","record_id":"colors/69"},{"Accent":"#EA580C","Background":"#FAF5FF","Border":"#DDD6FE","Card":"#FFFFFF","Card Foreground":"#4C1D95","Destructive":"#DC2626","Foreground":"#4C1D95","Muted":"#ECEEF9","Muted Foreground":"#64748B","No":70,"Notes":"Excitement purple + action orange [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#7C3AED","Product Type":"Event Management","Ring":"#7C3AED","Secondary":"#A78BFA","domain":"colors","record_id":"colors/70"},{"Accent":"#16A34A","Background":"#FAF5FF","Border":"#DDD6FE","Card":"#FFFFFF","Card Foreground":"#4C1D95","Destructive":"#DC2626","Foreground":"#4C1D95","Muted":"#ECEEF9","Muted Foreground":"#64748B","No":71,"Notes":"Community purple + join green [Accent adjusted from #22C55E for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#7C3AED","Product Type":"Membership/Community","Ring":"#7C3AED","Secondary":"#A78BFA","domain":"colors","record_id":"colors/71"},{"Accent":"#EA580C","Background":"#F0F9FF","Border":"#BAE6FD","Card":"#FFFFFF","Card Foreground":"#0C4A6E","Destructive":"#DC2626","Foreground":"#0C4A6E","Muted":"#E7EFF5","Muted Foreground":"#64748B","No":72,"Notes":"Trust blue + subscribe orange [Accent adjusted from #F97316 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#0369A1","Product Type":"Newsletter Platform","Ring":"#0369A1","Secondary":"#0EA5E9","domain":"colors","record_id":"colors/72"},{"Accent":"#16A34A","Background":"#EEF2FF","Border":"#C7D2FE","Card":"#FFFFFF","Card Foreground":"#312E81","Destructive":"#DC2626","Foreground":"#312E81","Muted":"#EBEFF9","Muted Foreground":"#64748B","No":73,"Notes":"Digital indigo + buy green [Accent adjusted from #22C55E for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#6366F1","Product Type":"Digital Products/Downloads","Ring":"#6366F1","Secondary":"#818CF8","domain":"colors","record_id":"colors/73"},{"Accent":"#A16207","Background":"#FAF5FF","Border":"#DDD6FE","Card":"#FFFFFF","Card Foreground":"#4C1D95","Destructive":"#DC2626","Foreground":"#4C1D95","Muted":"#ECEEF9","Muted Foreground":"#64748B","No":74,"Notes":"Spiritual purple + warm gold [Accent adjusted from #CA8A04 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#7C3AED","Product Type":"Church/Religious Organization","Ring":"#7C3AED","Secondary":"#A78BFA","domain":"colors","record_id":"colors/74"},{"Accent":"#DC2626","Background":"#FEF2F2","Border":"#FECACA","Card":"#FFFFFF","Card Foreground":"#7F1D1D","Destructive":"#DC2626","Foreground":"#7F1D1D","Muted":"#F0EDF1","Muted Foreground":"#64748B","No":75,"Notes":"Team red + championship gold [Accent adjusted from #FBBF24 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#DC2626","Product Type":"Sports Team/Club","Ring":"#DC2626","Secondary":"#EF4444","domain":"colors","record_id":"colors/75"},{"Accent":"#18181B","Background":"#FAFAFA","Border":"#E4E4E7","Card":"#FFFFFF","Card Foreground":"#09090B","Destructive":"#DC2626","Foreground":"#09090B","Muted":"#E8ECF0","Muted Foreground":"#64748B","No":76,"Notes":"Gallery black + white space [Accent adjusted from #F8FAFC for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#18181B","Product Type":"Museum/Gallery","Ring":"#18181B","Secondary":"#27272A","domain":"colors","record_id":"colors/76"},{"Accent":"#CA8A04","Background":"#0F0F23","Border":"#4338CA","Card":"#1B1B30","Card Foreground":"#F8FAFC","Destructive":"#EF4444","Foreground":"#F8FAFC","Muted":"#27273B","Muted Foreground":"#94A3B8","No":77,"Notes":"Dramatic dark + spotlight gold","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E1B4B","Product Type":"Theater/Cinema","Ring":"#1E1B4B","Secondary":"#312E81","domain":"colors","record_id":"colors/77"},{"Accent":"#16A34A","Background":"#EEF2FF","Border":"#C7D2FE","Card":"#FFFFFF","Card Foreground":"#312E81","Destructive":"#DC2626","Foreground":"#312E81","Muted":"#EBEEF8","Muted Foreground":"#64748B","No":78,"Notes":"Learning indigo + progress green [Accent adjusted from #22C55E for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#4F46E5","Product Type":"Language Learning App","Ring":"#4F46E5","Secondary":"#818CF8","domain":"colors","record_id":"colors/78"},{"Accent":"#22C55E","Background":"#020617","Border":"#334155","Card":"#0E1223","Card Foreground":"#F8FAFC","Destructive":"#EF4444","Foreground":"#F8FAFC","Muted":"#1A1E2F","Muted Foreground":"#94A3B8","No":79,"Notes":"Terminal dark + success green","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0F172A","Product Type":"Coding Bootcamp","Ring":"#0F172A","Secondary":"#1E293B","domain":"colors","record_id":"colors/79"},{"Accent":"#FF3333","Background":"#000000","Border":"#1F1F1F","Card":"#0C130E","Card Foreground":"#E0E0E0","Destructive":"#EF4444","Foreground":"#E0E0E0","Muted":"#181818","Muted Foreground":"#94A3B8","No":80,"Notes":"Matrix green + alert red","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#0F172A","On Secondary":"#FFFFFF","Primary":"#00FF41","Product Type":"Cybersecurity Platform","Ring":"#00FF41","Secondary":"#0D0D0D","domain":"colors","record_id":"colors/80"},{"Accent":"#22C55E","Background":"#0F172A","Border":"#475569","Card":"#1B2336","Card Foreground":"#F8FAFC","Destructive":"#EF4444","Foreground":"#F8FAFC","Muted":"#272F42","Muted Foreground":"#94A3B8","No":81,"Notes":"Code dark + run green","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E293B","Product Type":"Developer Tool / IDE","Ring":"#1E293B","Secondary":"#334155","domain":"colors","record_id":"colors/81"},{"Accent":"#059669","Background":"#F0F9FF","Border":"#BAE6FD","Card":"#FFFFFF","Card Foreground":"#0C4A6E","Destructive":"#DC2626","Foreground":"#0C4A6E","Muted":"#E8F2F8","Muted Foreground":"#64748B","No":82,"Notes":"DNA blue + life green [Accent adjusted from #10B981 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#0F172A","On Secondary":"#FFFFFF","Primary":"#0EA5E9","Product Type":"Biotech / Life Sciences","Ring":"#0EA5E9","Secondary":"#0284C7","domain":"colors","record_id":"colors/82"},{"Accent":"#3B82F6","Background":"#0B0B10","Border":"#1E293B","Card":"#1E1E23","Card Foreground":"#F8FAFC","Destructive":"#EF4444","Foreground":"#F8FAFC","Muted":"#232328","Muted Foreground":"#94A3B8","No":83,"Notes":"Star white + launch blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#0F172A","On Secondary":"#0F172A","Primary":"#F8FAFC","Product Type":"Space Tech / Aerospace","Ring":"#F8FAFC","Secondary":"#94A3B8","domain":"colors","record_id":"colors/83"},{"Accent":"#A16207","Background":"#FFFFFF","Border":"#E5E5E5","Card":"#FFFFFF","Card Foreground":"#171717","Destructive":"#DC2626","Foreground":"#171717","Muted":"#E8ECF0","Muted Foreground":"#64748B","No":84,"Notes":"Minimal black + accent gold [Accent adjusted from #D4AF37 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#171717","Product Type":"Architecture / Interior","Ring":"#171717","Secondary":"#404040","domain":"colors","record_id":"colors/84"},{"Accent":"#FF00FF","Background":"#050510","Border":"#333344","Card":"#101823","Card Foreground":"#E0E0FF","Destructive":"#EF4444","Foreground":"#E0E0FF","Muted":"#1D1D28","Muted Foreground":"#94A3B8","No":85,"Notes":"Quantum cyan + interference purple","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#0F172A","On Secondary":"#FFFFFF","Primary":"#00FFFF","Product Type":"Quantum Computing Interface","Ring":"#00FFFF","Secondary":"#7B61FF","domain":"colors","record_id":"colors/85"},{"Accent":"#059669","Background":"#F5F5F7","Border":"#E5E5EA","Card":"#FFFFFF","Card Foreground":"#1C1C1E","Destructive":"#DC2626","Foreground":"#1C1C1E","Muted":"#F2EEF2","Muted Foreground":"#64748B","No":86,"Notes":"Bio red/blue + vitality green [Accent adjusted from #00E676 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#FF4D4D","Product Type":"Biohacking / Longevity App","Ring":"#FF4D4D","Secondary":"#4D94FF","domain":"colors","record_id":"colors/86"},{"Accent":"#FF3333","Background":"#0D1117","Border":"#30363D","Card":"#182424","Card Foreground":"#E6EDF3","Destructive":"#EF4444","Foreground":"#E6EDF3","Muted":"#25292F","Muted Foreground":"#94A3B8","No":87,"Notes":"Terminal green + alert red","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#0F172A","On Secondary":"#FFFFFF","Primary":"#00FF41","Product Type":"Autonomous Drone Fleet Manager","Ring":"#00FF41","Secondary":"#008F11","domain":"colors","record_id":"colors/87"},{"Accent":"#EC4899","Background":"#FAFAFA","Border":"#E4E4E7","Card":"#FFFFFF","Card Foreground":"#09090B","Destructive":"#DC2626","Foreground":"#09090B","Muted":"#E8ECF0","Muted Foreground":"#64748B","No":88,"Notes":"Canvas neutral + creative pink","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#18181B","Product Type":"Generative Art Platform","Ring":"#18181B","Secondary":"#3F3F46","domain":"colors","record_id":"colors/88"},{"Accent":"#FFFFFF","Background":"#888888","Border":"#CCCCCC","Card":"#999999","Card Foreground":"#000000","Destructive":"#FF3B30","Foreground":"#000000","Muted":"#777777","Muted Foreground":"#D4D4D4","No":89,"Notes":"Glass white + system blue [Accent adjusted from #007AFF for WCAG 3:1]","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#0F172A","On Secondary":"#0F172A","Primary":"#FFFFFF","Product Type":"Spatial Computing OS / App","Ring":"#007AFF","Secondary":"#E5E5E5","domain":"colors","record_id":"colors/89"},{"Accent":"#059669","Background":"#ECFDF5","Border":"#A7F3D0","Card":"#FFFFFF","Card Foreground":"#064E3B","Destructive":"#DC2626","Foreground":"#064E3B","Muted":"#E8F1F3","Muted Foreground":"#64748B","No":90,"Notes":"Nature green + solar gold [Accent adjusted from #FBBF24 for WCAG 3:1]","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#059669","Product Type":"Sustainable Energy / Climate Tech","Ring":"#059669","Secondary":"#10B981","domain":"colors","record_id":"colors/90"},{"Accent":"#059669","Background":"#0F172A","Border":"rgba(255,255,255,0.08)","Card":"#192134","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#101A34","Muted Foreground":"#94A3B8","No":91,"Notes":"Trust blue + profit green on dark","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E40AF","Product Type":"Personal Finance Tracker","Ring":"#1E40AF","Secondary":"#3B82F6","domain":"colors","record_id":"colors/91"},{"Accent":"#059669","Background":"#FFFFFF","Border":"#E4ECFC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F1F5FD","Muted Foreground":"#64748B","No":92,"Notes":"Messenger blue + online green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#2563EB","Product Type":"Chat & Messaging App","Ring":"#2563EB","Secondary":"#6366F1","domain":"colors","record_id":"colors/92"},{"Accent":"#D97706","Background":"#FFFBEB","Border":"#EEEDED","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F6F6F6","Muted Foreground":"#64748B","No":93,"Notes":"Warm ink + amber accent on cream","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#78716C","Product Type":"Notes & Writing App","Ring":"#78716C","Secondary":"#A8A29E","domain":"colors","record_id":"colors/93"},{"Accent":"#059669","Background":"#FFFBEB","Border":"#FAEEE1","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FCF6F0","Muted Foreground":"#64748B","No":94,"Notes":"Streak amber + habit green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#D97706","Product Type":"Habit Tracker","Ring":"#D97706","Secondary":"#F59E0B","domain":"colors","record_id":"colors/94"},{"Accent":"#2563EB","Background":"#FFF7ED","Border":"#FCEAE1","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FDF4F0","Muted Foreground":"#64748B","No":95,"Notes":"Appetizing orange + trust blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#EA580C","Product Type":"Food Delivery / On-Demand","Ring":"#EA580C","Secondary":"#F97316","domain":"colors","record_id":"colors/95"},{"Accent":"#2563EB","Background":"#0F172A","Border":"rgba(255,255,255,0.08)","Card":"#192134","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#10182B","Muted Foreground":"#94A3B8","No":96,"Notes":"Map dark + route blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E293B","Product Type":"Ride Hailing / Transportation","Ring":"#1E293B","Secondary":"#334155","domain":"colors","record_id":"colors/96"},{"Accent":"#059669","Background":"#FFFBEB","Border":"#F2E6E2","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F8F2F0","Muted Foreground":"#64748B","No":97,"Notes":"Warm terracotta + fresh green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#9A3412","Product Type":"Recipe & Cooking App","Ring":"#9A3412","Secondary":"#C2410C","domain":"colors","record_id":"colors/97"},{"Accent":"#059669","Background":"#FAF5FF","Border":"#EFE7FC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F7F3FD","Muted Foreground":"#64748B","No":98,"Notes":"Calm lavender + mindful green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#7C3AED","Product Type":"Meditation & Mindfulness","Ring":"#7C3AED","Secondary":"#8B5CF6","domain":"colors","record_id":"colors/98"},{"Accent":"#F59E0B","Background":"#F0F9FF","Border":"#E0F0F8","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#EFF7FB","Muted Foreground":"#64748B","No":99,"Notes":"Sky blue + sun amber","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0284C7","Product Type":"Weather App","Ring":"#0284C7","Secondary":"#0EA5E9","domain":"colors","record_id":"colors/99"},{"Accent":"#6366F1","Background":"#FFFBEB","Border":"#F1E8E2","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F8F3F0","Muted Foreground":"#64748B","No":100,"Notes":"Warm journal brown + ink violet","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#92400E","Product Type":"Diary & Journal App","Ring":"#92400E","Secondary":"#A16207","domain":"colors","record_id":"colors/100"},{"Accent":"#059669","Background":"#F8FAFC","Border":"#E4ECFC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F1F5FD","Muted Foreground":"#64748B","No":101,"Notes":"Professional blue + deal green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#2563EB","Product Type":"CRM & Client Management","Ring":"#2563EB","Secondary":"#3B82F6","domain":"colors","record_id":"colors/101"},{"Accent":"#059669","Background":"#F8FAFC","Border":"#E6E8EA","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F2F3F4","Muted Foreground":"#64748B","No":102,"Notes":"Industrial slate + stock green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#334155","Product Type":"Inventory & Stock Management","Ring":"#334155","Secondary":"#475569","domain":"colors","record_id":"colors/102"},{"Accent":"#059669","Background":"#FAF5FF","Border":"#EFE7FC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F7F3FD","Muted Foreground":"#64748B","No":103,"Notes":"Study purple + correct green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#7C3AED","Product Type":"Flashcard & Study Tool","Ring":"#7C3AED","Secondary":"#8B5CF6","domain":"colors","record_id":"colors/103"},{"Accent":"#059669","Background":"#F0F9FF","Border":"#E0F0F8","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#EFF7FB","Muted Foreground":"#64748B","No":104,"Notes":"Calendar blue + available green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0284C7","Product Type":"Booking & Appointment App","Ring":"#0284C7","Secondary":"#0EA5E9","domain":"colors","record_id":"colors/104"},{"Accent":"#059669","Background":"#F8FAFC","Border":"#E4E7EB","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F1F3F5","Muted Foreground":"#64748B","No":105,"Notes":"Navy professional + paid green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E3A5F","Product Type":"Invoice & Billing Tool","Ring":"#1E3A5F","Secondary":"#2563EB","domain":"colors","record_id":"colors/105"},{"Accent":"#D97706","Background":"#ECFDF5","Border":"#E1F2ED","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F0F8F6","Muted Foreground":"#64748B","No":106,"Notes":"Fresh green + food amber","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#059669","Product Type":"Grocery & Shopping List","Ring":"#059669","Secondary":"#10B981","domain":"colors","record_id":"colors/106"},{"Accent":"#059669","Background":"#0F172A","Border":"rgba(255,255,255,0.08)","Card":"#192134","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#1F1829","Muted Foreground":"#94A3B8","No":107,"Notes":"Focus red on dark + break green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#DC2626","Product Type":"Timer & Pomodoro","Ring":"#DC2626","Secondary":"#EF4444","domain":"colors","record_id":"colors/107"},{"Accent":"#0284C7","Background":"#FDF2F8","Border":"#FCE9F2","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FDF4F8","Muted Foreground":"#64748B","No":108,"Notes":"Soft pink + trust blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#EC4899","Product Type":"Parenting & Baby Tracker","Ring":"#EC4899","Secondary":"#F472B6","domain":"colors","record_id":"colors/108"},{"Accent":"#2563EB","Background":"#F8FAFC","Border":"#E4E5E7","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F1F2F3","Muted Foreground":"#64748B","No":109,"Notes":"Document grey + scan blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E293B","Product Type":"Scanner & Document Manager","Ring":"#1E293B","Secondary":"#334155","domain":"colors","record_id":"colors/109"},{"Accent":"#059669","Background":"#F8FAFC","Border":"#E4ECFC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F1F5FD","Muted Foreground":"#64748B","No":110,"Notes":"Calendar blue + event green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#2563EB","Product Type":"Calendar & Scheduling App","Ring":"#2563EB","Secondary":"#3B82F6","domain":"colors","record_id":"colors/110"},{"Accent":"#059669","Background":"#0F172A","Border":"rgba(255,255,255,0.08)","Card":"#192134","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#10192E","Muted Foreground":"#94A3B8","No":111,"Notes":"Vault dark blue + secure green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E3A5F","Product Type":"Password Manager","Ring":"#1E3A5F","Secondary":"#334155","domain":"colors","record_id":"colors/111"},{"Accent":"#DC2626","Background":"#F8FAFC","Border":"#E1F2ED","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F0F8F6","Muted Foreground":"#64748B","No":112,"Notes":"Balance green + owe red","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#059669","Product Type":"Expense Splitter / Bill Split","Ring":"#059669","Secondary":"#10B981","domain":"colors","record_id":"colors/112"},{"Accent":"#2563EB","Background":"#FFFFFF","Border":"#FAE4E4","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FCF1F1","Muted Foreground":"#64748B","No":113,"Notes":"Recording red + waveform blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#DC2626","Product Type":"Voice Recorder & Memo","Ring":"#DC2626","Secondary":"#EF4444","domain":"colors","record_id":"colors/113"},{"Accent":"#2563EB","Background":"#FFFBEB","Border":"#FAEEE1","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FCF6F0","Muted Foreground":"#64748B","No":114,"Notes":"Warm amber + link blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#D97706","Product Type":"Bookmark & Read-Later","Ring":"#D97706","Secondary":"#F59E0B","domain":"colors","record_id":"colors/114"},{"Accent":"#EA580C","Background":"#F8FAFC","Border":"#E4ECFC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F1F5FD","Muted Foreground":"#64748B","No":115,"Notes":"Global blue + teal + accent orange","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#2563EB","Product Type":"Translator App","Ring":"#2563EB","Secondary":"#0891B2","domain":"colors","record_id":"colors/115"},{"Accent":"#2563EB","Background":"#1C1917","Border":"rgba(255,255,255,0.08)","Card":"#262321","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#2C1E16","Muted Foreground":"#94A3B8","No":116,"Notes":"Operation orange on dark","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#EA580C","Product Type":"Calculator & Unit Converter","Ring":"#EA580C","Secondary":"#F97316","domain":"colors","record_id":"colors/116"},{"Accent":"#6366F1","Background":"#0F172A","Border":"rgba(255,255,255,0.08)","Card":"#192134","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#1F1E27","Muted Foreground":"#94A3B8","No":117,"Notes":"Time amber + night indigo on dark","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#D97706","Product Type":"Alarm & World Clock","Ring":"#D97706","Secondary":"#F59E0B","domain":"colors","record_id":"colors/117"},{"Accent":"#D97706","Background":"#F8FAFC","Border":"#E4ECFC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F1F5FD","Muted Foreground":"#64748B","No":118,"Notes":"Folder blue + file amber","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#2563EB","Product Type":"File Manager & Transfer","Ring":"#2563EB","Secondary":"#3B82F6","domain":"colors","record_id":"colors/118"},{"Accent":"#DC2626","Background":"#FFFFFF","Border":"#E4ECFC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F1F5FD","Muted Foreground":"#64748B","No":119,"Notes":"Inbox blue + priority red","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#2563EB","Product Type":"Email Client","Ring":"#2563EB","Secondary":"#3B82F6","domain":"colors","record_id":"colors/119"},{"Accent":"#F59E0B","Background":"#FDF2F8","Border":"#FCE9F2","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FDF4F8","Muted Foreground":"#64748B","No":120,"Notes":"Cheerful pink + reward gold","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#EC4899","Product Type":"Casual Puzzle Game","Ring":"#EC4899","Secondary":"#8B5CF6","domain":"colors","record_id":"colors/120"},{"Accent":"#F59E0B","Background":"#EFF6FF","Border":"#E4ECFC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F1F5FD","Muted Foreground":"#64748B","No":121,"Notes":"Quiz blue + gold leaderboard","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#2563EB","Product Type":"Trivia & Quiz Game","Ring":"#2563EB","Secondary":"#7C3AED","domain":"colors","record_id":"colors/121"},{"Accent":"#D97706","Background":"#0F172A","Border":"rgba(255,255,255,0.08)","Card":"#192134","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#0F1F2B","Muted Foreground":"#94A3B8","No":122,"Notes":"Felt green + gold on dark","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#15803D","Product Type":"Card & Board Game","Ring":"#15803D","Secondary":"#166534","domain":"colors","record_id":"colors/122"},{"Accent":"#7C3AED","Background":"#FFFBEB","Border":"#FAEEE1","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FCF6F0","Muted Foreground":"#64748B","No":123,"Notes":"Coin gold + prestige purple","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#D97706","Product Type":"Idle & Clicker Game","Ring":"#D97706","Secondary":"#F59E0B","domain":"colors","record_id":"colors/123"},{"Accent":"#D97706","Background":"#FFFFFF","Border":"#E2EFE7","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F0F7F3","Muted Foreground":"#64748B","No":124,"Notes":"Word green + letter amber","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#15803D","Product Type":"Word & Crossword Game","Ring":"#15803D","Secondary":"#059669","domain":"colors","record_id":"colors/124"},{"Accent":"#22C55E","Background":"#0F172A","Border":"rgba(255,255,255,0.08)","Card":"#192134","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#1F1829","Muted Foreground":"#94A3B8","No":125,"Notes":"Neon red+blue on dark + score green","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#DC2626","Product Type":"Arcade & Retro Game","Ring":"#DC2626","Secondary":"#2563EB","domain":"colors","record_id":"colors/125"},{"Accent":"#0891B2","Background":"#0F172A","Border":"rgba(255,255,255,0.08)","Card":"#192134","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#171939","Muted Foreground":"#94A3B8","No":126,"Notes":"Editor violet + filter cyan on dark","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#7C3AED","Product Type":"Photo Editor & Filters","Ring":"#7C3AED","Secondary":"#6366F1","domain":"colors","record_id":"colors/126"},{"Accent":"#2563EB","Background":"#0F172A","Border":"rgba(255,255,255,0.08)","Card":"#192134","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#201A32","Muted Foreground":"#94A3B8","No":127,"Notes":"Video pink on dark + timeline blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#EC4899","Product Type":"Short Video Editor","Ring":"#EC4899","Secondary":"#DB2777","domain":"colors","record_id":"colors/127"},{"Accent":"#0891B2","Background":"#1C1917","Border":"rgba(255,255,255,0.08)","Card":"#262321","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#231B28","Muted Foreground":"#94A3B8","No":128,"Notes":"Canvas purple + tool teal on dark","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#7C3AED","Product Type":"Drawing & Sketching Canvas","Ring":"#7C3AED","Secondary":"#8B5CF6","domain":"colors","record_id":"colors/128"},{"Accent":"#22C55E","Background":"#0F172A","Border":"rgba(255,255,255,0.08)","Card":"#192134","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#171939","Muted Foreground":"#94A3B8","No":129,"Notes":"Studio purple + waveform green on dark","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#7C3AED","Product Type":"Music Creation & Beat Maker","Ring":"#7C3AED","Secondary":"#6366F1","domain":"colors","record_id":"colors/129"},{"Accent":"#2563EB","Background":"#FFFFFF","Border":"#FCE9F2","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FDF4F8","Muted Foreground":"#64748B","No":130,"Notes":"Viral pink + comedy yellow + share blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#EC4899","Product Type":"Meme & Sticker Maker","Ring":"#EC4899","Secondary":"#F59E0B","domain":"colors","record_id":"colors/130"},{"Accent":"#EC4899","Background":"#FAF5FF","Border":"#EFE7FC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F7F3FD","Muted Foreground":"#64748B","No":131,"Notes":"AI purple + generation pink","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#7C3AED","Product Type":"AI Photo & Avatar Generator","Ring":"#7C3AED","Secondary":"#6366F1","domain":"colors","record_id":"colors/131"},{"Accent":"#EC4899","Background":"#FFFFFF","Border":"#E4ECFC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F1F5FD","Muted Foreground":"#64748B","No":132,"Notes":"Brand blue + creator purple","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#2563EB","Product Type":"Link-in-Bio Page Builder","Ring":"#2563EB","Secondary":"#7C3AED","domain":"colors","record_id":"colors/132"},{"Accent":"#D97706","Background":"#FDF2F8","Border":"#F7E3EB","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FBF1F5","Muted Foreground":"#64748B","No":133,"Notes":"Fashion rose + gold accent","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#BE185D","Product Type":"Wardrobe & Outfit Planner","Ring":"#BE185D","Secondary":"#EC4899","domain":"colors","record_id":"colors/133"},{"Accent":"#D97706","Background":"#F0FDF4","Border":"#E2EFE7","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F0F7F3","Muted Foreground":"#64748B","No":134,"Notes":"Nature green + sun yellow","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#15803D","Product Type":"Plant Care Tracker","Ring":"#15803D","Secondary":"#059669","domain":"colors","record_id":"colors/134"},{"Accent":"#D97706","Background":"#FFFBEB","Border":"#EEEDED","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F6F6F6","Muted Foreground":"#64748B","No":135,"Notes":"Book brown + page amber","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#78716C","Product Type":"Book & Reading Tracker","Ring":"#78716C","Secondary":"#92400E","domain":"colors","record_id":"colors/135"},{"Accent":"#DC2626","Background":"#FDF2F8","Border":"#F7E3EB","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FBF1F5","Muted Foreground":"#64748B","No":136,"Notes":"Romance rose + love red","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#BE185D","Product Type":"Couple & Relationship App","Ring":"#BE185D","Secondary":"#EC4899","domain":"colors","record_id":"colors/136"},{"Accent":"#D97706","Background":"#F8FAFC","Border":"#E4ECFC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F1F5FD","Muted Foreground":"#64748B","No":137,"Notes":"Family blue + chore green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#2563EB","Product Type":"Family Calendar & Chores","Ring":"#2563EB","Secondary":"#059669","domain":"colors","record_id":"colors/137"},{"Accent":"#D97706","Background":"#FAF5FF","Border":"#EFE7FC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F7F3FD","Muted Foreground":"#64748B","No":138,"Notes":"Mood purple + insight amber","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#7C3AED","Product Type":"Mood Tracker","Ring":"#7C3AED","Secondary":"#6366F1","domain":"colors","record_id":"colors/138"},{"Accent":"#EC4899","Background":"#FFF1F2","Border":"#FAE4E4","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FCF1F1","Muted Foreground":"#64748B","No":139,"Notes":"Gift red + gold + surprise pink","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#DC2626","Product Type":"Gift & Wishlist","Ring":"#DC2626","Secondary":"#D97706","domain":"colors","record_id":"colors/139"},{"Accent":"#059669","Background":"#0F172A","Border":"rgba(255,255,255,0.08)","Card":"#192134","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#201C27","Muted Foreground":"#94A3B8","No":140,"Notes":"Energetic orange + pace green on dark","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#EA580C","Product Type":"Running & Cycling GPS","Ring":"#EA580C","Secondary":"#F97316","domain":"colors","record_id":"colors/140"},{"Accent":"#0891B2","Background":"#F5F5F0","Border":"#EDEEEF","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F6F6F7","Muted Foreground":"#64748B","No":141,"Notes":"Sage neutral + calm teal","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#6B7280","Product Type":"Yoga & Stretching Guide","Ring":"#6B7280","Secondary":"#78716C","domain":"colors","record_id":"colors/141"},{"Accent":"#7C3AED","Background":"#0F172A","Border":"rgba(255,255,255,0.08)","Card":"#192134","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#131936","Muted Foreground":"#94A3B8","No":142,"Notes":"Night indigo + dream violet on dark","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#4338CA","Product Type":"Sleep Tracker","Ring":"#4338CA","Secondary":"#6366F1","domain":"colors","record_id":"colors/142"},{"Accent":"#EA580C","Background":"#ECFDF5","Border":"#E1F2ED","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F0F8F6","Muted Foreground":"#64748B","No":143,"Notes":"Healthy green + macro orange","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#059669","Product Type":"Calorie & Nutrition Counter","Ring":"#059669","Secondary":"#10B981","domain":"colors","record_id":"colors/143"},{"Accent":"#7C3AED","Background":"#FDF2F8","Border":"#F7E3EB","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FBF1F5","Muted Foreground":"#64748B","No":144,"Notes":"Blush rose + fertility lavender","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#BE185D","Product Type":"Period & Cycle Tracker","Ring":"#BE185D","Secondary":"#EC4899","domain":"colors","record_id":"colors/144"},{"Accent":"#DC2626","Background":"#F0F9FF","Border":"#E0F0F8","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#EFF7FB","Muted Foreground":"#64748B","No":145,"Notes":"Medical blue + alert red","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0284C7","Product Type":"Medication & Pill Reminder","Ring":"#0284C7","Secondary":"#0891B2","domain":"colors","record_id":"colors/145"},{"Accent":"#0891B2","Background":"#F0F9FF","Border":"#E0F0F8","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#EFF7FB","Muted Foreground":"#64748B","No":146,"Notes":"Refreshing blue + water cyan","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0284C7","Product Type":"Water & Hydration Reminder","Ring":"#0284C7","Secondary":"#06B6D4","domain":"colors","record_id":"colors/146"},{"Accent":"#059669","Background":"#0F172A","Border":"rgba(255,255,255,0.08)","Card":"#192134","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#151D39","Muted Foreground":"#94A3B8","No":147,"Notes":"Fasting indigo on dark + eating green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#6366F1","Product Type":"Fasting & Intermittent Timer","Ring":"#6366F1","Secondary":"#4338CA","domain":"colors","record_id":"colors/147"},{"Accent":"#0891B2","Background":"#0F172A","Border":"rgba(255,255,255,0.08)","Card":"#192134","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#131B2F","Muted Foreground":"#94A3B8","No":148,"Notes":"Protective grey + subtle teal on dark","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#475569","Product Type":"Anonymous Community / Confession","Ring":"#475569","Secondary":"#334155","domain":"colors","record_id":"colors/148"},{"Accent":"#2563EB","Background":"#FFF7ED","Border":"#FCEAE1","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FDF4F0","Muted Foreground":"#64748B","No":149,"Notes":"Event orange + map blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#EA580C","Product Type":"Local Events & Discovery","Ring":"#EA580C","Secondary":"#F97316","domain":"colors","record_id":"colors/149"},{"Accent":"#059669","Background":"#F8FAFC","Border":"#E4ECFC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F1F5FD","Muted Foreground":"#64748B","No":150,"Notes":"Focus blue + session green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#2563EB","Product Type":"Study Together / Virtual Coworking","Ring":"#2563EB","Secondary":"#3B82F6","domain":"colors","record_id":"colors/150"},{"Accent":"#D97706","Background":"#0F172A","Border":"rgba(255,255,255,0.08)","Card":"#192134","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#10242E","Muted Foreground":"#94A3B8","No":151,"Notes":"Code green + difficulty amber on dark","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#0F172A","On Secondary":"#FFFFFF","Primary":"#22C55E","Product Type":"Coding Challenge & Practice","Ring":"#22C55E","Secondary":"#059669","domain":"colors","record_id":"colors/151"},{"Accent":"#EC4899","Background":"#EFF6FF","Border":"#E4ECFC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F1F5FD","Muted Foreground":"#64748B","No":152,"Notes":"Learning blue + play yellow + fun pink","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#2563EB","Product Type":"Kids Learning (ABC & Math)","Ring":"#2563EB","Secondary":"#F59E0B","domain":"colors","record_id":"colors/152"},{"Accent":"#D97706","Background":"#FFFBEB","Border":"#FAE4E4","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FCF1F1","Muted Foreground":"#64748B","No":153,"Notes":"Musical red + warm amber","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#DC2626","Product Type":"Music Instrument Learning","Ring":"#DC2626","Secondary":"#9A3412","domain":"colors","record_id":"colors/153"},{"Accent":"#DC2626","Background":"#F0F9FF","Border":"#E4ECFC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F1F5FD","Muted Foreground":"#64748B","No":154,"Notes":"Available blue/green + occupied red","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#2563EB","Product Type":"Parking Finder","Ring":"#2563EB","Secondary":"#059669","domain":"colors","record_id":"colors/154"},{"Accent":"#EA580C","Background":"#F8FAFC","Border":"#E4ECFC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F1F5FD","Muted Foreground":"#64748B","No":155,"Notes":"Transit blue + line colors","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#2563EB","Product Type":"Public Transit Guide","Ring":"#2563EB","Secondary":"#0891B2","domain":"colors","record_id":"colors/155"},{"Accent":"#D97706","Background":"#FFF7ED","Border":"#FCEAE1","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FDF4F0","Muted Foreground":"#64748B","No":156,"Notes":"Adventure orange + map teal","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#EA580C","Product Type":"Road Trip Planner","Ring":"#EA580C","Secondary":"#0891B2","domain":"colors","record_id":"colors/156"},{"Accent":"#22C55E","Background":"#0F172A","Border":"rgba(255,255,255,0.08)","Card":"#192134","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#10192E","Muted Foreground":"#94A3B8","No":157,"Notes":"Shield dark + connected green","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E3A5F","Product Type":"VPN & Privacy Tool","Ring":"#1E3A5F","Secondary":"#334155","domain":"colors","record_id":"colors/157"},{"Accent":"#2563EB","Background":"#FFF1F2","Border":"#FAE4E4","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FCF1F1","Muted Foreground":"#64748B","No":158,"Notes":"Alert red + safety blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#DC2626","Product Type":"Emergency SOS & Safety","Ring":"#DC2626","Secondary":"#EF4444","domain":"colors","record_id":"colors/158"},{"Accent":"#2563EB","Background":"#FAF5FF","Border":"#EFE7FC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F7F3FD","Muted Foreground":"#64748B","No":159,"Notes":"Aesthetic purple + trending pink","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#7C3AED","Product Type":"Wallpaper & Theme App","Ring":"#7C3AED","Secondary":"#EC4899","domain":"colors","record_id":"colors/159"},{"Accent":"#4338CA","Background":"#0F172A","Border":"rgba(255,255,255,0.08)","Card":"#192134","Card Foreground":"#FFFFFF","Destructive":"#DC2626","Foreground":"#FFFFFF","Muted":"#131B2F","Muted Foreground":"#94A3B8","No":160,"Notes":"Ambient grey + deep indigo on dark","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#475569","Product Type":"White Noise & Ambient Sound","Ring":"#475569","Secondary":"#334155","domain":"colors","record_id":"colors/160"},{"Accent":"#D97706","Background":"#FAF5F2","Border":"#EEEDED","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F6F6F6","Muted Foreground":"#64748B","No":161,"Notes":"Interior warm grey + gold accent","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#78716C","Product Type":"Home Decoration & Interior Design","Ring":"#78716C","Secondary":"#A8A29E","domain":"colors","record_id":"colors/161"},{"Accent":"#B45309","Background":"#F8FAFC","Border":"#CBD5E1","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#E9EEF5","Muted Foreground":"#64748B","No":162,"Notes":"Scholarly navy + citation gold + serif accent","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E3A5F","Product Type":"Academic Journal / Scholarly Publishing","Ring":"#1E3A5F","Secondary":"#334155","domain":"colors","record_id":"colors/162"},{"Accent":"#22C55E","Background":"#020617","Border":"#334155","Card":"#0E1223","Card Foreground":"#F8FAFC","Destructive":"#EF4444","Foreground":"#F8FAFC","Muted":"#1A1E2F","Muted Foreground":"#94A3B8","No":163,"Notes":"Code dark + endpoint green + syntax colors","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0F172A","Product Type":"API Developer Portal","Ring":"#0F172A","Secondary":"#1E293B","domain":"colors","record_id":"colors/163"},{"Accent":"#2563EB","Background":"#F8FAFC","Border":"#E2E8F0","Card":"#FFFFFF","Card Foreground":"#1E293B","Destructive":"#DC2626","Foreground":"#1E293B","Muted":"#EAEFF3","Muted Foreground":"#64748B","No":164,"Notes":"Neutral grey + topic accent + unread indicator","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#475569","Product Type":"Forum / Discussion Board","Ring":"#475569","Secondary":"#64748B","domain":"colors","record_id":"colors/164"},{"Accent":"#D97706","Background":"#ECFDF5","Border":"#A7F3D0","Card":"#FFFFFF","Card Foreground":"#064E3B","Destructive":"#DC2626","Foreground":"#064E3B","Muted":"#E8F1F3","Muted Foreground":"#64748B","No":165,"Notes":"Category green + verified badge + map accent","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#059669","Product Type":"Directory / Listing Site","Ring":"#059669","Secondary":"#10B981","domain":"colors","record_id":"colors/165"},{"Accent":"#DC2626","Background":"#F0FDF4","Border":"#BBF7D0","Card":"#FFFFFF","Card Foreground":"#14532D","Destructive":"#DC2626","Foreground":"#14532D","Muted":"#E8F0F1","Muted Foreground":"#64748B","No":166,"Notes":"Operational green + incident red + maintenance amber","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#16A34A","Product Type":"Status Page / Incident Management","Ring":"#16A34A","Secondary":"#22C55E","domain":"colors","record_id":"colors/166"},{"Accent":"#7C3AED","Background":"#F8FAFC","Border":"#BFDBFE","Card":"#FFFFFF","Card Foreground":"#1E40AF","Destructive":"#DC2626","Foreground":"#1E40AF","Muted":"#E9EEF5","Muted Foreground":"#64748B","No":167,"Notes":"Knowledge blue + link purple + clean white","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E3A8A","Product Type":"Wiki / Encyclopedia","Ring":"#1E3A8A","Secondary":"#3B82F6","domain":"colors","record_id":"colors/167"},{"Accent":"#16A34A","Background":"#020617","Border":"#334155","Card":"#0E1223","Card Foreground":"#F8FAFC","Destructive":"#DC2626","Foreground":"#F8FAFC","Muted":"#1A1E2F","Muted Foreground":"#94A3B8","No":168,"Notes":"Dark luxury + bid green + outbid red + urgency","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0F172A","Product Type":"Auction Platform","Ring":"#0F172A","Secondary":"#1E293B","domain":"colors","record_id":"colors/168"},{"Accent":"#059669","Background":"#F8FAFC","Border":"#E2E8F0","Card":"#FFFFFF","Card Foreground":"#1E293B","Destructive":"#DC2626","Foreground":"#1E293B","Muted":"#EAEFF3","Muted Foreground":"#64748B","No":169,"Notes":"Feature green + fix blue + breaking red badges","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#475569","Product Type":"Changelog / Release Notes","Ring":"#475569","Secondary":"#64748B","domain":"colors","record_id":"colors/169"},{"Accent":"#D97706","Background":"#F0FDF4","Border":"#BBF7D0","Card":"#FFFFFF","Card Foreground":"#14532D","Destructive":"#DC2626","Foreground":"#14532D","Muted":"#E8F0F1","Muted Foreground":"#64748B","No":170,"Notes":"Discovery green + volunteer badge + data neutral","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#15803D","Product Type":"Citizen Science Platform","Ring":"#15803D","Secondary":"#22C55E","domain":"colors","record_id":"colors/170"},{"Accent":"#16A34A","Background":"#EFF6FF","Border":"#BFDBFE","Card":"#FFFFFF","Card Foreground":"#1E40AF","Destructive":"#DC2626","Foreground":"#1E40AF","Muted":"#E9EFF8","Muted Foreground":"#64748B","No":171,"Notes":"Listing blue + price green + seller badge","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#2563EB","Product Type":"Classifieds / Buy-Sell","Ring":"#2563EB","Secondary":"#3B82F6","domain":"colors","record_id":"colors/171"},{"Accent":"#A16207","Background":"#F8FAFC","Border":"#CBD5E1","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#E9EEF5","Muted Foreground":"#64748B","No":172,"Notes":"Academic navy + gold keynote + track chips","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E3A5F","Product Type":"Conference / Symposium Landing Page","Ring":"#1E3A5F","Secondary":"#2563EB","domain":"colors","record_id":"colors/172"},{"Accent":"#16A34A","Background":"#FFFBEB","Border":"#FAEEE1","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FCF6F0","Muted Foreground":"#64748B","No":173,"Notes":"Funding progress amber + goal green + urgency","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#D97706","Product Type":"Crowdfunding Platform","Ring":"#D97706","Secondary":"#F59E0B","domain":"colors","record_id":"colors/173"},{"Accent":"#EF4444","Background":"#020617","Border":"#334155","Card":"#0E1223","Card Foreground":"#F8FAFC","Destructive":"#EF4444","Foreground":"#F8FAFC","Muted":"#1A1E2F","Muted Foreground":"#94A3B8","No":174,"Notes":"High contrast dark + brand accent + large touch targets","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0F172A","Product Type":"Digital Signage / Kiosk","Ring":"#0F172A","Secondary":"#1E293B","domain":"colors","record_id":"colors/174"},{"Accent":"#16A34A","Background":"#F8FAFC","Border":"#CBD5E1","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#E9EEF5","Muted Foreground":"#64748B","No":175,"Notes":"Trust navy + signature green + audit trail","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E3A5F","Product Type":"E-signature / Document Workflow","Ring":"#1E3A5F","Secondary":"#2563EB","domain":"colors","record_id":"colors/175"},{"Accent":"#16A34A","Background":"#020617","Border":"#334155","Card":"#0E1223","Card Foreground":"#F8FAFC","Destructive":"#DC2626","Foreground":"#F8FAFC","Muted":"#1A1E2F","Muted Foreground":"#94A3B8","No":176,"Notes":"Enabled green + disabled grey + experimental amber","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0F172A","Product Type":"Feature Flag / Config Management","Ring":"#0F172A","Secondary":"#1E293B","domain":"colors","record_id":"colors/176"},{"Accent":"#16A34A","Background":"#EFF6FF","Border":"#BFDBFE","Card":"#FFFFFF","Card Foreground":"#1E3A8A","Destructive":"#DC2626","Foreground":"#1E3A8A","Muted":"#E9EFF5","Muted Foreground":"#64748B","No":177,"Notes":"Professional blue + service green + accessibility","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E40AF","Product Type":"Government Portal / Civic Services","Ring":"#1E40AF","Secondary":"#3B82F6","domain":"colors","record_id":"colors/177"},{"Accent":"#16A34A","Background":"#F8FAFC","Border":"#CBD5E1","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#E9EEF5","Muted Foreground":"#64748B","No":178,"Notes":"Institution navy + funding green + deadline urgency","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E3A5F","Product Type":"Grant / Funding Portal","Ring":"#1E3A5F","Secondary":"#2563EB","domain":"colors","record_id":"colors/178"},{"Accent":"#D97706","Background":"#F0FDFA","Border":"#5EEAD4","Card":"#FFFFFF","Card Foreground":"#134E4A","Destructive":"#DC2626","Foreground":"#134E4A","Muted":"#E8F1F4","Muted Foreground":"#64748B","No":179,"Notes":"Education teal + course amber + grade green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#0D9488","Product Type":"LMS (Learning Management System)","Ring":"#0D9488","Secondary":"#2DD4BF","domain":"colors","record_id":"colors/179"},{"Accent":"#EC4899","Background":"#FAF5FF","Border":"#DDD6FE","Card":"#FFFFFF","Card Foreground":"#4C1D95","Destructive":"#DC2626","Foreground":"#4C1D95","Muted":"#ECEEF9","Muted Foreground":"#64748B","No":180,"Notes":"Builder purple + component pink + canvas neutral","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#7C3AED","Product Type":"No-code / Low-code Builder","Ring":"#7C3AED","Secondary":"#A78BFA","domain":"colors","record_id":"colors/180"},{"Accent":"#A16207","Background":"#020617","Border":"#334155","Card":"#0E1223","Card Foreground":"#F8FAFC","Destructive":"#22C55E","Foreground":"#F8FAFC","Muted":"#1A1E2F","Muted Foreground":"#94A3B8","No":181,"Notes":"Dark code + star gold + fork silver + sponsor purple","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0F172A","Product Type":"Open Source Project Landing","Ring":"#0F172A","Secondary":"#1E293B","domain":"colors","record_id":"colors/181"},{"Accent":"#16A34A","Background":"#F0F9FF","Border":"#BAE6FD","Card":"#FFFFFF","Card Foreground":"#0C4A6E","Destructive":"#DC2626","Foreground":"#0C4A6E","Muted":"#E8F2F8","Muted Foreground":"#64748B","No":182,"Notes":"Clinical blue + health green + alert red","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0284C7","Product Type":"Patient Portal / Health Records","Ring":"#0284C7","Secondary":"#0891B2","domain":"colors","record_id":"colors/182"},{"Accent":"#A16207","Background":"#F8FAFC","Border":"#E2E8F0","Card":"#FFFFFF","Card Foreground":"#1E293B","Destructive":"#DC2626","Foreground":"#1E293B","Muted":"#EAEFF3","Muted Foreground":"#64748B","No":183,"Notes":"Formal neutral + patent type chips + status badges","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#475569","Product Type":"Patent / IP Database","Ring":"#475569","Secondary":"#64748B","domain":"colors","record_id":"colors/183"},{"Accent":"#D97706","Background":"#F8FAFC","Border":"#E4ECFC","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#F1F5FD","Muted Foreground":"#64748B","No":184,"Notes":"Knowledge blue + accepted green + reputation gold","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#2563EB","Product Type":"Q&A Community Platform","Ring":"#2563EB","Secondary":"#0891B2","domain":"colors","record_id":"colors/184"},{"Accent":"#A16207","Background":"#F8FAFC","Border":"#CBD5E1","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#E9EEF5","Muted Foreground":"#64748B","No":185,"Notes":"Institutional navy + research accent + serif headings","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E3A5F","Product Type":"Research Lab / University Department","Ring":"#1E3A5F","Secondary":"#2563EB","domain":"colors","record_id":"colors/185"},{"Accent":"#16A34A","Background":"#F8FAFC","Border":"#CBD5E1","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#E9EEF5","Muted Foreground":"#64748B","No":186,"Notes":"Professional navy + section accent + success green","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#1E3A5F","Product Type":"Resume / CV Builder","Ring":"#1E3A5F","Secondary":"#2563EB","domain":"colors","record_id":"colors/186"},{"Accent":"#16A34A","Background":"#FFFBEB","Border":"#FAEEE1","Card":"#FFFFFF","Card Foreground":"#0F172A","Destructive":"#DC2626","Foreground":"#0F172A","Muted":"#FCF6F0","Muted Foreground":"#64748B","No":187,"Notes":"Star gold + positive green + negative red","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#0F172A","On Secondary":"#0F172A","Primary":"#F59E0B","Product Type":"Review Platform","Ring":"#F59E0B","Secondary":"#FBBF24","domain":"colors","record_id":"colors/187"},{"Accent":"#16A34A","Background":"#020617","Border":"#334155","Card":"#0E1223","Card Foreground":"#F8FAFC","Destructive":"#DC2626","Foreground":"#F8FAFC","Muted":"#1A1E2F","Muted Foreground":"#94A3B8","No":188,"Notes":"Dark terminal + running green + failed red + queued amber","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0F172A","Product Type":"RPA / Automation Dashboard","Ring":"#0F172A","Secondary":"#1E293B","domain":"colors","record_id":"colors/188"},{"Accent":"#D97706","Background":"#F0FDFA","Border":"#5EEAD4","Card":"#FFFFFF","Card Foreground":"#134E4A","Destructive":"#DC2626","Foreground":"#134E4A","Muted":"#E8F1F4","Muted Foreground":"#64748B","No":189,"Notes":"Question teal + progress green + submit blue","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#0D9488","Product Type":"Survey / Form Builder","Ring":"#0D9488","Secondary":"#2DD4BF","domain":"colors","record_id":"colors/189"},{"Accent":"#16A34A","Background":"#F0FDFA","Border":"#CCFBF1","Card":"#FFFFFF","Card Foreground":"#134E4A","Destructive":"#DC2626","Foreground":"#134E4A","Muted":"#E8F1F6","Muted Foreground":"#64748B","No":190,"Notes":"Medical teal + video green + waiting amber","On Accent":"#FFFFFF","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#0891B2","Product Type":"Telemedicine Platform","Ring":"#0891B2","Secondary":"#22D3EE","domain":"colors","record_id":"colors/190"},{"Accent":"#F59E0B","Background":"#FAF5FF","Border":"#DDD6FE","Card":"#FFFFFF","Card Foreground":"#4C1D95","Destructive":"#DC2626","Foreground":"#4C1D95","Muted":"#ECEEF9","Muted Foreground":"#64748B","No":191,"Notes":"Trust purple + quote gold + verified blue","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#0F172A","Primary":"#7C3AED","Product Type":"Testimonial & Social Proof Widget","Ring":"#7C3AED","Secondary":"#A78BFA","domain":"colors","record_id":"colors/191"},{"Accent":"#16A34A","Background":"#020617","Border":"#334155","Card":"#0E1223","Card Foreground":"#F8FAFC","Destructive":"#DC2626","Foreground":"#F8FAFC","Muted":"#1A1E2F","Muted Foreground":"#94A3B8","No":192,"Notes":"Event theme colors + available green + sold-out red","On Accent":"#0F172A","On Destructive":"#FFFFFF","On Primary":"#FFFFFF","On Secondary":"#FFFFFF","Primary":"#0F172A","Product Type":"Ticketing / Box Office","Ring":"#0F172A","Secondary":"#1E293B","domain":"colors","record_id":"colors/192"},{"Best For":"Mobile navigation drawer toggle sidebar","Category":"Navigation","Icon Name":"list","Keywords":"hamburger menu navigation toggle bars","Library":"Phosphor","No":1,"Style":"Outline","Usage":"<List size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/1"},{"Best For":"Back button breadcrumb navigation","Category":"Navigation","Icon Name":"arrow-left","Keywords":"back previous return navigate","Library":"Phosphor","No":2,"Style":"Outline","Usage":"<ArrowLeft size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/2"},{"Best For":"Forward button next step CTA","Category":"Navigation","Icon Name":"arrow-right","Keywords":"next forward continue navigate","Library":"Phosphor","No":3,"Style":"Outline","Usage":"<ArrowRight size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/3"},{"Best For":"Dropdown toggle accordion header","Category":"Navigation","Icon Name":"caret-down","Keywords":"dropdown expand accordion select","Library":"Phosphor","No":4,"Style":"Outline","Usage":"<CaretDown size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/4"},{"Best For":"Accordion collapse minimize","Category":"Navigation","Icon Name":"caret-up","Keywords":"collapse close accordion minimize","Library":"Phosphor","No":5,"Style":"Outline","Usage":"<CaretUp size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/5"},{"Best For":"Home navigation main page","Category":"Navigation","Icon Name":"house","Keywords":"homepage main dashboard start","Library":"Phosphor","No":6,"Style":"Outline","Usage":"<House size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/6"},{"Best For":"Modal close dismiss button","Category":"Navigation","Icon Name":"x","Keywords":"close cancel dismiss remove exit","Library":"Phosphor","No":7,"Style":"Outline","Usage":"<X size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/7"},{"Best For":"External link indicator","Category":"Navigation","Icon Name":"arrow-square-out","Keywords":"open new tab external link","Library":"Phosphor","No":8,"Style":"Outline","Usage":"<ArrowSquareOut size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/8"},{"Best For":"Add button create new item","Category":"Action","Icon Name":"plus","Keywords":"add create new insert","Library":"Phosphor","No":9,"Style":"Outline","Usage":"<Plus size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/9"},{"Best For":"Remove item quantity decrease","Category":"Action","Icon Name":"minus","Keywords":"remove subtract decrease delete","Library":"Phosphor","No":10,"Style":"Outline","Usage":"<Minus size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/10"},{"Best For":"Delete action destructive","Category":"Action","Icon Name":"trash","Keywords":"delete remove discard bin","Library":"Phosphor","No":11,"Style":"Outline","Usage":"<Trash size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/11"},{"Best For":"Edit button modify content","Category":"Action","Icon Name":"pencil-simple","Keywords":"pencil modify change update","Library":"Phosphor","No":12,"Style":"Outline","Usage":"<PencilSimple size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/12"},{"Best For":"Save button persist changes","Category":"Action","Icon Name":"floppy-disk","Keywords":"disk store persist save","Library":"Phosphor","No":13,"Style":"Outline","Usage":"<FloppyDisk size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/13"},{"Best For":"Download file export","Category":"Action","Icon Name":"download-simple","Keywords":"export save file download","Library":"Phosphor","No":14,"Style":"Outline","Usage":"<DownloadSimple size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/14"},{"Best For":"Upload file import","Category":"Action","Icon Name":"upload-simple","Keywords":"import file attach upload","Library":"Phosphor","No":15,"Style":"Outline","Usage":"<UploadSimple size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/15"},{"Best For":"Copy to clipboard","Category":"Action","Icon Name":"copy","Keywords":"duplicate clipboard paste","Library":"Phosphor","No":16,"Style":"Outline","Usage":"<Copy size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/16"},{"Best For":"Share button social","Category":"Action","Icon Name":"share","Keywords":"social distribute send","Library":"Phosphor","No":17,"Style":"Outline","Usage":"<Share size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/17"},{"Best For":"Search input bar","Category":"Action","Icon Name":"magnifying-glass","Keywords":"find lookup filter query","Library":"Phosphor","No":18,"Style":"Outline","Usage":"<MagnifyingGlass size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/18"},{"Best For":"Filter dropdown sort","Category":"Action","Icon Name":"funnel","Keywords":"sort refine narrow options","Library":"Phosphor","No":19,"Style":"Outline","Usage":"<Funnel size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/19"},{"Best For":"Settings page configuration","Category":"Action","Icon Name":"gear","Keywords":"gear cog preferences config","Library":"Phosphor","No":20,"Style":"Outline","Usage":"<Gear size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/20"},{"Best For":"Success state checkmark","Category":"Status","Icon Name":"check","Keywords":"success done complete verified","Library":"Phosphor","No":21,"Style":"Outline","Usage":"<Check size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/21"},{"Best For":"Success badge verified","Category":"Status","Icon Name":"check-circle","Keywords":"success verified approved complete","Library":"Phosphor","No":22,"Style":"Outline","Usage":"<CheckCircle size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/22"},{"Best For":"Error state failed","Category":"Status","Icon Name":"x-circle","Keywords":"error failed cancel rejected","Library":"Phosphor","No":23,"Style":"Outline","Usage":"<XCircle size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/23"},{"Best For":"Warning message caution","Category":"Status","Icon Name":"warning","Keywords":"warning caution attention danger","Library":"Phosphor","No":24,"Style":"Outline","Usage":"<Warning size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/24"},{"Best For":"Info notice alert","Category":"Status","Icon Name":"warning-circle","Keywords":"info notice information help","Library":"Phosphor","No":25,"Style":"Outline","Usage":"<WarningCircle size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/25"},{"Best For":"Information tooltip help","Category":"Status","Icon Name":"info","Keywords":"information help tooltip details","Library":"Phosphor","No":26,"Style":"Outline","Usage":"<Info size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/26"},{"Best For":"Loading state spinner","Category":"Status","Icon Name":"circle-notch","Keywords":"loading spinner processing wait","Library":"Phosphor","No":27,"Style":"Outline","Usage":"<CircleNotch size={20} weight=\"regular\" className=\"animate-spin\" />","domain":"icons","record_id":"icons/27"},{"Best For":"Pending time schedule","Category":"Status","Icon Name":"clock","Keywords":"time schedule pending wait","Library":"Phosphor","No":28,"Style":"Outline","Usage":"<Clock size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/28"},{"Best For":"Email contact inbox","Category":"Communication","Icon Name":"envelope","Keywords":"email message inbox letter","Library":"Phosphor","No":29,"Style":"Outline","Usage":"<Envelope size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/29"},{"Best For":"Chat comment message","Category":"Communication","Icon Name":"chat-circle","Keywords":"chat comment bubble conversation","Library":"Phosphor","No":30,"Style":"Outline","Usage":"<ChatCircle size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/30"},{"Best For":"Phone contact call","Category":"Communication","Icon Name":"phone","Keywords":"call mobile telephone contact","Library":"Phosphor","No":31,"Style":"Outline","Usage":"<Phone size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/31"},{"Best For":"Send message submit","Category":"Communication","Icon Name":"paper-plane-tilt","Keywords":"submit dispatch message airplane","Library":"Phosphor","No":32,"Style":"Outline","Usage":"<PaperPlaneTilt size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/32"},{"Best For":"Notification bell alert","Category":"Communication","Icon Name":"bell","Keywords":"notification alert ring reminder","Library":"Phosphor","No":33,"Style":"Outline","Usage":"<Bell size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/33"},{"Best For":"User profile account","Category":"User","Icon Name":"user","Keywords":"profile account person avatar","Library":"Phosphor","No":34,"Style":"Outline","Usage":"<User size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/34"},{"Best For":"Team group members","Category":"User","Icon Name":"users","Keywords":"team group people members","Library":"Phosphor","No":35,"Style":"Outline","Usage":"<Users size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/35"},{"Best For":"Add user invite","Category":"User","Icon Name":"user-plus","Keywords":"add invite new member","Library":"Phosphor","No":36,"Style":"Outline","Usage":"<UserPlus size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/36"},{"Best For":"Login signin","Category":"User","Icon Name":"sign-in","Keywords":"signin authenticate enter","Library":"Phosphor","No":37,"Style":"Outline","Usage":"<SignIn size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/37"},{"Best For":"Logout signout","Category":"User","Icon Name":"sign-out","Keywords":"signout exit leave logout","Library":"Phosphor","No":38,"Style":"Outline","Usage":"<SignOut size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/38"},{"Best For":"Image photo gallery","Category":"Media","Icon Name":"image","Keywords":"photo picture gallery thumbnail","Library":"Phosphor","No":39,"Style":"Outline","Usage":"<Image size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/39"},{"Best For":"Video player media","Category":"Media","Icon Name":"video","Keywords":"movie film play record","Library":"Phosphor","No":40,"Style":"Outline","Usage":"<Video size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/40"},{"Best For":"Play button video audio","Category":"Media","Icon Name":"play","Keywords":"start video audio media","Library":"Phosphor","No":41,"Style":"Outline","Usage":"<Play size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/41"},{"Best For":"Pause button media","Category":"Media","Icon Name":"pause","Keywords":"stop halt video audio","Library":"Phosphor","No":42,"Style":"Outline","Usage":"<Pause size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/42"},{"Best For":"Volume audio sound","Category":"Media","Icon Name":"speaker-high","Keywords":"sound audio speaker music","Library":"Phosphor","No":43,"Style":"Outline","Usage":"<SpeakerHigh size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/43"},{"Best For":"Microphone voice record","Category":"Media","Icon Name":"microphone","Keywords":"microphone record voice audio","Library":"Phosphor","No":44,"Style":"Outline","Usage":"<Microphone size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/44"},{"Best For":"Camera photo capture","Category":"Media","Icon Name":"camera","Keywords":"photo capture snapshot picture","Library":"Phosphor","No":45,"Style":"Outline","Usage":"<Camera size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/45"},{"Best For":"Shopping cart e-commerce","Category":"Commerce","Icon Name":"shopping-cart","Keywords":"cart checkout basket buy","Library":"Phosphor","No":46,"Style":"Outline","Usage":"<ShoppingCart size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/46"},{"Best For":"Shopping bag purchase","Category":"Commerce","Icon Name":"shopping-bag","Keywords":"purchase buy store bag","Library":"Phosphor","No":47,"Style":"Outline","Usage":"<ShoppingBag size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/47"},{"Best For":"Payment credit card","Category":"Commerce","Icon Name":"credit-card","Keywords":"payment card checkout stripe","Library":"Phosphor","No":48,"Style":"Outline","Usage":"<CreditCard size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/48"},{"Best For":"Price money currency","Category":"Commerce","Icon Name":"currency-dollar","Keywords":"money price currency cost","Library":"Phosphor","No":49,"Style":"Outline","Usage":"<CurrencyDollar size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/49"},{"Best For":"Price tag label","Category":"Commerce","Icon Name":"tag","Keywords":"label price discount sale","Library":"Phosphor","No":50,"Style":"Outline","Usage":"<Tag size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/50"},{"Best For":"Gift reward offer","Category":"Commerce","Icon Name":"gift","Keywords":"present reward bonus offer","Library":"Phosphor","No":51,"Style":"Outline","Usage":"<Gift size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/51"},{"Best For":"Discount percentage sale","Category":"Commerce","Icon Name":"percent","Keywords":"discount sale offer promo","Library":"Phosphor","No":52,"Style":"Outline","Usage":"<Percent size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/52"},{"Best For":"Bar chart analytics","Category":"Data","Icon Name":"chart-bar","Keywords":"analytics statistics graph metrics","Library":"Phosphor","No":53,"Style":"Outline","Usage":"<ChartBar size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/53"},{"Best For":"Pie chart distribution","Category":"Data","Icon Name":"chart-pie","Keywords":"statistics distribution breakdown","Library":"Phosphor","No":54,"Style":"Outline","Usage":"<ChartPie size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/54"},{"Best For":"Growth trend positive","Category":"Data","Icon Name":"trend-up","Keywords":"growth increase positive trend","Library":"Phosphor","No":55,"Style":"Outline","Usage":"<TrendUp size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/55"},{"Best For":"Decline trend negative","Category":"Data","Icon Name":"trend-down","Keywords":"decline decrease negative trend","Library":"Phosphor","No":56,"Style":"Outline","Usage":"<TrendDown size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/56"},{"Best For":"Activity monitor pulse","Category":"Data","Icon Name":"activity","Keywords":"pulse heartbeat monitor live","Library":"Phosphor","No":57,"Style":"Outline","Usage":"<Activity size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/57"},{"Best For":"Database storage","Category":"Data","Icon Name":"database","Keywords":"storage server data backend","Library":"Phosphor","No":58,"Style":"Outline","Usage":"<Database size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/58"},{"Best For":"File document","Category":"Files","Icon Name":"file","Keywords":"document page paper doc","Library":"Phosphor","No":59,"Style":"Outline","Usage":"<File size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/59"},{"Best For":"Text document article","Category":"Files","Icon Name":"file-text","Keywords":"document text page article","Library":"Phosphor","No":60,"Style":"Outline","Usage":"<FileText size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/60"},{"Best For":"Folder directory","Category":"Files","Icon Name":"folder","Keywords":"directory organize group files","Library":"Phosphor","No":61,"Style":"Outline","Usage":"<Folder size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/61"},{"Best For":"Open folder browse","Category":"Files","Icon Name":"folder-open","Keywords":"expanded browse files view","Library":"Phosphor","No":62,"Style":"Outline","Usage":"<FolderOpen size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/62"},{"Best For":"Attachment paperclip","Category":"Files","Icon Name":"paperclip","Keywords":"attachment attach file link","Library":"Phosphor","No":63,"Style":"Outline","Usage":"<Paperclip size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/63"},{"Best For":"Link URL hyperlink","Category":"Files","Icon Name":"link","Keywords":"url hyperlink chain connect","Library":"Phosphor","No":64,"Style":"Outline","Usage":"<Link size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/64"},{"Best For":"Clipboard paste","Category":"Files","Icon Name":"clipboard","Keywords":"paste copy buffer notes","Library":"Phosphor","No":65,"Style":"Outline","Usage":"<Clipboard size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/65"},{"Best For":"Grid layout gallery","Category":"Layout","Icon Name":"grid-four","Keywords":"tiles gallery layout dashboard","Library":"Phosphor","No":66,"Style":"Outline","Usage":"<GridFour size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/66"},{"Best For":"List view rows","Category":"Layout","Icon Name":"list-bullets","Keywords":"rows table lines items","Library":"Phosphor","No":67,"Style":"Outline","Usage":"<ListBullets size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/67"},{"Best For":"Column layout split","Category":"Layout","Icon Name":"columns","Keywords":"layout split dual sidebar","Library":"Phosphor","No":68,"Style":"Outline","Usage":"<Columns size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/68"},{"Best For":"Fullscreen maximize","Category":"Layout","Icon Name":"arrows-out","Keywords":"fullscreen expand enlarge zoom","Library":"Phosphor","No":69,"Style":"Outline","Usage":"<ArrowsOut size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/69"},{"Best For":"Minimize reduce","Category":"Layout","Icon Name":"arrows-in","Keywords":"reduce shrink collapse exit","Library":"Phosphor","No":70,"Style":"Outline","Usage":"<ArrowsIn size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/70"},{"Best For":"Sidebar panel","Category":"Layout","Icon Name":"sidebar","Keywords":"panel drawer navigation menu","Library":"Phosphor","No":71,"Style":"Outline","Usage":"<Sidebar size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/71"},{"Best For":"Like favorite love","Category":"Social","Icon Name":"heart","Keywords":"like love favorite wishlist","Library":"Phosphor","No":72,"Style":"Outline","Usage":"<Heart size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/72"},{"Best For":"Star rating favorite","Category":"Social","Icon Name":"star","Keywords":"rating review favorite bookmark","Library":"Phosphor","No":73,"Style":"Outline","Usage":"<Star size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/73"},{"Best For":"Like approve thumb","Category":"Social","Icon Name":"thumbs-up","Keywords":"like approve agree positive","Library":"Phosphor","No":74,"Style":"Outline","Usage":"<ThumbsUp size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/74"},{"Best For":"Dislike disapprove","Category":"Social","Icon Name":"thumbs-down","Keywords":"dislike disapprove disagree negative","Library":"Phosphor","No":75,"Style":"Outline","Usage":"<ThumbsDown size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/75"},{"Best For":"Bookmark save","Category":"Social","Icon Name":"bookmark","Keywords":"save later favorite mark","Library":"Phosphor","No":76,"Style":"Outline","Usage":"<Bookmark size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/76"},{"Best For":"Flag report","Category":"Social","Icon Name":"flag","Keywords":"report mark important highlight","Library":"Phosphor","No":77,"Style":"Outline","Usage":"<Flag size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/77"},{"Best For":"Mobile smartphone","Category":"Device","Icon Name":"device-mobile","Keywords":"mobile phone device touch","Library":"Phosphor","No":78,"Style":"Outline","Usage":"<DeviceMobile size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/78"},{"Best For":"Tablet device","Category":"Device","Icon Name":"device-tablet","Keywords":"ipad device touch screen","Library":"Phosphor","No":79,"Style":"Outline","Usage":"<DeviceTablet size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/79"},{"Best For":"Desktop monitor","Category":"Device","Icon Name":"monitor","Keywords":"desktop screen computer display","Library":"Phosphor","No":80,"Style":"Outline","Usage":"<Monitor size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/80"},{"Best For":"Laptop computer","Category":"Device","Icon Name":"laptop","Keywords":"notebook computer portable device","Library":"Phosphor","No":81,"Style":"Outline","Usage":"<Laptop size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/81"},{"Best For":"Printer print","Category":"Device","Icon Name":"printer","Keywords":"print document output paper","Library":"Phosphor","No":82,"Style":"Outline","Usage":"<Printer size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/82"},{"Best For":"Lock secure","Category":"Security","Icon Name":"lock","Keywords":"secure password protected private","Library":"Phosphor","No":83,"Style":"Outline","Usage":"<Lock size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/83"},{"Best For":"Unlock open","Category":"Security","Icon Name":"lock-open","Keywords":"open access unsecure public","Library":"Phosphor","No":84,"Style":"Outline","Usage":"<LockOpen size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/84"},{"Best For":"Shield protection","Category":"Security","Icon Name":"shield","Keywords":"protection security safe guard","Library":"Phosphor","No":85,"Style":"Outline","Usage":"<Shield size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/85"},{"Best For":"Key password","Category":"Security","Icon Name":"key","Keywords":"password access unlock login","Library":"Phosphor","No":86,"Style":"Outline","Usage":"<Key size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/86"},{"Best For":"Show password view","Category":"Security","Icon Name":"eye","Keywords":"view show visible password","Library":"Phosphor","No":87,"Style":"Outline","Usage":"<Eye size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/87"},{"Best For":"Hide password","Category":"Security","Icon Name":"eye-slash","Keywords":"hide invisible password hidden","Library":"Phosphor","No":88,"Style":"Outline","Usage":"<EyeSlash size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/88"},{"Best For":"Location pin marker","Category":"Location","Icon Name":"map-pin","Keywords":"location marker place address","Library":"Phosphor","No":89,"Style":"Outline","Usage":"<MapPin size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/89"},{"Best For":"Map directions","Category":"Location","Icon Name":"map","Keywords":"directions navigate geography location","Library":"Phosphor","No":90,"Style":"Outline","Usage":"<Map size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/90"},{"Best For":"Navigation compass","Category":"Location","Icon Name":"compass","Keywords":"compass direction pointer arrow","Library":"Phosphor","No":91,"Style":"Outline","Usage":"<Compass size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/91"},{"Best For":"Globe world","Category":"Location","Icon Name":"globe","Keywords":"world international global web","Library":"Phosphor","No":92,"Style":"Outline","Usage":"<Globe size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/92"},{"Best For":"Calendar date","Category":"Time","Icon Name":"calendar","Keywords":"date schedule event appointment","Library":"Phosphor","No":93,"Style":"Outline","Usage":"<Calendar size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/93"},{"Best For":"Refresh reload","Category":"Time","Icon Name":"arrows-clockwise","Keywords":"reload sync update refresh","Library":"Phosphor","No":94,"Style":"Outline","Usage":"<ArrowsClockwise size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/94"},{"Best For":"Undo revert","Category":"Time","Icon Name":"arrow-counter-clockwise","Keywords":"undo back revert history","Library":"Phosphor","No":95,"Style":"Outline","Usage":"<ArrowCounterClockwise size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/95"},{"Best For":"Redo forward","Category":"Time","Icon Name":"arrow-clockwise","Keywords":"redo forward repeat history","Library":"Phosphor","No":96,"Style":"Outline","Usage":"<ArrowClockwise size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/96"},{"Best For":"Code development","Category":"Development","Icon Name":"code","Keywords":"develop programming syntax html","Library":"Phosphor","No":97,"Style":"Outline","Usage":"<Code size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/97"},{"Best For":"Terminal console","Category":"Development","Icon Name":"terminal","Keywords":"console cli command shell","Library":"Phosphor","No":98,"Style":"Outline","Usage":"<Terminal size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/98"},{"Best For":"Git branch","Category":"Development","Icon Name":"git-branch","Keywords":"version control branch merge","Library":"Phosphor","No":99,"Style":"Outline","Usage":"<GitBranch size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/99"},{"Best For":"GitHub repository","Category":"Development","Icon Name":"github-logo","Keywords":"repository code open source","Library":"Phosphor","No":100,"Style":"Outline","Usage":"<GithubLogo size={20} weight=\"regular\" />","domain":"icons","record_id":"icons/100"},{"Best For":"Bold Typography Mobile style: weight=\"regular\". Size 20px for UI controls, 32px for feature anchors. Icons MUST be paired with a Mono-stack text label (JetBrains Mono). Standalone icons only allowed for standard navigation (e.g., Back arrow). Accent color #FF3D00 only.","Category":"Style Config","Icon Name":"bold-typography-icon-system","Keywords":"bold typography, editorial, mono label, phosphor, weight regular, minimal, icon+label required, size 20–32","Library":"Phosphor (react-native)","No":101,"Style":"Outline","Usage":"<ArrowRight size={20} weight=\"regular\" color={colors.accent} />","domain":"icons","record_id":"icons/101"},{"Best For":"Cyberpunk Mobile HUD style: weight=\"regular\", color={colors.accent} (#00FF88 Matrix Green). Wrap every icon in a View with shadowColor: colors.accent / shadowOpacity: 0.6 / shadowRadius: 8 to simulate neon glow. Use borderRadius: 0 on wrapper. Avoid rounded icon containers. Always pair icon with data label in JetBrains Mono.","Category":"Style Config","Icon Name":"cyberpunk-icon-system","Keywords":"cyberpunk, neon, glow, hud, phosphor, weight regular, accent glow, dark, angular, react native","Library":"Phosphor (react-native)","No":102,"Style":"Outline","Usage":"<Lightning size={24} weight=\"regular\" color={colors.accent} />","domain":"icons","record_id":"icons/102"},{"Best For":"Academia (Scholarly Mobile) style: weight=\"thin\" (thin engraved feel), color={colors.brass} (#C9A962). No sharp geometric or tech-inspired icons. Prefer book, scroll, key, quill-type icon metaphors. Wrap in circular View with 1px brass border. Avoid neon or saturated colored icons. All icon-only navigation must have an accessibilityLabel.","Category":"Style Config","Icon Name":"academia-icon-system","Keywords":"academia, library, brass, ornate, phosphor, weight thin, muted warm, scholarly, mobile","Library":"Phosphor (react-native)","No":103,"Style":"Outline","Usage":"<BookOpen size={22} weight=\"thin\" color={colors.brass} />","domain":"icons","record_id":"icons/103"},{"Best For":"Bitcoin DeFi Mobile style: weight=\"regular\", color={colors.bitcoinOrange} (#F7931A). Wrap icons in circular BlurView (intensity: 20) with 1px borderColor: '#F7931A' border (Holographic Node effect). shadowColor: '#F7931A' / shadowOpacity: 0.4 / shadowRadius: 8. Prefer finance/data icons (TrendUp, Wallet, Shield, Layers). All data icons use JetBrains Mono label.","Category":"Style Config","Icon Name":"web3-bitcoin-icon-system","Keywords":"web3, bitcoin, defi, crypto, neon orange, holographic, blurview, phosphor, glow, fintech mobile","Library":"Phosphor (react-native)","No":104,"Style":"Outline","Usage":"<TrendUp size={24} weight=\"regular\" color={colors.bitcoinOrange} />","domain":"icons","record_id":"icons/104"},{"Best For":"Icon library strategy and fallback rules","Category":"Guideline","Icon Name":"icon-fallback-rules","Keywords":"icon fallback, phosphor, heroicons, any icon, extended set","Library":"Phosphor (primary) + Heroicons (fallback)","No":105,"Style":"Outline","Usage":"当默认列表中没有合适图标时：优先继续从 Phosphor 中选择任何语义更贴切的图标（不必局限于本表列出的图标）。若 Phosphor 也无合适图标，可以改用 Heroicons，并在 UI 代码中保持风格统一（线性或填充、圆角程度、笔画粗细等）。","domain":"icons","record_id":"icons/105"},{"Color Strategy":"Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color","Conversion Optimization":"Deep CTA placement. Use contrasting color (at least 7:1 contrast ratio). Sticky navbar CTA.","Keywords":"hero, hero-centric, hero-centric design, features, feature-rich, feature-rich showcase, cta, call-to-action","No":1,"Pattern Name":"Hero + Features + CTA","Primary CTA Placement":"Hero (sticky) + Bottom","Recommended Effects":"Hero parallax, feature card hover lift, CTA glow on hover","Section Order":"1. Hero with headline/image, 2. Value prop, 3. Key features (3-5), 4. CTA section, 5. Footer","domain":"landing","record_id":"landing/1"},{"Color Strategy":"Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant","Conversion Optimization":"Social proof before CTA. Use 3-5 testimonials. Include photo + name + role. CTA after social proof.","Keywords":"hero, testimonials, social-proof, social-proof-focused, social proof focused, trust, reviews, cta","No":2,"Pattern Name":"Hero + Testimonials + CTA","Primary CTA Placement":"Hero (sticky) + Post-testimonials","Recommended Effects":"Testimonial carousel slide animations, quote marks animations, avatar fade-in","Section Order":"1. Hero, 2. Problem statement, 3. Solution overview, 4. Testimonials carousel, 5. CTA","domain":"landing","record_id":"landing/2"},{"Color Strategy":"Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222","Conversion Optimization":"Embedded product demo increases engagement. Use interactive mockup if possible. Auto-play video muted.","Keywords":"demo, product-demo, features, showcase, interactive, interactive-product-demo, interactive product demo","No":3,"Pattern Name":"Product Demo + Features","Primary CTA Placement":"Video center + CTA right/bottom","Recommended Effects":"Video play button pulse, feature scroll reveals, demo interaction highlights","Section Order":"1. Hero, 2. Product video/mockup (center), 3. Feature breakdown per section, 4. Comparison (optional), 5. CTA","domain":"landing","record_id":"landing/3"},{"Color Strategy":"Minimalist: Brand + white #FFFFFF + accent. Buttons: High contrast 7:1+. Text: Black/Dark grey","Conversion Optimization":"Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.","Keywords":"minimal, simple, direct, minimal & direct, minimal-direct, single-column, clean","No":4,"Pattern Name":"Minimal Single Column","Primary CTA Placement":"Center, large CTA button","Recommended Effects":"Minimal hover effects. Smooth scroll. CTA scale on hover (subtle)","Section Order":"1. Hero headline, 2. Short description, 3. Benefit bullets (3 max), 4. CTA, 5. Footer","domain":"landing","record_id":"landing/4"},{"Color Strategy":"Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color","Conversion Optimization":"Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs.","Keywords":"funnel, conversion, conversion-optimized, conversion optimized, steps, wizard, onboarding","No":5,"Pattern Name":"Funnel (3-Step Conversion)","Primary CTA Placement":"Each step: mini-CTA. Final: main CTA","Recommended Effects":"Step number animations, progress bar fill, step transitions smooth scroll","Section Order":"1. Hero, 2. Step 1 (problem), 3. Step 2 (solution), 4. Step 3 (action), 5. CTA progression","domain":"landing","record_id":"landing/5"},{"Color Strategy":"Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark","Conversion Optimization":"Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row.","Keywords":"comparison, table, compare, versus, cta","No":6,"Pattern Name":"Comparison Table + CTA","Primary CTA Placement":"Table: Right column. CTA: Below table","Recommended Effects":"Table row hover highlight, price toggle animations, feature checkmark animations","Section Order":"1. Hero, 2. Problem intro, 3. Comparison table (product vs competitors), 4. Pricing (optional), 5. CTA","domain":"landing","record_id":"landing/6"},{"Color Strategy":"Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color","Conversion Optimization":"Form fields ≤ 3 for best conversion. Offer valuable lead magnet preview. Show form submission progress.","Keywords":"lead, form, signup, capture, email, magnet","No":7,"Pattern Name":"Lead Magnet + Form","Primary CTA Placement":"Form CTA: Submit button","Recommended Effects":"Form focus state animations, input validation animations, success confirmation animation","Section Order":"1. Hero (benefit headline), 2. Lead magnet preview (ebook cover, checklist, etc), 3. Form (minimal fields), 4. CTA submit","domain":"landing","record_id":"landing/7"},{"Color Strategy":"Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow","Conversion Optimization":"Recommend starter plan (pre-select/highlight). Show annual discount (20-30%). Use FAQs to address concerns.","Keywords":"pricing, plans, tiers, comparison, cta","No":8,"Pattern Name":"Pricing Page + CTA","Primary CTA Placement":"Each card: CTA button. Sticky CTA in nav","Recommended Effects":"Price toggle animation (monthly/yearly), card comparison highlight, FAQ accordion open/close","Section Order":"1. Hero (pricing headline), 2. Price comparison cards, 3. Feature comparison table, 4. FAQ section, 5. Final CTA","domain":"landing","record_id":"landing/8"},{"Color Strategy":"Dark overlay 60% on video. Brand accent for CTA. White text on dark.","Conversion Optimization":"86% higher engagement with video. Add captions for accessibility. Compress video for performance.","Keywords":"video, hero, media, visual, engaging","No":9,"Pattern Name":"Video-First Hero","Primary CTA Placement":"Overlay on video (center/bottom) + Bottom section","Recommended Effects":"Video autoplay muted, parallax scroll, text fade-in on scroll","Section Order":"1. Hero with video background, 2. Key features overlay, 3. Benefits section, 4. CTA","domain":"landing","record_id":"landing/9"},{"Color Strategy":"Progressive reveal. Each chapter has distinct color. Building intensity.","Conversion Optimization":"Narrative increases time-on-page 3x. Use progress indicator. Mobile: simplify animations.","Keywords":"storytelling, scroll, narrative, story, immersive","No":10,"Pattern Name":"Scroll-Triggered Storytelling","Primary CTA Placement":"End of each chapter (mini) + Final climax CTA","Recommended Effects":"ScrollTrigger animations, parallax layers, progressive disclosure, chapter transitions","Section Order":"1. Intro hook, 2. Chapter 1 (problem), 3. Chapter 2 (journey), 4. Chapter 3 (solution), 5. Climax CTA","domain":"landing","record_id":"landing/10"},{"Color Strategy":"Adaptive based on user data. A/B test color variations per segment.","Conversion Optimization":"20%+ conversion with personalization. Requires analytics integration. Fallback for new users.","Keywords":"ai, personalization, smart, recommendation, dynamic","No":11,"Pattern Name":"AI Personalization Landing","Primary CTA Placement":"Context-aware placement based on user segment","Recommended Effects":"Dynamic content swap, fade transitions, personalized product recommendations","Section Order":"1. Dynamic hero (personalized), 2. Relevant features, 3. Tailored testimonials, 4. Smart CTA","domain":"landing","record_id":"landing/11"},{"Color Strategy":"Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.","Conversion Optimization":"Scarcity + exclusivity. Show waitlist count. Early access benefits. Referral program.","Keywords":"waitlist, coming-soon, launch, early-access, notify","No":12,"Pattern Name":"Waitlist/Coming Soon","Primary CTA Placement":"Email form prominent (above fold) + Sticky form on scroll","Recommended Effects":"Countdown timer animation, email validation feedback, success confetti, social share buttons","Section Order":"1. Hero with countdown, 2. Product teaser/preview, 3. Email capture form, 4. Social proof (waitlist count)","domain":"landing","record_id":"landing/12"},{"Color Strategy":"Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.","Conversion Optimization":"Show value vs competitors. 35% higher conversion. Be factual. Include pricing if favorable.","Keywords":"comparison, table, versus, compare, features","No":13,"Pattern Name":"Comparison Table Focus","Primary CTA Placement":"After comparison table (highlighted row) + Bottom","Recommended Effects":"Table row hover highlight, feature checkmark animations, sticky comparison header","Section Order":"1. Hero (problem statement), 2. Comparison matrix (you vs competitors), 3. Feature deep-dive, 4. Winner CTA","domain":"landing","record_id":"landing/13"},{"Color Strategy":"Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.","Conversion Optimization":"Annual discount 20-30%. Recommend mid-tier (most popular badge). Address objections in FAQ.","Keywords":"pricing, price, cost, plans, subscription","No":14,"Pattern Name":"Pricing-Focused Landing","Primary CTA Placement":"Each pricing card + Sticky CTA in nav + Bottom","Recommended Effects":"Price toggle monthly/annual animation, card hover lift, FAQ accordion smooth open","Section Order":"1. Hero (value proposition), 2. Pricing cards (3 tiers), 3. Feature comparison, 4. FAQ, 5. Final CTA","domain":"landing","record_id":"landing/14"},{"Color Strategy":"Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.","Conversion Optimization":"Show real screenshots. Include ratings (4.5+ stars). QR code for mobile. Platform-specific CTAs.","Keywords":"app, mobile, download, store, install","No":15,"Pattern Name":"App Store Style Landing","Primary CTA Placement":"Download buttons prominent (App Store + Play Store) throughout","Recommended Effects":"Device mockup rotations, screenshot slider, star rating animations, download button pulse","Section Order":"1. Hero with device mockup, 2. Screenshots carousel, 3. Features with icons, 4. Reviews/ratings, 5. Download CTAs","domain":"landing","record_id":"landing/15"},{"Color Strategy":"Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.","Conversion Optimization":"Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.","Keywords":"faq, documentation, help, support, questions, faq/documentation, knowledge base","No":16,"Pattern Name":"FAQ/Documentation Landing","Primary CTA Placement":"Search bar prominent + Contact CTA for unresolved questions","Recommended Effects":"Search autocomplete, smooth accordion open/close, category hover, helpful feedback buttons","Section Order":"1. Hero with search bar, 2. Popular categories, 3. FAQ accordion, 4. Contact/support CTA","domain":"landing","record_id":"landing/16"},{"Color Strategy":"Immersive experience colors. Dark background for focus. Highlight interactive elements.","Conversion Optimization":"40% higher engagement. Performance trade-off. Provide skip option. Mobile fallback essential.","Keywords":"immersive, interactive, experience, 3d, animation, immersive/interactive experience","No":17,"Pattern Name":"Immersive/Interactive Experience","Primary CTA Placement":"After interaction complete + Skip option for impatient users","Recommended Effects":"WebGL, 3D interactions, gamification elements, progress indicators, reward animations","Section Order":"1. Full-screen interactive element, 2. Guided product tour, 3. Key benefits revealed, 4. CTA after completion","domain":"landing","record_id":"landing/17"},{"Color Strategy":"Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.","Conversion Optimization":"Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts.","Keywords":"event, conference, meetup, registration, schedule, hero-centric design, hero-centric","No":18,"Pattern Name":"Event/Conference Landing","Primary CTA Placement":"Register CTA sticky + After speakers + Bottom","Recommended Effects":"Countdown timer, speaker hover cards with bio, agenda tabs, early bird countdown","Section Order":"1. Hero (date/location/countdown), 2. Speakers grid, 3. Agenda/schedule, 4. Sponsors, 5. Register CTA","domain":"landing","record_id":"landing/18"},{"Color Strategy":"Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.","Conversion Optimization":"User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.","Keywords":"reviews, ratings, testimonials, social-proof, social-proof-focused, stars","No":19,"Pattern Name":"Product Review/Ratings Focused","Primary CTA Placement":"After reviews summary + Buy button alongside reviews","Recommended Effects":"Star fill animations, review filtering, helpful vote interactions, photo lightbox","Section Order":"1. Hero (product + aggregate rating), 2. Rating breakdown, 3. Individual reviews, 4. Buy/CTA","domain":"landing","record_id":"landing/19"},{"Color Strategy":"Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.","Conversion Optimization":"Show active community (member count, posts today). Highlight benefits. Preview content. Easy onboarding.","Keywords":"community, forum, social, members, discussion","No":20,"Pattern Name":"Community/Forum Landing","Primary CTA Placement":"Join button prominent + After member showcase","Recommended Effects":"Member avatars animation, activity feed live updates, topic hover previews, join success celebration","Section Order":"1. Hero (community value prop), 2. Popular topics/categories, 3. Active members showcase, 4. Join CTA","domain":"landing","record_id":"landing/20"},{"Color Strategy":"Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.","Conversion Optimization":"Visual proof of value. 45% higher conversion. Real results. Specific metrics. Guarantee offer.","Keywords":"before-after, transformation, results, comparison","No":21,"Pattern Name":"Before-After Transformation","Primary CTA Placement":"After transformation reveal + Bottom","Recommended Effects":"Slider comparison interaction, before/after reveal animations, result counters, testimonial videos","Section Order":"1. Hero (problem state), 2. Transformation slider/comparison, 3. How it works, 4. Results CTA","domain":"landing","record_id":"landing/21"},{"Color Strategy":"Search: High contrast. Categories: Visual icons. Trust: Blue/Green.","Conversion Optimization":"Search bar is the CTA. Reduce friction to search. Popular searches suggestions.","Keywords":"marketplace, directory, search, listing","No":22,"Pattern Name":"Marketplace / Directory","Primary CTA Placement":"Hero Search Bar + Navbar 'List your item'","Recommended Effects":"Search autocomplete animation, map hover pins, card carousel","Section Order":"1. Hero (Search focused), 2. Categories, 3. Featured Listings, 4. Trust/Safety, 5. CTA (Become a host/seller)","domain":"landing","record_id":"landing/22"},{"Color Strategy":"Minimalist. Paper-like background. Text focus. Accent color for Subscribe.","Conversion Optimization":"Single field form (Email only). Show 'Join X, 000 readers'. Read sample link.","Keywords":"newsletter, content, writer, blog, subscribe, minimal & direct, minimal-direct","No":23,"Pattern Name":"Newsletter / Content First","Primary CTA Placement":"Hero inline form + Sticky header form","Recommended Effects":"Text highlight animations, typewriter effect, subtle fade-in","Section Order":"1. Hero (Value Prop + Form), 2. Recent Issues/Archives, 3. Social Proof (Subscriber count), 4. About Author","domain":"landing","record_id":"landing/23"},{"Color Strategy":"Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.","Conversion Optimization":"Limited seats logic. 'Live' indicator. Auto-fill timezone.","Keywords":"webinar, registration, event, training, live","No":24,"Pattern Name":"Webinar Registration","Primary CTA Placement":"Hero (Right side form) + Bottom anchor","Recommended Effects":"Countdown timer, speaker avatar float, urgent ticker","Section Order":"1. Hero (Topic + Timer + Form), 2. What you'll learn, 3. Speaker Bio, 4. Urgency/Bonuses, 5. Form (again)","domain":"landing","record_id":"landing/24"},{"Color Strategy":"Corporate: Navy/Grey. High integrity. Conservative accents.","Conversion Optimization":"Path selection (I am a...). Mega menu navigation. Trust signals prominent.","Keywords":"enterprise, corporate, gateway, solutions, portal, trust, authority, trust & authority","No":25,"Pattern Name":"Enterprise Gateway","Primary CTA Placement":"Contact Sales (Primary) + Login (Secondary)","Recommended Effects":"Slow video background, logo carousel, tab switching for industries","Section Order":"1. Hero (Video/Mission), 2. Solutions by Industry, 3. Solutions by Role, 4. Client Logos, 5. Contact Sales","domain":"landing","record_id":"landing/25"},{"Color Strategy":"Neutral background (let work shine). Text: Black/White. Accent: Minimal.","Conversion Optimization":"Visuals first. Filter by category. Fast loading essential.","Keywords":"portfolio, grid, showcase, gallery, masonry, portfolio grid + visuals","No":26,"Pattern Name":"Portfolio Grid","Primary CTA Placement":"Project Card Hover + Footer Contact","Recommended Effects":"Image lazy load reveal, hover overlay info, lightbox view","Section Order":"1. Hero (Name/Role), 2. Project Grid (Masonry), 3. About/Philosophy, 4. Contact","domain":"landing","record_id":"landing/26"},{"Color Strategy":"Continuous palette transition. Chapter colors. Progress bar #000000.","Conversion Optimization":"Immersive product discovery. High engagement. Keep navigation visible.","Keywords":"horizontal, scroll, journey, gallery, storytelling, panoramic, storytelling-driven","No":27,"Pattern Name":"Horizontal Scroll Journey","Primary CTA Placement":"Floating Sticky CTA or End of Horizontal Track","Recommended Effects":"Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator","Section Order":"1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer","domain":"landing","record_id":"landing/27"},{"Color Strategy":"Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark.","Conversion Optimization":"Scannable value props. High information density without clutter. Mobile stack.","Keywords":"bento, grid, features, modular, apple-style, showcase, feature-rich showcase","No":28,"Pattern Name":"Bento Grid Showcase","Primary CTA Placement":"Floating Action Button or Bottom of Grid","Recommended Effects":"Hover card scale (1.02), video inside cards, tilt effect, staggered reveal","Section Order":"1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA","domain":"landing","record_id":"landing/28"},{"Color Strategy":"Neutral studio background. Product: Realistic materials. UI: Minimal overlay.","Conversion Optimization":"Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart.","Keywords":"3d, configurator, customizer, interactive, product, interactive product demo","No":29,"Pattern Name":"Interactive 3D Configurator","Primary CTA Placement":"Inside Configurator UI + Sticky Bottom Bar","Recommended Effects":"Real-time rendering, material swap animation, camera rotate/zoom, light reflection","Section Order":"1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase","domain":"landing","record_id":"landing/29"},{"Color Strategy":"Adaptive to user input. Dark mode for compute feel. Neon accents.","Conversion Optimization":"Immediate value demonstration. 'Show, don't tell'. Low friction start.","Keywords":"ai, dynamic, personalized, adaptive, generative","No":30,"Pattern Name":"AI-Driven Dynamic Landing","Primary CTA Placement":"Input Field (Hero) + 'Try it' Buttons","Recommended Effects":"Typing text effects, shimmering generation loaders, morphing layouts","Section Order":"1. Prompt/Input Hero, 2. Generated Result Preview, 3. How it Works, 4. Value Prop","domain":"landing","record_id":"landing/30"},{"Color Strategy":"Brand primary + card bg #FAFAFA. Feature icons accent. CTA contrasting.","Conversion Optimization":"Clear feature hierarchy. One key message per card. Strong CTA repetition.","Keywords":"feature-rich, feature-rich showcase, features, showcase, product showcase","No":31,"Pattern Name":"Feature-Rich Showcase","Primary CTA Placement":"Hero (sticky) + After features + Bottom","Recommended Effects":"Feature card hover lift, scroll reveal, icon micro-interactions","Section Order":"1. Hero (value prop), 2. Feature grid/cards (4-6), 3. Use cases or benefits, 4. Social proof or logos, 5. CTA","domain":"landing","record_id":"landing/31"},{"Color Strategy":"Hero: High-impact visual. Minimal text. CTA 7:1 contrast.","Conversion Optimization":"One primary CTA. Hero is 60-80% above fold. Mobile: same hierarchy.","Keywords":"hero-centric, hero-centric design, hero-first, hero above fold","No":32,"Pattern Name":"Hero-Centric Design","Primary CTA Placement":"Hero dominant (center/bottom) + Sticky nav CTA","Recommended Effects":"Hero parallax or video, CTA pulse on scroll, minimal chrome","Section Order":"1. Full-bleed Hero (headline + visual), 2. Single value prop strip, 3. Key benefit or proof, 4. Primary CTA","domain":"landing","record_id":"landing/32"},{"Color Strategy":"Navy/Grey corporate. Trust blue. Accent for CTA only.","Conversion Optimization":"Security badges. Case studies. Transparent pricing. Low-friction form.","Keywords":"trust & authority, trust, authority, conversion, credibility, enterprise","No":33,"Pattern Name":"Trust & Authority + Conversion","Primary CTA Placement":"Contact Sales / Get Quote (primary) + Nav","Recommended Effects":"Logo carousel, stat counters, testimonial strip","Section Order":"1. Hero (mission/credibility), 2. Proof (logos, certs, stats), 3. Solution overview, 4. Clear CTA path","domain":"landing","record_id":"landing/33"},{"Color Strategy":"Dark or neutral. Status colors (green/amber/red). Data-dense but scannable.","Conversion Optimization":"For ops/security/iot products. Demo or sandbox link. Trust signals.","Keywords":"real-time, real-time monitor, operations, dashboard, telemetry, live data","No":34,"Pattern Name":"Real-Time / Operations Landing","Primary CTA Placement":"Primary CTA in nav + After metrics","Recommended Effects":"Live data ticker, status pulse, minimal decoration","Section Order":"1. Hero (product + live preview or status), 2. Key metrics/indicators, 3. How it works, 4. CTA (Start trial / Contact)","domain":"landing","record_id":"landing/34"},{"Category":"Hover Micro-interaction","Do":"Keep displacement under 2px so it reads as feedback not motion","Don't":"Don't animate layout-affecting props (width/height/margin) on hover","Duration":"150-200ms","Easing":"power1.out","Framework Notes":"Bind on mouseenter/mouseleave; in React wrap in a ref + useEffect (or onMouseEnter/onMouseLeave props directly calling gsap.to)","Intensity Tier":"Subtle","Keywords":"hover, button, opacity, lift, press feedback","No":1,"Performance Notes":"Runs on transform/opacity only so it stays on the compositor thread","Trigger":"hover","domain":"motion","record_id":"motion/1"},{"Category":"Hover Micro-interaction","Do":"Pair with a matching mouseleave tween that reverses the same properties","Don't":"Don't leave the hover state stuck if the pointer leaves fast; always attach the reverse tween","Duration":"200-300ms","Easing":"power2.out","Framework Notes":"Use gsap.quickTo(el, 'y') for cards with many hover targets to avoid re-creating tweens every event","Intensity Tier":"Standard","Keywords":"hover, card, scale, tilt, cursor feedback","No":2,"Performance Notes":"quickTo() avoids GC churn on lists with 20+ hoverable cards","Trigger":"hover","domain":"motion","record_id":"motion/2"},{"Category":"Hover Micro-interaction","Do":"Clamp the pull strength (e.g. * 0.3) so the element never fully leaves its hit box","Don't":"Don't apply magnetic effect to more than 1-2 focal elements per screen; it becomes noisy","Duration":"300-500ms","Easing":"elastic.out(1,0.4)","Framework Notes":"Debounce is not needed since quickTo interpolates; remove listeners on component unmount in React/Vue to avoid leaks","Intensity Tier":"Complex","Keywords":"hover, magnetic, cursor follow, 3d tilt","No":3,"Performance Notes":"Use will-change: transform on the target element for smoother compositing","Trigger":"hover + mousemove","domain":"motion","record_id":"motion/3"},{"Category":"Scroll Reveal","Do":"Keep the y offset small (8-16px) so it reads as a fade, not a slide","Don't":"Don't reveal below-the-fold content needed for SEO/crawlers as invisible-by-default without a no-JS fallback","Duration":"300-400ms","Easing":"power1.out","Framework Notes":"Requires the ScrollTrigger plugin registered once via gsap.registerPlugin(ScrollTrigger)","Intensity Tier":"Subtle","Keywords":"scroll, fade in, reveal, on view","No":4,"Performance Notes":"toggleActions 'play none none reverse' avoids re-triggering on every scroll direction change","Trigger":"scroll (viewport enter)","domain":"motion","record_id":"motion/4"},{"Category":"Scroll Reveal","Do":"Scope the ScrollTrigger to the section container so it doesn't re-scan the whole page","Don't":"Don't stagger more than ~8 children; beyond that the last items feel laggy","Duration":"400-600ms","Easing":"power2.out","Framework Notes":"In React use useGSAP(() => {...}, { scope: containerRef }) from @gsap/react to auto-cleanup on unmount","Intensity Tier":"Standard","Keywords":"scroll, slide up, staggered section, reveal","No":5,"Performance Notes":"Set scroller/markers: false in production; markers is dev-only","Trigger":"scroll (viewport enter)","domain":"motion","record_id":"motion/5"},{"Category":"Scroll Reveal","Do":"Use scrub: true or a small number (0.5-1.5) instead of instant jumps so it feels tied to the scrollbar","Don't":"Don't pin more than 1-2 sections per page; excessive pinning fights native scroll feel and hurts mobile UX","Duration":"tied to scroll position","Easing":"none (scrub-driven)","Framework Notes":"Pinning needs the section to have deterministic height; recalc ScrollTrigger.refresh() after images/fonts load","Intensity Tier":"Complex","Keywords":"scroll, pin, scrub, storytelling, scrollytelling","No":6,"Performance Notes":"Pinning forces layout reflow; test on mid-tier mobile devices, not just desktop","Trigger":"scroll (continuous scrub)","domain":"motion","record_id":"motion/6"},{"Category":"Stagger List","Do":"Keep per-item stagger delay small (0.02-0.04s) for lists longer than 10 items","Don't":"Don't stagger by more than 0.1s per item on long lists; total reveal time becomes sluggish","Duration":"250-350ms","Easing":"power1.out","Framework Notes":"Select items with a stable class/data-attribute (not array index) so re-renders in React don't break targeting","Intensity Tier":"Subtle","Keywords":"list, stagger, cards, grid entrance","No":7,"Performance Notes":"For virtualized lists, only animate items currently mounted in the DOM","Trigger":"load or scroll","domain":"motion","record_id":"motion/7"},{"Category":"Stagger List","Do":"Combine with from: 'center' for a bento-grid layout to draw the eye inward first","Don't":"Don't use back.out on dense data tables; the overshoot reads as sloppy on informational UI","Duration":"300-450ms","Easing":"back.out(1.4)","Framework Notes":"grid: 'auto' lets GSAP infer rows/columns from a CSS grid layout for a natural wave stagger","Intensity Tier":"Standard","Keywords":"grid, bento, cards, staggered scale","No":8,"Performance Notes":"Group DOM writes; avoid interleaving layout reads (getBoundingClientRect) between staggered tweens","Trigger":"load or scroll","domain":"motion","record_id":"motion/8"},{"Category":"Stagger List","Do":"Revert SplitText on unmount/cleanup (split.revert()) to restore original text nodes for accessibility tools","Don't":"Don't split-animate long paragraphs; reserve for short headlines (under ~8 words)","Duration":"400-700ms","Easing":"expo.out","Framework Notes":"SplitText is a GSAP Club/paid plugin; confirm license before shipping and provide a plain fade fallback if unavailable","Intensity Tier":"Complex","Keywords":"stagger, wave, text reveal, split text","No":9,"Performance Notes":"Splitting text creates one element per character; keep it to headline-length copy only for DOM size","Trigger":"load or scroll","domain":"motion","record_id":"motion/9"},{"Category":"Page Transition","Do":"Preload the destination route's critical assets before the exit tween finishes","Don't":"Don't block navigation on animation; cap exit duration at ~250ms so the app never feels unresponsive","Duration":"200-300ms","Easing":"power1.inOut","Framework Notes":"Pair with the router's transition hooks (Next.js App Router transitions, React Router's useNavigate, Vue Router's beforeEach/afterEach)","Intensity Tier":"Subtle","Keywords":"route change, fade, page transition","No":10,"Performance Notes":"Exit animation should always resolve faster than entrance (asymmetric timing) so back/forward feels snappy","Trigger":"route change","domain":"motion","record_id":"motion/10"},{"Category":"Page Transition","Do":"Show a lightweight loading indicator if the destination route's data fetch outlasts the overlay","Don't":"Don't tie the overlay's reveal directly to data-fetch completion without a max-wait timeout; a slow API stalls the whole transition","Duration":"400-600ms","Easing":"power2.inOut","Framework Notes":"Keep the overlay element mounted at the layout root (outside the page component) so it survives the route swap","Intensity Tier":"Standard","Keywords":"route change, slide, overlay wipe","No":11,"Performance Notes":"Prefer CSS transform (yPercent) over top/left to keep the overlay animation on the compositor thread","Trigger":"route change","domain":"motion","record_id":"motion/11"},{"Category":"Page Transition","Do":"Verify the shared element exists in both DOM states before calling Flip.from to avoid a silent no-op","Don't":"Don't use shared-element transitions across more than one element pair per navigation; compounding Flips are hard to time correctly","Duration":"500-800ms","Easing":"expo.inOut","Framework Notes":"Requires the GSAP Flip plugin; the 'from' and 'to' route must render the same element with a shared data-flip-id","Intensity Tier":"Complex","Keywords":"shared element, morph, hero transition","No":12,"Performance Notes":"Flip recalculates layout (FLIP technique) so test on low-end devices for jank","Trigger":"route change","domain":"motion","record_id":"motion/12"},{"Category":"Parallax Scroll","Do":"Keep the yPercent delta small (5-15) so foreground and background never desync distractingly","Don't":"Don't parallax body copy; it hurts reading comfort and can trigger motion sickness","Duration":"tied to scroll position","Easing":"linear (scrub)","Framework Notes":"Apply parallax to background/decorative layers only, never to text or interactive controls","Intensity Tier":"Subtle","Keywords":"parallax, background, depth, scroll speed","No":13,"Performance Notes":"will-change: transform on the parallax layer only; remove it after scroll settles to free GPU memory","Trigger":"scroll (continuous)","domain":"motion","record_id":"motion/13"},{"Category":"Parallax Scroll","Do":"Vary speed per layer (background slowest, foreground fastest) to sell the depth illusion","Don't":"Don't let parallax layers overflow their container; clip with overflow: hidden on the wrapper","Duration":"tied to scroll position","Easing":"linear (scrub)","Framework Notes":"Layer count beyond 3-4 has diminishing visual return and multiplies scroll-listener cost","Intensity Tier":"Standard","Keywords":"multi-layer parallax, depth, hero background","No":14,"Performance Notes":"Batch all layers under one ScrollTrigger container where possible instead of one per layer","Trigger":"scroll (continuous)","domain":"motion","record_id":"motion/14"},{"Category":"Loading / Skeleton","Do":"Use a CSS gradient background-position sweep rather than opacity pulsing; reads as 'loading' more clearly","Don't":"Don't run more than one shimmer loop per skeleton group; sync them under one timeline so the wave reads as a single unit","Duration":"1200-1600ms loop","Easing":"sine.inOut","Framework Notes":"Kill the loop tween (tween.kill()) as soon as real content mounts to avoid orphaned repeating animations","Intensity Tier":"Subtle","Keywords":"loading, skeleton, shimmer, pulse","No":15,"Performance Notes":"repeat: -1 tweens are cheap but must be explicitly killed on unmount or they leak in SPA route changes","Trigger":"on mount / async wait","domain":"motion","record_id":"motion/15"},{"Category":"Loading / Skeleton","Do":"Cap total loop duration under ~1.5s so long waits don't feel like the UI froze on a single beat","Don't":"Don't use elaborate loaders for sub-300ms waits; they flash and feel worse than no indicator","Duration":"800-1200ms loop","Easing":"power1.inOut","Framework Notes":"Wrap the whole loop timeline in useGSAP with { revertOnUpdate: false } in React so it isn't rebuilt every render","Intensity Tier":"Standard","Keywords":"progress, spinner, morphing loader","No":16,"Performance Notes":"Pause the timeline (tl.pause()) when the loading tab/view is not visible to save CPU on background tabs","Trigger":"on mount / async wait","domain":"motion","record_id":"motion/16"},{"Color Palette Focus":"Trust blue + accent contrast","Dashboard Style (if applicable)":"Data-Dense + Real-Time Monitoring","Key Considerations":"Balance modern feel with clarity. Focus on CTAs.","Keywords":"app, b2b, cloud, general, saas, software, subscription","Landing Page Pattern":"Hero + Features + CTA","No":1,"Primary Style Recommendation":"Glassmorphism + Flat Design","Product Type":"SaaS (General)","Secondary Styles":"Soft UI Evolution, Minimalism","domain":"products","record_id":"products/1"},{"Color Palette Focus":"Vibrant primary + white space","Dashboard Style (if applicable)":"Executive Dashboard","Key Considerations":"Keep simple, show product quickly. Speed is key.","Keywords":"indie, micro-saas, niche, solo, bootstrap, micro, side-project, solopreneur, small-team, indie-hacker, product-hunt","Landing Page Pattern":"Minimal & Direct + Demo","No":2,"Primary Style Recommendation":"Flat Design + Vibrant & Block","Product Type":"Micro SaaS","Secondary Styles":"Motion-Driven, Micro-interactions","domain":"products","record_id":"products/2"},{"Color Palette Focus":"Brand primary + success green","Dashboard Style (if applicable)":"Sales Intelligence Dashboard","Key Considerations":"Engagement & conversions. High visual hierarchy.","Keywords":"buy, commerce, e, ecommerce, products, retail, sell, shop, store","Landing Page Pattern":"Feature-Rich Showcase","No":3,"Primary Style Recommendation":"Vibrant & Block-based","Product Type":"E-commerce","Secondary Styles":"Aurora UI, Motion-Driven","domain":"products","record_id":"products/3"},{"Color Palette Focus":"Premium colors + minimal accent","Dashboard Style (if applicable)":"Sales Intelligence Dashboard","Key Considerations":"Elegance & sophistication. Premium materials.","Keywords":"buy, commerce, e, ecommerce, elegant, exclusive, high-end, luxury, premium, products, retail, sell, shop, store","Landing Page Pattern":"Feature-Rich Showcase","No":4,"Primary Style Recommendation":"Liquid Glass + Glassmorphism","Product Type":"E-commerce Luxury","Secondary Styles":"3D & Hyperrealism, Aurora UI","domain":"products","record_id":"products/4"},{"Color Palette Focus":"Professional blue + neutral grey","Dashboard Style (if applicable)":"Sales Intelligence Dashboard","Key Considerations":"Credibility essential. Clear ROI messaging.","Keywords":"b2b, enterprise, consulting, professional, solution, contract, corporate, strategy, advisory, roi, deliverable, whitepaper","Landing Page Pattern":"Feature-Rich Showcase","No":5,"Primary Style Recommendation":"Trust & Authority + Minimal","Product Type":"B2B Service","Secondary Styles":"Feature-Rich, Conversion-Optimized","domain":"products","record_id":"products/5"},{"Color Palette Focus":"Dark bg + red/green alerts + trust blue","Dashboard Style (if applicable)":"Financial Dashboard","Key Considerations":"High contrast, real-time updates, accuracy paramount.","Keywords":"portfolio, trading, pnl, budget, revenue, expense, cashflow, balance-sheet, investment, bank, accounting, fintech","Landing Page Pattern":"N/A - Dashboard focused","No":6,"Primary Style Recommendation":"Dark Mode (OLED) + Data-Dense","Product Type":"Financial Dashboard","Secondary Styles":"Minimalism, Accessible & Ethical","domain":"products","record_id":"products/6"},{"Color Palette Focus":"Cool→Hot gradients + neutral grey","Dashboard Style (if applicable)":"Drill-Down Analytics + Comparative","Key Considerations":"Clarity > aesthetics. Color-coded data priority.","Keywords":"kpi, metric, funnel, conversion, cohort, retention, segment, attribution, ab-test, dashboard-data, business-intelligence","Landing Page Pattern":"N/A - Analytics focused","No":7,"Primary Style Recommendation":"Data-Dense + Heat Map & Heatmap","Product Type":"Analytics Dashboard","Secondary Styles":"Minimalism, Dark Mode (OLED)","domain":"products","record_id":"products/7"},{"Color Palette Focus":"Calm blue + health green + trust","Dashboard Style (if applicable)":"User Behavior Analytics","Key Considerations":"Accessibility mandatory. Calming aesthetic.","Keywords":"app, clinic, health, healthcare, medical, patient","Landing Page Pattern":"Social Proof-Focused","No":8,"Primary Style Recommendation":"Neumorphism + Accessible & Ethical","Product Type":"Healthcare App","Secondary Styles":"Soft UI Evolution, Claymorphism (for patients)","domain":"products","record_id":"products/8"},{"Color Palette Focus":"Playful colors + clear hierarchy","Dashboard Style (if applicable)":"User Behavior Analytics","Key Considerations":"Engagement & ease of use. Age-appropriate design.","Keywords":"app, course, education, educational, learning, school, training","Landing Page Pattern":"Storytelling-Driven","No":9,"Primary Style Recommendation":"Claymorphism + Micro-interactions","Product Type":"Educational App","Secondary Styles":"Vibrant & Block-based, Flat Design","domain":"products","record_id":"products/9"},{"Color Palette Focus":"Bold primaries + artistic freedom","Dashboard Style (if applicable)":"N/A - Portfolio focused","Key Considerations":"Differentiation key. Wow-factor necessary.","Keywords":"branding, identity, portfolio, logo, visual, rebrand, creative-director, campaign, awards, award-winning, showreel","Landing Page Pattern":"Storytelling-Driven","No":10,"Primary Style Recommendation":"Brutalism + Motion-Driven","Product Type":"Creative Agency","Secondary Styles":"Retro-Futurism, Storytelling-Driven","domain":"products","record_id":"products/10"},{"Color Palette Focus":"Brand primary + artistic interpretation","Dashboard Style (if applicable)":"N/A - Personal branding","Key Considerations":"Showcase work. Personality shine through.","Keywords":"creative, personal, portfolio, projects, showcase, work","Landing Page Pattern":"Storytelling-Driven","No":11,"Primary Style Recommendation":"Motion-Driven + Minimalism","Product Type":"Portfolio/Personal","Secondary Styles":"Brutalism, Aurora UI","domain":"products","record_id":"products/11"},{"Color Palette Focus":"Vibrant + neon + immersive colors","Dashboard Style (if applicable)":"N/A - Game focused","Key Considerations":"Immersion priority. Performance critical.","Keywords":"entertainment, esports, game, gaming, play","Landing Page Pattern":"Feature-Rich Showcase","No":12,"Primary Style Recommendation":"3D & Hyperrealism + Retro-Futurism","Product Type":"Gaming","Secondary Styles":"Motion-Driven, Vibrant & Block","domain":"products","record_id":"products/12"},{"Color Palette Focus":"Professional blue + high contrast","Dashboard Style (if applicable)":"Executive Dashboard","Key Considerations":"WCAG AAA mandatory. Trust paramount.","Keywords":"government, civic, municipal, federal, citizen, public, administration, permit, tax, voter, transparency, regulation","Landing Page Pattern":"Minimal & Direct","No":13,"Primary Style Recommendation":"Accessible & Ethical + Minimalism","Product Type":"Government/Public Service","Secondary Styles":"Flat Design, Inclusive Design","domain":"products","record_id":"products/13"},{"Color Palette Focus":"Dark tech colors + trust + vibrant accents","Dashboard Style (if applicable)":"Real-Time Monitoring + Predictive","Key Considerations":"Security perception. Real-time data critical.","Keywords":"banking, blockchain, crypto, defi, finance, fintech, money, nft, payment, web3","Landing Page Pattern":"Conversion-Optimized","No":14,"Primary Style Recommendation":"Glassmorphism + Dark Mode (OLED)","Product Type":"Fintech/Crypto","Secondary Styles":"Retro-Futurism, Motion-Driven","domain":"products","record_id":"products/14"},{"Color Palette Focus":"Vibrant + engagement colors","Dashboard Style (if applicable)":"User Behavior Analytics","Key Considerations":"Engagement & retention. Addictive design ethics.","Keywords":"app, community, content, entertainment, media, network, sharing, social, streaming, users, video","Landing Page Pattern":"Feature-Rich Showcase","No":15,"Primary Style Recommendation":"Vibrant & Block-based + Motion-Driven","Product Type":"Social Media App","Secondary Styles":"Aurora UI, Micro-interactions","domain":"products","record_id":"products/15"},{"Color Palette Focus":"Clear hierarchy + functional colors","Dashboard Style (if applicable)":"Drill-Down Analytics","Key Considerations":"Ease of use. Speed & efficiency focus.","Keywords":"collaboration, productivity, project, task, tool, workflow","Landing Page Pattern":"Interactive Product Demo","No":16,"Primary Style Recommendation":"Flat Design + Micro-interactions","Product Type":"Productivity Tool","Secondary Styles":"Minimalism, Soft UI Evolution","domain":"products","record_id":"products/16"},{"Color Palette Focus":"Clear hierarchy + code-like structure","Dashboard Style (if applicable)":"N/A - Dev focused","Key Considerations":"Consistency. Developer-first approach.","Keywords":"component, design, library, system","Landing Page Pattern":"Feature-Rich Showcase","No":17,"Primary Style Recommendation":"Minimalism + Accessible & Ethical","Product Type":"Design System/Component Library","Secondary Styles":"Flat Design, Zero Interface","domain":"products","record_id":"products/17"},{"Color Palette Focus":"Neutral + AI Purple (#6366F1)","Dashboard Style (if applicable)":"AI/ML Analytics Dashboard","Key Considerations":"Conversational UI. Streaming text. Context awareness. Minimal chrome.","Keywords":"ai, artificial-intelligence, automation, chatbot, machine-learning, ml, platform","Landing Page Pattern":"Interactive Product Demo","No":18,"Primary Style Recommendation":"AI-Native UI + Minimalism","Product Type":"AI/Chatbot Platform","Secondary Styles":"Zero Interface, Glassmorphism","domain":"products","record_id":"products/18"},{"Color Palette Focus":"Dark + Neon + Gold (#FFD700)","Dashboard Style (if applicable)":"Crypto/Blockchain Dashboard","Key Considerations":"Wallet integration. Transaction feedback. Gas fees display. Dark mode essential.","Keywords":"nft, platform, web","Landing Page Pattern":"Feature-Rich Showcase","No":19,"Primary Style Recommendation":"Cyberpunk UI + Glassmorphism","Product Type":"NFT/Web3 Platform","Secondary Styles":"Aurora UI, 3D & Hyperrealism","domain":"products","record_id":"products/19"},{"Color Palette Focus":"Vibrant + Brand colors","Dashboard Style (if applicable)":"User Behavior Analytics","Key Considerations":"Creator profiles. Monetization display. Engagement metrics. Social proof.","Keywords":"creator, economy, platform","Landing Page Pattern":"Social Proof-Focused","No":20,"Primary Style Recommendation":"Vibrant & Block-based + Bento Box Grid","Product Type":"Creator Economy Platform","Secondary Styles":"Motion-Driven, Aurora UI","domain":"products","record_id":"products/20"},{"Color Palette Focus":"Calm Blue + Neutral grey","Dashboard Style (if applicable)":"Drill-Down Analytics","Key Considerations":"Real-time collaboration. Status indicators. Video integration. Notification management.","Keywords":"collaboration, remote, tool, work","Landing Page Pattern":"Feature-Rich Showcase","No":21,"Primary Style Recommendation":"Soft UI Evolution + Minimalism","Product Type":"Remote Work/Collaboration Tool","Secondary Styles":"Glassmorphism, Micro-interactions","domain":"products","record_id":"products/21"},{"Color Palette Focus":"Calm Pastels + Trust colors","Dashboard Style (if applicable)":"Healthcare Analytics","Key Considerations":"Calming aesthetics. Privacy-first. Crisis resources. Progress tracking. Accessibility mandatory.","Keywords":"app, health, mental","Landing Page Pattern":"Social Proof-Focused","No":22,"Primary Style Recommendation":"Neumorphism + Accessible & Ethical","Product Type":"Mental Health App","Secondary Styles":"Claymorphism, Soft UI Evolution","domain":"products","record_id":"products/22"},{"Color Palette Focus":"Playful + Warm colors","Dashboard Style (if applicable)":"User Behavior Analytics","Key Considerations":"Pet profiles. Health tracking. Playful UI. Photo galleries. Vet integration.","Keywords":"app, pet, tech","Landing Page Pattern":"Storytelling-Driven","No":23,"Primary Style Recommendation":"Claymorphism + Vibrant & Block-based","Product Type":"Pet Tech App","Secondary Styles":"Micro-interactions, Flat Design","domain":"products","record_id":"products/23"},{"Color Palette Focus":"Dark + Status indicator colors","Dashboard Style (if applicable)":"Real-Time Monitoring","Key Considerations":"Device status. Real-time controls. Energy monitoring. Automation rules. Quick actions.","Keywords":"admin, analytics, dashboard, data, home, iot, panel, smart","Landing Page Pattern":"Interactive Product Demo","No":24,"Primary Style Recommendation":"Glassmorphism + Dark Mode (OLED)","Product Type":"Smart Home/IoT Dashboard","Secondary Styles":"Minimalism, AI-Native UI","domain":"products","record_id":"products/24"},{"Color Palette Focus":"Electric Blue (#009CD1) + Green","Dashboard Style (if applicable)":"Energy/Utilities Dashboard","Key Considerations":"Charging station maps. Range estimation. Cost calculation. Environmental impact.","Keywords":"charging, ecosystem, ev","Landing Page Pattern":"Hero-Centric Design","No":25,"Primary Style Recommendation":"Minimalism + Aurora UI","Product Type":"EV/Charging Ecosystem","Secondary Styles":"Glassmorphism, Organic Biophilic","domain":"products","record_id":"products/25"},{"Color Palette Focus":"Brand + Excitement colors","Dashboard Style (if applicable)":"E-commerce Analytics","Key Considerations":"Unboxing experience. Personalization quiz. Subscription management. Product reveals.","Keywords":"subscription, box, recurring, membership, unboxing, curated, plan, monthly, surprise, product-box","Landing Page Pattern":"Feature-Rich Showcase","No":26,"Primary Style Recommendation":"Vibrant & Block-based + Motion-Driven","Product Type":"Subscription Box Service","Secondary Styles":"Claymorphism, Aurora UI","domain":"products","record_id":"products/26"},{"Color Palette Focus":"Dark + Audio waveform accents","Dashboard Style (if applicable)":"Media/Entertainment Dashboard","Key Considerations":"Audio player UX. Episode discovery. Creator tools. Analytics for podcasters.","Keywords":"platform, podcast","Landing Page Pattern":"Storytelling-Driven","No":27,"Primary Style Recommendation":"Dark Mode (OLED) + Minimalism","Product Type":"Podcast Platform","Secondary Styles":"Motion-Driven, Vibrant & Block-based","domain":"products","record_id":"products/27"},{"Color Palette Focus":"Warm + Romantic (Pink/Red gradients)","Dashboard Style (if applicable)":"User Behavior Analytics","Key Considerations":"Profile cards. Swipe interactions. Match animations. Safety features. Video chat.","Keywords":"app, dating","Landing Page Pattern":"Social Proof-Focused","No":28,"Primary Style Recommendation":"Vibrant & Block-based + Motion-Driven","Product Type":"Dating App","Secondary Styles":"Aurora UI, Glassmorphism","domain":"products","record_id":"products/28"},{"Color Palette Focus":"Trust Blue + Gold (#FFD700)","Dashboard Style (if applicable)":"Education Dashboard","Key Considerations":"Credential verification. Badge display. Progress tracking. Issuer trust. LinkedIn integration.","Keywords":"badges, credentials, micro, platform","Landing Page Pattern":"Trust & Authority","No":29,"Primary Style Recommendation":"Minimalism + Flat Design","Product Type":"Micro-Credentials/Badges Platform","Secondary Styles":"Accessible & Ethical, Swiss Modernism 2.0","domain":"products","record_id":"products/29"},{"Color Palette Focus":"Clean hierarchy + minimal color","Dashboard Style (if applicable)":"N/A - Documentation focused","Key Considerations":"Search-first. Clear navigation. Code highlighting. Version switching. Feedback system.","Keywords":"base, documentation, knowledge","Landing Page Pattern":"FAQ/Documentation","No":30,"Primary Style Recommendation":"Minimalism + Accessible & Ethical","Product Type":"Knowledge Base/Documentation","Secondary Styles":"Swiss Modernism 2.0, Flat Design","domain":"products","record_id":"products/30"},{"Color Palette Focus":"Location markers + Trust colors","Dashboard Style (if applicable)":"Drill-Down Analytics + Map","Key Considerations":"Map integration. Service categories. Provider profiles. Booking system. Reviews.","Keywords":"hyperlocal, local, neighborhood, nearby, community, nearby, zip, map, local-business, geo-target, city","Landing Page Pattern":"Conversion-Optimized","No":31,"Primary Style Recommendation":"Minimalism + Vibrant & Block-based","Product Type":"Hyperlocal Services","Secondary Styles":"Micro-interactions, Flat Design","domain":"products","record_id":"products/31"},{"Color Palette Focus":"Soft pastels (Pink #FFB6C1 Sage #90EE90) + Cream + Gold accents","Dashboard Style (if applicable)":"User Behavior Analytics","Key Considerations":"Calming aesthetic. Booking system. Service menu. Before/after gallery. Testimonials. Relaxing imagery.","Keywords":"spa, beauty, salon, wellness, treatment, relaxation, massage, skincare, facial, aesthetic, self-care, pamper","Landing Page Pattern":"Hero-Centric Design + Social Proof","No":32,"Primary Style Recommendation":"Soft UI Evolution + Neumorphism","Product Type":"Beauty/Spa/Wellness Service","Secondary Styles":"Glassmorphism, Minimalism","domain":"products","record_id":"products/32"},{"Color Palette Focus":"Black + Gold (#FFD700) + White + Minimal accent","Dashboard Style (if applicable)":"Sales Intelligence Dashboard","Key Considerations":"Elegance paramount. Premium imagery. Storytelling. High-quality visuals. Exclusive feel.","Keywords":"brand, elegant, exclusive, high-end, luxury, premium","Landing Page Pattern":"Storytelling-Driven + Feature-Rich","No":33,"Primary Style Recommendation":"Liquid Glass + Glassmorphism","Product Type":"Luxury/Premium Brand","Secondary Styles":"Minimalism, 3D & Hyperrealism","domain":"products","record_id":"products/33"},{"Color Palette Focus":"Warm colors (Orange Red Brown) + appetizing imagery","Dashboard Style (if applicable)":"N/A - Booking focused","Key Considerations":"Menu display. Online ordering. Reservation system. Food photography. Location/hours prominent.","Keywords":"restaurant, menu, order, food, dining, reservation, delivery, cuisine, chef, table, takeaway, eatery","Landing Page Pattern":"Hero-Centric Design + Conversion","No":34,"Primary Style Recommendation":"Vibrant & Block-based + Motion-Driven","Product Type":"Restaurant/Food Service","Secondary Styles":"Claymorphism, Flat Design","domain":"products","record_id":"products/34"},{"Color Palette Focus":"Energetic (Orange #FF6B35 Electric Blue) + Dark bg","Dashboard Style (if applicable)":"User Behavior Analytics","Key Considerations":"Progress tracking. Workout plans. Community features. Achievements. Motivational design.","Keywords":"app, exercise, fitness, gym, health, workout","Landing Page Pattern":"Feature-Rich Showcase","No":35,"Primary Style Recommendation":"Vibrant & Block-based + Dark Mode (OLED)","Product Type":"Fitness/Gym App","Secondary Styles":"Motion-Driven, Neumorphism","domain":"products","record_id":"products/35"},{"Color Palette Focus":"Trust Blue (#0077B6) + Gold accents + White","Dashboard Style (if applicable)":"Sales Intelligence Dashboard","Key Considerations":"Property listings. Virtual tours. Map integration. Agent profiles. Mortgage calculator. High-quality imagery.","Keywords":"buy, estate, housing, property, real, real-estate, rent","Landing Page Pattern":"Hero-Centric Design + Feature-Rich","No":36,"Primary Style Recommendation":"Glassmorphism + Minimalism","Product Type":"Real Estate/Property","Secondary Styles":"Motion-Driven, 3D & Hyperrealism","domain":"products","record_id":"products/36"},{"Color Palette Focus":"Vibrant destination colors + Sky Blue + Warm accents","Dashboard Style (if applicable)":"Booking Analytics","Key Considerations":"Destination showcase. Booking system. Itinerary builder. Reviews. Inspiration galleries. Mobile-first.","Keywords":"travel, tourism, vacation, flight, hotel, destination, adventure, cruise, safari, backpacking, guided-tour, holiday-package","Landing Page Pattern":"Storytelling-Driven + Hero-Centric","No":37,"Primary Style Recommendation":"Aurora UI + Motion-Driven","Product Type":"Travel/Tourism Agency","Secondary Styles":"Vibrant & Block-based, Glassmorphism","domain":"products","record_id":"products/37"},{"Color Palette Focus":"Warm neutrals + Gold (#D4AF37) + Brand accent","Dashboard Style (if applicable)":"Revenue Management Dashboard","Key Considerations":"Room booking. Amenities showcase. Location maps. Guest reviews. Seasonal pricing. Luxury imagery.","Keywords":"hospitality, hotel","Landing Page Pattern":"Hero-Centric Design + Social Proof","No":38,"Primary Style Recommendation":"Liquid Glass + Minimalism","Product Type":"Hotel/Hospitality","Secondary Styles":"Glassmorphism, Soft UI Evolution","domain":"products","record_id":"products/38"},{"Color Palette Focus":"Soft Pink (#FFD6E0) + Gold + Cream + Sage","Dashboard Style (if applicable)":"N/A - Planning focused","Key Considerations":"Portfolio gallery. Vendor directory. Planning tools. Timeline. Budget tracker. Romantic aesthetic.","Keywords":"conference, event, meetup, planning, registration, ticket, wedding","Landing Page Pattern":"Storytelling-Driven + Social Proof","No":39,"Primary Style Recommendation":"Soft UI Evolution + Aurora UI","Product Type":"Wedding/Event Planning","Secondary Styles":"Glassmorphism, Motion-Driven","domain":"products","record_id":"products/39"},{"Color Palette Focus":"Navy Blue (#1E3A5F) + Gold + White","Dashboard Style (if applicable)":"Case Management Dashboard","Key Considerations":"Credibility paramount. Practice areas. Attorney profiles. Case results. Contact forms. Professional imagery.","Keywords":"law, attorney, legal, case, compliance, contract, court, firm, counsel, litigation, practice-area, jurisdiction","Landing Page Pattern":"Trust & Authority + Minimal","No":40,"Primary Style Recommendation":"Trust & Authority + Minimalism","Product Type":"Legal Services","Secondary Styles":"Accessible & Ethical, Swiss Modernism 2.0","domain":"products","record_id":"products/40"},{"Color Palette Focus":"Trust Blue (#0066CC) + Green (security) + Neutral","Dashboard Style (if applicable)":"Claims Analytics Dashboard","Key Considerations":"Quote calculator. Policy comparison. Claims process. Trust signals. Clear pricing. Security badges.","Keywords":"insurance, platform","Landing Page Pattern":"Conversion-Optimized + Trust","No":41,"Primary Style Recommendation":"Trust & Authority + Flat Design","Product Type":"Insurance Platform","Secondary Styles":"Accessible & Ethical, Minimalism","domain":"products","record_id":"products/41"},{"Color Palette Focus":"Navy (#0A1628) + Trust Blue + Gold accents","Dashboard Style (if applicable)":"Financial Dashboard","Key Considerations":"Security-first. Account overview. Transaction history. Mobile banking. Accessibility critical. Trust paramount.","Keywords":"banking, finance, traditional","Landing Page Pattern":"Trust & Authority + Feature-Rich","No":42,"Primary Style Recommendation":"Minimalism + Accessible & Ethical","Product Type":"Banking/Traditional Finance","Secondary Styles":"Trust & Authority, Dark Mode (OLED)","domain":"products","record_id":"products/42"},{"Color Palette Focus":"Vibrant learning colors + Progress green","Dashboard Style (if applicable)":"Education Dashboard","Key Considerations":"Course catalog. Progress tracking. Video player. Quizzes. Certificates. Community forums. Gamification.","Keywords":"course, e, learning, online","Landing Page Pattern":"Feature-Rich Showcase + Social Proof","No":43,"Primary Style Recommendation":"Claymorphism + Vibrant & Block-based","Product Type":"Online Course/E-learning","Secondary Styles":"Motion-Driven, Flat Design","domain":"products","record_id":"products/43"},{"Color Palette Focus":"Cause-related colors + Trust + Warm","Dashboard Style (if applicable)":"Donation Analytics Dashboard","Key Considerations":"Impact stories. Donation flow. Transparency reports. Volunteer signup. Event calendar. Emotional connection.","Keywords":"charity, non, profit","Landing Page Pattern":"Storytelling-Driven + Trust","No":44,"Primary Style Recommendation":"Accessible & Ethical + Organic Biophilic","Product Type":"Non-profit/Charity","Secondary Styles":"Minimalism, Storytelling-Driven","domain":"products","record_id":"products/44"},{"Color Palette Focus":"Dark (#121212) + Vibrant accents + Album art colors","Dashboard Style (if applicable)":"Media/Entertainment Dashboard","Key Considerations":"Audio player. Playlist management. Artist pages. Personalization. Social features. Waveform visualizations.","Keywords":"music, streaming","Landing Page Pattern":"Feature-Rich Showcase","No":45,"Primary Style Recommendation":"Dark Mode (OLED) + Vibrant & Block-based","Product Type":"Music Streaming","Secondary Styles":"Motion-Driven, Aurora UI","domain":"products","record_id":"products/45"},{"Color Palette Focus":"Dark bg + Content poster colors + Brand accent","Dashboard Style (if applicable)":"Media/Entertainment Dashboard","Key Considerations":"Video player. Content discovery. Watchlist. Continue watching. Personalized recommendations. Thumbnail-heavy.","Keywords":"ott, streaming, video","Landing Page Pattern":"Hero-Centric Design + Feature-Rich","No":46,"Primary Style Recommendation":"Dark Mode (OLED) + Motion-Driven","Product Type":"Video Streaming/OTT","Secondary Styles":"Glassmorphism, Vibrant & Block-based","domain":"products","record_id":"products/46"},{"Color Palette Focus":"Professional Blue + Success Green + Neutral","Dashboard Style (if applicable)":"HR Analytics Dashboard","Key Considerations":"Job listings. Search/filter. Company profiles. Application tracking. Resume upload. Salary insights.","Keywords":"board, job, recruitment","Landing Page Pattern":"Conversion-Optimized + Feature-Rich","No":47,"Primary Style Recommendation":"Flat Design + Minimalism","Product Type":"Job Board/Recruitment","Secondary Styles":"Vibrant & Block-based, Accessible & Ethical","domain":"products","record_id":"products/47"},{"Color Palette Focus":"Trust colors + Category colors + Success green","Dashboard Style (if applicable)":"E-commerce Analytics","Key Considerations":"Seller/buyer profiles. Listings. Reviews/ratings. Secure payment. Messaging. Search/filter. Trust badges.","Keywords":"buyers, listings, marketplace, p, platform, sellers","Landing Page Pattern":"Feature-Rich Showcase + Social Proof","No":48,"Primary Style Recommendation":"Vibrant & Block-based + Flat Design","Product Type":"Marketplace (P2P)","Secondary Styles":"Micro-interactions, Trust & Authority","domain":"products","record_id":"products/48"},{"Color Palette Focus":"Blue (#2563EB) + Orange (tracking) + Green (delivered)","Dashboard Style (if applicable)":"Real-Time Monitoring + Route Analytics","Key Considerations":"Real-time tracking. Delivery scheduling. Route optimization. Driver management. Status updates. Map integration.","Keywords":"delivery, logistics","Landing Page Pattern":"Feature-Rich Showcase + Conversion","No":49,"Primary Style Recommendation":"Minimalism + Flat Design","Product Type":"Logistics/Delivery","Secondary Styles":"Dark Mode (OLED), Micro-interactions","domain":"products","record_id":"products/49"},{"Color Palette Focus":"Earth Green (#4A7C23) + Brown + Sky Blue","Dashboard Style (if applicable)":"IoT Sensor Dashboard","Key Considerations":"Crop monitoring. Weather data. IoT sensors. Yield tracking. Market prices. Sustainable imagery.","Keywords":"agriculture, farm, tech","Landing Page Pattern":"Feature-Rich Showcase + Trust","No":50,"Primary Style Recommendation":"Organic Biophilic + Flat Design","Product Type":"Agriculture/Farm Tech","Secondary Styles":"Minimalism, Accessible & Ethical","domain":"products","record_id":"products/50"},{"Color Palette Focus":"Grey (#4A4A4A) + Orange (safety) + Blueprint Blue","Dashboard Style (if applicable)":"Project Management Dashboard","Key Considerations":"Project portfolio. 3D renders. Timeline. Material specs. Team collaboration. Blueprint aesthetic.","Keywords":"architecture, construction","Landing Page Pattern":"Hero-Centric Design + Feature-Rich","No":51,"Primary Style Recommendation":"Minimalism + 3D & Hyperrealism","Product Type":"Construction/Architecture","Secondary Styles":"Brutalism, Swiss Modernism 2.0","domain":"products","record_id":"products/51"},{"Color Palette Focus":"Brand colors + Metallic accents + Dark/Light","Dashboard Style (if applicable)":"Sales Intelligence Dashboard","Key Considerations":"Vehicle showcase. 360° views. Comparison tools. Financing calculator. Test drive booking. High-quality imagery.","Keywords":"automotive, car, dealership","Landing Page Pattern":"Hero-Centric Design + Feature-Rich","No":52,"Primary Style Recommendation":"Motion-Driven + 3D & Hyperrealism","Product Type":"Automotive/Car Dealership","Secondary Styles":"Dark Mode (OLED), Glassmorphism","domain":"products","record_id":"products/52"},{"Color Palette Focus":"Black + White + Minimal accent","Dashboard Style (if applicable)":"N/A - Portfolio focused","Key Considerations":"Portfolio gallery. Before/after. Service packages. Booking system. Client galleries. Full-bleed imagery.","Keywords":"photography, studio","Landing Page Pattern":"Storytelling-Driven + Hero-Centric","No":53,"Primary Style Recommendation":"Motion-Driven + Minimalism","Product Type":"Photography Studio","Secondary Styles":"Aurora UI, Glassmorphism","domain":"products","record_id":"products/53"},{"Color Palette Focus":"Energetic colors + Wood tones + Brand accent","Dashboard Style (if applicable)":"Occupancy Dashboard","Key Considerations":"Space tour. Membership plans. Booking system. Amenities. Community events. Virtual tour.","Keywords":"coworking, space","Landing Page Pattern":"Hero-Centric Design + Feature-Rich","No":54,"Primary Style Recommendation":"Vibrant & Block-based + Glassmorphism","Product Type":"Coworking Space","Secondary Styles":"Minimalism, Motion-Driven","domain":"products","record_id":"products/54"},{"Color Palette Focus":"Trust Blue + Safety Orange + Professional grey","Dashboard Style (if applicable)":"Service Analytics","Key Considerations":"Service list. Emergency contact. Booking. Price transparency. Certifications. Local trust signals.","Keywords":"plumber, electrician, hvac, handyman, repair, maintenance, home, emergency, leak, wiring, inspection, licensed","Landing Page Pattern":"Conversion-Optimized + Trust","No":55,"Primary Style Recommendation":"Flat Design + Trust & Authority","Product Type":"Home Services (Plumber/Electrician)","Secondary Styles":"Minimalism, Accessible & Ethical","domain":"products","record_id":"products/55"},{"Color Palette Focus":"Playful pastels + Safe colors + Warm accents","Dashboard Style (if applicable)":"Parent Dashboard","Key Considerations":"Programs. Staff profiles. Safety certifications. Parent portal. Activity updates. Cheerful imagery.","Keywords":"childcare, daycare","Landing Page Pattern":"Social Proof-Focused + Trust","No":56,"Primary Style Recommendation":"Claymorphism + Vibrant & Block-based","Product Type":"Childcare/Daycare","Secondary Styles":"Soft UI Evolution, Accessible & Ethical","domain":"products","record_id":"products/56"},{"Color Palette Focus":"Calm Blue + Warm neutrals + Large text","Dashboard Style (if applicable)":"Healthcare Analytics","Key Considerations":"Care services. Staff qualifications. Facility tour. Family portal. Large touch targets. High contrast. Accessibility-first.","Keywords":"care, elderly, senior","Landing Page Pattern":"Trust & Authority + Social Proof","No":57,"Primary Style Recommendation":"Accessible & Ethical + Soft UI Evolution","Product Type":"Senior Care/Elderly","Secondary Styles":"Minimalism, Neumorphism","domain":"products","record_id":"products/57"},{"Color Palette Focus":"Medical Blue (#0077B6) + Trust White + Calm Green","Dashboard Style (if applicable)":"Healthcare Analytics","Key Considerations":"Services. Doctor profiles. Online booking. Patient portal. Insurance info. HIPAA compliant. Trust signals.","Keywords":"clinic, medical","Landing Page Pattern":"Trust & Authority + Conversion","No":58,"Primary Style Recommendation":"Accessible & Ethical + Minimalism","Product Type":"Medical Clinic","Secondary Styles":"Neumorphism, Trust & Authority","domain":"products","record_id":"products/58"},{"Color Palette Focus":"Pharmacy Green + Trust Blue + Clean White","Dashboard Style (if applicable)":"Inventory Dashboard","Key Considerations":"Product catalog. Prescription upload. Refill reminders. Health info. Store locator. Safety certifications.","Keywords":"drug, pharmacy, store","Landing Page Pattern":"Conversion-Optimized + Trust","No":59,"Primary Style Recommendation":"Flat Design + Accessible & Ethical","Product Type":"Pharmacy/Drug Store","Secondary Styles":"Minimalism, Trust & Authority","domain":"products","record_id":"products/59"},{"Color Palette Focus":"Fresh Blue + White + Smile Yellow accent","Dashboard Style (if applicable)":"Patient Analytics","Key Considerations":"Services. Dentist profiles. Before/after. Online booking. Insurance. Patient testimonials. Friendly imagery.","Keywords":"dental, practice","Landing Page Pattern":"Social Proof-Focused + Conversion","No":60,"Primary Style Recommendation":"Soft UI Evolution + Minimalism","Product Type":"Dental Practice","Secondary Styles":"Accessible & Ethical, Trust & Authority","domain":"products","record_id":"products/60"},{"Color Palette Focus":"Caring Blue + Pet-friendly colors + Warm accents","Dashboard Style (if applicable)":"Pet Health Dashboard","Key Considerations":"Pet services. Vet profiles. Online booking. Pet portal. Emergency info. Friendly animal imagery.","Keywords":"clinic, veterinary","Landing Page Pattern":"Social Proof-Focused + Trust","No":61,"Primary Style Recommendation":"Claymorphism + Accessible & Ethical","Product Type":"Veterinary Clinic","Secondary Styles":"Soft UI Evolution, Flat Design","domain":"products","record_id":"products/61"},{"Color Palette Focus":"Natural Green + Floral pinks/purples + Earth tones","Dashboard Style (if applicable)":"E-commerce Analytics","Key Considerations":"Product catalog. Occasion categories. Delivery scheduling. Care guides. Seasonal collections. Beautiful imagery.","Keywords":"florist, plant, shop","Landing Page Pattern":"Hero-Centric Design + Conversion","No":62,"Primary Style Recommendation":"Organic Biophilic + Vibrant & Block-based","Product Type":"Florist/Plant Shop","Secondary Styles":"Aurora UI, Motion-Driven","domain":"products","record_id":"products/62"},{"Color Palette Focus":"Warm Brown + Cream + Appetizing accents","Dashboard Style (if applicable)":"N/A - Order focused","Key Considerations":"Menu display. Online ordering. Location/hours. Catering. Seasonal specials. Appetizing photography.","Keywords":"bakery, cafe","Landing Page Pattern":"Hero-Centric Design + Conversion","No":63,"Primary Style Recommendation":"Vibrant & Block-based + Soft UI Evolution","Product Type":"Bakery/Cafe","Secondary Styles":"Claymorphism, Motion-Driven","domain":"products","record_id":"products/63"},{"Color Palette Focus":"Deep amber/burgundy + Gold + Craft aesthetic","Dashboard Style (if applicable)":"N/A - E-commerce focused","Key Considerations":"Product showcase. Story/heritage. Tasting notes. Events. Club membership. Artisanal imagery.","Keywords":"brewery, winery","Landing Page Pattern":"Storytelling-Driven + Hero-Centric","No":64,"Primary Style Recommendation":"Motion-Driven + Storytelling-Driven","Product Type":"Brewery/Winery","Secondary Styles":"Dark Mode (OLED), Organic Biophilic","domain":"products","record_id":"products/64"},{"Color Palette Focus":"Sky Blue + Brand colors + Trust accents","Dashboard Style (if applicable)":"Operations Dashboard","Key Considerations":"Flight search. Booking. Check-in. Boarding pass. Loyalty program. Route maps. Mobile-first.","Keywords":"airline, aviation, flight, travel, booking, airport, flying","Landing Page Pattern":"Conversion-Optimized + Feature-Rich","No":65,"Primary Style Recommendation":"Minimalism + Glassmorphism","Product Type":"Airline","Secondary Styles":"Motion-Driven, Accessible & Ethical","domain":"products","record_id":"products/65"},{"Color Palette Focus":"Brand colors + High contrast + Category colors","Dashboard Style (if applicable)":"Media Analytics Dashboard","Key Considerations":"Article layout. Breaking news. Categories. Search. Subscription. Mobile reading. Fast loading.","Keywords":"content, entertainment, media, news, platform, streaming, video","Landing Page Pattern":"Hero-Centric Design + Feature-Rich","No":66,"Primary Style Recommendation":"Minimalism + Flat Design","Product Type":"News/Media Platform","Secondary Styles":"Dark Mode (OLED), Accessible & Ethical","domain":"products","record_id":"products/66"},{"Color Palette Focus":"Editorial colors + Brand primary + Clean white","Dashboard Style (if applicable)":"Content Analytics","Key Considerations":"Article showcase. Category navigation. Author profiles. Newsletter signup. Related content. Typography-focused.","Keywords":"articles, blog, content, magazine, posts, writing","Landing Page Pattern":"Storytelling-Driven + Hero-Centric","No":67,"Primary Style Recommendation":"Swiss Modernism 2.0 + Motion-Driven","Product Type":"Magazine/Blog","Secondary Styles":"Minimalism, Aurora UI","domain":"products","record_id":"products/67"},{"Color Palette Focus":"Professional Blue + Success Green + Neutral","Dashboard Style (if applicable)":"Marketplace Analytics","Key Considerations":"Profile creation. Portfolio. Skill matching. Messaging. Payment. Reviews. Project management.","Keywords":"freelancer, platform","Landing Page Pattern":"Feature-Rich Showcase + Conversion","No":68,"Primary Style Recommendation":"Flat Design + Minimalism","Product Type":"Freelancer Platform","Secondary Styles":"Vibrant & Block-based, Micro-interactions","domain":"products","record_id":"products/68"},{"Color Palette Focus":"Bold brand colors + Creative freedom","Dashboard Style (if applicable)":"Campaign Analytics","Key Considerations":"Portfolio. Case studies. Services. Team. Creative showcase. Results-focused. Bold aesthetic.","Keywords":"campaign, ads, growth, roi, seo, sem, ppc, social-media, conversion-funnel, ab-test, attribution, performance-marketing","Landing Page Pattern":"Storytelling-Driven + Feature-Rich","No":69,"Primary Style Recommendation":"Brutalism + Motion-Driven","Product Type":"Marketing Agency","Secondary Styles":"Vibrant & Block-based, Aurora UI","domain":"products","record_id":"products/69"},{"Color Palette Focus":"Event theme colors + Excitement accents","Dashboard Style (if applicable)":"Event Analytics","Key Considerations":"Event showcase. Registration. Agenda. Speakers. Sponsors. Ticket sales. Countdown timer.","Keywords":"conference, event, management, meetup, registration, ticket","Landing Page Pattern":"Hero-Centric Design + Feature-Rich","No":70,"Primary Style Recommendation":"Vibrant & Block-based + Motion-Driven","Product Type":"Event Management","Secondary Styles":"Glassmorphism, Aurora UI","domain":"products","record_id":"products/70"},{"Color Palette Focus":"Community brand colors + Engagement accents","Dashboard Style (if applicable)":"Community Analytics","Key Considerations":"Member benefits. Pricing tiers. Community showcase. Events. Member directory. Exclusive content.","Keywords":"community, membership","Landing Page Pattern":"Social Proof-Focused + Conversion","No":71,"Primary Style Recommendation":"Vibrant & Block-based + Soft UI Evolution","Product Type":"Membership/Community","Secondary Styles":"Bento Box Grid, Micro-interactions","domain":"products","record_id":"products/71"},{"Color Palette Focus":"Brand primary + Clean white + CTA accent","Dashboard Style (if applicable)":"Email Analytics","Key Considerations":"Subscribe form. Archive. About. Social proof. Sample content. Simple conversion.","Keywords":"newsletter, platform","Landing Page Pattern":"Minimal & Direct + Conversion","No":72,"Primary Style Recommendation":"Minimalism + Flat Design","Product Type":"Newsletter Platform","Secondary Styles":"Swiss Modernism 2.0, Accessible & Ethical","domain":"products","record_id":"products/72"},{"Color Palette Focus":"Product category colors + Brand + Success green","Dashboard Style (if applicable)":"E-commerce Analytics","Key Considerations":"Product showcase. Preview. Pricing. Instant delivery. License management. Customer reviews.","Keywords":"digital, downloads, products","Landing Page Pattern":"Feature-Rich Showcase + Conversion","No":73,"Primary Style Recommendation":"Vibrant & Block-based + Motion-Driven","Product Type":"Digital Products/Downloads","Secondary Styles":"Glassmorphism, Bento Box Grid","domain":"products","record_id":"products/73"},{"Color Palette Focus":"Warm Gold + Deep Purple/Blue + White","Dashboard Style (if applicable)":"N/A - Community focused","Key Considerations":"Service times. Events. Sermons. Community. Giving. Location. Welcoming imagery.","Keywords":"church, organization, religious","Landing Page Pattern":"Hero-Centric Design + Social Proof","No":74,"Primary Style Recommendation":"Accessible & Ethical + Soft UI Evolution","Product Type":"Church/Religious Organization","Secondary Styles":"Minimalism, Trust & Authority","domain":"products","record_id":"products/74"},{"Color Palette Focus":"Team colors + Energetic accents","Dashboard Style (if applicable)":"Performance Analytics","Key Considerations":"Schedule. Roster. News. Tickets. Merchandise. Fan engagement. Action imagery.","Keywords":"club, sports, team","Landing Page Pattern":"Hero-Centric Design + Feature-Rich","No":75,"Primary Style Recommendation":"Vibrant & Block-based + Motion-Driven","Product Type":"Sports Team/Club","Secondary Styles":"Dark Mode (OLED), 3D & Hyperrealism","domain":"products","record_id":"products/75"},{"Color Palette Focus":"Art-appropriate neutrals + Exhibition accents","Dashboard Style (if applicable)":"Visitor Analytics","Key Considerations":"Exhibitions. Collections. Tickets. Events. Virtual tours. Educational content. Art-focused design.","Keywords":"gallery, museum","Landing Page Pattern":"Storytelling-Driven + Feature-Rich","No":76,"Primary Style Recommendation":"Minimalism + Motion-Driven","Product Type":"Museum/Gallery","Secondary Styles":"Swiss Modernism 2.0, 3D & Hyperrealism","domain":"products","record_id":"products/76"},{"Color Palette Focus":"Dark + Spotlight accents + Gold","Dashboard Style (if applicable)":"Booking Analytics","Key Considerations":"Showtimes. Seat selection. Trailers. Coming soon. Membership. Dramatic imagery.","Keywords":"cinema, theater","Landing Page Pattern":"Hero-Centric Design + Conversion","No":77,"Primary Style Recommendation":"Dark Mode (OLED) + Motion-Driven","Product Type":"Theater/Cinema","Secondary Styles":"Vibrant & Block-based, Glassmorphism","domain":"products","record_id":"products/77"},{"Color Palette Focus":"Playful colors + Progress indicators + Country flags","Dashboard Style (if applicable)":"Learning Analytics","Key Considerations":"Lesson structure. Progress tracking. Gamification. Speaking practice. Community. Achievement badges.","Keywords":"app, language, learning","Landing Page Pattern":"Feature-Rich Showcase + Social Proof","No":78,"Primary Style Recommendation":"Claymorphism + Vibrant & Block-based","Product Type":"Language Learning App","Secondary Styles":"Micro-interactions, Flat Design","domain":"products","record_id":"products/78"},{"Color Palette Focus":"Code editor colors + Brand + Success green","Dashboard Style (if applicable)":"Student Analytics","Key Considerations":"Curriculum. Projects. Career outcomes. Alumni. Pricing. Application. Terminal aesthetic.","Keywords":"bootcamp, coding","Landing Page Pattern":"Feature-Rich Showcase + Social Proof","No":79,"Primary Style Recommendation":"Dark Mode (OLED) + Minimalism","Product Type":"Coding Bootcamp","Secondary Styles":"Cyberpunk UI, Flat Design","domain":"products","record_id":"products/79"},{"Color Palette Focus":"Matrix Green + Deep Black + Terminal feel","Dashboard Style (if applicable)":"Real-Time Monitoring + Heat Map","Key Considerations":"Data density. Threat visualization. Dark mode default.","Keywords":"cyber, security, platform","Landing Page Pattern":"Trust & Authority + Real-Time","No":80,"Primary Style Recommendation":"Cyberpunk UI + Dark Mode (OLED)","Product Type":"Cybersecurity Platform","Secondary Styles":"Neubrutalism, Minimal & Direct","domain":"products","record_id":"products/80"},{"Color Palette Focus":"Dark syntax theme colors + Blue focus","Dashboard Style (if applicable)":"Real-Time Monitor + Terminal","Key Considerations":"Keyboard shortcuts. Syntax highlighting. Fast performance.","Keywords":"dev, developer, tool, ide","Landing Page Pattern":"Minimal & Direct + Documentation","No":81,"Primary Style Recommendation":"Dark Mode (OLED) + Minimalism","Product Type":"Developer Tool / IDE","Secondary Styles":"Flat Design, Bento Box Grid","domain":"products","record_id":"products/81"},{"Color Palette Focus":"Sterile White + DNA Blue + Life Green","Dashboard Style (if applicable)":"Data-Dense + Predictive","Key Considerations":"Data accuracy. Cleanliness. Complex data viz.","Keywords":"biotech, biology, science","Landing Page Pattern":"Storytelling-Driven + Research","No":82,"Primary Style Recommendation":"Glassmorphism + Clean Science","Product Type":"Biotech / Life Sciences","Secondary Styles":"Minimalism, Organic Biophilic","domain":"products","record_id":"products/82"},{"Color Palette Focus":"Deep Space Black + Star White + Metallic","Dashboard Style (if applicable)":"Real-Time Monitoring + 3D","Key Considerations":"High-tech feel. Precision. Telemetry data.","Keywords":"aerospace, space, tech","Landing Page Pattern":"Immersive Experience + Hero","No":83,"Primary Style Recommendation":"Holographic / HUD + Dark Mode","Product Type":"Space Tech / Aerospace","Secondary Styles":"Glassmorphism, 3D & Hyperrealism","domain":"products","record_id":"products/83"},{"Color Palette Focus":"Monochrome + Gold Accent + High Imagery","Dashboard Style (if applicable)":"Project Management + Gallery","Key Considerations":"High-res images. Typography. Space.","Keywords":"architecture, design, interior","Landing Page Pattern":"Portfolio Grid + Visuals","No":84,"Primary Style Recommendation":"Exaggerated Minimalism + High Imagery","Product Type":"Architecture / Interior","Secondary Styles":"Swiss Modernism 2.0, Parallax","domain":"products","record_id":"products/84"},{"Color Palette Focus":"Quantum Blue #00FFFF + Deep Black + Interference patterns","Dashboard Style (if applicable)":"3D Spatial Data + Real-Time Monitor","Key Considerations":"Visualize complexity. Qubit states. Probability clouds. High-tech trust.","Keywords":"quantum, computing, physics, qubit, future, science","Landing Page Pattern":"Immersive/Interactive Experience","No":85,"Primary Style Recommendation":"Holographic / HUD + Dark Mode","Product Type":"Quantum Computing Interface","Secondary Styles":"Glassmorphism, Spatial UI","domain":"products","record_id":"products/85"},{"Color Palette Focus":"Cellular Pink/Red + DNA Blue + Clean White","Dashboard Style (if applicable)":"Real-Time Monitor + Biological Data","Key Considerations":"Personal data privacy. Scientific credibility. Biological visualizations.","Keywords":"biohacking, health, longevity, tracking, wellness, science","Landing Page Pattern":"Data-Dense + Storytelling","No":86,"Primary Style Recommendation":"Biomimetic / Organic 2.0","Product Type":"Biohacking / Longevity App","Secondary Styles":"Minimalism, Dark Mode (OLED)","domain":"products","record_id":"products/86"},{"Color Palette Focus":"Tactical Green #00FF00 + Alert Red + Map Dark","Dashboard Style (if applicable)":"Geographic + Real-Time","Key Considerations":"Real-time telemetry. 3D spatial awareness. Latency indicators. Safety alerts.","Keywords":"drone, autonomous, fleet, aerial, logistics, robotics","Landing Page Pattern":"Real-Time Monitor","No":87,"Primary Style Recommendation":"HUD / Sci-Fi FUI","Product Type":"Autonomous Drone Fleet Manager","Secondary Styles":"Real-Time Monitor, Spatial UI","domain":"products","record_id":"products/87"},{"Color Palette Focus":"Neutral #F5F5F5 (Canvas) + User Content","Dashboard Style (if applicable)":"Gallery / Portfolio","Key Considerations":"Content is king. Fast loading. Creator attribution. Minting flow.","Keywords":"art, generative, ai, creative, platform, gallery","Landing Page Pattern":"Bento Grid Showcase","No":88,"Primary Style Recommendation":"Minimalism (Frame) + Gen Z Chaos","Product Type":"Generative Art Platform","Secondary Styles":"Masonry Grid, Dark Mode","domain":"products","record_id":"products/88"},{"Color Palette Focus":"Frosted Glass + System Colors + Depth","Dashboard Style (if applicable)":"Spatial Dashboard","Key Considerations":"Gaze/Pinch interaction. Depth hierarchy. Environment awareness.","Keywords":"spatial, vr, ar, vision, os, immersive, mixed-reality","Landing Page Pattern":"Immersive/Interactive Experience","No":89,"Primary Style Recommendation":"Spatial UI (VisionOS)","Product Type":"Spatial Computing OS / App","Secondary Styles":"Glassmorphism, 3D & Hyperrealism","domain":"products","record_id":"products/89"},{"Color Palette Focus":"Earth Green + Sky Blue + Solar Yellow","Dashboard Style (if applicable)":"Energy/Utilities Dashboard","Key Considerations":"Data transparency. Impact visualization. Low-carbon web design.","Keywords":"climate, energy, sustainable, green, tech, carbon","Landing Page Pattern":"Interactive Demo + Data","No":90,"Primary Style Recommendation":"Organic Biophilic + E-Ink / Paper","Product Type":"Sustainable Energy / Climate Tech","Secondary Styles":"Data-Dense, Swiss Modernism","domain":"products","record_id":"products/90"},{"Color Palette Focus":"Calm blue + success green + alert red + chart accents","Dashboard Style (if applicable)":"Financial Dashboard","Key Considerations":"Category pie/donut charts. Monthly trend lines. Budget progress bars. Transaction list with swipe actions. Receipt camera. Currency formatting. Recurring entries.","Keywords":"budget, expense, money, finance, spending, savings, tracker, personal, wallet","Landing Page Pattern":"Interactive Product Demo","No":91,"Primary Style Recommendation":"Glassmorphism + Dark Mode (OLED)","Product Type":"Personal Finance Tracker","Secondary Styles":"Minimalism, Flat Design","domain":"products","record_id":"products/91"},{"Color Palette Focus":"Brand primary + bubble contrast (sender/receiver) + typing grey","Dashboard Style (if applicable)":"User Behavior Analytics","Key Considerations":"Bubble UI (left/right alignment). Typing indicators. Read receipts (✓✓). Image/file preview. Emoji reactions. Group avatars. Online status dots. Swipe-to-reply.","Keywords":"chat, message, messenger, im, realtime, conversation, inbox, dm, whatsapp, telegram","Landing Page Pattern":"Feature-Rich Showcase + Demo","No":92,"Primary Style Recommendation":"Minimalism + Micro-interactions","Product Type":"Chat & Messaging App","Secondary Styles":"Glassmorphism, Flat Design","domain":"products","record_id":"products/92"},{"Color Palette Focus":"Clean white/cream + minimal accent + editor syntax colors","Dashboard Style (if applicable)":"N/A - Editor focused","Key Considerations":"WYSIWYG or Markdown toggle. Folder/tag organization. Full-text search. Cloud sync. Typography-first. Distraction-free zen mode. Slash-command palette.","Keywords":"notes, memo, writing, editor, notebook, markdown, journal, notion, obsidian","Landing Page Pattern":"Minimal & Direct","No":93,"Primary Style Recommendation":"Minimalism + Flat Design","Product Type":"Notes & Writing App","Secondary Styles":"Swiss Modernism 2.0, Soft UI Evolution","domain":"products","record_id":"products/93"},{"Color Palette Focus":"Streak warm (amber/orange) + progress green + motivational accents","Dashboard Style (if applicable)":"User Behavior Analytics","Key Considerations":"Streak calendar heatmap. Daily check-in interaction. Gamification (badges/levels/fire). Reminder push. Progress ring charts. Weekly/monthly stats. Motivational micro-copy.","Keywords":"habit, streak, routine, daily, tracker, goals, consistency, discipline","Landing Page Pattern":"Social Proof-Focused + Demo","No":94,"Primary Style Recommendation":"Claymorphism + Vibrant & Block-based","Product Type":"Habit Tracker","Secondary Styles":"Micro-interactions, Flat Design","domain":"products","record_id":"products/94"},{"Color Palette Focus":"Appetizing warm (orange/red) + trust blue + map accent","Dashboard Style (if applicable)":"Real-Time Monitoring + Map","Key Considerations":"Restaurant cards with ratings. Menu category horizontal scroll. Cart bottom sheet. Real-time map tracking + driver ETA. Order status stepper. Rating post-delivery.","Keywords":"delivery, food, order, uber-eats, doordash, takeout, on-demand, courier","Landing Page Pattern":"Hero-Centric Design + Feature-Rich","No":95,"Primary Style Recommendation":"Vibrant & Block-based + Motion-Driven","Product Type":"Food Delivery / On-Demand","Secondary Styles":"Glassmorphism, Flat Design","domain":"products","record_id":"products/95"},{"Color Palette Focus":"Brand primary + map neutral + status indicator colors","Dashboard Style (if applicable)":"Real-Time Monitoring + Map","Key Considerations":"Map-centric full-screen UI. Pickup/dropoff pins + route polyline. Driver card (photo/rating/vehicle). Fare estimate. Trip timer. Safety SOS button. Payment sheet.","Keywords":"ride, taxi, uber, lyft, transport, carpool, driver, trip, fare","Landing Page Pattern":"Conversion-Optimized + Demo","No":96,"Primary Style Recommendation":"Minimalism + Glassmorphism","Product Type":"Ride Hailing / Transportation","Secondary Styles":"Dark Mode (OLED), Motion-Driven","domain":"products","record_id":"products/96"},{"Color Palette Focus":"Warm food tones (terracotta/sage/cream) + appetizing imagery","Dashboard Style (if applicable)":"N/A - Content focused","Key Considerations":"Step-by-step with checkable instructions. Ingredient list with serving adjuster. Built-in timer per step. Cooking mode (screen-awake + large text). Save/bookmark. Share.","Keywords":"recipe, cooking, food, kitchen, cookbook, meal, ingredient, chef","Landing Page Pattern":"Hero-Centric Design + Feature-Rich","No":97,"Primary Style Recommendation":"Claymorphism + Vibrant & Block-based","Product Type":"Recipe & Cooking App","Secondary Styles":"Soft UI Evolution, Organic Biophilic","domain":"products","record_id":"products/97"},{"Color Palette Focus":"Ultra-calm pastels (lavender/sage/sky) + breathing animation gradient","Dashboard Style (if applicable)":"User Behavior Analytics","Key Considerations":"Breathing circle animation. Session duration picker. Ambient sound mixer. Streak/consistency tracking. Guided audio player. Sleep timer. Minimal chrome. Slow easing transitions only.","Keywords":"meditation, mindfulness, calm, breathe, wellness, relaxation, sleep, headspace","Landing Page Pattern":"Storytelling-Driven + Social Proof","No":98,"Primary Style Recommendation":"Neumorphism + Soft UI Evolution","Product Type":"Meditation & Mindfulness","Secondary Styles":"Aurora UI, Glassmorphism","domain":"products","record_id":"products/98"},{"Color Palette Focus":"Atmospheric gradients (sky blue → sunset → storm grey) + temp scale","Dashboard Style (if applicable)":"N/A - Utility focused","Key Considerations":"Location auto-detect. Hourly horizontal scroll + daily/weekly list. Animated weather icons. Air quality index. UV/wind/humidity chips. Radar map overlay. Widget-friendly layout.","Keywords":"weather, forecast, temperature, climate, rain, sun, location, humidity","Landing Page Pattern":"Hero-Centric Design","No":99,"Primary Style Recommendation":"Glassmorphism + Aurora UI","Product Type":"Weather App","Secondary Styles":"Motion-Driven, Minimalism","domain":"products","record_id":"products/99"},{"Color Palette Focus":"Warm paper tones (cream/linen) + muted ink + mood-coded accents","Dashboard Style (if applicable)":"N/A - Personal focused","Key Considerations":"Calendar month-view entry. Mood tag selector (emoji/color). Photo/voice attachment. Writing prompts. Privacy lock (FaceID/PIN). Search across entries. Export to PDF.","Keywords":"diary, journal, personal, daily, reflection, mood, gratitude, writing","Landing Page Pattern":"Storytelling-Driven","No":100,"Primary Style Recommendation":"Soft UI Evolution + Minimalism","Product Type":"Diary & Journal App","Secondary Styles":"Neumorphism, Sketch Hand-Drawn","domain":"products","record_id":"products/100"},{"Color Palette Focus":"Professional blue + pipeline stage colors + closed-won green","Dashboard Style (if applicable)":"Sales Intelligence Dashboard","Key Considerations":"Contact card list with avatar. Pipeline kanban board. Activity timeline. Quick-log (call/email/meeting). Deal amount + probability. Tag/segment filter. Mobile quick-actions.","Keywords":"crm, client, customer, sales, pipeline, contact, lead, deal, hubspot","Landing Page Pattern":"Feature-Rich Showcase + Demo","No":101,"Primary Style Recommendation":"Flat Design + Minimalism","Product Type":"CRM & Client Management","Secondary Styles":"Soft UI Evolution, Micro-interactions","domain":"products","record_id":"products/101"},{"Color Palette Focus":"Functional neutral + status traffic-light (green/amber/red) + scanner accent","Dashboard Style (if applicable)":"Real-Time Monitoring + Data-Dense","Key Considerations":"Product list/grid with thumbnails. Barcode/QR scanner. Stock level badges. Low-stock alert banner. Category/location filter. Batch edit. Reorder trigger. Audit log.","Keywords":"inventory, stock, warehouse, product, barcode, supply, sku, management","Landing Page Pattern":"Feature-Rich Showcase","No":102,"Primary Style Recommendation":"Flat Design + Minimalism","Product Type":"Inventory & Stock Management","Secondary Styles":"Dark Mode (OLED), Accessible & Ethical","domain":"products","record_id":"products/102"},{"Color Palette Focus":"Playful primary + correct green + incorrect red + progress blue","Dashboard Style (if applicable)":"Learning Analytics","Key Considerations":"3D card flip animation. Spaced repetition algorithm. Deck browser. Session progress bar. Streak tracking. Timed quiz mode. Share/import decks. Rich text + image cards.","Keywords":"flashcard, quiz, study, spaced-repetition, anki, learn, memory, exam","Landing Page Pattern":"Feature-Rich Showcase + Demo","No":103,"Primary Style Recommendation":"Claymorphism + Micro-interactions","Product Type":"Flashcard & Study Tool","Secondary Styles":"Vibrant & Block-based, Flat Design","domain":"products","record_id":"products/103"},{"Color Palette Focus":"Trust blue + available green + booked grey + confirm accent","Dashboard Style (if applicable)":"Drill-Down Analytics","Key Considerations":"Calendar strip or month picker. Available time-slot grid. Service + staff selector. Confirmation summary. Reminder push. Reschedule/cancel flow. Two-sided (provider ↔ client).","Keywords":"booking, appointment, schedule, calendar, reservation, slot, service","Landing Page Pattern":"Conversion-Optimized","No":104,"Primary Style Recommendation":"Soft UI Evolution + Flat Design","Product Type":"Booking & Appointment App","Secondary Styles":"Minimalism, Micro-interactions","domain":"products","record_id":"products/104"},{"Color Palette Focus":"Professional navy + paid green + overdue red + neutral grey","Dashboard Style (if applicable)":"Financial Dashboard","Key Considerations":"Invoice template with line items. Tax/discount calculation. Status badges (Draft/Sent/Paid/Overdue). PDF export + share. Payment link generation. Client address book. Recurring invoices.","Keywords":"invoice, billing, payment, receipt, freelance, estimate, quote, accounting","Landing Page Pattern":"Conversion-Optimized + Trust","No":105,"Primary Style Recommendation":"Minimalism + Flat Design","Product Type":"Invoice & Billing Tool","Secondary Styles":"Swiss Modernism 2.0, Accessible & Ethical","domain":"products","record_id":"products/105"},{"Color Palette Focus":"Fresh green + food-category colors + checkmark accent","Dashboard Style (if applicable)":"N/A - List focused","Key Considerations":"Category-grouped list. Tap-to-check interaction (with strikethrough). Quantity stepper. Share list with family. Store aisle sorting. Barcode scan to add. Frequently bought suggestions.","Keywords":"grocery, shopping, list, supermarket, checklist, pantry, meal-plan, buy","Landing Page Pattern":"Minimal & Direct + Demo","No":106,"Primary Style Recommendation":"Flat Design + Vibrant & Block-based","Product Type":"Grocery & Shopping List","Secondary Styles":"Claymorphism, Micro-interactions","domain":"products","record_id":"products/106"},{"Color Palette Focus":"High-contrast on dark + focus red/amber + break green","Dashboard Style (if applicable)":"N/A - Utility focused","Key Considerations":"Large centered countdown digits. Circular progress ring. Session/break auto-switch. Session history log. Custom interval settings. Sound + haptic alerts. Focus stats chart.","Keywords":"timer, pomodoro, countdown, stopwatch, focus, clock, productivity, interval","Landing Page Pattern":"Minimal & Direct","No":107,"Primary Style Recommendation":"Minimalism + Neumorphism","Product Type":"Timer & Pomodoro","Secondary Styles":"Dark Mode (OLED), Micro-interactions","domain":"products","record_id":"products/107"},{"Color Palette Focus":"Soft pastels (baby pink/sky blue/mint/peach) + warm accents","Dashboard Style (if applicable)":"User Behavior Analytics","Key Considerations":"Feed/sleep/diaper quick-log buttons. Growth percentile chart. Milestone timeline with photos. Multiple child profiles. Partner invite + shared access. Pediatric reference. One-handed operation.","Keywords":"baby, parenting, child, feeding, sleep, diaper, milestone, family, newborn","Landing Page Pattern":"Social Proof-Focused + Trust","No":108,"Primary Style Recommendation":"Claymorphism + Soft UI Evolution","Product Type":"Parenting & Baby Tracker","Secondary Styles":"Vibrant & Block-based, Accessible & Ethical","domain":"products","record_id":"products/108"},{"Color Palette Focus":"Clean white + camera viewfinder accent + file-type color coding","Dashboard Style (if applicable)":"N/A - Tool focused","Key Considerations":"Camera capture with auto-edge detection. Crop/rotate/enhance. OCR text extraction overlay. PDF multi-page creation. Folder tree organization. Cloud sync. Share/export. Batch scan mode.","Keywords":"scanner, document, ocr, pdf, scan, camera, file, archive, digitize","Landing Page Pattern":"Feature-Rich Showcase + Demo","No":109,"Primary Style Recommendation":"Minimalism + Flat Design","Product Type":"Scanner & Document Manager","Secondary Styles":"Dark Mode (OLED), Accessible & Ethical","domain":"products","record_id":"products/109"},{"Color Palette Focus":"Clean blue + event category accent colors + success green","Dashboard Style (if applicable)":"N/A - Calendar focused","Key Considerations":"Event color coding. Week/month/day views. Recurring events. Conflict detection. Multi-calendar sync.","Keywords":"calendar, scheduling, planner, agenda, events, reminder, appointment, organize, date, sync","Landing Page Pattern":"Feature-Rich Showcase + Demo","No":110,"Primary Style Recommendation":"Flat Design + Micro-interactions","Product Type":"Calendar & Scheduling App","Secondary Styles":"Minimalism, Soft UI Evolution","domain":"products","record_id":"products/110"},{"Color Palette Focus":"Trust blue + security green + dark neutral","Dashboard Style (if applicable)":"N/A - Vault focused","Key Considerations":"Security-first. Zero-knowledge architecture. Biometric unlock. Breach alert dashboard. Password generator.","Keywords":"password, security, vault, credentials, login, secure, encrypt, keychain, 2fa, biometric","Landing Page Pattern":"Trust & Authority + Feature-Rich","No":111,"Primary Style Recommendation":"Minimalism + Accessible & Ethical","Product Type":"Password Manager","Secondary Styles":"Dark Mode (OLED), Trust & Authority","domain":"products","record_id":"products/111"},{"Color Palette Focus":"Success green + alert red + neutral grey + avatar accent colors","Dashboard Style (if applicable)":"N/A - Balance focused","Key Considerations":"Group expense tracking. Debt simplification algorithm. Payment reminders. Multi-currency. Receipt photo import.","Keywords":"split, expense, bill, aa, share, friends, group, settle, debt, payment, owe","Landing Page Pattern":"Minimal & Direct + Demo","No":112,"Primary Style Recommendation":"Flat Design + Vibrant & Block-based","Product Type":"Expense Splitter / Bill Split","Secondary Styles":"Minimalism, Micro-interactions","domain":"products","record_id":"products/112"},{"Color Palette Focus":"Clean white + recording red + waveform accent","Dashboard Style (if applicable)":"N/A - Recording focused","Key Considerations":"Waveform display. Background recording. Auto-transcription (AI). Tag/organize. Cloud sync.","Keywords":"voice, recorder, memo, audio, transcription, dictate, recording, microphone, note, otter","Landing Page Pattern":"Interactive Product Demo + Minimal","No":113,"Primary Style Recommendation":"Minimalism + AI-Native UI","Product Type":"Voice Recorder & Memo","Secondary Styles":"Flat Design, Dark Mode (OLED)","domain":"products","record_id":"products/113"},{"Color Palette Focus":"Paper warm white + ink neutral + minimal accent + tag colors","Dashboard Style (if applicable)":"N/A - List focused","Key Considerations":"Fast save via share sheet. Article distraction-free view. Tags and collections. Offline sync. Reading progress.","Keywords":"bookmark, read-later, save, article, pocket, link, reading, archive, collection, raindrop","Landing Page Pattern":"Minimal & Direct + Demo","No":114,"Primary Style Recommendation":"Minimalism + Flat Design","Product Type":"Bookmark & Read-Later","Secondary Styles":"Editorial Grid, Swiss Modernism 2.0","domain":"products","record_id":"products/114"},{"Color Palette Focus":"Global blue + neutral grey + language flag accent","Dashboard Style (if applicable)":"N/A - Utility focused","Key Considerations":"Real-time camera translation (OCR). Voice input and output. Offline mode. Conversation mode. Phrasebook.","Keywords":"translate, language, text, voice, ocr, dictionary, multilingual, real-time, detect, deepl","Landing Page Pattern":"Feature-Rich Showcase + Interactive Demo","No":115,"Primary Style Recommendation":"Flat Design + AI-Native UI","Product Type":"Translator App","Secondary Styles":"Minimalism, Micro-interactions","domain":"products","record_id":"products/115"},{"Color Palette Focus":"Dark functional + orange operation keys + clear button hierarchy","Dashboard Style (if applicable)":"N/A - Utility focused","Key Considerations":"Scientific mode toggle. Live currency rates. Calculation history. Widget support. Gesture input.","Keywords":"calculator, converter, unit, math, currency, measurement, scientific, formula, percentage","Landing Page Pattern":"Minimal & Direct","No":116,"Primary Style Recommendation":"Neumorphism + Minimalism","Product Type":"Calculator & Unit Converter","Secondary Styles":"Flat Design, Dark Mode (OLED)","domain":"products","record_id":"products/116"},{"Color Palette Focus":"Deep dark + ambient glow accent + timezone gradient","Dashboard Style (if applicable)":"N/A - Utility focused","Key Considerations":"Gentle wake (gradual volume). Timezone visualizer. Sleep tracking integration. Smart alarm skip. Bedtime mode.","Keywords":"alarm, clock, world, timezone, timer, wake, sleep, schedule, reminder, bedtime","Landing Page Pattern":"Minimal & Direct","No":117,"Primary Style Recommendation":"Dark Mode (OLED) + Minimalism","Product Type":"Alarm & World Clock","Secondary Styles":"Neumorphism, Flat Design","domain":"products","record_id":"products/117"},{"Color Palette Focus":"Functional neutral + file type color coding (PDF orange, doc blue, image purple)","Dashboard Style (if applicable)":"N/A - File tree focused","Key Considerations":"Folder tree navigation. File type preview. Wireless P2P transfer. Cloud integration. Compress and extract.","Keywords":"file, manager, transfer, folder, document, storage, cloud, share, organize, compress","Landing Page Pattern":"Feature-Rich Showcase + Demo","No":118,"Primary Style Recommendation":"Flat Design + Minimalism","Product Type":"File Manager & Transfer","Secondary Styles":"Accessible & Ethical, Dark Mode (OLED)","domain":"products","record_id":"products/118"},{"Color Palette Focus":"Clean white + brand primary + priority red + snooze amber","Dashboard Style (if applicable)":"N/A - Inbox focused","Key Considerations":"Unified inbox. Swipe actions (archive/delete/snooze). Priority sorting. Smart reply. Unsubscribe tool.","Keywords":"email, mail, inbox, compose, thread, newsletter, filter, reply, gmail, spark, superhuman","Landing Page Pattern":"Feature-Rich Showcase + Demo","No":119,"Primary Style Recommendation":"Flat Design + Minimalism","Product Type":"Email Client","Secondary Styles":"Micro-interactions, Soft UI Evolution","domain":"products","record_id":"products/119"},{"Color Palette Focus":"Cheerful pastels + progression gradient + reward gold + bright accent","Dashboard Style (if applicable)":"N/A - Game focused","Key Considerations":"Satisfying match/clear animations. Progressive difficulty. Daily challenges. No-skip tutorials. Offline play.","Keywords":"puzzle, casual, match, brain, game, relaxing, level, tiles, logic, block, three","Landing Page Pattern":"Feature-Rich Showcase + Social Proof","No":120,"Primary Style Recommendation":"Claymorphism + Vibrant & Block-based","Product Type":"Casual Puzzle Game","Secondary Styles":"Micro-interactions, Motion-Driven","domain":"products","record_id":"products/120"},{"Color Palette Focus":"Energetic blue + correct green + incorrect red + leaderboard gold","Dashboard Style (if applicable)":"Leaderboard Analytics","Key Considerations":"Timer pressure UX. Category selection. Streak system. Real-time multiplayer. Daily quiz mode.","Keywords":"trivia, quiz, knowledge, question, answer, challenge, leaderboard, fact, brain, compete","Landing Page Pattern":"Feature-Rich Showcase + Social Proof","No":121,"Primary Style Recommendation":"Vibrant & Block-based + Micro-interactions","Product Type":"Trivia & Quiz Game","Secondary Styles":"Claymorphism, Flat Design","domain":"products","record_id":"products/121"},{"Color Palette Focus":"Game-theme felt green + dark wood + card back patterns","Dashboard Style (if applicable)":"N/A - Game focused","Key Considerations":"Real-time or async multiplayer. Game state sync. Tutorial mode. Match history. ELO rating system.","Keywords":"card, board, chess, checkers, poker, strategy, turn-based, multiplayer, classic, tabletop","Landing Page Pattern":"Feature-Rich Showcase","No":122,"Primary Style Recommendation":"3D & Hyperrealism + Flat Design","Product Type":"Card & Board Game","Secondary Styles":"Motion-Driven, Dark Mode (OLED)","domain":"products","record_id":"products/122"},{"Color Palette Focus":"Coin gold + upgrade blue + prestige purple + progress green","Dashboard Style (if applicable)":"N/A - Progress focused","Key Considerations":"Offline progress calculation. Satisfying number animations. Upgrade tree clarity. Prestige system. Optional ads.","Keywords":"idle, clicker, incremental, passive, cookie, adventure, progress, offline, collect, prestige","Landing Page Pattern":"Feature-Rich Showcase","No":123,"Primary Style Recommendation":"Vibrant & Block-based + Motion-Driven","Product Type":"Idle & Clicker Game","Secondary Styles":"Claymorphism, 3D & Hyperrealism","domain":"products","record_id":"products/123"},{"Color Palette Focus":"Clean white + warm letter tiles + success green + shake red","Dashboard Style (if applicable)":"N/A - Game focused","Key Considerations":"Daily challenge with shareable results. Physical keyboard feel. Difficulty levels. Dictionary hints. Streak stats.","Keywords":"word, crossword, wordle, spelling, vocabulary, letters, grid, puzzle, dictionary, daily","Landing Page Pattern":"Minimal & Direct + Demo","No":124,"Primary Style Recommendation":"Minimalism + Flat Design","Product Type":"Word & Crossword Game","Secondary Styles":"Swiss Modernism 2.0, Micro-interactions","domain":"products","record_id":"products/124"},{"Color Palette Focus":"Neon on black + pixel palette + score gold + danger red","Dashboard Style (if applicable)":"N/A - Score focused","Key Considerations":"Instant play with no login. Game Center leaderboards. Haptic feedback on collision. Offline. Controller support.","Keywords":"arcade, retro, 8bit, action, shoot, runner, tap, reflex, endless, pixel, classic, score","Landing Page Pattern":"Feature-Rich Showcase + Hero-Centric","No":125,"Primary Style Recommendation":"Pixel Art + Retro-Futurism","Product Type":"Arcade & Retro Game","Secondary Styles":"Vibrant & Block-based, Motion-Driven","domain":"products","record_id":"products/125"},{"Color Palette Focus":"Dark editor background + vibrant filter preview strip + tool icon accent","Dashboard Style (if applicable)":"N/A - Editor focused","Key Considerations":"Non-destructive editing. Filter preview carousel. Histogram. RAW support. Batch export. Social share direct.","Keywords":"photo, edit, filter, vsco, snapseed, enhance, crop, retouch, adjust, luts, preset, adjust","Landing Page Pattern":"Feature-Rich Showcase + Interactive Demo","No":126,"Primary Style Recommendation":"Minimalism + Dark Mode (OLED)","Product Type":"Photo Editor & Filters","Secondary Styles":"Motion-Driven, Flat Design","domain":"products","record_id":"products/126"},{"Color Palette Focus":"Dark background + timeline track accent colors + effect preview vivid","Dashboard Style (if applicable)":"N/A - Timeline editor focused","Key Considerations":"Multi-track timeline. Licensed music library. Text overlays. Auto-captions. Export 9:16 / 16:9 / 1:1.","Keywords":"video, edit, capcut, inshot, clip, reel, tiktok, trim, effects, transitions, music, timeline","Landing Page Pattern":"Feature-Rich Showcase + Hero-Centric","No":127,"Primary Style Recommendation":"Dark Mode (OLED) + Motion-Driven","Product Type":"Short Video Editor","Secondary Styles":"Vibrant & Block-based, Glassmorphism","domain":"products","record_id":"products/127"},{"Color Palette Focus":"Neutral canvas + full-spectrum color picker + tool panel dark","Dashboard Style (if applicable)":"N/A - Canvas focused","Key Considerations":"Pressure sensitivity. Infinite canvas (pan/zoom). Layer management. Undo history. Export PNG/PSD/SVG.","Keywords":"drawing, sketch, procreate, canvas, paint, illustration, digital, brush, layers, art, stylus","Landing Page Pattern":"Interactive Product Demo + Storytelling","No":128,"Primary Style Recommendation":"Minimalism + Dark Mode (OLED)","Product Type":"Drawing & Sketching Canvas","Secondary Styles":"Anti-Polish Raw, Motion-Driven","domain":"products","record_id":"products/128"},{"Color Palette Focus":"Dark studio background + track colors rainbow + waveform accent + BPM pulse","Dashboard Style (if applicable)":"N/A - DAW focused","Key Considerations":"Touch piano and drum pad. Loop browser. MIDI support. Export MP3/WAV. Low-latency audio engine.","Keywords":"music, beat, daw, garageband, create, loop, sample, instrument, track, compose, record, midi","Landing Page Pattern":"Interactive Product Demo + Storytelling","No":129,"Primary Style Recommendation":"Dark Mode (OLED) + Motion-Driven","Product Type":"Music Creation & Beat Maker","Secondary Styles":"Cyberpunk UI, Glassmorphism","domain":"products","record_id":"products/129"},{"Color Palette Focus":"Bold primary + comedic yellow + viral red + high saturation accent","Dashboard Style (if applicable)":"N/A - Creator focused","Key Considerations":"Template library. Caption text overlay. Font variety. Reaction sticker packs. Share to all platforms. Fast creation.","Keywords":"meme, sticker, maker, funny, caption, template, edit, share, viral, emoji, creator, reaction","Landing Page Pattern":"Feature-Rich Showcase + Social Proof","No":130,"Primary Style Recommendation":"Vibrant & Block-based + Flat Design","Product Type":"Meme & Sticker Maker","Secondary Styles":"Gen Z Chaos, Claymorphism","domain":"products","record_id":"products/130"},{"Color Palette Focus":"AI purple + aurora gradients + before/after neutral","Dashboard Style (if applicable)":"N/A - Generation focused","Key Considerations":"Style selection. Multiple output variations. Privacy policy prominent. Fast generation. Credits/subscription system.","Keywords":"ai, photo, avatar, lensa, portrait, generate, selfie, style, filter, prisma, art","Landing Page Pattern":"Feature-Rich Showcase + Social Proof","No":131,"Primary Style Recommendation":"AI-Native UI + Aurora UI","Product Type":"AI Photo & Avatar Generator","Secondary Styles":"Glassmorphism, Minimalism","domain":"products","record_id":"products/131"},{"Color Palette Focus":"Brand-customizable + accent link color + clean white canvas","Dashboard Style (if applicable)":"Analytics (click tracking)","Key Considerations":"Drag-drop builder. Theme templates. Click analytics. Custom domain. Social icon integration. QR code export.","Keywords":"bio, link, linktree, personal, page, creator, social, portfolio, profile, landing, custom","Landing Page Pattern":"Conversion-Optimized + Social Proof","No":132,"Primary Style Recommendation":"Vibrant & Block-based + Bento Box Grid","Product Type":"Link-in-Bio Page Builder","Secondary Styles":"Minimalism, Glassmorphism","domain":"products","record_id":"products/132"},{"Color Palette Focus":"Clean fashion neutral + full clothes color palette + accent","Dashboard Style (if applicable)":"N/A - Wardrobe focused","Key Considerations":"Photo catalog of clothes. AI outfit suggestions. Calendar integration. Capsule wardrobe. Season filtering.","Keywords":"wardrobe, outfit, fashion, clothes, closet, style, wear, plan, capsule, ootd, lookbook","Landing Page Pattern":"Storytelling-Driven + Feature-Rich","No":133,"Primary Style Recommendation":"Minimalism + Motion-Driven","Product Type":"Wardrobe & Outfit Planner","Secondary Styles":"Aurora UI, Soft UI Evolution","domain":"products","record_id":"products/133"},{"Color Palette Focus":"Nature greens + earth brown + sunny yellow reminder + water blue","Dashboard Style (if applicable)":"N/A - Plant collection focused","Key Considerations":"Plant database with care guides. Watering reminders. Growth photo timeline. AI health diagnosis. Collection sharing.","Keywords":"plant, care, water, garden, tracker, reminder, species, photo, grow, health, planta","Landing Page Pattern":"Storytelling-Driven + Social Proof","No":134,"Primary Style Recommendation":"Organic Biophilic + Soft UI Evolution","Product Type":"Plant Care Tracker","Secondary Styles":"Claymorphism, Flat Design","domain":"products","record_id":"products/134"},{"Color Palette Focus":"Warm paper white + ink brown + reading progress green + book cover colors","Dashboard Style (if applicable)":"N/A - Library focused","Key Considerations":"Barcode scan to add. Progress percentage. Annual reading goal. Notes and quotes. Friends activity. Genre stats.","Keywords":"book, reading, tracker, goodreads, library, shelf, progress, review, notes, goal, literature","Landing Page Pattern":"Social Proof-Focused + Feature-Rich","No":135,"Primary Style Recommendation":"Swiss Modernism 2.0 + Minimalism","Product Type":"Book & Reading Tracker","Secondary Styles":"E-Ink Paper, Soft UI Evolution","domain":"products","record_id":"products/135"},{"Color Palette Focus":"Warm romantic pink/rose + soft gradient + memory photo tones","Dashboard Style (if applicable)":"N/A - Couple focused","Key Considerations":"Shared timeline. Anniversary countdowns. Secret chat. Photo albums. Love language quiz. Date night ideas.","Keywords":"couple, relationship, partner, love, date, anniversary, memory, shared, intimate, between","Landing Page Pattern":"Storytelling-Driven + Social Proof","No":136,"Primary Style Recommendation":"Aurora UI + Soft UI Evolution","Product Type":"Couple & Relationship App","Secondary Styles":"Claymorphism, Glassmorphism","domain":"products","record_id":"products/136"},{"Color Palette Focus":"Warm playful + member color coding + chore completion green","Dashboard Style (if applicable)":"N/A - Family hub focused","Key Considerations":"Member color coding. Chore assignment rotation. Recurring events. Shared shopping list. Allowance tracking.","Keywords":"family, calendar, chores, tasks, household, shared, kids, schedule, cozi, organize, member","Landing Page Pattern":"Feature-Rich Showcase + Social Proof","No":137,"Primary Style Recommendation":"Flat Design + Claymorphism","Product Type":"Family Calendar & Chores","Secondary Styles":"Accessible & Ethical, Vibrant & Block-based","domain":"products","record_id":"products/137"},{"Color Palette Focus":"Emotion gradient (blue sad to yellow happy) + pastel per mood + insight accent","Dashboard Style (if applicable)":"N/A - Mood chart focused","Key Considerations":"One-tap daily check-in. Emotion wheel selector. Mood calendar heatmap. Pattern insights. Export and share.","Keywords":"mood, emotion, feeling, mental, daily, journal, wellbeing, check-in, log, track, daylio","Landing Page Pattern":"Storytelling-Driven + Social Proof","No":138,"Primary Style Recommendation":"Soft UI Evolution + Minimalism","Product Type":"Mood Tracker","Secondary Styles":"Aurora UI, Neumorphism","domain":"products","record_id":"products/138"},{"Color Palette Focus":"Celebration warm pink/gold/red + category colors + surprise accent","Dashboard Style (if applicable)":"N/A - List focused","Key Considerations":"Add from any URL. Price range filter. Reserved-by-others system. Occasion calendar. Collaborative list. Surprise mode.","Keywords":"gift, wishlist, present, birthday, occasion, registry, idea, shop, list, share, surprise","Landing Page Pattern":"Minimal & Direct + Conversion","No":139,"Primary Style Recommendation":"Vibrant & Block-based + Soft UI Evolution","Product Type":"Gift & Wishlist","Secondary Styles":"Claymorphism, Flat Design","domain":"products","record_id":"products/139"},{"Color Palette Focus":"Energetic orange + map accent + pace zones (green/yellow/red)","Dashboard Style (if applicable)":"Performance Analytics","Key Considerations":"Live GPS tracking. Route map. Auto-pause detection. Segment leaderboards. Training zones. Social feed. Garmin sync.","Keywords":"running, cycling, gps, strava, track, route, speed, distance, cadence, pace, workout, sport","Landing Page Pattern":"Feature-Rich Showcase + Social Proof","No":140,"Primary Style Recommendation":"Dark Mode (OLED) + Vibrant & Block-based","Product Type":"Running & Cycling GPS","Secondary Styles":"Motion-Driven, Glassmorphism","domain":"products","record_id":"products/140"},{"Color Palette Focus":"Earth calming sage/terracotta/cream + breathing gradient + warm accent","Dashboard Style (if applicable)":"N/A - Session focused","Key Considerations":"Pose library with illustrations. Guided sessions with audio. Breathing exercises. Progress calendar. Beginner to advanced.","Keywords":"yoga, stretch, flexibility, pose, asana, guided, session, calm, routine, wellness, down-dog","Landing Page Pattern":"Storytelling-Driven + Social Proof","No":141,"Primary Style Recommendation":"Organic Biophilic + Soft UI Evolution","Product Type":"Yoga & Stretching Guide","Secondary Styles":"Neumorphism, Minimalism","domain":"products","record_id":"products/141"},{"Color Palette Focus":"Deep midnight blue + stars/moon accent + sleep quality gradient (poor red to great green)","Dashboard Style (if applicable)":"Healthcare Analytics","Key Considerations":"Sleep cycle detection. Smart alarm wakes at light sleep. Snore detection. Weekly trends. Apple Health integration.","Keywords":"sleep, tracker, alarm, cycle, quality, snore, analysis, rem, deep, smart, wake, insomnia","Landing Page Pattern":"Feature-Rich Showcase + Social Proof","No":142,"Primary Style Recommendation":"Dark Mode (OLED) + Neumorphism","Product Type":"Sleep Tracker","Secondary Styles":"Glassmorphism, Minimalism","domain":"products","record_id":"products/142"},{"Color Palette Focus":"Healthy green + macro colors (protein blue, carb orange, fat yellow) + progress circle","Dashboard Style (if applicable)":"Healthcare Analytics","Key Considerations":"Barcode scanner food log. Large database. Macro goals. Restaurant lookup. Recipe builder. AI photo food logging.","Keywords":"calorie, nutrition, food, diet, macro, protein, carb, fat, log, fitness, myfitnesspal","Landing Page Pattern":"Feature-Rich Showcase + Social Proof","No":143,"Primary Style Recommendation":"Flat Design + Vibrant & Block-based","Product Type":"Calorie & Nutrition Counter","Secondary Styles":"Minimalism, Claymorphism","domain":"products","record_id":"products/143"},{"Color Palette Focus":"Rose/blush + lavender + fertility green + soft calendar tones","Dashboard Style (if applicable)":"Healthcare Analytics","Key Considerations":"Cycle prediction. Symptom logging. Fertility window. Personalized insights. Privacy-first. Partner sharing option.","Keywords":"period, cycle, menstrual, fertility, ovulation, pms, log, women, health, flo, clue, hormone","Landing Page Pattern":"Social Proof-Focused + Trust","No":144,"Primary Style Recommendation":"Soft UI Evolution + Aurora UI","Product Type":"Period & Cycle Tracker","Secondary Styles":"Accessible & Ethical, Claymorphism","domain":"products","record_id":"products/144"},{"Color Palette Focus":"Medical trust blue + missed alert red + taken green + clean white","Dashboard Style (if applicable)":"N/A - Schedule focused","Key Considerations":"Multi-medication schedule. Caregiver sharing. Refill reminders. Drug interaction warnings. Large touch targets.","Keywords":"medication, pill, reminder, dose, schedule, prescription, drug, health, medisafe, refill","Landing Page Pattern":"Trust & Authority + Feature-Rich","No":145,"Primary Style Recommendation":"Accessible & Ethical + Flat Design","Product Type":"Medication & Pill Reminder","Secondary Styles":"Minimalism, Trust & Authority","domain":"products","record_id":"products/145"},{"Color Palette Focus":"Refreshing blue + water wave animation + goal progress accent","Dashboard Style (if applicable)":"N/A - Daily goal focused","Key Considerations":"Tap to log quickly. Animated fill visualization. Custom reminders. Goal by weight/weather. Streak system. Widget.","Keywords":"water, hydration, drink, reminder, daily, tracker, glasses, intake, health, cup, aqua","Landing Page Pattern":"Minimal & Direct + Demo","No":146,"Primary Style Recommendation":"Claymorphism + Vibrant & Block-based","Product Type":"Water & Hydration Reminder","Secondary Styles":"Flat Design, Micro-interactions","domain":"products","record_id":"products/146"},{"Color Palette Focus":"Fasting deep blue/purple + eating window green + timeline neutral","Dashboard Style (if applicable)":"N/A - Timer focused","Key Considerations":"Protocol selector (16:8, 18:6, OMAD). Circular countdown timer. Fasting history log. Tips during fast. Electrolytes.","Keywords":"fasting, intermittent, 16:8, timer, fast, eating, window, keto, diet, zero, weight, protocol","Landing Page Pattern":"Feature-Rich Showcase + Social Proof","No":147,"Primary Style Recommendation":"Minimalism + Dark Mode (OLED)","Product Type":"Fasting & Intermittent Timer","Secondary Styles":"Neumorphism, Flat Design","domain":"products","record_id":"products/147"},{"Color Palette Focus":"Dark protective + subtle gradient + upvote green + empathy warm accent","Dashboard Style (if applicable)":"User Behavior Analytics","Key Considerations":"Anonymous posting with moderation. Safety reporting. Reaction system. Trending topics. Mental health resources link.","Keywords":"anonymous, community, confess, whisper, secret, vent, share, safe, private, social, yikyak","Landing Page Pattern":"Social Proof-Focused + Feature-Rich","No":148,"Primary Style Recommendation":"Dark Mode (OLED) + Minimalism","Product Type":"Anonymous Community / Confession","Secondary Styles":"Glassmorphism, Soft UI Evolution","domain":"products","record_id":"products/148"},{"Color Palette Focus":"City vibrant + event category colors + map accent + date highlight","Dashboard Style (if applicable)":"Event Analytics","Key Considerations":"Location-based discovery. Category filters. RSVP flow. Map view. Friend attendance. Organizer tools. Reminders.","Keywords":"local, events, discovery, meetup, nearby, social, city, activities, calendar, community, explore","Landing Page Pattern":"Hero-Centric Design + Feature-Rich","No":149,"Primary Style Recommendation":"Vibrant & Block-based + Motion-Driven","Product Type":"Local Events & Discovery","Secondary Styles":"Glassmorphism, Flat Design","domain":"products","record_id":"products/149"},{"Color Palette Focus":"Calm focus blue + session progress indicator + ambient warm neutrals","Dashboard Style (if applicable)":"User Behavior Analytics","Key Considerations":"Live study rooms with video/avatar presence. Shared focus timer. Ambient music. Goals sharing. Streak accountability.","Keywords":"study, focus, cowork, pomodoro, virtual, together, session, accountability, live, stream, room","Landing Page Pattern":"Social Proof-Focused + Feature-Rich","No":150,"Primary Style Recommendation":"Minimalism + Soft UI Evolution","Product Type":"Study Together / Virtual Coworking","Secondary Styles":"Flat Design, Dark Mode (OLED)","domain":"products","record_id":"products/150"},{"Color Palette Focus":"Code editor dark + success green + difficulty gradient (easy green / medium amber / hard red)","Dashboard Style (if applicable)":"Student Analytics","Key Considerations":"Code editor with syntax highlight. Multiple languages. Hint system. Solution explanation. Company tags. Contest mode.","Keywords":"coding, leetcode, challenge, algorithm, practice, programming, competitive, skill, interview, problem","Landing Page Pattern":"Feature-Rich Showcase + Social Proof","No":151,"Primary Style Recommendation":"Dark Mode (OLED) + Cyberpunk UI","Product Type":"Coding Challenge & Practice","Secondary Styles":"Minimalism, Flat Design","domain":"products","record_id":"products/151"},{"Color Palette Focus":"Bright primary + child-safe pastels + reward gold + interactive accent","Dashboard Style (if applicable)":"Parent Dashboard","Key Considerations":"Age-appropriate UI for 2-8. No ads. No dark patterns. Curriculum aligned. Parent progress reports. Reward system.","Keywords":"kids, children, learning, abc, math, phonics, numbers, education, games, preschool, early","Landing Page Pattern":"Social Proof-Focused + Trust","No":152,"Primary Style Recommendation":"Claymorphism + Vibrant & Block-based","Product Type":"Kids Learning (ABC & Math)","Secondary Styles":"Micro-interactions, Flat Design","domain":"products","record_id":"products/152"},{"Color Palette Focus":"Musical warm deep red/brown + note color system + skill progress bar","Dashboard Style (if applicable)":"Learning Analytics","Key Considerations":"Interactive instrument on-screen. Sheet music display. Song library. Slow-tempo practice. Recording and playback. Teacher mode.","Keywords":"music, instrument, piano, guitar, learn, lesson, tutorial, notes, play, chord, practice, simply","Landing Page Pattern":"Interactive Product Demo + Social Proof","No":153,"Primary Style Recommendation":"Vibrant & Block-based + Motion-Driven","Product Type":"Music Instrument Learning","Secondary Styles":"Dark Mode (OLED), Soft UI Evolution","domain":"products","record_id":"products/153"},{"Color Palette Focus":"Trust blue + available green + occupied red + map neutral","Dashboard Style (if applicable)":"Real-Time Monitoring + Map","Key Considerations":"Real-time availability. In-app navigation. Payment integration. Parking timer alert. Favorite spots. Street vs garage.","Keywords":"parking, spot, finder, map, pay, meter, garage, location, car, reserve, spothero","Landing Page Pattern":"Conversion-Optimized + Feature-Rich","No":154,"Primary Style Recommendation":"Minimalism + Glassmorphism","Product Type":"Parking Finder","Secondary Styles":"Flat Design, Micro-interactions","domain":"products","record_id":"products/154"},{"Color Palette Focus":"Transit brand line colors + real-time indicator green/red + map neutral","Dashboard Style (if applicable)":"Real-Time Monitoring + Map","Key Considerations":"Real-time arrivals. Offline maps. Disruption alerts. Multi-modal routing. Fare calculation. Accessibility features.","Keywords":"transit, bus, metro, subway, train, route, schedule, map, city, commute, trip, citymapper","Landing Page Pattern":"Feature-Rich Showcase + Interactive Demo","No":155,"Primary Style Recommendation":"Flat Design + Accessible & Ethical","Product Type":"Public Transit Guide","Secondary Styles":"Minimalism, Motion-Driven","domain":"products","record_id":"products/155"},{"Color Palette Focus":"Adventure warm sunset orange + map teal + stop markers + road neutral","Dashboard Style (if applicable)":"N/A - Trip focused","Key Considerations":"Route planning with stops. Point-of-interest discovery. Gas/food/hotel along route. Offline maps. Trip sharing.","Keywords":"road, trip, drive, route, planner, travel, stop, map, adventure, scenic, car, wanderlog","Landing Page Pattern":"Storytelling-Driven + Hero-Centric","No":156,"Primary Style Recommendation":"Aurora UI + Organic Biophilic","Product Type":"Road Trip Planner","Secondary Styles":"Motion-Driven, Vibrant & Block-based","domain":"products","record_id":"products/156"},{"Color Palette Focus":"Dark shield blue + connected green + disconnected red + trust accent","Dashboard Style (if applicable)":"N/A - Connection focused","Key Considerations":"One-tap connect. Server selection by country. No-log policy prominent. Speed indicator. Kill switch. Protocol choice.","Keywords":"vpn, privacy, secure, anonymous, encrypt, proxy, ip, protect, shield, network, nordvpn","Landing Page Pattern":"Trust & Authority + Conversion-Optimized","No":157,"Primary Style Recommendation":"Minimalism + Dark Mode (OLED)","Product Type":"VPN & Privacy Tool","Secondary Styles":"Cyberpunk UI, Trust & Authority","domain":"products","record_id":"products/157"},{"Color Palette Focus":"Alert red + safety blue + location green + high contrast critical","Dashboard Style (if applicable)":"N/A - Safety focused","Key Considerations":"One-tap SOS. Emergency contacts auto-notify. Live location sharing. Fake call feature. Safe walk mode. Local emergency numbers.","Keywords":"emergency, sos, safety, alert, location, help, danger, crisis, first-aid, guard, bsafe","Landing Page Pattern":"Trust & Authority + Social Proof","No":158,"Primary Style Recommendation":"Accessible & Ethical + Flat Design","Product Type":"Emergency SOS & Safety","Secondary Styles":"Dark Mode (OLED), Minimalism","domain":"products","record_id":"products/158"},{"Color Palette Focus":"Content-driven + trending aesthetic palettes + download accent","Dashboard Style (if applicable)":"N/A - Gallery focused","Key Considerations":"Category browsing. Preview on device. Daily wallpaper auto-set. Widget matching. Creator uploads. Resolution auto-fit.","Keywords":"wallpaper, theme, background, customize, aesthetic, home-screen, lock-screen, widget, design, zedge","Landing Page Pattern":"Feature-Rich Showcase + Social Proof","No":159,"Primary Style Recommendation":"Vibrant & Block-based + Aurora UI","Product Type":"Wallpaper & Theme App","Secondary Styles":"Glassmorphism, Motion-Driven","domain":"products","record_id":"products/159"},{"Color Palette Focus":"Calming dark + ambient texture visual + subtle sound wave + sleep blue","Dashboard Style (if applicable)":"N/A - Player focused","Key Considerations":"Sound mixer with multiple simultaneous layers. Sleep timer with fade. Custom soundscapes. Offline. Background audio.","Keywords":"white noise, ambient, sound, sleep, focus, rain, nature, relax, concentration, background, noisli","Landing Page Pattern":"Minimal & Direct + Social Proof","No":160,"Primary Style Recommendation":"Minimalism + Dark Mode (OLED)","Product Type":"White Noise & Ambient Sound","Secondary Styles":"Neumorphism, Organic Biophilic","domain":"products","record_id":"products/160"},{"Color Palette Focus":"Neutral interior palette + material texture accent + AR blue","Dashboard Style (if applicable)":"N/A - Project focused","Key Considerations":"AR room visualization. Style quiz. Product catalog with purchase links. 3D room planner. Mood board. Before/after.","Keywords":"home, interior, decor, design, furniture, room, renovation, ar, plan, inspire, 3d, houzz","Landing Page Pattern":"Storytelling-Driven + Feature-Rich","No":161,"Primary Style Recommendation":"Minimalism + 3D Product Preview","Product Type":"Home Decoration & Interior Design","Secondary Styles":"Organic Biophilic, Aurora UI","domain":"products","record_id":"products/161"},{"Color Palette Focus":"Trust navy + White + Citation blue + Serif accents","Dashboard Style (if applicable)":"N/A - Publication focused","Key Considerations":"Prioritize readability (serif body text). Clear article hierarchy. Abstract/DOI prominence. WCAG AAA. Minimal visual noise. Trust signals: ISSN, indexing badges.","Keywords":"academic, journal, paper, research, peer-review, open-access, scholarly, publication, citation, manuscript, issn, doi","Landing Page Pattern":"Content-Index + Search","No":162,"Primary Style Recommendation":"Swiss Modernism 2.0 + Minimalism","Product Type":"Academic Journal / Scholarly Publishing","Secondary Styles":"Trust & Authority, Accessible & Ethical","domain":"products","record_id":"products/162"},{"Color Palette Focus":"Dark code theme + Brand accent + Syntax colors","Dashboard Style (if applicable)":"N/A - Documentation focused","Key Considerations":"Endpoint discoverability. Copy-paste code samples. Auth flow clarity. Version switching. Interactive playground. Rate limit visibility.","Keywords":"api, developer, documentation, sdk, endpoint, integration, rest, graphql, webhook, reference, getting-started, auth","Landing Page Pattern":"Quick Start + Interactive Docs","No":163,"Primary Style Recommendation":"Trust & Authority + Minimalism","Product Type":"API Developer Portal","Secondary Styles":"Glassmorphism, Dark Mode (OLED)","domain":"products","record_id":"products/163"},{"Color Palette Focus":"Dark neutral + topic accent colors + unread indicator + reputation badge","Dashboard Style (if applicable)":"N/A - Discussion focused","Key Considerations":"Thread list with pagination. Rich text editor. Quote/mention system. Upvote/downvote. User badges. Moderation tools.","Keywords":"forum, discussion, thread, post, reply, community, comment, moderation, subreddit, stackexchange, topic","Landing Page Pattern":"Feed + Thread View","No":164,"Primary Style Recommendation":"Dark Mode (OLED) + Minimalism","Product Type":"Forum / Discussion Board","Secondary Styles":"Flat Design, Vibrant & Block-based","domain":"products","record_id":"products/164"},{"Color Palette Focus":"Neutral bg + category color chips + map accent + verified badge","Dashboard Style (if applicable)":"N/A - Listing focused","Key Considerations":"Category tree. Multi-filter sidebar. Map/list toggle. Verified badges. Reviews. Claim listing flow.","Keywords":"directory, listing, classifieds, catalogue, business-directory, yellow-pages, venue, find, search, filter, map","Landing Page Pattern":"Filter-Heavy Grid + Map","No":165,"Primary Style Recommendation":"Flat Design + Vibrant & Block-based","Product Type":"Directory / Listing Site","Secondary Styles":"Minimalism, Trust & Authority","domain":"products","record_id":"products/165"},{"Color Palette Focus":"Status green + incident red + maintenance amber + neutral dark","Dashboard Style (if applicable)":"Real-Time Monitoring + Timeline","Key Considerations":"Service status matrix. Incident timeline. Severity badges. Maintenance schedule. SLA uptime history. Email/SMS subscribe.","Keywords":"status, incident, outage, uptime, downtime, statuspage, monitoring, sla, maintenance, sev1, postmortem","Landing Page Pattern":"Timeline + Severity Indicators","No":166,"Primary Style Recommendation":"Data-Dense + Trust & Authority","Product Type":"Status Page / Incident Management","Secondary Styles":"Minimalism, Dark Mode (OLED)","domain":"products","record_id":"products/166"},{"Color Palette Focus":"Clean white + link blue + heading hierarchy + citation grey","Dashboard Style (if applicable)":"N/A - Reference focused","Key Considerations":"Full-text search bar. Table of contents sidebar. Edit history. Inter-page linking. Mobile responsive. Print-friendly.","Keywords":"wiki, encyclopedia, knowledge, article, reference, wikipedia, documentation, collaborative, edit, version, citation","Landing Page Pattern":"Search-First + Hierarchical Navigation","No":167,"Primary Style Recommendation":"Minimalism + Flat Design","Product Type":"Wiki / Encyclopedia","Secondary Styles":"Swiss Modernism 2.0, Accessible & Ethical","domain":"products","record_id":"products/167"},{"Color Palette Focus":"Dark bg + bid green + outbid red + countdown amber","Dashboard Style (if applicable)":"N/A - Auction focused","Key Considerations":"Real-time bid updates. Countdown timer urgency. Auto-bid ceiling. Outbid notifications. Bid history. Reserve price indicator.","Keywords":"auction, bid, hammer, lot, live-auction, bidding-war, estate-sale, proxibid, gavel, lot-number, reserve-price","Landing Page Pattern":"Live Auction Feed + Countdown","No":168,"Primary Style Recommendation":"Dark Mode (OLED) + Motion-Driven","Product Type":"Auction Platform","Secondary Styles":"Vibrant & Block-based, Real-Time Monitor","domain":"products","record_id":"products/168"},{"Color Palette Focus":"Neutral bg + version badge colors (feat=green, fix=blue, breaking=red) + date grey","Dashboard Style (if applicable)":"N/A - Documentation focused","Key Considerations":"Chronological release feed. Semver badges. Breaking change warnings. Copy-paste install commands. Subscribe to feed. Search by version.","Keywords":"changelog, release-notes, version-history, whats-new, product-updates, semver, patch-notes, release-tracker","Landing Page Pattern":"Timeline + Version List","No":169,"Primary Style Recommendation":"Minimalism + Flat Design","Product Type":"Changelog / Release Notes","Secondary Styles":"Swiss Modernism 2.0, Trust & Authority","domain":"products","record_id":"products/169"},{"Color Palette Focus":"Earth green + discovery orange + volunteer badge blue + data neutral","Dashboard Style (if applicable)":"Project Participation Dashboard","Key Considerations":"Project cards with impact metrics. Contribution tracker. Beginner-friendly onboarding. Data quality feedback loop. Leaderboards. Community forums.","Keywords":"citizen-science, zooniverse, crowdsourced-research, volunteer-science, public-participation, distributed-research, citizen-researcher","Landing Page Pattern":"Storytelling-Driven + Social Proof","No":170,"Primary Style Recommendation":"Organic Biophilic + Vibrant & Block-based","Product Type":"Citizen Science Platform","Secondary Styles":"Claymorphism, Motion-Driven","domain":"products","record_id":"products/170"},{"Color Palette Focus":"Neutral bg + price green + category chips + verified seller badge","Dashboard Style (if applicable)":"N/A - Listing focused","Key Considerations":"Category tree. Photo-first listing cards. Price negotiation. Location radius filter. Saved searches. Seller reputation. Flag/report.","Keywords":"classifieds, buy-sell, craigslist, secondhand, marketplace-listing, for-sale, trade, flea-market, thrift, resell","Landing Page Pattern":"Filter-Heavy Grid + Map","No":171,"Primary Style Recommendation":"Flat Design + Vibrant & Block-based","Product Type":"Classifieds / Buy-Sell","Secondary Styles":"Minimalism, Trust & Authority","domain":"products","record_id":"products/171"},{"Color Palette Focus":"Academic navy + track color chips + gold keynote + neutral white","Dashboard Style (if applicable)":"N/A - Event focused","Key Considerations":"Speaker grid. Multi-track agenda. CFP deadline countdown. Venue map. Sponsor tiers. Early-bird pricing. Proceedings download.","Keywords":"conference, symposium, summit, cfp, call-for-papers, speaker-lineup, registration, venue, proceedings, keynote, track","Landing Page Pattern":"Hero + Agenda + CFP","No":172,"Primary Style Recommendation":"Swiss Modernism 2.0 + Minimalism","Product Type":"Conference / Symposium Landing Page","Secondary Styles":"Trust & Authority, Accessible & Ethical","domain":"products","record_id":"products/172"},{"Color Palette Focus":"Brand primary + funding progress green + urgency amber + reward tier colors","Dashboard Style (if applicable)":"Campaign Analytics Dashboard","Key Considerations":"Funding progress bar with % goal. Reward tier selector. Backer count. Countdown timer. Updates feed. Creator profile. Risk/disclaimer section.","Keywords":"crowdfunding, kickstarter, indiegogo, campaign, backer, pledge, funding-goal, stretch-goal, reward-tier, all-or-nothing","Landing Page Pattern":"Storytelling-Driven + Social Proof","No":173,"Primary Style Recommendation":"Vibrant & Block-based + Motion-Driven","Product Type":"Crowdfunding Platform","Secondary Styles":"Claymorphism, Storytelling-Driven","domain":"products","record_id":"products/173"},{"Color Palette Focus":"High contrast + brand accent + touch target emphasis (56px min)","Dashboard Style (if applicable)":"N/A - Display focused","Key Considerations":"Full-screen single-purpose layout. Touch targets ≥56px. Auto-rotate content. Offline fallback. Brightness-aware color palette. No scroll.","Keywords":"digital-signage, kiosk, interactive-display, touchscreen, wayfinding, lobby-display, menu-board, point-of-sale-display","Landing Page Pattern":"Full-Screen Immersive","No":174,"Primary Style Recommendation":"Minimalism + Dark Mode (OLED)","Product Type":"Digital Signage / Kiosk","Secondary Styles":"Flat Design, Motion-Driven","domain":"products","record_id":"products/174"},{"Color Palette Focus":"Trust navy + signature green + pending amber + neutral grey","Dashboard Style (if applicable)":"Document Pipeline Dashboard","Key Considerations":"Document preview with annotation. Signature placement UI. Multi-signer workflow. Audit trail. Compliance badges. Mobile signing. Expiry reminders.","Keywords":"esignature, e-sign, docusign, digital-signature, document-workflow, approval-chain, contract-signing, signing-ceremony","Landing Page Pattern":"Feature-Rich Showcase + Conversion","No":175,"Primary Style Recommendation":"Trust & Authority + Minimalism","Product Type":"E-signature / Document Workflow","Secondary Styles":"Accessible & Ethical, Flat Design","domain":"products","record_id":"products/175"},{"Color Palette Focus":"Dark bg + enabled green + disabled grey + experimental amber + kill-switch red","Dashboard Style (if applicable)":"N/A - Config focused","Key Considerations":"Feature list with on/off toggles. Percentage rollout slider. Environment selector (prod/staging). User targeting rules. Kill switch. Audit log.","Keywords":"feature-flag, config, launchdarkly, feature-toggle, experiment, rollout, kill-switch, a-b-test-config, percentage-rollout","Landing Page Pattern":"Feature List + Toggle Panel","No":176,"Primary Style Recommendation":"Dark Mode (OLED) + Data-Dense","Product Type":"Feature Flag / Config Management","Secondary Styles":"Minimalism, Trust & Authority","domain":"products","record_id":"products/176"},{"Color Palette Focus":"Professional blue + accessibility high contrast + service category colors","Dashboard Style (if applicable)":"N/A - Service focused","Key Considerations":"Multilingual toggle. Service A-Z index. Form wizard with save-progress. Document upload. Appointment booking. Status tracker. WCAG AAA. Plain language.","Keywords":"government-portal, civic-services, city-hall, permit-application, tax-payment, voter-registration, public-records, municipal-online","Landing Page Pattern":"Service Directory + Search","No":177,"Primary Style Recommendation":"Accessible & Ethical + Trust & Authority","Product Type":"Government Portal / Civic Services","Secondary Styles":"Flat Design, Inclusive Design","domain":"products","record_id":"products/177"},{"Color Palette Focus":"Institution navy + funding green + deadline red + neutral white","Dashboard Style (if applicable)":"Application Tracking Dashboard","Key Considerations":"Funding opportunity cards. Eligibility checker. Deadline countdown. Application form wizard. Document checklist. Review status tracker. Award announcement feed.","Keywords":"grant, funding, rfp, proposal, research-grant, foundation, fellowship, award, application-portal, funding-opportunity","Landing Page Pattern":"Opportunity Grid + Search","No":178,"Primary Style Recommendation":"Trust & Authority + Minimalism","Product Type":"Grant / Funding Portal","Secondary Styles":"Accessible & Ethical, Swiss Modernism 2.0","domain":"products","record_id":"products/178"},{"Color Palette Focus":"Calm blue + course category colors + grade green + alert red","Dashboard Style (if applicable)":"Education Analytics Dashboard","Key Considerations":"Dashboard with enrolled courses. Assignment deadlines. Gradebook view. Discussion forums. File upload. Calendar integration. Mobile offline sync.","Keywords":"lms, course-management, learning-management, canvas, moodle, blackboard, enrollment, gradebook, syllabus, assignment-submit","Landing Page Pattern":"Dashboard + Course Grid","No":179,"Primary Style Recommendation":"Flat Design + Accessible & Ethical","Product Type":"LMS (Learning Management System)","Secondary Styles":"Minimalism, Vibrant & Block-based","domain":"products","record_id":"products/179"},{"Color Palette Focus":"Brand primary + component palette colors + canvas neutral + connect blue","Dashboard Style (if applicable)":"App Builder Workspace","Key Considerations":"Drag-drop canvas. Component library sidebar. Logic flow visual editor. Preview pane. Template gallery. Publish button. Version history.","Keywords":"no-code, low-code, builder, bubble, webflow, drag-drop, visual-builder, app-builder, workflow-builder, logic-blocks","Landing Page Pattern":"Interactive Product Demo","No":180,"Primary Style Recommendation":"Vibrant & Block-based + Bento Box Grid","Product Type":"No-code / Low-code Builder","Secondary Styles":"Motion-Driven, Glassmorphism","domain":"products","record_id":"products/180"},{"Color Palette Focus":"Dark bg + language color bar + star gold + fork silver + sponsor purple","Dashboard Style (if applicable)":"Contributor Analytics Dashboard","Key Considerations":"Star/fork count badges. Install command (copy-paste). Language breakdown bar. Top contributors grid. Sponsor CTA. Documentation link. Issue/pr status.","Keywords":"open-source, github-project, oss, contributor, star, fork, pull-request, maintainer, sponsoring, readme, repository","Landing Page Pattern":"Hero + Install + Contribute","No":181,"Primary Style Recommendation":"Dark Mode (OLED) + Minimalism","Product Type":"Open Source Project Landing","Secondary Styles":"Trust & Authority, Flat Design","domain":"products","record_id":"products/181"},{"Color Palette Focus":"Clinical blue + health green + alert red + calm white + accessible contrast","Dashboard Style (if applicable)":"Healthcare Analytics","Key Considerations":"Labs and results timeline. Medication list with refill. Appointment scheduling. Message care team. Immunization records. Allergy alerts. Family access proxy.","Keywords":"patient-portal, health-records, ehr, emr, mychart, lab-results, prescription-refill, medical-history, test-results, care-team","Landing Page Pattern":"Health Summary Dashboard","No":182,"Primary Style Recommendation":"Trust & Authority + Accessible & Ethical","Product Type":"Patient Portal / Health Records","Secondary Styles":"Minimalism, Flat Design","domain":"products","record_id":"products/182"},{"Color Palette Focus":"Formal neutral + patent type chips + status badges (granted/pending/rejected)","Dashboard Style (if applicable)":"N/A - Search focused","Key Considerations":"Full-text patent search. Classification tree. Citation graph. Prior art comparison. Patent family view. PDF download. Legal status tracker.","Keywords":"patent, intellectual-property, trademark, prior-art, uspto, wipo, invention, ip-portfolio, patent-search, claims","Landing Page Pattern":"Search-First + Results Grid","No":183,"Primary Style Recommendation":"Swiss Modernism 2.0 + Minimalism","Product Type":"Patent / IP Database","Secondary Styles":"Trust & Authority, Data-Dense","domain":"products","record_id":"products/183"},{"Color Palette Focus":"Clean white + upvote orange + accepted green + reputation gold + tag colors","Dashboard Style (if applicable)":"Community Analytics Dashboard","Key Considerations":"Question list with vote count. Rich code blocks. Tag filter. Reputation system. Accepted answer highlight. Comment threads. Bookmark/save.","Keywords":"qa, stack-overflow, question-answer, knowledge-sharing, community-qa, expert-answer, upvote, accepted-answer, reputation","Landing Page Pattern":"Feed + Thread View","No":184,"Primary Style Recommendation":"Minimalism + Flat Design","Product Type":"Q&A Community Platform","Secondary Styles":"Dark Mode (OLED), Accessible & Ethical","domain":"products","record_id":"products/184"},{"Color Palette Focus":"Institutional navy + white + research area accent colors + serif headings","Dashboard Style (if applicable)":"N/A - Academic focused","Key Considerations":"PI bio and research focus. Current members grid. Publication list with links. Open positions. Lab facilities photos. Funding acknowledgments.","Keywords":"research-lab, university-department, academic-lab, principal-investigator, lab-members, publications, research-group, pi-page","Landing Page Pattern":"Overview + People + Publications","No":185,"Primary Style Recommendation":"Swiss Modernism 2.0 + Minimalism","Product Type":"Research Lab / University Department","Secondary Styles":"Trust & Authority, Accessible & Ethical","domain":"products","record_id":"products/185"},{"Color Palette Focus":"Professional navy + section accent + success green + clean white","Dashboard Style (if applicable)":"Template Selection Gallery","Key Considerations":"Template picker. Section-by-section editor. Real-time preview. ATS score indicator. PDF export. Cover letter generator. Import from LinkedIn.","Keywords":"resume, cv, builder, job-search, curriculum-vitae, portfolio-resume, cover-letter, career-builder, ats-friendly","Landing Page Pattern":"Interactive Product Demo + CTA","No":186,"Primary Style Recommendation":"Minimalism + Flat Design","Product Type":"Resume / CV Builder","Secondary Styles":"Swiss Modernism 2.0, Trust & Authority","domain":"products","record_id":"products/186"},{"Color Palette Focus":"Brand primary + star gold + positive green + negative red + verified blue","Dashboard Style (if applicable)":"Review Analytics Dashboard","Key Considerations":"Star rating summary with distribution. Verified purchase badge. Photo/video reviews. Helpful/upvote. Filter by rating. Response from business. Sort by recency.","Keywords":"review, rating, yelp, trustpilot, testimonial, customer-review, star-rating, verified-purchase, pros-cons","Landing Page Pattern":"Hero + Rating Summary + Review Feed","No":187,"Primary Style Recommendation":"Flat Design + Vibrant & Block-based","Product Type":"Review Platform","Secondary Styles":"Trust & Authority, Minimalism","domain":"products","record_id":"products/187"},{"Color Palette Focus":"Dark bg + running green + failed red + queued amber + completed blue","Dashboard Style (if applicable)":"Real-Time Monitoring + Process Analytics","Key Considerations":"Bot status grid (running/idle/failed). Queue depth. Process flow visualization. Exception handling alert. ROI metrics. Bot scheduling calendar. Audit trail.","Keywords":"rpa, robotic-process-automation, uipath, automation-anywhere, bot-orchestrator, process-discovery, attended-bot, unattended-bot","Landing Page Pattern":"Bot Fleet Dashboard","No":188,"Primary Style Recommendation":"Dark Mode (OLED) + Data-Dense","Product Type":"RPA / Automation Dashboard","Secondary Styles":"Minimalism, Trust & Authority","domain":"products","record_id":"products/188"},{"Color Palette Focus":"Clean white + question accent + progress green + submit blue","Dashboard Style (if applicable)":"Response Analytics Dashboard","Key Considerations":"Drag-drop form builder. Question type library. Conditional logic visualizer. Theme picker. Response dashboard with charts. Export CSV. Share link/QR/embed.","Keywords":"survey, form-builder, questionnaire, typeform, survey-monkey, poll, feedback-form, multi-step-form, nps-survey, logic-jump","Landing Page Pattern":"Interactive Product Demo","No":189,"Primary Style Recommendation":"Minimalism + Micro-interactions","Product Type":"Survey / Form Builder","Secondary Styles":"Claymorphism, Flat Design","domain":"products","record_id":"products/189"},{"Color Palette Focus":"Calm medical blue + video green + waiting amber + trust white","Dashboard Style (if applicable)":"Healthcare Analytics","Key Considerations":"Video call UI with screen share. Appointment queue. Symptom intake form. Prescription e-delivery. Waiting room with ETA. Post-visit summary. Insurance verification.","Keywords":"telemedicine, telehealth, virtual-visit, remote-consultation, video-doctor, remote-patient-monitoring, telehealth-app","Landing Page Pattern":"Trust & Authority + Conversion","No":190,"Primary Style Recommendation":"Neumorphism + Accessible & Ethical","Product Type":"Telemedicine Platform","Secondary Styles":"Trust & Authority, Soft UI Evolution","domain":"products","record_id":"products/190"},{"Color Palette Focus":"Brand primary + quote accent + star gold + verified blue","Dashboard Style (if applicable)":"Engagement Analytics Dashboard","Key Considerations":"Testimonial cards with photo. Star ratings. Video testimonials. Case study summaries. Filter by industry/product. Embeddable widget code. Auto-rotate carousel.","Keywords":"testimonial, social-proof, wall-of-love, customer-quote, case-study, review-widget, trust-signal, user-story","Landing Page Pattern":"Wall-of-Love Grid","No":191,"Primary Style Recommendation":"Vibrant & Block-based + Flat Design","Product Type":"Testimonial & Social Proof Widget","Secondary Styles":"Motion-Driven, Minimalism","domain":"products","record_id":"products/191"},{"Color Palette Focus":"Event theme colors + available green + sold-out red + seat map neutral","Dashboard Style (if applicable)":"Sales Analytics Dashboard","Key Considerations":"Event cards with date/venue. Interactive seat map. Cart with countdown. QR code ticket. Will-call pickup. Group discounts. Refund policy.","Keywords":"ticketing, box-office, eventbrite, ticket-sales, seat-selection, will-call, qr-ticket, venue-capacity, will-call-pickup","Landing Page Pattern":"Event Grid + Seat Map","No":192,"Primary Style Recommendation":"Vibrant & Block-based + Motion-Driven","Product Type":"Ticketing / Box Office","Secondary Styles":"Dark Mode (OLED), Glassmorphism","domain":"products","record_id":"products/192"},{"Category":"Async Waterfall","Description":"Move await into branches where actually used to avoid blocking unused code paths","Do":"Move await operations into branches where they're needed","Don't":"Await at top of function blocking all branches","Issue":"Defer Await","Keywords":"async await defer branch","No":1,"Platform":"React/Next.js","Severity":"Critical","domain":"react-performance","record_id":"react-performance/1"},{"Category":"Async Waterfall","Description":"Execute independent async operations concurrently using Promise.all()","Do":"Use Promise.all() for independent operations","Don't":"Sequential await for independent operations","Issue":"Promise.all Parallel","Keywords":"promise all parallel concurrent","No":2,"Platform":"React/Next.js","Severity":"Critical","domain":"react-performance","record_id":"react-performance/2"},{"Category":"Async Waterfall","Description":"Use better-all for operations with partial dependencies to maximize parallelism","Do":"Use better-all to start each task at earliest possible moment","Don't":"Wait for unrelated data before starting dependent fetch","Issue":"Dependency Parallelization","Keywords":"better-all dependency parallel","No":3,"Platform":"React/Next.js","Severity":"Critical","domain":"react-performance","record_id":"react-performance/3"},{"Category":"Async Waterfall","Description":"In API routes start independent operations immediately even if not awaited yet","Do":"Start promises early and await late","Don't":"Sequential awaits in API handlers","Issue":"API Route Optimization","Keywords":"api route waterfall promise","No":4,"Platform":"React/Next.js","Severity":"Critical","domain":"react-performance","record_id":"react-performance/4"},{"Category":"Async Waterfall","Description":"Use Suspense to show wrapper UI faster while data loads","Do":"Wrap async components in Suspense boundaries","Don't":"Await data blocking entire page render","Issue":"Suspense Boundaries","Keywords":"suspense streaming boundary","No":5,"Platform":"React/Next.js","Severity":"High","domain":"react-performance","record_id":"react-performance/5"},{"Category":"Bundle Size","Description":"Import directly from source files instead of barrel files to avoid loading unused modules","Do":"Import directly from source path","Don't":"Import from barrel/index files","Issue":"Barrel Imports","Keywords":"barrel import direct path","No":6,"Platform":"React/Next.js","Severity":"Critical","domain":"react-performance","record_id":"react-performance/6"},{"Category":"Bundle Size","Description":"Use next/dynamic to lazy-load large components not needed on initial render","Do":"Use dynamic() for heavy components","Don't":"Import heavy components at top level","Issue":"Dynamic Imports","Keywords":"dynamic import lazy next","No":7,"Platform":"React/Next.js","Severity":"Critical","domain":"react-performance","record_id":"react-performance/7"},{"Category":"Bundle Size","Description":"Load analytics and logging after hydration since they don't block interaction","Do":"Load non-critical scripts after hydration","Don't":"Include analytics in main bundle","Issue":"Defer Third Party","Keywords":"analytics defer third-party","No":8,"Platform":"React/Next.js","Severity":"Medium","domain":"react-performance","record_id":"react-performance/8"},{"Category":"Bundle Size","Description":"Load large data or modules only when a feature is activated","Do":"Dynamic import when feature enabled","Don't":"Import large modules unconditionally","Issue":"Conditional Loading","Keywords":"conditional module lazy","No":9,"Platform":"React/Next.js","Severity":"High","domain":"react-performance","record_id":"react-performance/9"},{"Category":"Bundle Size","Description":"Preload heavy bundles on hover/focus before they're needed","Do":"Preload on user intent signals","Don't":"Load only on click","Issue":"Preload Intent","Keywords":"preload hover focus intent","No":10,"Platform":"React/Next.js","Severity":"Medium","domain":"react-performance","record_id":"react-performance/10"},{"Category":"Server","Description":"Use React.cache() for server-side request deduplication within single request","Do":"Wrap data fetchers with cache()","Don't":"Fetch same data multiple times in tree","Issue":"React.cache Dedup","Keywords":"react cache deduplicate request","No":11,"Platform":"React/Next.js","Severity":"Medium","domain":"react-performance","record_id":"react-performance/11"},{"Category":"Server","Description":"Use LRU cache for data shared across sequential requests","Do":"Use LRU for cross-request caching","Don't":"Refetch same data on every request","Issue":"LRU Cache Cross-Request","Keywords":"lru cache cross request","No":12,"Platform":"React/Next.js","Severity":"High","domain":"react-performance","record_id":"react-performance/12"},{"Category":"Server","Description":"Only pass fields that client actually uses across RSC boundaries","Do":"Pass only needed fields to client components","Don't":"Pass entire objects to client","Issue":"Minimize Serialization","Keywords":"serialization rsc boundary","No":13,"Platform":"React/Next.js","Severity":"High","domain":"react-performance","record_id":"react-performance/13"},{"Category":"Server","Description":"Restructure components to parallelize data fetching in RSC","Do":"Use component composition for parallel fetches","Don't":"Sequential fetches in parent component","Issue":"Parallel Fetching","Keywords":"parallel fetch component composition","No":14,"Platform":"React/Next.js","Severity":"Critical","domain":"react-performance","record_id":"react-performance/14"},{"Category":"Server","Description":"Use Next.js after() to schedule work after response is sent","Do":"Use after() for logging/analytics","Don't":"Block response for non-critical operations","Issue":"After Non-blocking","Keywords":"after non-blocking logging","No":15,"Platform":"React/Next.js","Severity":"Medium","domain":"react-performance","record_id":"react-performance/15"},{"Category":"Client","Description":"Use SWR for automatic request deduplication and caching","Do":"Use useSWR for client data fetching","Don't":"Manual fetch in useEffect","Issue":"SWR Deduplication","Keywords":"swr dedup cache revalidate","No":16,"Platform":"React/Next.js","Severity":"Medium-High","domain":"react-performance","record_id":"react-performance/16"},{"Category":"Client","Description":"Share global event listeners across component instances","Do":"Use useSWRSubscription for shared listeners","Don't":"Register listener per component instance","Issue":"Event Listener Dedup","Keywords":"event listener deduplicate global","No":17,"Platform":"React/Next.js","Severity":"Low","domain":"react-performance","record_id":"react-performance/17"},{"Category":"Rerender","Description":"Don't subscribe to state only used in callbacks","Do":"Read state on-demand in callbacks","Don't":"Subscribe to state used only in handlers","Issue":"Defer State Reads","Keywords":"state read callback subscription","No":18,"Platform":"React/Next.js","Severity":"Medium","domain":"react-performance","record_id":"react-performance/18"},{"Category":"Rerender","Description":"Extract expensive work into memoized components for early returns","Do":"Extract to memo() components","Don't":"Compute expensive values before early return","Issue":"Memoized Components","Keywords":"memo extract expensive","No":19,"Platform":"React/Next.js","Severity":"Medium","domain":"react-performance","record_id":"react-performance/19"},{"Category":"Rerender","Description":"Specify primitive dependencies instead of objects in effects","Do":"Use primitive values in dependency arrays","Don't":"Use object references as dependencies","Issue":"Narrow Dependencies","Keywords":"effect dependency primitive","No":20,"Platform":"React/Next.js","Severity":"Low","domain":"react-performance","record_id":"react-performance/20"},{"Category":"Rerender","Description":"Subscribe to derived booleans instead of continuous values","Do":"Use derived boolean state","Don't":"Subscribe to continuous values","Issue":"Derived State","Keywords":"derived boolean subscription","No":21,"Platform":"React/Next.js","Severity":"Medium","domain":"react-performance","record_id":"react-performance/21"},{"Category":"Rerender","Description":"Use functional setState updates for stable callbacks and no stale closures","Do":"Use functional form: setState(curr => ...)","Don't":"Reference state directly in setState","Issue":"Functional setState","Keywords":"functional setstate callback","No":22,"Platform":"React/Next.js","Severity":"Medium","domain":"react-performance","record_id":"react-performance/22"},{"Category":"Rerender","Description":"Pass function to useState for expensive initial values","Do":"Use function form for expensive init","Don't":"Compute expensive value directly","Issue":"Lazy State Init","Keywords":"usestate lazy initialization","No":23,"Platform":"React/Next.js","Severity":"Medium","domain":"react-performance","record_id":"react-performance/23"},{"Category":"Rerender","Description":"Mark frequent non-urgent state updates as transitions","Do":"Use startTransition for non-urgent updates","Don't":"Block UI on every state change","Issue":"Transitions","Keywords":"starttransition non-urgent","No":24,"Platform":"React/Next.js","Severity":"Medium","domain":"react-performance","record_id":"react-performance/24"},{"Category":"Rendering","Description":"Wrap SVG in div and animate wrapper for hardware acceleration","Do":"Animate div wrapper around SVG","Don't":"Animate SVG element directly","Issue":"SVG Animation Wrapper","Keywords":"svg animation wrapper div","No":25,"Platform":"React/Next.js","Severity":"Low","domain":"react-performance","record_id":"react-performance/25"},{"Category":"Rendering","Description":"Apply content-visibility: auto to defer off-screen rendering","Do":"Use content-visibility for long lists","Don't":"Render all list items immediately","Issue":"Content Visibility","Keywords":"content-visibility auto","No":26,"Platform":"React/Next.js","Severity":"High","domain":"react-performance","record_id":"react-performance/26"},{"Category":"Rendering","Description":"Extract static JSX outside components to avoid re-creation","Do":"Hoist static elements to module scope","Don't":"Create static elements inside components","Issue":"Hoist Static JSX","Keywords":"hoist static jsx element","No":27,"Platform":"React/Next.js","Severity":"Low","domain":"react-performance","record_id":"react-performance/27"},{"Category":"Rendering","Description":"Use inline script to set client-only data before hydration","Do":"Inject sync script for client-only values","Don't":"Use useEffect causing flash","Issue":"Hydration No Flicker","Keywords":"hydration mismatch flicker","No":28,"Platform":"React/Next.js","Severity":"Medium","domain":"react-performance","record_id":"react-performance/28"},{"Category":"Rendering","Description":"Use ternary instead of && when condition can be 0 or NaN","Do":"Use explicit ternary for conditionals","Don't":"Use && with potentially falsy numbers","Issue":"Conditional Render","Keywords":"conditional render ternary","No":29,"Platform":"React/Next.js","Severity":"Low","domain":"react-performance","record_id":"react-performance/29"},{"Category":"Rendering","Description":"Use Activity component to preserve state/DOM for toggled components","Do":"Use Activity for expensive toggle components","Don't":"Unmount/remount on visibility toggle","Issue":"Activity Component","Keywords":"activity show hide preserve","No":30,"Platform":"React/Next.js","Severity":"Medium","domain":"react-performance","record_id":"react-performance/30"},{"Category":"JS Perf","Description":"Group CSS changes via classes or cssText to minimize reflows","Do":"Use class toggle or cssText","Don't":"Change styles one property at a time","Issue":"Batch DOM CSS","Keywords":"batch dom css reflow","No":31,"Platform":"React/Next.js","Severity":"Medium","domain":"react-performance","record_id":"react-performance/31"},{"Category":"JS Perf","Description":"Build Map for repeated lookups instead of multiple .find() calls","Do":"Build index Map for O(1) lookups","Don't":"Use .find() in loops","Issue":"Index Map Lookup","Keywords":"map index lookup find","No":32,"Platform":"React/Next.js","Severity":"Low-Medium","domain":"react-performance","record_id":"react-performance/32"},{"Category":"JS Perf","Description":"Cache object property lookups in hot paths","Do":"Cache values before loops","Don't":"Access nested properties in loops","Issue":"Cache Property Access","Keywords":"cache property loop","No":33,"Platform":"React/Next.js","Severity":"Low-Medium","domain":"react-performance","record_id":"react-performance/33"},{"Category":"JS Perf","Description":"Use module-level Map to cache repeated function results","Do":"Use Map cache for repeated calls","Don't":"Recompute same values repeatedly","Issue":"Cache Function Results","Keywords":"memoize cache function","No":34,"Platform":"React/Next.js","Severity":"Medium","domain":"react-performance","record_id":"react-performance/34"},{"Category":"JS Perf","Description":"Cache localStorage/sessionStorage reads in memory","Do":"Cache storage reads in Map","Don't":"Read storage on every call","Issue":"Cache Storage API","Keywords":"localstorage cache read","No":35,"Platform":"React/Next.js","Severity":"Low-Medium","domain":"react-performance","record_id":"react-performance/35"},{"Category":"JS Perf","Description":"Combine multiple filter/map into single loop","Do":"Single loop for multiple categorizations","Don't":"Chain multiple filter() calls","Issue":"Combine Iterations","Keywords":"combine filter map loop","No":36,"Platform":"React/Next.js","Severity":"Low-Medium","domain":"react-performance","record_id":"react-performance/36"},{"Category":"JS Perf","Description":"Check array lengths before expensive comparisons","Do":"Early return if lengths differ","Don't":"Always run expensive comparison","Issue":"Length Check First","Keywords":"length check array compare","No":37,"Platform":"React/Next.js","Severity":"Medium-High","domain":"react-performance","record_id":"react-performance/37"},{"Category":"JS Perf","Description":"Return early when result is determined to skip processing","Do":"Return immediately on first error","Don't":"Process all items then check errors","Issue":"Early Return","Keywords":"early return exit function","No":38,"Platform":"React/Next.js","Severity":"Low-Medium","domain":"react-performance","record_id":"react-performance/38"},{"Category":"JS Perf","Description":"Don't create RegExp inside render - hoist or memoize","Do":"Hoist RegExp to module scope","Don't":"Create RegExp every render","Issue":"Hoist RegExp","Keywords":"regexp hoist module","No":39,"Platform":"React/Next.js","Severity":"Low-Medium","domain":"react-performance","record_id":"react-performance/39"},{"Category":"JS Perf","Description":"Use loop for min/max instead of sort - O(n) vs O(n log n)","Do":"Single pass loop for min/max","Don't":"Sort array to find min/max","Issue":"Loop Min Max","Keywords":"loop min max sort","No":40,"Platform":"React/Next.js","Severity":"Low","domain":"react-performance","record_id":"react-performance/40"},{"Category":"JS Perf","Description":"Use Set/Map for O(1) lookups instead of array.includes()","Do":"Convert to Set for membership checks","Don't":"Use .includes() for repeated checks","Issue":"Set Map Lookups","Keywords":"set map includes has","No":41,"Platform":"React/Next.js","Severity":"Low-Medium","domain":"react-performance","record_id":"react-performance/41"},{"Category":"JS Perf","Description":"Use toSorted() instead of sort() to avoid mutating arrays","Do":"Use toSorted() for immutability","Don't":"Mutate arrays with sort()","Issue":"toSorted Immutable","Keywords":"tosorted sort immutable","No":42,"Platform":"React/Next.js","Severity":"Medium-High","domain":"react-performance","record_id":"react-performance/42"},{"Category":"Advanced","Description":"Store callbacks in refs for stable effect subscriptions","Do":"Use useEffectEvent for stable handlers","Don't":"Re-subscribe on every callback change","Issue":"Event Handler Refs","Keywords":"useeffectevent ref handler","No":43,"Platform":"React/Next.js","Severity":"Low","domain":"react-performance","record_id":"react-performance/43"},{"Category":"Advanced","Description":"Access latest values in callbacks without adding to dependency arrays","Do":"Use useLatest for fresh values in stable callbacks","Don't":"Add callback to effect dependencies","Issue":"useLatest Hook","Keywords":"uselatest ref callback","No":44,"Platform":"React/Next.js","Severity":"Low","domain":"react-performance","record_id":"react-performance/44"},{"Accessibility":"✓ WCAG AAA","Best For":"Enterprise apps, dashboards, documentation sites, SaaS platforms, professional tools","Complexity":"Low","Conversion-Focused":"◐ Medium","Dark Mode ✓":"✓ Full","Design System Variables":"--spacing: 2rem, --border-radius: 0px, --font-weight: 400-700, --shadow: none, --accent-color: single primary only","Do Not Use For":"Creative portfolios, entertainment, playful brands, artistic experiments","Effects & Animation":"Subtle hover (200-250ms), smooth transitions, sharp shadows if any, clear type hierarchy, fast loading","Era/Origin":"1950s Swiss","Framework Compatibility":"Tailwind 10/10, Bootstrap 9/10, MUI 9/10","Implementation Checklist":"☐ Grid-based layout 12-16 columns, ☐ Typography hierarchy clear, ☐ No unnecessary decorations, ☐ WCAG AAA contrast verified, ☐ Mobile responsive grid","Keywords":"Clean, simple, spacious, functional, white space, high contrast, geometric, sans-serif, grid-based, essential","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":1,"Performance":"⚡ Excellent","Primary Colors":"Monochromatic, Black #000000, White #FFFFFF","Secondary Colors":"Neutral (Beige #F5F1E8, Grey #808080, Taupe #B38B6D), Primary accent","Style Category":"Minimalism & Swiss Style","Type":"General","domain":"styles","record_id":"styles/1"},{"Accessibility":"⚠ Low contrast","Best For":"Health/wellness apps, meditation platforms, fitness trackers, minimal interaction UIs","Complexity":"Medium","Conversion-Focused":"◐ Medium","Dark Mode ✓":"◐ Partial","Design System Variables":"--border-radius: 14px, --shadow-soft-1: -5px -5px 15px, --shadow-soft-2: 5px 5px 15px, --color-light: #F5F5F5, --color-primary: single pastel","Do Not Use For":"Complex apps, critical accessibility, data-heavy dashboards, high-contrast required","Effects & Animation":"Soft box-shadow (multiple: -5px -5px 15px, 5px 5px 15px), smooth press (150ms), inner subtle shadow","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 8/10, CSS-in-JS 9/10","Implementation Checklist":"☐ Rounded corners 12-16px consistent, ☐ Multiple shadow layers (2-3), ☐ Pastel color verified, ☐ Monochromatic palette checked, ☐ Press animation smooth 150ms","Keywords":"Soft UI, embossed, debossed, convex, concave, light source, subtle depth, rounded (12-16px), monochromatic","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Good","No":2,"Performance":"⚡ Good","Primary Colors":"Light pastels: Soft Blue #C8E0F4, Soft Pink #F5E0E8, Soft Grey #E8E8E8","Secondary Colors":"Tints/shades (±30%), gradient subtlety, color harmony","Style Category":"Neumorphism","Type":"General","domain":"styles","record_id":"styles/2"},{"Accessibility":"⚠ Ensure 4.5:1","Best For":"Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, navigation","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--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","Do Not Use For":"Low-contrast backgrounds, critical accessibility, performance-limited, dark text on dark","Effects & Animation":"Backdrop blur (10-20px), subtle border (1px solid rgba white 0.2), light reflection, Z-depth","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 9/10, MUI 8/10, Chakra 8/10","Implementation Checklist":"☐ Backdrop-filter blur 10-20px, ☐ Translucent white 15-30% opacity, ☐ Subtle border 1px light, ☐ Vibrant background verified, ☐ Text contrast 4.5:1 checked","Keywords":"Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Good","No":3,"Performance":"⚠ Good","Primary Colors":"Translucent white: rgba(255,255,255,0.1-0.3)","Secondary Colors":"Vibrant: Electric Blue #0080FF, Neon Purple #8B00FF, Vivid Pink #FF1493, Teal #20B2AA","Style Category":"Glassmorphism","Type":"General","domain":"styles","record_id":"styles/3"},{"Accessibility":"✓ WCAG AAA","Best For":"Design portfolios, artistic projects, counter-culture brands, editorial/media sites, tech blogs","Complexity":"Low","Conversion-Focused":"✗ Low","Dark Mode ✓":"✓ Full","Design System Variables":"--border-radius: 0px, --transition-duration: 0s, --font-weight: 700-900, --colors: primary only, --border-style: visible, --grid-visible: true","Do Not Use For":"Corporate environments, conservative industries, critical accessibility, customer-facing professional","Effects & Animation":"No smooth transitions (instant), sharp corners (0px), bold typography (700+), visible grid, large blocks","Era/Origin":"1950s Brutalist","Framework Compatibility":"Tailwind 10/10, Bootstrap 7/10","Implementation Checklist":"☐ No border-radius (0px), ☐ No transitions (instant), ☐ Bold typography (700+), ☐ Pure primary colors used, ☐ Visible grid/borders, ☐ Asymmetric layout intentional","Keywords":"Raw, unpolished, stark, high contrast, plain text, default fonts, visible borders, asymmetric, anti-design","Light Mode ✓":"✓ Full","Mobile-Friendly":"◐ Medium","No":4,"Performance":"⚡ Excellent","Primary Colors":"Primary: Red #FF0000, Blue #0000FF, Yellow #FFFF00, Black #000000, White #FFFFFF","Secondary Colors":"Limited: Neon Green #00FF00, Hot Pink #FF00FF, minimal secondary","Style Category":"Brutalism","Type":"General","domain":"styles","record_id":"styles/4"},{"Accessibility":"⚠ Not accessible","Best For":"Gaming, product showcase, immersive experiences, high-end e-commerce, architectural viz, VR/AR","Complexity":"High","Conversion-Focused":"◐ Medium","Dark Mode ✓":"◐ Partial","Design System Variables":"--perspective: 1000px, --parallax-layers: 5, --lighting-intensity: realistic, --shadow-depth: 20-40%, --animation-duration: 300-400ms","Do Not Use For":"Low-end mobile, performance-limited, critical accessibility, data tables/forms","Effects & Animation":"WebGL/Three.js 3D, realistic shadows (layers), physics lighting, parallax (3-5 layers), smooth 3D (300-400ms)","Era/Origin":"2020s Modern","Framework Compatibility":"Three.js 10/10, R3F 10/10, Babylon.js 10/10","Implementation Checklist":"☐ WebGL/Three.js integrated, ☐ 3D models loaded, ☐ Parallax 3-5 layers, ☐ Realistic lighting verified, ☐ Complex shadows rendered, ☐ Physics animation smooth 300-400ms","Keywords":"Depth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic elements, rich detail, immersive","Light Mode ✓":"◐ Partial","Mobile-Friendly":"✗ Low","No":5,"Performance":"❌ Poor","Primary Colors":"Deep Navy #001F3F, Forest Green #228B22, Burgundy #800020, Gold #FFD700, Silver #C0C0C0","Secondary Colors":"Complex gradients (5-10 stops), realistic lighting, shadow variations (20-40% darker)","Style Category":"3D & Hyperrealism","Type":"General","domain":"styles","record_id":"styles/5"},{"Accessibility":"◐ Ensure WCAG","Best For":"Startups, creative agencies, gaming, social media, youth-focused, entertainment, consumer","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--block-gap: 48px, --typography-size: 32px+, --color-palette: 4-6 vibrant colors, --animation: continuous pattern, --contrast-ratio: 7:1+","Do Not Use For":"Financial institutions, healthcare, formal business, government, conservative, elderly","Effects & Animation":"Large sections (48px+ gaps), animated patterns, bold hover (color shift), scroll-snap, large type (32px+), 200-300ms","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 10/10, Chakra 9/10, Styled 9/10","Implementation Checklist":"☐ Block layout with 48px+ gaps, ☐ Large typography 32px+, ☐ 4-6 vibrant colors max, ☐ Animated patterns active, ☐ Scroll-snap enabled, ☐ High contrast verified (7:1+)","Keywords":"Bold, energetic, playful, block layout, geometric shapes, high color contrast, duotone, modern, energetic","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":6,"Performance":"⚡ Good","Primary Colors":"Neon Green #39FF14, Electric Purple #BF00FF, Vivid Pink #FF1493, Bright Cyan #00FFFF, Sunburst #FFAA00","Secondary Colors":"Complementary: Orange #FF7F00, Shocking Pink #FF006E, Lime #CCFF00, triadic schemes","Style Category":"Vibrant & Block-based","Type":"General","domain":"styles","record_id":"styles/6"},{"Accessibility":"✓ WCAG AAA","Best For":"Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light","Complexity":"Low","Conversion-Focused":"◐ Low","Dark Mode ✓":"✓ Only","Design System Variables":"--bg-black: #000000, --bg-dark-grey: #121212, --text-primary: #FFFFFF, --accent-neon: neon colors, --glow-effect: minimal, --oled-optimized: true","Do Not Use For":"Print-first content, high-brightness outdoor, color-accuracy-critical","Effects & Animation":"Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions, low white emission, high readability, visible focus","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 10/10, MUI 10/10, Chakra 10/10","Implementation Checklist":"☐ Deep black #000000 or #121212, ☐ Vibrant neon accents used, ☐ Text contrast 7:1+, ☐ Minimal glow effects, ☐ OLED power optimization, ☐ No white (#FFFFFF) background","Keywords":"Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, night mode, power efficient","Light Mode ✓":"✗ No","Mobile-Friendly":"✓ High","No":7,"Performance":"⚡ Excellent","Primary Colors":"Deep Black #000000, Dark Grey #121212, Midnight Blue #0A0E27","Secondary Colors":"Vibrant accents: Neon Green #39FF14, Electric Blue #0080FF, Gold #FFD700, Plasma Purple #BF00FF","Style Category":"Dark Mode (OLED)","Type":"General","domain":"styles","record_id":"styles/7"},{"Accessibility":"✓ WCAG AAA","Best For":"Government, healthcare, education, inclusive products, large audience, legal compliance, public","Complexity":"Low","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--contrast-ratio: 7:1, --font-size-min: 16px, --focus-ring: 3-4px, --touch-target: 44x44px, --wcag-level: AAA, --keyboard-accessible: true, --sr-tested: true","Do Not Use For":"None - accessibility universal","Effects & Animation":"Clear focus rings (3-4px), ARIA labels, skip links, responsive design, reduced motion, 44x44px touch targets","Era/Origin":"Universal","Framework Compatibility":"All frameworks 10/10","Implementation Checklist":"☐ WCAG AAA verified, ☐ 7:1+ contrast checked, ☐ Keyboard navigation tested, ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ Semantic HTML used, ☐ Touch targets 44x44px","Keywords":"High contrast, large text (16px+), keyboard navigation, screen reader friendly, WCAG compliant, focus state, semantic","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":8,"Performance":"⚡ Excellent","Primary Colors":"WCAG AA/AAA (4.5:1 min), simple primary, clear secondary, high luminosity (7:1+)","Secondary Colors":"Symbol-based colors (not color-only), supporting patterns, inclusive combinations","Style Category":"Accessible & Ethical","Type":"General","domain":"styles","record_id":"styles/8"},{"Accessibility":"⚠ Ensure 4.5:1","Best For":"Educational apps, children's apps, SaaS platforms, creative tools, fun-focused, onboarding, casual games","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"◐ Partial","Design System Variables":"--border-radius: 20px, --border-width: 3-4px, --shadow-inner: inset -2px -2px 8px, --shadow-outer: 4px 4px 8px, --color-palette: pastels, --animation: bounce","Do Not Use For":"Formal corporate, professional services, data-critical, serious/medical, legal apps, finance","Effects & Animation":"Inner+outer shadows (subtle, no hard lines), soft press (200ms ease-out), fluffy elements, smooth transitions","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 9/10, CSS-in-JS 9/10","Implementation Checklist":"☐ Border-radius 16-24px, ☐ Thick borders 3-4px, ☐ Double shadows (inner+outer), ☐ Pastel colors used, ☐ Soft bounce animations, ☐ Playful interactions","Keywords":"Soft 3D, chunky, playful, toy-like, bubbly, thick borders (3-4px), double shadows, rounded (16-24px)","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":9,"Performance":"⚡ Good","Primary Colors":"Pastel: Soft Peach #FDBCB4, Baby Blue #ADD8E6, Mint #98FF98, Lilac #E6E6FA, light BG","Secondary Colors":"Soft gradients (pastel-to-pastel), light/dark variations (20-30%), gradient subtle","Style Category":"Claymorphism","Type":"General","domain":"styles","record_id":"styles/9"},{"Accessibility":"⚠ Text contrast","Best For":"Modern SaaS, creative agencies, branding, music platforms, lifestyle, premium products, hero sections","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--gradient-colors: complementary pairs, --animation-duration: 8-12s, --blend-mode: screen, --color-saturation: 1.2, --effect: iridescent, --loop-smooth: true","Do Not Use For":"Data-heavy dashboards, critical accessibility, content-heavy where distraction issues","Effects & Animation":"Large flowing CSS/SVG gradients, subtle 8-12s animations, depth via color layering, smooth morph","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 9/10, CSS-in-JS 10/10","Implementation Checklist":"☐ Mesh/flowing gradients applied, ☐ 8-12s animation loop, ☐ Complementary colors used, ☐ Smooth color transitions, ☐ Iridescent effect subtle, ☐ Text contrast verified","Keywords":"Vibrant gradients, smooth blend, Northern Lights effect, mesh gradient, luminous, atmospheric, abstract","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Good","No":10,"Performance":"⚠ Good","Primary Colors":"Complementary: Blue-Orange, Purple-Yellow, Electric Blue #0080FF, Magenta #FF1493, Cyan #00FFFF","Secondary Colors":"Smooth transitions (Blue→Purple→Pink→Teal), iridescent effects, blend modes (screen, multiply)","Style Category":"Aurora UI","Type":"General","domain":"styles","record_id":"styles/10"},{"Accessibility":"⚠ High contrast/strain","Best For":"Gaming, entertainment, music platforms, tech brands, artistic projects, nostalgic, cyberpunk","Complexity":"Medium","Conversion-Focused":"◐ Medium","Dark Mode ✓":"✓ Dark focused","Design System Variables":"--neon-colors: #0080FF #FF006E #00FFFF, --background: #000000, --font-family: monospace, --effect: glitch+glow, --scanline-opacity: 0.3, --crt-effect: true","Do Not Use For":"Conservative industries, critical accessibility, professional/corporate, elderly, legal/finance","Effects & Animation":"CRT scanlines (::before overlay), neon glow (text-shadow+box-shadow), glitch effects (skew/offset keyframes)","Era/Origin":"1980s Retro","Framework Compatibility":"Tailwind 8/10, CSS-in-JS 9/10","Implementation Checklist":"☐ Neon colors used, ☐ CRT scanlines effect, ☐ Glitch animations active, ☐ Monospace font, ☐ Deep black background, ☐ Glow effects applied, ☐ 80s patterns present","Keywords":"Vintage sci-fi, 80s aesthetic, neon glow, geometric patterns, CRT scanlines, pixel art, cyberpunk, synthwave","Light Mode ✓":"✓ Full","Mobile-Friendly":"◐ Medium","No":11,"Performance":"⚠ Moderate","Primary Colors":"Neon Blue #0080FF, Hot Pink #FF006E, Cyan #00FFFF, Deep Black #1A1A2E, Purple #5D34D0","Secondary Colors":"Metallic Silver #C0C0C0, Gold #FFD700, duotone, 80s Pink #FF10F0, neon accents","Style Category":"Retro-Futurism","Type":"General","domain":"styles","record_id":"styles/11"},{"Accessibility":"✓ WCAG AAA","Best For":"Web apps, mobile apps, cross-platform, startup MVPs, user-friendly, SaaS, dashboards, corporate","Complexity":"Low","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--shadow: none, --color-palette: 4-6 solid, --border-radius: 2px, --gradient: none, --icons: simplified SVG, --animation: minimal 150-200ms","Do Not Use For":"Complex 3D, premium/luxury, artistic portfolios, immersive experiences, high-detail","Effects & Animation":"No gradients/shadows, simple hover (color/opacity shift), fast loading, clean transitions (150-200ms ease), minimal icons","Era/Origin":"2010s Modern","Framework Compatibility":"Tailwind 10/10, Bootstrap 10/10, MUI 9/10","Implementation Checklist":"☐ No shadows/gradients, ☐ 4-6 solid colors max, ☐ Clean lines consistent, ☐ Simple shapes used, ☐ Icon-heavy layout, ☐ High saturation colors, ☐ Fast loading verified","Keywords":"2D, minimalist, bold colors, no shadows, clean lines, simple shapes, typography-focused, modern, icon-heavy","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":12,"Performance":"⚡ Excellent","Primary Colors":"Solid bright: Red, Orange, Blue, Green, limited palette (4-6 max)","Secondary Colors":"Complementary colors, muted secondaries, high saturation, clean accents","Style Category":"Flat Design","Type":"General","domain":"styles","record_id":"styles/12"},{"Accessibility":"⚠ Textures reduce readability","Best For":"Legacy apps, gaming, immersive storytelling, premium products, luxury, realistic simulations, education","Complexity":"High","Conversion-Focused":"◐ Medium","Dark Mode ✓":"◐ Partial","Design System Variables":"--gradient-stops: 8-12, --texture-overlay: noise+grain, --shadow-layers: 3+, --animation-duration: 300-500ms, --depth-effect: pronounced, --tactile: true","Do Not Use For":"Modern enterprise, critical accessibility, low-performance, web (use Flat/Modern)","Effects & Animation":"Realistic shadows (layers), depth (perspective), texture details (noise, grain), realistic animations (300-500ms)","Era/Origin":"2007-2012 iOS","Framework Compatibility":"CSS-in-JS 7/10, Custom 8/10","Implementation Checklist":"☐ Realistic textures applied, ☐ Complex gradients 8-12 stops, ☐ Multi-layer shadows, ☐ Texture overlays present, ☐ Tactile animations smooth, ☐ Depth effect pronounced","Keywords":"Realistic, texture, depth, 3D appearance, real-world metaphors, shadows, gradients, tactile, detailed, material","Light Mode ✓":"◐ Partial","Mobile-Friendly":"✗ Low","No":13,"Performance":"❌ Poor","Primary Colors":"Rich realistic: wood, leather, metal colors, detailed gradients (8-12 stops), metallic effects","Secondary Colors":"Realistic lighting gradients, shadow variations (30-50% darker), texture overlays, material colors","Style Category":"Skeuomorphism","Type":"General","domain":"styles","record_id":"styles/13"},{"Accessibility":"⚠ Text contrast","Best For":"Premium SaaS, high-end e-commerce, creative platforms, branding experiences, luxury portfolios","Complexity":"High","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--morph-duration: 400-600ms, --blur-amount: 15px, --chromatic-aberration: true, --iridescent: true, --blend-mode: screen, --smooth-transitions: true","Do Not Use For":"Performance-limited, critical accessibility, complex data, budget projects","Effects & Animation":"Morphing elements (SVG/CSS), fluid animations (400-600ms curves), dynamic blur (backdrop-filter), color transitions","Era/Origin":"2020s Modern","Framework Compatibility":"Framer Motion 10/10, GSAP 10/10","Implementation Checklist":"☐ Morphing animations 400-600ms, ☐ Chromatic aberration applied, ☐ Dynamic blur active, ☐ Iridescent gradients, ☐ Smooth color transitions, ☐ Premium feel achieved","Keywords":"Flowing glass, morphing, smooth transitions, fluid effects, translucent, animated blur, iridescent, chromatic aberration","Light Mode ✓":"✓ Full","Mobile-Friendly":"◐ Medium","No":14,"Performance":"⚠ Moderate-Poor","Primary Colors":"Vibrant iridescent (rainbow spectrum), translucent base with opacity shifts, gradient fluidity","Secondary Colors":"Chromatic aberration (Red-Cyan), iridescent oil-spill, fluid gradient blends, holographic effects","Style Category":"Liquid Glass","Type":"General","domain":"styles","record_id":"styles/14"},{"Accessibility":"⚠ Prefers-reduced-motion","Best For":"Portfolio sites, storytelling platforms, interactive experiences, entertainment apps, creative, SaaS","Complexity":"High","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--animation-duration: 300-400ms, --parallax-layers: 5, --scroll-behavior: smooth, --gpu-accelerated: true, --entrance-animation: true, --page-transition: smooth","Do Not Use For":"Data dashboards, critical accessibility, low-power devices, content-heavy, motion-sensitive","Effects & Animation":"Scroll anim (Intersection Observer), hover (300-400ms), entrance, parallax (3-5 layers), page transitions","Era/Origin":"2020s Modern","Framework Compatibility":"GSAP 10/10, Framer Motion 10/10","Implementation Checklist":"☐ Scroll animations active, ☐ Parallax 3-5 layers, ☐ Entrance animations smooth, ☐ Page transitions fluid, ☐ GPU accelerated, ☐ Prefers-reduced-motion respected","Keywords":"Animation-heavy, microinteractions, smooth transitions, scroll effects, parallax, entrance anim, page transitions","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Good","No":15,"Performance":"⚠ Good","Primary Colors":"Bold colors emphasize movement, high contrast animated, dynamic gradients, accent action colors","Secondary Colors":"Transitional states, success (Green #22C55E), error (Red #EF4444), neutral feedback","Style Category":"Motion-Driven","Type":"General","domain":"styles","record_id":"styles/15"},{"Accessibility":"✓ Good","Best For":"Mobile apps, touchscreen UIs, productivity tools, user-friendly, consumer apps, interactive components","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--micro-animation-duration: 50-100ms, --gesture-responsive: true, --haptic-feedback: true, --loading-animation: smooth, --state-feedback: success+error","Do Not Use For":"Desktop-only, critical performance, accessibility-first (alternatives needed)","Effects & Animation":"Small hover (50-100ms), loading spinners, success/error state anim, gesture-triggered (swipe/pinch), haptic","Era/Origin":"2020s Modern","Framework Compatibility":"Framer Motion 10/10, React Spring 9/10","Implementation Checklist":"☐ Micro-animations 50-100ms, ☐ Gesture-responsive, ☐ Tactile feedback visual/haptic, ☐ Loading spinners smooth, ☐ Success/error states clear, ☐ Hover effects subtle","Keywords":"Small animations, gesture-based, tactile feedback, subtle animations, contextual interactions, responsive","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":16,"Performance":"⚡ Excellent","Primary Colors":"Subtle color shifts (10-20%), feedback: Green #22C55E, Red #EF4444, Amber #F59E0B","Secondary Colors":"Accent feedback, neutral supporting, clear action indicators","Style Category":"Micro-interactions","Type":"General","domain":"styles","record_id":"styles/16"},{"Accessibility":"✓ WCAG AAA","Best For":"Public services, education, healthcare, finance, government, accessible consumer, inclusive","Complexity":"Low","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--contrast-ratio: 7:1, --font-size: 16px+, --keyboard-accessible: true, --sr-compatible: true, --wcag-level: AAA, --color-symbols: true, --haptic: enabled","Do Not Use For":"None - accessibility universal","Effects & Animation":"Haptic feedback (vibration), voice guidance, focus indicators (4px+ ring), motion options, alt content, semantic","Era/Origin":"Universal","Framework Compatibility":"All frameworks 10/10","Implementation Checklist":"☐ WCAG AAA verified, ☐ 7:1+ contrast all text, ☐ Keyboard accessible (Tab/Enter), ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ No color-only indicators, ☐ Haptic fallback","Keywords":"Accessible, color-blind friendly, high contrast, haptic feedback, voice interaction, screen reader, WCAG AAA, universal","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":17,"Performance":"⚡ Excellent","Primary Colors":"WCAG AAA (7:1+ contrast), avoid red-green only, symbol-based indicators, high contrast primary","Secondary Colors":"Supporting patterns (stripes, dots, hatch), symbols, combinations, clear non-color indicators","Style Category":"Inclusive Design","Type":"General","domain":"styles","record_id":"styles/17"},{"Accessibility":"✓ Excellent","Best For":"Voice assistants, AI platforms, future-forward UX, smart home, contextual computing, ambient experiences","Complexity":"Low","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--voice-ui: enabled, --gesture-detection: active, --ai-predictions: smart, --progressive-disclosure: true, --visible-ui: minimal, --context-aware: true","Do Not Use For":"Complex workflows, data-entry heavy, traditional systems, legacy support, explicit control","Effects & Animation":"Voice recognition UI, gesture detection, AI predictions (smooth reveal), progressive disclosure, smart suggestions","Era/Origin":"2020s AI-Era","Framework Compatibility":"Tailwind 10/10, Custom 10/10","Implementation Checklist":"☐ Voice commands responsive, ☐ Gesture detection active, ☐ AI predictions hidden/revealed, ☐ Progressive disclosure working, ☐ Minimal visible UI, ☐ Smart suggestions contextual","Keywords":"Minimal visible UI, voice-first, gesture-based, AI-driven, invisible controls, predictive, context-aware, ambient","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":18,"Performance":"⚡ Excellent","Primary Colors":"Neutral backgrounds: Soft white #FAFAFA, light grey #F0F0F0, warm off-white #F5F1E8","Secondary Colors":"Subtle feedback: light green, light red, minimal UI elements, soft accents","Style Category":"Zero Interface","Type":"General","domain":"styles","record_id":"styles/18"},{"Accessibility":"✓ WCAG AA+","Best For":"Modern enterprise apps, SaaS platforms, health/wellness, modern business tools, professional, hybrid","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--shadow-soft: modern blend, --border-radius: 10px, --animation-duration: 200-300ms, --contrast-ratio: 4.5:1+, --color-hierarchy: improved, --wcag-level: AA+","Do Not Use For":"Extreme minimalism, critical performance, systems without modern OS","Effects & Animation":"Improved shadows (softer than flat, clearer than neumorphism), modern (200-300ms), focus visible, WCAG AA/AAA","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 9/10, MUI 9/10, Chakra 9/10","Implementation Checklist":"☐ Improved contrast AA/AAA, ☐ Soft shadows modern, ☐ Border-radius 8-12px, ☐ Animations 200-300ms, ☐ Focus states visible, ☐ Color hierarchy clear","Keywords":"Evolved soft UI, better contrast, modern aesthetics, subtle depth, accessibility-focused, improved shadows, hybrid","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":19,"Performance":"⚡ Excellent","Primary Colors":"Improved contrast pastels: Soft Blue #87CEEB, Soft Pink #FFB6C1, Soft Green #90EE90, better hierarchy","Secondary Colors":"Better combinations, accessible secondary, supporting with improved contrast, modern accents","Style Category":"Soft UI Evolution","Type":"General","domain":"styles","record_id":"styles/19"},{"Accessibility":"✓ WCAG AA","Best For":"SaaS landing pages, product launches, service landing pages, B2B platforms, tech companies","Complexity":"Medium","Conversion-Focused":"✓ Very High","Dark Mode ✓":"✓ Full","Design System Variables":"--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)","Do Not Use For":"Complex navigation, multi-page experiences, data-heavy applications","Effects & Animation":"Smooth scroll reveal, fade-in animations on hero, subtle background parallax, CTA glow/pulse effect","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 10/10, Bootstrap 9/10","Implementation Checklist":"☐ Hero section full viewport height, ☐ Headline visible above fold, ☐ CTA button high contrast, ☐ Background image optimized (WebP), ☐ Text readable on background, ☐ Mobile responsive layout","Keywords":"Large hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video, dramatic visual","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Full","No":20,"Performance":"⚡ Good","Primary Colors":"Brand primary color, white/light backgrounds for contrast, accent color for CTA","Secondary Colors":"Supporting colors for secondary CTAs, accent highlights, trust elements (testimonials, logos)","Style Category":"Hero-Centric Design","Type":"Landing Page","domain":"styles","record_id":"styles/20"},{"Accessibility":"✓ WCAG AA","Best For":"E-commerce product pages, free trial signups, lead generation, SaaS pricing pages, limited-time offers","Complexity":"Medium","Conversion-Focused":"✓ Very High","Dark Mode ✓":"✓ Full","Design System Variables":"--cta-color: high contrast primary, --form-max-width: 600px, --input-height: 48px, --focus-ring: 3px solid accent, --success-color: #22C55E, --error-color: #EF4444","Do Not Use For":"Complex feature explanations, multi-product showcases, technical documentation","Effects & Animation":"Hover states on CTA (color shift, slight scale), form field focus animations, loading spinner, success feedback","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 10/10, Bootstrap 9/10","Implementation Checklist":"☐ Single primary CTA visible, ☐ Form fields minimal (3-5), ☐ Trust badges present, ☐ Social proof above fold, ☐ Mobile form optimized, ☐ Loading states implemented, ☐ A/B test ready","Keywords":"Form-focused, minimalist design, single CTA focus, high contrast, urgency elements, trust signals, social proof, clear value","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Full (mobile-optimized)","No":21,"Performance":"⚡ Excellent","Primary Colors":"Primary brand color, high-contrast white/light backgrounds, warning/urgency colors for time-limited offers","Secondary Colors":"Secondary CTA color (muted), trust element colors (testimonial highlights), accent for key benefits","Style Category":"Conversion-Optimized","Type":"Landing Page","domain":"styles","record_id":"styles/21"},{"Accessibility":"✓ WCAG AA","Best For":"Enterprise SaaS, software tools landing pages, platform services, complex product explanations, B2B products","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--card-padding: 2rem, --card-radius: 12px, --icon-size: 48px, --grid-gap: 2rem, --section-padding: 4rem 0, --hover-transform: translateY(-4px)","Do Not Use For":"Simple product pages, early-stage startups with few features, entertainment landing pages","Effects & Animation":"Card hover effects (lift/scale), icon animations on scroll, feature toggle animations, smooth section transitions","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 10/10, Bootstrap 9/10","Implementation Checklist":"☐ Feature grid responsive, ☐ Icons consistent style, ☐ Card hover effects smooth, ☐ Alternating sections contrast, ☐ Benefits clearly stated, ☐ Mobile stacks properly","Keywords":"Multiple feature sections, grid layout, benefit cards, visual feature demonstrations, interactive elements, problem-solution pairs","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Good","No":22,"Performance":"⚡ Good","Primary Colors":"Primary brand, bright secondary colors for feature cards, contrasting accent for CTAs","Secondary Colors":"Supporting colors for: benefits (green), problems (red/orange), features (blue/purple), social proof (neutral)","Style Category":"Feature-Rich Showcase","Type":"Landing Page","domain":"styles","record_id":"styles/22"},{"Accessibility":"✓ WCAG AAA","Best For":"Simple service landing pages, indie products, consulting services, micro SaaS, freelancer portfolios","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--content-max-width: 680px, --spacing-large: 4rem, --font-size-body: 18px, --line-height: 1.6, --color-text: #1a1a1a, --color-bg: #ffffff","Do Not Use For":"Feature-heavy products, complex explanations, multi-product showcases","Effects & Animation":"Very subtle hover effects, minimal animations, fast page load (no heavy animations), smooth scroll","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 10/10, Bootstrap 9/10","Implementation Checklist":"☐ Single column centered, ☐ White space generous, ☐ One primary CTA only, ☐ No decorative images, ☐ Page weight < 500KB, ☐ Load time < 2s","Keywords":"Minimal text, white space heavy, single column layout, direct messaging, clean typography, visual-centric, fast-loading","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Full","No":23,"Performance":"⚡ Excellent","Primary Colors":"Monochromatic primary, white background, single accent color for CTA, black/dark grey text","Secondary Colors":"Minimal secondary colors, reserved for critical CTAs only, neutral supporting elements","Style Category":"Minimal & Direct","Type":"Landing Page","domain":"styles","record_id":"styles/23"},{"Accessibility":"✓ WCAG AA","Best For":"B2B SaaS, professional services, premium products, e-commerce conversion pages, established brands","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--avatar-size: 64px, --logo-height: 40px, --star-color: #FBBF24, --metric-font-size: 3rem, --testimonial-bg: #F9FAFB, --blockquote-border: 4px solid accent","Do Not Use For":"Startup MVPs, products without users, niche/experimental products","Effects & Animation":"Testimonial carousel animations, logo grid fade-in, stat counter animations (number count-up), review star ratings","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 10/10, Bootstrap 9/10","Implementation Checklist":"☐ Testimonials with real photos, ☐ Logo grid 6-12 logos, ☐ Star ratings accessible, ☐ Metrics animated on scroll, ☐ Case studies linked, ☐ Mobile carousel works","Keywords":"Testimonials prominent, client logos displayed, case studies sections, reviews/ratings, user avatars, success metrics, credibility markers","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Full","No":24,"Performance":"⚡ Good","Primary Colors":"Primary brand, trust colors (blue), success/growth colors (green), neutral backgrounds","Secondary Colors":"Testimonial highlight colors, logo grid backgrounds (light grey), badge/achievement colors","Style Category":"Social Proof-Focused","Type":"Landing Page","domain":"styles","record_id":"styles/24"},{"Accessibility":"✓ WCAG AA","Best For":"SaaS platforms, tool/software products, productivity apps landing pages, developer tools, productivity software","Complexity":"Medium","Conversion-Focused":"✓ Very High","Dark Mode ✓":"✓ Full","Design System Variables":"--video-aspect-ratio: 16/9, --overlay-bg: rgba(0,0,0,0.7), --step-indicator-size: 32px, --play-button-size: 80px, --transition-duration: 300ms","Do Not Use For":"Simple services, consulting, non-digital products, complexity-averse audiences","Effects & Animation":"Product animation playback, step progression animations, hover reveal effects, smooth zoom on interaction","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 10/10, Bootstrap 9/10","Implementation Checklist":"☐ Demo video loads fast, ☐ Fallback for no-JS, ☐ Step indicators clear, ☐ Hover states obvious, ☐ Mobile touch friendly, ☐ Demo CTA prominent","Keywords":"Embedded product mockup/video, interactive elements, product walkthrough, step-by-step guides, hover-to-reveal features, embedded demos","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Good","No":25,"Performance":"⚠ Good (video/interactive)","Primary Colors":"Primary brand, interface colors matching product, demo highlight colors for interactive elements","Secondary Colors":"Product UI colors, tutorial step colors (numbered progression), hover state indicators","Style Category":"Interactive Product Demo","Type":"Landing Page","domain":"styles","record_id":"styles/25"},{"Accessibility":"✓ WCAG AAA","Best For":"Healthcare/medical landing pages, financial services, enterprise software, premium/luxury products, legal services","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--badge-height: 48px, --trust-color: #1E40AF, --security-green: #059669, --card-shadow: 0 4px 6px rgba(0,0,0,0.1), --metric-highlight: #F59E0B","Do Not Use For":"Casual products, entertainment, viral/social-first products","Effects & Animation":"Badge hover effects, metric pulse animations, certificate carousel, smooth stat reveal","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 10/10, Bootstrap 9/10","Implementation Checklist":"☐ Security badges visible, ☐ Certifications verified, ☐ Metrics with sources, ☐ Professional imagery, ☐ Guarantee clearly stated, ☐ Contact info accessible","Keywords":"Certificates/badges displayed, expert credentials, case studies with metrics, before/after comparisons, industry recognition, security badges","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Full","No":26,"Performance":"⚡ Excellent","Primary Colors":"Professional colors (blue/grey), trust colors, certification badge colors (gold/silver accents)","Secondary Colors":"Certificate highlight colors, metric showcase colors, comparison highlight (success green)","Style Category":"Trust & Authority","Type":"Landing Page","domain":"styles","record_id":"styles/26"},{"Accessibility":"✓ WCAG AA","Best For":"Brand/startup stories, mission-driven products, premium/lifestyle brands, documentary-style products, educational","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--section-min-height: 100vh, --reveal-duration: 600ms, --narrative-font: serif, --chapter-spacing: 8rem, --timeline-color: accent, --parallax-speed: 0.5","Do Not Use For":"Technical/complex products (unless narrative-driven), traditional enterprise software","Effects & Animation":"Section-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 10/10, Bootstrap 9/10","Implementation Checklist":"☐ Story flows naturally, ☐ Scroll reveals smooth, ☐ Sections timed well, ☐ Emotional hooks present, ☐ Mobile story readable, ☐ Skip option available","Keywords":"Narrative flow, visual story progression, section transitions, consistent character/brand voice, emotional messaging, journey visualization","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Good","No":27,"Performance":"⚠ Moderate (animations)","Primary Colors":"Brand primary, warm/emotional colors, varied accent colors per story section, high visual variety","Secondary Colors":"Story section color coding, emotional state colors (calm, excitement, success), transitional gradients","Style Category":"Storytelling-Driven","Type":"Landing Page","domain":"styles","record_id":"styles/27"},{"Accessibility":"✓ WCAG AA","Best For":"Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing","Complexity":"Medium","Conversion-Focused":"✗ Not applicable","Dark Mode ✓":"✓ Full","Design System Variables":"--grid-gap: 8px, --card-padding: 12px, --font-size-small: 12px, --table-row-height: 36px, --sidebar-width: 240px, --header-height: 56px","Do Not Use For":"Marketing dashboards, consumer-facing analytics, simple reporting","Effects & Animation":"Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners","Era/Origin":"2020s Modern","Framework Compatibility":"Recharts 9/10, Chart.js 9/10, D3.js 10/10","Implementation Checklist":"☐ Grid layout 12 columns, ☐ KPI cards responsive, ☐ Tables sortable, ☐ Filters functional, ☐ Loading states for data, ☐ Export functionality","Keywords":"Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility","Light Mode ✓":"✓ Full","Mobile-Friendly":"◐ Medium","No":28,"Performance":"⚡ Excellent","Primary Colors":"Neutral primary (light grey/white #F5F5F5), data colors (blue/green/red), dark text #333333","Secondary Colors":"Chart colors: success (green #22C55E), warning (amber #F59E0B), alert (red #EF4444), neutral (grey)","Style Category":"Data-Dense Dashboard","Type":"BI/Analytics","domain":"styles","record_id":"styles/28"},{"Accessibility":"⚠ Colorblind considerations","Best For":"Geographical analysis, performance matrices, correlation analysis, user behavior heatmaps, temperature/intensity data","Complexity":"Medium","Conversion-Focused":"✗ Not applicable","Dark Mode ✓":"✓ Full (with adjustments)","Design System Variables":"--heatmap-cool: #0080FF, --heatmap-neutral: #FFFFFF, --heatmap-hot: #FF0000, --cell-size: 24px, --legend-width: 200px, --tooltip-bg: rgba(0,0,0,0.9)","Do Not Use For":"Linear data representation, categorical comparisons (use bar charts), small datasets","Effects & Animation":"Color gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation","Era/Origin":"2020s Modern","Framework Compatibility":"Recharts 9/10, Chart.js 9/10, D3.js 10/10","Implementation Checklist":"☐ Color scale clear, ☐ Legend visible, ☐ Tooltips informative, ☐ Colorblind alternatives, ☐ Zoom/pan for geo, ☐ Performance for large data","Keywords":"Color-coded grid/matrix, data intensity visualization, geographical heat maps, correlation matrices, cell-based representation, gradient coloring","Light Mode ✓":"✓ Full","Mobile-Friendly":"◐ Medium","No":29,"Performance":"⚡ Excellent","Primary Colors":"Gradient scale: Cool (blue #0080FF) to hot (red #FF0000), neutral middle (white/yellow)","Secondary Colors":"Support gradients: Light (cool blue) to dark (warm red), divergent for positive/negative data, monochromatic options","Style Category":"Heat Map & Heatmap Style","Type":"BI/Analytics","domain":"styles","record_id":"styles/29"},{"Accessibility":"✓ WCAG AA","Best For":"C-suite dashboards, business summary reports, decision-maker dashboards, strategic planning views","Complexity":"Medium","Conversion-Focused":"✗ Not applicable","Dark Mode ✓":"✓ Full","Design System Variables":"--kpi-font-size: 48px, --sparkline-height: 32px, --status-green: #22C55E, --status-yellow: #F59E0B, --status-red: #EF4444, --card-min-width: 280px","Do Not Use For":"Detailed analyst dashboards, technical deep-dives, operational monitoring","Effects & Animation":"KPI value animations (count-up), trend arrow direction animations, metric card hover lift, alert pulse effect","Era/Origin":"2020s Modern","Framework Compatibility":"Recharts 9/10, Chart.js 9/10, D3.js 10/10","Implementation Checklist":"☐ KPIs 4-6 maximum, ☐ Trends visible, ☐ Status colors clear, ☐ One-page view, ☐ Mobile simplified, ☐ Print-friendly layout","Keywords":"High-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights, executive summary","Light Mode ✓":"✓ Full","Mobile-Friendly":"✗ Low (not mobile-optimized)","No":30,"Performance":"⚡ Excellent","Primary Colors":"Brand colors, professional palette (blue/grey/white), accent for KPIs, red for alerts/concerns","Secondary Colors":"KPI highlight colors: positive (green), negative (red), neutral (grey), trend arrow colors","Style Category":"Executive Dashboard","Type":"BI/Analytics","domain":"styles","record_id":"styles/30"},{"Accessibility":"✓ WCAG AA","Best For":"System monitoring dashboards, DevOps dashboards, real-time analytics, stock market dashboards, live event tracking","Complexity":"Medium","Conversion-Focused":"✗ Not applicable","Dark Mode ✓":"✓ Full","Design System Variables":"--pulse-animation: pulse 2s infinite, --alert-z-index: 1000, --live-indicator: #22C55E, --critical-color: #DC2626, --update-interval: 5s, --toast-duration: 5s","Do Not Use For":"Historical analysis, long-term trend reports, archived data dashboards","Effects & Animation":"Real-time chart animations, alert pulse/glow, status indicator blink animation, smooth data stream updates, loading effect","Era/Origin":"2020s Modern","Framework Compatibility":"Recharts 9/10, Chart.js 9/10, D3.js 10/10","Implementation Checklist":"☐ Live updates working, ☐ Alert sounds optional, ☐ Connection status shown, ☐ Auto-refresh indicated, ☐ Critical alerts prominent, ☐ Offline fallback","Keywords":"Live data updates, status indicators, alert notifications, streaming data visualization, active monitoring, streaming charts","Light Mode ✓":"✓ Full","Mobile-Friendly":"◐ Medium","No":31,"Performance":"⚡ Good (real-time load)","Primary Colors":"Alert colors: critical (red #FF0000), warning (orange #FFA500), normal (green #22C55E), updating (blue animation)","Secondary Colors":"Status indicator colors, chart line colors varying by metric, streaming data highlight colors","Style Category":"Real-Time Monitoring","Type":"BI/Analytics","domain":"styles","record_id":"styles/31"},{"Accessibility":"✓ WCAG AA","Best For":"Sales analytics, product analytics, funnel analysis, multi-dimensional data exploration, business intelligence","Complexity":"Medium","Conversion-Focused":"✗ Not applicable","Dark Mode ✓":"✓ Full","Design System Variables":"--breadcrumb-separator: /, --expand-duration: 300ms, --level-indent: 24px, --back-button-size: 40px, --context-bar-height: 48px, --drill-transition: 300ms ease","Do Not Use For":"Simple linear data, single-metric dashboards, streaming real-time dashboards","Effects & Animation":"Drill-down expand animations, breadcrumb click transitions, smooth detail reveal, level change smooth, data reload animation","Era/Origin":"2020s Modern","Framework Compatibility":"Recharts 9/10, Chart.js 9/10, D3.js 10/10","Implementation Checklist":"☐ Breadcrumbs clear, ☐ Back navigation easy, ☐ Expand animation smooth, ☐ Context preserved, ☐ Mobile drill works, ☐ Deep links supported","Keywords":"Hierarchical data exploration, expandable sections, interactive drill-down paths, summary-to-detail flow, context preservation","Light Mode ✓":"✓ Full","Mobile-Friendly":"◐ Medium","No":32,"Performance":"⚡ Good","Primary Colors":"Primary brand, breadcrumb colors, drill-level indicator colors, hierarchy depth colors","Secondary Colors":"Drill-down path indicator colors, level-specific colors, highlight colors for selected level, transition colors","Style Category":"Drill-Down Analytics","Type":"BI/Analytics","domain":"styles","record_id":"styles/32"},{"Accessibility":"✓ WCAG AA","Best For":"Period-over-period reporting, A/B test dashboards, market comparison, competitive analysis, regional performance","Complexity":"Medium","Conversion-Focused":"✗ Not applicable","Dark Mode ✓":"✓ Full","Design System Variables":"--positive-color: #22C55E, --negative-color: #EF4444, --neutral-color: #6B7280, --comparison-gap: 2rem, --arrow-size: 16px, --badge-padding: 4px 8px","Do Not Use For":"Single metric dashboards, future projections (use forecasting), real-time only (no historical)","Effects & Animation":"Comparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare","Era/Origin":"2020s Modern","Framework Compatibility":"Recharts 9/10, Chart.js 9/10, D3.js 10/10","Implementation Checklist":"☐ Period selector works, ☐ Deltas calculated, ☐ Colors meaningful, ☐ Benchmarks shown, ☐ Mobile stacks properly, ☐ Export comparison","Keywords":"Side-by-side comparisons, period-over-period metrics, A/B test results, regional comparisons, performance benchmarks","Light Mode ✓":"✓ Full","Mobile-Friendly":"◐ Medium","No":33,"Performance":"⚡ Excellent","Primary Colors":"Comparison colors: primary (blue), comparison (orange/purple), delta indicator (green/red)","Secondary Colors":"Winning metric color (green), losing metric color (red), neutral comparison (grey), benchmark colors","Style Category":"Comparative Analysis Dashboard","Type":"BI/Analytics","domain":"styles","record_id":"styles/33"},{"Accessibility":"✓ WCAG AA","Best For":"Forecasting dashboards, anomaly detection systems, trend prediction dashboards, AI-powered analytics, budget planning","Complexity":"Medium","Conversion-Focused":"✗ Not applicable","Dark Mode ✓":"✓ Full","Design System Variables":"--forecast-dash: 5 5, --confidence-opacity: 0.2, --anomaly-color: #F59E0B, --prediction-color: #8B5CF6, --scenario-toggle-width: 48px, --ai-accent: #6366F1","Do Not Use For":"Historical-only dashboards, simple reporting, real-time operational dashboards","Effects & Animation":"Forecast line animation on draw, confidence band fade-in, anomaly pulse alert, smoothing function animations","Era/Origin":"2020s Modern","Framework Compatibility":"Recharts 9/10, Chart.js 9/10, D3.js 10/10","Implementation Checklist":"☐ Forecast line distinct, ☐ Confidence bands visible, ☐ Anomalies highlighted, ☐ Scenarios switchable, ☐ Predictions dated, ☐ Accuracy shown","Keywords":"Forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection visualization","Light Mode ✓":"✓ Full","Mobile-Friendly":"◐ Medium","No":34,"Performance":"⚠ Good (computation)","Primary Colors":"Forecast line color (distinct from actual), confidence interval shading, anomaly highlight (red alert), trend colors","Secondary Colors":"High confidence (dark color), low confidence (light color), anomaly colors (red/orange), normal trend (green/blue)","Style Category":"Predictive Analytics","Type":"BI/Analytics","domain":"styles","record_id":"styles/34"},{"Accessibility":"✓ WCAG AA","Best For":"Conversion funnel analysis, user journey tracking, engagement analytics, cohort analysis, retention tracking","Complexity":"Medium","Conversion-Focused":"✗ Not applicable","Dark Mode ✓":"✓ Full","Design System Variables":"--funnel-width: 100%, --stage-colors: gradient, --flow-opacity: 0.6, --cohort-cell-size: 40px, --retention-line-color: #3B82F6, --engagement-scale: 5 levels","Do Not Use For":"Real-time operational metrics, technical system monitoring, financial transactions","Effects & Animation":"Funnel animation (fill-down), flow diagram animations (connection draw), conversion pulse, engagement bar fill","Era/Origin":"2020s Modern","Framework Compatibility":"Recharts 9/10, Chart.js 9/10, D3.js 10/10","Implementation Checklist":"☐ Funnel stages clear, ☐ Flow diagram readable, ☐ Conversions calculated, ☐ Cohorts comparable, ☐ Retention trends visible, ☐ Privacy compliant","Keywords":"Funnel visualization, user flow diagrams, conversion tracking, engagement metrics, user journey mapping, cohort analysis","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Good","No":35,"Performance":"⚡ Good","Primary Colors":"Funnel stage colors: high engagement (green), drop-off (red), conversion (blue), user flow arrows (grey)","Secondary Colors":"Stage completion colors (success), abandonment colors (warning), engagement levels (gradient), cohort colors","Style Category":"User Behavior Analytics","Type":"BI/Analytics","domain":"styles","record_id":"styles/35"},{"Accessibility":"✓ WCAG AAA","Best For":"Financial reporting, accounting dashboards, portfolio tracking, budget monitoring, banking analytics","Complexity":"Medium","Conversion-Focused":"✗ Not applicable","Dark Mode ✓":"✓ Full","Design System Variables":"--currency-symbol: $, --decimal-places: 2, --profit-color: #22C55E, --loss-color: #EF4444, --variance-threshold: 10%, --table-header-bg: #F3F4F6","Do Not Use For":"Simple business dashboards, entertainment/social metrics, non-financial data","Effects & Animation":"Number animations (count-up), trend direction indicators, percentage change animations, profit/loss color transitions","Era/Origin":"2020s Modern","Framework Compatibility":"Recharts 9/10, Chart.js 9/10, D3.js 10/10","Implementation Checklist":"☐ Currency formatted, ☐ Decimals consistent, ☐ P&L clear, ☐ Budget variance shown, ☐ Audit trail complete, ☐ Export to Excel","Keywords":"Revenue metrics, profit/loss visualization, budget tracking, financial ratios, portfolio performance, cash flow, audit trail","Light Mode ✓":"✓ Full","Mobile-Friendly":"✗ Low","No":36,"Performance":"⚡ Excellent","Primary Colors":"Financial colors: profit (green #22C55E), loss (red #EF4444), neutral (grey), trust (dark blue #003366)","Secondary Colors":"Revenue highlight (green), expenses (red), budget variance (orange/red), balance (grey), accuracy (blue)","Style Category":"Financial Dashboard","Type":"BI/Analytics","domain":"styles","record_id":"styles/36"},{"Accessibility":"✓ WCAG AA","Best For":"CRM dashboards, sales management, opportunity tracking, performance management, quota planning","Complexity":"Medium","Conversion-Focused":"✗ Not applicable","Dark Mode ✓":"✓ Full","Design System Variables":"--pipeline-colors: stage gradient, --gauge-track: #E5E7EB, --gauge-fill: primary, --rank-1-color: #FFD700, --rank-2-color: #C0C0C0, --rank-3-color: #CD7F32","Do Not Use For":"Marketing analytics, customer support metrics, HR dashboards","Effects & Animation":"Deal movement animations, metric updates, leaderboard ranking changes, gauge needle movements, status change highlights","Era/Origin":"2020s Modern","Framework Compatibility":"Recharts 9/10, Chart.js 9/10","Implementation Checklist":"☐ Pipeline stages shown, ☐ Deals draggable, ☐ Quotas visualized, ☐ Rankings updated, ☐ Territory clickable, ☐ CRM integration","Keywords":"Deal pipeline, sales metrics, territory performance, sales rep leaderboard, win-loss analysis, quota tracking, forecast accuracy","Light Mode ✓":"✓ Full","Mobile-Friendly":"◐ Medium","No":37,"Performance":"⚡ Good","Primary Colors":"Sales colors: won (green), lost (red), in-progress (blue), blocked (orange), quota met (gold), quota missed (grey)","Secondary Colors":"Pipeline stage colors, rep performance colors, quota achievement colors, forecast accuracy colors","Style Category":"Sales Intelligence Dashboard","Type":"BI/Analytics","domain":"styles","record_id":"styles/37"},{"Accessibility":"✓ WCAG AAA","Best For":"Gen Z brands, startups, creative agencies, Figma-style apps, Notion-style interfaces, tech blogs","Complexity":"Low","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--border-width: 3px, --shadow-offset: 4px, --shadow-color: #000, --colors: high saturation, --font: bold sans","Do Not Use For":"Luxury brands, finance, healthcare, conservative industries (too playful)","Effects & Animation":"box-shadow: 4px 4px 0 #000, border: 3px solid #000, no gradients, sharp corners (0px), bold typography","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 10/10, Bootstrap 8/10","Implementation Checklist":"☐ Hard borders (2-4px), ☐ Hard offset shadows, ☐ High saturation colors, ☐ Bold typography, ☐ No blurs/gradients, ☐ Distinctive 'ugly-cute' look","Keywords":"Bold borders, black outlines, primary colors, thick shadows, no gradients, flat colors, 45° shadows, playful, Gen Z","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":38,"Performance":"⚡ Excellent","Primary Colors":"#FFEB3B (Yellow), #FF5252 (Red), #2196F3 (Blue), #000000 (Black borders)","Secondary Colors":"Limited accent colors, high contrast combinations, no gradients allowed","Style Category":"Neubrutalism","Type":"General","domain":"styles","record_id":"styles/38"},{"Accessibility":"✓ WCAG AA","Best For":"Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS","Complexity":"Low","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--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","Do Not Use For":"Dense data tables, text-heavy content, real-time monitoring","Effects & Animation":"grid-template with varied spans, rounded-xl (16px), subtle shadows, hover scale (1.02), smooth transitions","Era/Origin":"2020s Apple","Framework Compatibility":"Tailwind 10/10, CSS Grid 10/10","Implementation Checklist":"☐ Grid responsive (4→2→1 cols), ☐ Card spans varied, ☐ Rounded corners consistent, ☐ Shadows subtle, ☐ Content fits cards, ☐ Hover scale (1.02)","Keywords":"Modular cards, asymmetric grid, varied sizes, Apple-style, dashboard tiles, negative space, clean hierarchy, cards","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":39,"Performance":"⚡ Excellent","Primary Colors":"Neutral base + brand accent, #FFFFFF, #F5F5F5, brand primary","Secondary Colors":"Subtle gradients, shadow variations, accent highlights for interactive cards","Style Category":"Bento Box Grid","Type":"General","domain":"styles","record_id":"styles/39"},{"Accessibility":"⚠ Check contrast","Best For":"Fashion brands, music platforms, Gen Z brands, nostalgia marketing, entertainment, youth-focused","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"◐ Partial","Design System Variables":"--neon-pink: #FF69B4, --neon-cyan: #00FFFF, --chrome-silver: #C0C0C0, --glossy-gradient: linear-gradient(180deg, white 0%, transparent 50%), --glow-blur: 10px","Do Not Use For":"B2B enterprise, healthcare, finance, conservative industries, elderly users","Effects & Animation":"linear-gradient metallic, glossy buttons, 3D chrome effects, glow animations, bubble shapes","Era/Origin":"Y2K 2000s","Framework Compatibility":"Tailwind 8/10, CSS-in-JS 9/10","Implementation Checklist":"☐ Neon colors balanced, ☐ Chrome effects visible, ☐ Glossy buttons styled, ☐ Bubble shapes decorative, ☐ Sparkle animations, ☐ Retro fonts loaded","Keywords":"Neon pink, chrome, metallic, bubblegum, iridescent, glossy, retro-futurism, 2000s, futuristic nostalgia","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Good","No":40,"Performance":"⚠ Good","Primary Colors":"#FF69B4 (Hot Pink), #00FFFF (Cyan), #C0C0C0 (Silver), #9400D3 (Purple)","Secondary Colors":"Metallic gradients, glossy overlays, iridescent effects, chrome textures","Style Category":"Y2K Aesthetic","Type":"General","domain":"styles","record_id":"styles/40"},{"Accessibility":"⚠ Limited (dark+neon)","Best For":"Gaming platforms, tech products, crypto apps, sci-fi applications, developer tools, entertainment","Complexity":"Medium","Conversion-Focused":"◐ Medium","Dark Mode ✓":"✓ Only","Design System Variables":"--bg-dark: #0D0D0D, --neon-green: #00FF00, --neon-magenta: #FF00FF, --neon-cyan: #00FFFF, --scanline-opacity: 0.1, --glitch-duration: 0.3s","Do Not Use For":"Corporate enterprise, healthcare, family apps, conservative brands, elderly users","Effects & Animation":"Neon glow (text-shadow), glitch animations (skew/offset), scanlines (::before overlay), terminal fonts","Era/Origin":"2020s Cyberpunk","Framework Compatibility":"Tailwind 8/10, Custom CSS 10/10","Implementation Checklist":"☐ Dark background only, ☐ Neon accents visible, ☐ Glitch effect subtle, ☐ Scanlines optional, ☐ Monospace font, ☐ Terminal aesthetic","Keywords":"Neon, dark mode, terminal, HUD, sci-fi, glitch, dystopian, futuristic, matrix, tech noir","Light Mode ✓":"✗ No","Mobile-Friendly":"◐ Medium","No":41,"Performance":"⚠ Moderate","Primary Colors":"#00FF00 (Matrix Green), #FF00FF (Magenta), #00FFFF (Cyan), #0D0D0D (Dark)","Secondary Colors":"Neon gradients, scanline overlays, glitch colors, terminal green accents","Style Category":"Cyberpunk UI","Type":"General","domain":"styles","record_id":"styles/41"},{"Accessibility":"✓ WCAG AA","Best For":"Wellness apps, sustainability brands, eco products, health apps, meditation, organic food brands","Complexity":"Low","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--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)","Do Not Use For":"Tech-focused products, gaming, industrial, urban brands","Effects & Animation":"Rounded corners (16-24px), organic curves (border-radius variations), natural shadows, flowing SVG shapes","Era/Origin":"2020s Sustainable","Framework Compatibility":"Tailwind 10/10, CSS 10/10","Implementation Checklist":"☐ Earth tones dominant, ☐ Organic curves present, ☐ Natural textures subtle, ☐ Green accents, ☐ Rounded everywhere, ☐ Calming feel","Keywords":"Nature, organic shapes, green, sustainable, rounded, flowing, wellness, earthy, natural textures","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":42,"Performance":"⚡ Excellent","Primary Colors":"#228B22 (Forest Green), #8B4513 (Earth Brown), #87CEEB (Sky Blue), #F5F5DC (Beige)","Secondary Colors":"Natural gradients, earth tones, sky blues, organic textures, wood/stone colors","Style Category":"Organic Biophilic","Type":"General","domain":"styles","record_id":"styles/42"},{"Accessibility":"✓ WCAG AA","Best For":"AI products, chatbots, voice assistants, copilots, AI-powered tools, conversational interfaces","Complexity":"Low","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--ai-accent: #6366F1, --user-bubble-bg: #E0E7FF, --ai-bubble-bg: #F9FAFB, --input-height: 48px, --typing-dot-size: 8px, --message-gap: 16px","Do Not Use For":"Traditional forms, data-heavy dashboards, print-first content","Effects & Animation":"Typing indicators (3-dot pulse), streaming text animations, pulse animations, context cards, smooth reveals","Era/Origin":"2020s AI-Era","Framework Compatibility":"Tailwind 10/10, React 10/10","Implementation Checklist":"☐ Chat layout responsive, ☐ Typing indicator smooth, ☐ Input always visible, ☐ Context cards styled, ☐ AI responses distinct, ☐ User messages aligned right","Keywords":"Chatbot, conversational, voice, assistant, agentic, ambient, minimal chrome, streaming text, AI interactions","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":43,"Performance":"⚡ Excellent","Primary Colors":"Neutral + single accent, #6366F1 (AI Purple), #10B981 (Success), #F5F5F5 (Background)","Secondary Colors":"Status indicators, streaming highlights, context card colors, subtle accent variations","Style Category":"AI-Native UI","Type":"General","domain":"styles","record_id":"styles/43"},{"Accessibility":"⚠ Check contrast","Best For":"Creative agencies, music sites, youth brands, event promotion, artistic portfolios, entertainment","Complexity":"Medium","Conversion-Focused":"◐ Medium","Dark Mode ✓":"✓ Full","Design System Variables":"--memphis-pink: #FF71CE, --memphis-yellow: #FFCE5C, --memphis-teal: #86CCCA, --memphis-purple: #6A7BB4, --pattern-size: 20px, --shape-rotation: 15deg","Do Not Use For":"Corporate finance, healthcare, legal, elderly users, conservative brands","Effects & Animation":"transform: rotate(), clip-path: polygon(), mix-blend-mode, repeating patterns, bold shapes","Era/Origin":"1980s Postmodern","Framework Compatibility":"Tailwind 9/10, CSS 10/10","Implementation Checklist":"☐ Geometric shapes visible, ☐ Colors bold/clashing, ☐ Patterns present, ☐ Layout asymmetric, ☐ Playful decorations, ☐ 80s vibe achieved","Keywords":"80s, geometric, playful, postmodern, shapes, patterns, squiggles, triangles, neon, abstract, bold","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Good","No":44,"Performance":"⚡ Excellent","Primary Colors":"#FF71CE (Hot Pink), #FFCE5C (Yellow), #86CCCA (Teal), #6A7BB4 (Blue Purple)","Secondary Colors":"Complementary geometric colors, pattern fills, contrasting accent shapes","Style Category":"Memphis Design","Type":"General","domain":"styles","record_id":"styles/44"},{"Accessibility":"⚠ Poor (motion)","Best For":"Music platforms, gaming, creative portfolios, tech startups, entertainment, artistic projects","Complexity":"Medium","Conversion-Focused":"◐ Medium","Dark Mode ✓":"✓ Dark focused","Design System Variables":"--vapor-pink: #FF71CE, --vapor-cyan: #01CDFE, --vapor-mint: #05FFA1, --vapor-purple: #B967FF, --grid-color: rgba(255,255,255,0.1), --glow-intensity: 15px","Do Not Use For":"Business apps, e-commerce, education, healthcare, enterprise software","Effects & Animation":"text-shadow glow, linear-gradient, filter: hue-rotate(), glitch animations, retro scan lines","Era/Origin":"1980s-90s Retro","Framework Compatibility":"Tailwind 8/10, CSS-in-JS 9/10","Implementation Checklist":"☐ Sunset gradient present, ☐ Neon glow applied, ☐ Retro grid visible, ☐ Glitch effects subtle, ☐ Dreamy atmosphere, ☐ 80s-90s aesthetic","Keywords":"Synthwave, retro-futuristic, 80s-90s, neon, glitch, nostalgic, sunset gradient, dreamy, aesthetic","Light Mode ✓":"✓ Full","Mobile-Friendly":"◐ Medium","No":45,"Performance":"⚠ Moderate","Primary Colors":"#FF71CE (Pink), #01CDFE (Cyan), #05FFA1 (Mint), #B967FF (Purple)","Secondary Colors":"Sunset gradients, glitch overlays, VHS effects, neon accents, pastel variations","Style Category":"Vaporwave","Type":"General","domain":"styles","record_id":"styles/45"},{"Accessibility":"⚠ Moderate (SR issues)","Best For":"Dashboards, card layouts, modals, navigation, product showcases, SaaS interfaces","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--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","Do Not Use For":"Print-style layouts, simple blogs, low-end devices, flat design requirements","Effects & Animation":"z-index stacking, box-shadow elevation (4 levels), transform: translateZ(), backdrop-filter, parallax","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 10/10, MUI 10/10, Chakra 10/10","Implementation Checklist":"☐ Layers clearly defined, ☐ Shadows show depth, ☐ Overlaps intentional, ☐ Hierarchy clear, ☐ Performance optimized, ☐ Mobile depth maintained","Keywords":"Depth, overlapping, z-index, layers, 3D, shadows, elevation, floating, cards, spatial hierarchy","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Good","No":46,"Performance":"⚠ Good","Primary Colors":"Neutral base (#FFFFFF, #F5F5F5, #E0E0E0) + brand accent for elevated elements","Secondary Colors":"Shadow variations (sm/md/lg/xl), elevation colors, highlight colors for top layers","Style Category":"Dimensional Layering","Type":"General","domain":"styles","record_id":"styles/46"},{"Accessibility":"✓ WCAG AA","Best For":"Fashion, architecture, portfolios, agency landing pages, luxury brands, editorial","Complexity":"Low","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--type-giant: clamp(3rem, 10vw, 12rem), --type-weight: 900, --spacing-huge: 8rem, --color-primary: #000000, --color-bg: #FFFFFF, --accent: single color only","Do Not Use For":"E-commerce catalogs, dashboards, forms, data-heavy, elderly users, complex apps","Effects & Animation":"font-size: clamp(3rem 10vw 12rem), font-weight: 900, letter-spacing: -0.05em, massive whitespace","Era/Origin":"2020s Modern","Framework Compatibility":"Tailwind 10/10, Typography.js 10/10","Implementation Checklist":"☐ Typography oversized, ☐ White space extreme, ☐ Black/white dominant, ☐ Single accent only, ☐ Elements minimal, ☐ Statement clear","Keywords":"Bold minimalism, oversized typography, high contrast, negative space, loud minimal, statement design","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":47,"Performance":"⚡ Excellent","Primary Colors":"#000000 (Black), #FFFFFF (White), single vibrant accent only","Secondary Colors":"Minimal - single accent color, no secondary colors, extreme restraint","Style Category":"Exaggerated Minimalism","Type":"General","domain":"styles","record_id":"styles/47"},{"Accessibility":"❌ Poor (motion)","Best For":"Hero sections, marketing sites, video platforms, storytelling, creative portfolios, landing pages","Complexity":"High","Conversion-Focused":"✓ Very High","Dark Mode ✓":"✓ Full","Design System Variables":"--text-animation-duration: 1s, --letter-delay: 0.05s, --typing-speed: 100ms, --gradient-text: linear-gradient(90deg, #color1, #color2), --morph-duration: 0.5s","Do Not Use For":"Long-form content, accessibility-critical, data interfaces, forms, elderly users","Effects & Animation":"@keyframes text animation, typing effect, background-clip: text, GSAP ScrollTrigger, split text","Era/Origin":"2020s Modern","Framework Compatibility":"GSAP 10/10, Framer Motion 10/10","Implementation Checklist":"☐ Text animations smooth, ☐ Prefers-reduced-motion respected, ☐ Fallback for no-JS, ☐ Mobile performance ok, ☐ Typing effect timed, ☐ Scroll triggers work","Keywords":"Motion text, animated type, moving letters, dynamic, typing effect, morphing, scroll-triggered text","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Good","No":48,"Performance":"⚠ Moderate","Primary Colors":"Flexible - high contrast recommended, bold colors for emphasis, animation-friendly palette","Secondary Colors":"Accent colors for emphasis, transition colors, gradient text fills","Style Category":"Kinetic Typography","Type":"General","domain":"styles","record_id":"styles/48"},{"Accessibility":"❌ Poor (motion)","Best For":"Brand storytelling, product launches, case studies, portfolios, annual reports, marketing campaigns","Complexity":"High","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--parallax-speed-bg: 0.3, --parallax-speed-mid: 0.6, --parallax-speed-fg: 1, --section-height: 100vh, --transition-duration: 600ms, --perspective: 1px","Do Not Use For":"E-commerce, dashboards, mobile-first, SEO-critical, accessibility-required","Effects & Animation":"transform: translateY(scroll), position: fixed/sticky, perspective: 1px, scroll-triggered animations","Era/Origin":"2020s Modern","Framework Compatibility":"GSAP ScrollTrigger 10/10, Locomotive Scroll 10/10","Implementation Checklist":"☐ Layers parallax smoothly, ☐ Story flows naturally, ☐ Mobile alternative provided, ☐ Performance optimized, ☐ Skip option available, ☐ Reduced motion fallback","Keywords":"Scroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic, scroll-triggered","Light Mode ✓":"✓ Full","Mobile-Friendly":"✗ Low","No":49,"Performance":"❌ Poor","Primary Colors":"Story-dependent, often gradients and natural colors, section-specific palettes","Secondary Colors":"Section transition colors, depth layer colors, narrative mood colors","Style Category":"Parallax Storytelling","Type":"General","domain":"styles","record_id":"styles/49"},{"Accessibility":"✓ WCAG AAA","Best For":"Corporate sites, architecture, editorial, SaaS, museums, professional services, documentation","Complexity":"Low","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--grid-columns: 12, --grid-gap: 1rem, --base-unit: 8px, --font-primary: Inter, --color-text: #000000, --color-bg: #FFFFFF, --accent: single vibrant","Do Not Use For":"Playful brands, children's sites, entertainment, gaming, emotional storytelling","Effects & Animation":"display: grid, grid-template-columns: repeat(12 1fr), gap: 1rem, mathematical ratios, clear hierarchy","Era/Origin":"1950s Swiss + 2020s","Framework Compatibility":"Tailwind 10/10, Bootstrap 9/10, Foundation 10/10","Implementation Checklist":"☐ 12-column grid strict, ☐ Spacing mathematical, ☐ Typography hierarchy clear, ☐ Single accent only, ☐ No decorations, ☐ High contrast verified","Keywords":"Grid system, Helvetica, modular, asymmetric, international style, rational, clean, mathematical spacing","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":50,"Performance":"⚡ Excellent","Primary Colors":"#000000, #FFFFFF, #F5F5F5, single vibrant accent only","Secondary Colors":"Minimal secondary, accent for emphasis only, no gradients","Style Category":"Swiss Modernism 2.0","Type":"General","domain":"styles","record_id":"styles/50"},{"Accessibility":"⚠ Poor (thin lines)","Best For":"Sci-fi games, space tech, cybersecurity, movie props, immersive dashboards","Complexity":"High","Conversion-Focused":"✗ Low","Dark Mode ✓":"✓ Full","Design System Variables":"--hud-color: #00FFFF, --bg-color: rgba(0,10,20,0.9), --line-width: 1px, --glow: 0 0 5px, --font: monospace","Do Not Use For":"Standard corporate, reading heavy content, accessible public services","Effects & Animation":"Glow effects, scanning animations, ticker text, blinking markers, fine line drawing","Era/Origin":"2010s Sci-Fi","Framework Compatibility":"React 9/10, Canvas 10/10","Implementation Checklist":"☐ Fine lines 1px, ☐ Neon glow text/borders, ☐ Monospaced font, ☐ Dark/Transparent BG, ☐ Decorative tech markers, ☐ Holographic feel","Keywords":"Futuristic, technical, wireframe, neon, data, transparency, iron man, sci-fi, interface","Light Mode ✓":"✓ Low","Mobile-Friendly":"◐ Medium","No":51,"Performance":"⚠ Moderate (renders)","Primary Colors":"Neon Cyan #00FFFF, Holographic Blue #0080FF, Alert Red #FF0000","Secondary Colors":"Transparent Black, Grid Lines #333333","Style Category":"HUD / Sci-Fi FUI","Type":"General","domain":"styles","record_id":"styles/51"},{"Accessibility":"✓ Good (if contrast ok)","Best For":"Indie games, retro tools, creative portfolios, nostalgia marketing, Web3/NFT","Complexity":"Medium","Conversion-Focused":"◐ Medium","Dark Mode ✓":"✓ Full","Design System Variables":"--pixel-size: 4px, --font: pixel font, --border-style: pixel-shadow, --anti-alias: none","Do Not Use For":"Professional corporate, modern SaaS, high-res photography sites","Effects & Animation":"Frame-by-frame sprite animation, blinking cursor, instant transitions, marquee text","Era/Origin":"1980s Arcade","Framework Compatibility":"CSS (box-shadow) 8/10, Canvas 10/10","Implementation Checklist":"☐ Pixelated fonts loaded, ☐ Images sharp (no blur), ☐ CSS box-shadow for pixel borders, ☐ Retro palette, ☐ Blocky layout","Keywords":"Retro, 8-bit, 16-bit, gaming, blocky, nostalgic, pixelated, arcade","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":52,"Performance":"⚡ Excellent","Primary Colors":"Primary colors (NES Palette), brights, limited palette","Secondary Colors":"Black outlines, shading via dithering or block colors","Style Category":"Pixel Art","Type":"General","domain":"styles","record_id":"styles/52"},{"Accessibility":"✓ WCAG AA","Best For":"Product features, dashboards, personal sites, marketing summaries, galleries","Complexity":"Low","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--grid-gap: 20px, --card-radius: 24px, --card-bg: #FFFFFF, --page-bg: #F5F5F7, --shadow: soft","Do Not Use For":"Long-form reading, data tables, complex forms","Effects & Animation":"Hover scale (1.02), soft shadow expansion, smooth layout shifts, content reveal","Era/Origin":"2020s Apple/Linear","Framework Compatibility":"CSS Grid 10/10, Tailwind 10/10","Implementation Checklist":"☐ Grid layout (CSS Grid), ☐ Rounded corners 16-24px, ☐ Varied card spans, ☐ Content fits card size, ☐ Responsive re-flow, ☐ Apple-like aesthetic","Keywords":"Apple-style, modular, cards, organized, clean, hierarchy, grid, rounded, soft","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":53,"Performance":"⚡ Excellent","Primary Colors":"Off-white #F5F5F7, Clean White #FFFFFF, Text #1D1D1F","Secondary Colors":"Subtle accents, soft shadows, blurred backdrops","Style Category":"Bento Grids","Type":"General","domain":"styles","record_id":"styles/53"},{"Accessibility":"⚠ Contrast risks","Best For":"Spatial computing apps, VR/AR interfaces, immersive media, futuristic dashboards","Complexity":"High","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--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","Do Not Use For":"Text-heavy documents, high-contrast requirements, non-3D capable devices","Effects & Animation":"Parallax depth, dynamic lighting response, gaze-hover effects, smooth scale on focus","Era/Origin":"2024 Spatial Era","Framework Compatibility":"SwiftUI, React (Three.js/Fiber)","Implementation Checklist":"☐ Glass effect visible, ☐ Depth layers clear, ☐ Hover states defined, ☐ Colors vibrant on active, ☐ Floating feel achieved, ☐ Contrast maintained","Keywords":"Glass, depth, immersion, spatial, translucent, gaze, gesture, apple, vision-pro","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High (if adapted)","No":55,"Performance":"⚠ Moderate (blur cost)","Primary Colors":"Frosted Glass #FFFFFF (15-30% opacity), System White","Secondary Colors":"Vibrant system colors for active states, deep shadows for depth","Style Category":"Spatial UI (VisionOS)","Type":"General","domain":"styles","record_id":"styles/55"},{"Accessibility":"✓ WCAG AAA","Best For":"Reading apps, digital newspapers, minimal journals, distraction-free writing, slow-living brands","Complexity":"Low","Conversion-Focused":"✓ Medium","Dark Mode ✓":"✗ Low (inverted only)","Design System Variables":"--paper-bg: #FDFBF7, --ink-color: #1A1A1A, --pencil-grey: #4A4A4A, --border-color: #E0E0E0, --font-reading: Georgia, --transition: none","Do Not Use For":"Gaming, video platforms, high-energy marketing, dark mode dependent apps","Effects & Animation":"No motion blur, distinct page turns, grain/noise texture, sharp transitions (no fade)","Era/Origin":"2020s Digital Well-being","Framework Compatibility":"Tailwind 10/10, CSS 10/10","Implementation Checklist":"☐ Paper background color, ☐ High contrast text, ☐ No animations, ☐ Reading optimized, ☐ Distraction-free, ☐ Print-friendly","Keywords":"Paper-like, matte, high contrast, texture, reading, calm, slow tech, monochrome","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":56,"Performance":"⚡ Excellent","Primary Colors":"Off-White #FDFBF7, Paper White #F5F5F5, Ink Black #1A1A1A","Secondary Colors":"Pencil Grey #4A4A4A, Highlighter Yellow #FFFF00 (accent)","Style Category":"E-Ink / Paper","Type":"General","domain":"styles","record_id":"styles/56"},{"Accessibility":"❌ Poor","Best For":"Gen Z lifestyle brands, music artists, creative portfolios, viral marketing, fashion","Complexity":"High","Conversion-Focused":"✓ High (Viral)","Dark Mode ✓":"✓ Full","Design System Variables":"--chaos-pink: #FF00FF, --chaos-green: #00FF00, --chaos-yellow: #FFFF00, --chaos-blue: #0000FF, --jitter-amount: 5deg, --saturate: 150%","Do Not Use For":"Corporate, government, healthcare, banking, serious tools","Effects & Animation":"Marquee scrolls, jitter, sticker layering, GIF overload, random placement, drag-and-drop","Era/Origin":"2023+ Internet Core","Framework Compatibility":"CSS-in-JS 8/10","Implementation Checklist":"☐ Colors clash intentionally, ☐ Stickers/overlays present, ☐ Layout chaotic but usable, ☐ GIFs optimized, ☐ Mobile scrollable, ☐ Performance acceptable","Keywords":"Chaos, clutter, stickers, raw, collage, mixed media, loud, internet culture, ironic","Light Mode ✓":"✓ Full","Mobile-Friendly":"◐ Medium","No":57,"Performance":"⚠ Poor (heavy assets)","Primary Colors":"Clashing Brights: #FF00FF, #00FF00, #FFFF00, #0000FF","Secondary Colors":"Gradients, rainbow, glitch, noise, heavily saturated mix","Style Category":"Gen Z Chaos / Maximalism","Type":"General","domain":"styles","record_id":"styles/57"},{"Accessibility":"✓ Good","Best For":"Sustainability tech, biotech, advanced health, meditation, generative art platforms","Complexity":"High","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--cellular-pink: #FF9999, --chlorophyll: #00FF41, --bioluminescent: #00FFFF, --breathing-duration: 4s, --morph-ease: cubic-bezier(0.4, 0, 0.2, 1), --organic-blur: 20px","Do Not Use For":"Standard SaaS, data grids, strict corporate, accounting","Effects & Animation":"Breathing animations, fluid morphing, generative growth, physics-based movement","Era/Origin":"2024+ Generative","Framework Compatibility":"Canvas 10/10, WebGL 10/10","Implementation Checklist":"☐ Organic shapes present, ☐ Animations feel alive, ☐ Generative elements, ☐ Performance monitored, ☐ Mobile fallback, ☐ Accessibility alt content","Keywords":"Nature-inspired, cellular, fluid, breathing, generative, algorithms, life-like","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Good","No":58,"Performance":"⚠ Moderate","Primary Colors":"Cellular Pink #FF9999, Chlorophyll Green #00FF41, Bioluminescent Blue","Secondary Colors":"Deep Ocean #001E3C, Coral #FF7F50, Organic gradients","Style Category":"Biomimetic / Organic 2.0","Type":"General","domain":"styles","record_id":"styles/58"},{"Accessibility":"✓ WCAG AA","Best For":"Creative portfolios, artist sites, indie brands, handmade products, authentic storytelling, editorial","Complexity":"Low","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--paper-bg: #FAFAF8, --pencil-color: #4A4A4A, --marker-black: #1A1A1A, --kraft-brown: #C4A77D, --sketch-rotation: random(-3deg, 3deg), --texture-opacity: 0.3","Do Not Use For":"Corporate enterprise, fintech, healthcare, government, polished SaaS","Effects & Animation":"No smooth transitions, hand-drawn animations, paper texture overlays, jitter effects, sketch reveal","Era/Origin":"2025+ Anti-Digital","Framework Compatibility":"CSS 10/10, SVG 10/10","Implementation Checklist":"☐ Textures loaded, ☐ Hand-drawn elements present, ☐ Imperfections intentional, ☐ Authentic feel achieved, ☐ Performance ok with textures, ☐ Accessibility maintained","Keywords":"Hand-drawn, collage, scanned textures, unfinished, imperfect, authentic, human, sketch, raw marks, creative process","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":59,"Performance":"⚡ Excellent","Primary Colors":"Paper White #FAFAF8, Pencil Grey #4A4A4A, Marker Black #1A1A1A, Kraft Brown #C4A77D","Secondary Colors":"Watercolor washes, pencil shading, ink splatters, tape textures, aged paper tones","Style Category":"Anti-Polish / Raw Aesthetic","Type":"General","domain":"styles","record_id":"styles/59"},{"Accessibility":"⚠ Motion sensitive","Best For":"Modern mobile apps, playful brands, entertainment, gaming UI, consumer products, interactive demos","Complexity":"Medium","Conversion-Focused":"✓ Very High","Dark Mode ✓":"✓ Full","Design System Variables":"--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)","Do Not Use For":"Enterprise software, data dashboards, accessibility-critical, professional tools","Effects & Animation":"Press deformation (scale + squish), bounce-back (cubic-bezier), material response, haptic-like feedback, spring physics","Era/Origin":"2025+ Tactile Era","Framework Compatibility":"Framer Motion 10/10, React Spring 10/10, GSAP 10/10","Implementation Checklist":"☐ Press effect visible, ☐ Bounce-back smooth, ☐ Material feels tactile, ☐ Spring physics tuned, ☐ Mobile touch responsive, ☐ Reduced motion option","Keywords":"Jelly buttons, chrome, clay, squishy, deformable, bouncy, physical, tactile feedback, press response","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":60,"Performance":"⚠ Good","Primary Colors":"Gradient metallics, Chrome Silver #C0C0C0, Jelly Pink #FF9ECD, Soft Blue #87CEEB","Secondary Colors":"Glossy highlights, shadow depth, reflection effects, material-specific colors","Style Category":"Tactile Digital / Deformable UI","Type":"General","domain":"styles","record_id":"styles/60"},{"Accessibility":"✓ WCAG AA","Best For":"Wellness brands, sustainable products, artisan goods, organic food, spa/beauty, home decor","Complexity":"Low","Conversion-Focused":"✓ High","Dark Mode ✓":"◐ Partial","Design System Variables":"--terracotta: #C67B5C, --sand-beige: #D4C4A8, --warm-clay: #B5651D, --soft-cream: #F5F0E1, --olive-green: #6B7B3C, --grain-opacity: 0.1","Do Not Use For":"Tech startups, gaming, nightlife, corporate finance, high-energy brands","Effects & Animation":"Subtle parallax, natural easing (ease-out), texture overlays, grain effects, soft shadows","Era/Origin":"2025+ Handmade Warmth","Framework Compatibility":"Tailwind 10/10, CSS 10/10","Implementation Checklist":"☐ Earth tones dominant, ☐ Warm feel achieved, ☐ Textures subtle, ☐ Handmade quality, ☐ Sustainable messaging, ☐ Calming aesthetic","Keywords":"Muted earthy, skin tones, wood, soil, sand, terracotta, warmth, organic materials, handmade warmth","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":61,"Performance":"⚡ Excellent","Primary Colors":"Terracotta #C67B5C, Sand Beige #D4C4A8, Warm Clay #B5651D, Soft Cream #F5F0E1","Secondary Colors":"Earth Brown #8B4513, Olive Green #6B7B3C, Warm Stone #9C8B7A, muted gradients","Style Category":"Nature Distilled","Type":"General","domain":"styles","record_id":"styles/61"},{"Accessibility":"⚠ Not for touch/SR","Best For":"Creative portfolios, interactive experiences, agency sites, product showcases, gaming, entertainment","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--cursor-size: 20px, --cursor-hover-scale: 1.5, --magnetic-distance: 100px, --trail-length: 10, --trail-fade: 0.1, --blend-mode: difference","Do Not Use For":"Mobile-first (no cursor), accessibility-critical, data-heavy dashboards, forms","Effects & Animation":"Cursor scale on hover, magnetic pull to elements, cursor morphing, trail effects, blend mode cursors, click feedback","Era/Origin":"2025+ Interactive","Framework Compatibility":"GSAP 10/10, Framer Motion 10/10, Custom JS 10/10","Implementation Checklist":"☐ Custom cursor works, ☐ Hover morph smooth, ☐ Magnetic pull subtle, ☐ Trail performance ok, ☐ Click feedback visible, ☐ Touch fallback provided","Keywords":"Custom cursor, cursor as tool, hover effects, cursor feedback, pointer transformation, cursor trail, magnetic cursor","Light Mode ✓":"✓ Full","Mobile-Friendly":"✗ No cursor","No":62,"Performance":"⚡ Good","Primary Colors":"Brand-dependent, cursor accent color, high contrast for visibility","Secondary Colors":"Trail colors, hover state colors, magnetic zone indicators, feedback colors","Style Category":"Interactive Cursor Design","Type":"General","domain":"styles","record_id":"styles/62"},{"Accessibility":"✓ Excellent","Best For":"Voice assistants, accessibility apps, hands-free tools, smart home, automotive UI, cooking apps","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--listening-color: #6B8FAF, --speaking-color: #22C55E, --waveform-height: 60px, --pulse-duration: 1.5s, --indicator-size: 24px, --voice-accent: #9B8FBB","Do Not Use For":"Visual-heavy content, data entry, complex forms, noisy environments","Effects & Animation":"Voice waveform visualization, listening pulse, processing spinner, speak animation, smooth transitions","Era/Origin":"2025+ Voice Era","Framework Compatibility":"Web Speech API 10/10, React 10/10","Implementation Checklist":"☐ Voice recognition works, ☐ Visual feedback clear, ☐ Listening state obvious, ☐ Speaking animation smooth, ☐ Fallback UI provided, ☐ Accessibility excellent","Keywords":"Voice UI, multimodal, audio feedback, conversational, hands-free, ambient, contextual, speech recognition","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":63,"Performance":"⚡ Excellent","Primary Colors":"Calm neutrals: Soft White #FAFAFA, Muted Blue #6B8FAF, Gentle Purple #9B8FBB","Secondary Colors":"Audio waveform colors, status indicators (listening/processing/speaking), success/error tones","Style Category":"Voice-First Multimodal","Type":"General","domain":"styles","record_id":"styles/63"},{"Accessibility":"⚠ Alt content needed","Best For":"E-commerce, furniture, fashion, automotive, electronics, jewelry, product configurators","Complexity":"High","Conversion-Focused":"✓ Very High","Dark Mode ✓":"◐ Partial","Design System Variables":"--canvas-bg: #F5F5F5, --hotspot-color: #3B82F6, --loading-spinner: primary, --rotation-speed: 0.5, --zoom-min: 0.5, --zoom-max: 2","Do Not Use For":"Content-heavy sites, blogs, dashboards, low-bandwidth, accessibility-critical","Effects & Animation":"Drag-to-rotate, pinch-to-zoom, spin animation, AR placement, material switching, smooth orbit controls","Era/Origin":"2025+ E-commerce 3D","Framework Compatibility":"Three.js 10/10, model-viewer 10/10, Spline 9/10","Implementation Checklist":"☐ 3D model loads fast, ☐ Rotation smooth, ☐ Zoom works (pinch/scroll), ☐ AR button functional, ☐ Colors switchable, ☐ Mobile touch works","Keywords":"360 product view, rotatable, zoomable, touch-to-spin, AR preview, product configurator, interactive 3D model","Light Mode ✓":"◐ Partial","Mobile-Friendly":"◐ Medium","No":64,"Performance":"❌ Poor (3D rendering)","Primary Colors":"Product-dependent, neutral backgrounds: Soft Grey #E8E8E8, Pure White #FFFFFF","Secondary Colors":"Shadow gradients, reflection planes, environment lighting colors, accent highlights","Style Category":"3D Product Preview","Type":"General","domain":"styles","record_id":"styles/64"},{"Accessibility":"⚠ Text contrast","Best For":"Hero sections, backgrounds, creative brands, music platforms, fashion, lifestyle, premium products","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--mesh-color-1: #00FFFF, --mesh-color-2: #FF00FF, --mesh-color-3: #FFFF00, --mesh-color-4: #00FF66, --flow-duration: 10s, --shimmer-intensity: 0.3","Do Not Use For":"Data interfaces, text-heavy content, accessibility-critical, conservative brands","Effects & Animation":"CSS mesh-gradient (experimental), SVG gradients, canvas gradients, smooth color morphing, flowing animation","Era/Origin":"2025+ Gradient Evolution","Framework Compatibility":"CSS 8/10, SVG 10/10, Canvas 10/10","Implementation Checklist":"☐ Mesh gradient visible, ☐ Colors flow smoothly, ☐ Aurora effect achieved, ☐ Performance acceptable, ☐ Text remains readable, ☐ Mobile renders ok","Keywords":"Complex gradients, mesh gradients, multi-color blend, aurora effect, flowing colors, iridescent, holographic, prismatic","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Good","No":65,"Performance":"⚠ Good","Primary Colors":"Multi-stop gradients: Cyan #00FFFF, Magenta #FF00FF, Yellow #FFFF00, Blue #0066FF, Green #00FF66","Secondary Colors":"Complementary mesh points, smooth color transitions, iridescent overlays, chromatic shifts","Style Category":"Gradient Mesh / Aurora Evolved","Type":"General","domain":"styles","record_id":"styles/65"},{"Accessibility":"✓ WCAG AAA","Best For":"News sites, blogs, magazines, editorial content, long-form articles, journalism, publishing","Complexity":"Low","Conversion-Focused":"✓ Medium","Dark Mode ✓":"✓ Full","Design System Variables":"--grid-cols: asymmetric, --body-font: Georgia/Merriweather, --heading-font: bold sans, --drop-cap-size: 4em, --pull-quote-size: 1.5em, --column-gap: 2rem","Do Not Use For":"Dashboards, apps, e-commerce catalogs, real-time data, short-form content","Effects & Animation":"Smooth scroll, reveal on scroll, parallax images, text animations, page-flip transitions","Era/Origin":"2020s Editorial Digital","Framework Compatibility":"CSS Grid 10/10, Tailwind 10/10","Implementation Checklist":"☐ Grid asymmetric, ☐ Typography editorial, ☐ Pull quotes styled, ☐ Drop caps present, ☐ Images large/impactful, ☐ Mobile reflows well","Keywords":"Magazine layout, asymmetric grid, editorial typography, pull quotes, drop caps, column layout, print-inspired","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":66,"Performance":"⚡ Excellent","Primary Colors":"High contrast: Black #000000, White #FFFFFF, accent brand color","Secondary Colors":"Muted supporting, pull quote highlights, byline colors, section dividers","Style Category":"Editorial Grid / Magazine","Type":"General","domain":"styles","record_id":"styles/66"},{"Accessibility":"⚠ Can cause strain","Best For":"Music platforms, gaming, tech brands, creative portfolios, nightlife, entertainment, video platforms","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Dark preferred","Design System Variables":"--rgb-offset: 2px, --red-channel: #FF0000, --green-channel: #00FF00, --blue-channel: #0000FF, --glitch-duration: 0.3s, --scanline-opacity: 0.1","Do Not Use For":"Corporate, healthcare, finance, accessibility-critical, elderly users","Effects & Animation":"RGB offset animation, glitch timing, scan line movement, noise flicker, distortion on hover","Era/Origin":"2020s Retro-Tech","Framework Compatibility":"CSS filters 10/10, GSAP 10/10","Implementation Checklist":"☐ RGB split visible, ☐ Glitch effect controlled, ☐ Scan lines subtle, ☐ Performance ok, ☐ Readability maintained, ☐ Reduced motion option","Keywords":"RGB split, color fringing, glitch, retro tech, VHS, analog error, distortion, lens effect","Light Mode ✓":"✓ Full","Mobile-Friendly":"◐ Medium","No":67,"Performance":"⚠ Good","Primary Colors":"Offset RGB: Red #FF0000, Green #00FF00, Blue #0000FF, Black #000000","Secondary Colors":"Neon accents, scan lines, noise overlays, error colors","Style Category":"Chromatic Aberration / RGB Split","Type":"General","domain":"styles","record_id":"styles/67"},{"Accessibility":"✓ WCAG AA","Best For":"Photography portfolios, music/vinyl brands, vintage fashion, nostalgia marketing, film industry, cafes","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"◐ Partial","Design System Variables":"--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","Do Not Use For":"Modern tech, SaaS, healthcare, children's apps, corporate enterprise","Effects & Animation":"Film grain overlay, VHS tracking effect, polaroid shake, fade-in transitions, light leak animations","Era/Origin":"1970s-90s Analog Revival","Framework Compatibility":"CSS filters 10/10, Canvas 9/10","Implementation Checklist":"☐ Film grain visible, ☐ Colors faded/warm, ☐ Light leaks present, ☐ Nostalgic feel achieved, ☐ Performance with filters, ☐ Images look vintage","Keywords":"Film grain, VHS, cassette tape, polaroid, analog warmth, faded colors, light leaks, vintage photography","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ High","No":68,"Performance":"⚡ Good","Primary Colors":"Faded Cream #F5E6C8, Warm Sepia #D4A574, Muted Teal #4A7B7C, Soft Pink #E8B4B8","Secondary Colors":"Grain overlays, light leak oranges, shadow blues, vintage paper tones, desaturated accents","Style Category":"Vintage Analog / Retro Film","Type":"General","domain":"styles","record_id":"styles/68"},{"Accessibility":"⚠ WCAG AA (high contrast primaries; verify yellow text separately)","Best For":"Mobile-first apps needing high personality, onboarding flows, branding-forward product screens, artisan/design brands, editorial mobile experiences","Complexity":"Medium","Conversion-Focused":"◐ Medium","Dark Mode ✓":"◐ Partial (primary palette only)","Design System Variables":"--color-red: #D02020, --color-blue: #1040C0, --color-yellow: #F0C020, --color-bg: #F0F0F0, --color-fg: #121212, --border-width: 2px, --shadow-hard: 4px 4px 0px 0px #121212, --radius-block: 0px, --radius-pill: 9999px, --font-display: Outfit, --font-weight-hero: 900","Do Not Use For":"Enterprise dashboards, accessibility-critical contexts (requires extra a11y work), data-heavy screens, conservative industries","Effects & Animation":"Hard offset shadows (4px 4px 0px black), mechanical press active:translate, no smooth hover — instant 0ms transitions, dot grid pattern on sections, slide-over transitions","Era/Origin":"1919 Bauhaus Movement","Framework Compatibility":"React Native 10/10, Expo 10/10, SwiftUI 9/10, Flutter 9/10, Tailwind 9/10","Implementation Checklist":"☐ Geometric shapes only (circle/square), ☐ Primary color blocking applied, ☐ Hard offset shadows 4px, ☐ border-2 border-black on all elements, ☐ Mechanical press active state, ☐ Outfit Black 900 uppercase headlines, ☐ Safe area (pt-safe pb-safe) respected, ☐ Thumb-friendly h-12/h-14 touch targets, ☐ No hover states (mobile-only), ☐ Vertical rhythm single-column stack","Keywords":"bauhaus, geometric, constructivist, primary colors, hard shadow, bold, tactile, functional, poster, mechanical, architectural","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Mobile-First","No":69,"Performance":"⚡ Excellent","Primary Colors":"Primary Red #D02020, Primary Blue #1040C0, Primary Yellow #F0C020","Secondary Colors":"Background #F0F0F0 (Off-white), Foreground #121212 (Stark Black), Muted #E0E0E0","Style Category":"Bauhaus (包豪斯)","Type":"Mobile","domain":"styles","record_id":"styles/69"},{"Accessibility":"✓ WCAG AAA (pure black/white)","Best For":"Luxury fashion e-commerce mobile, editorial publications, high-end portfolio apps, experimental/avant-garde brands, digital exhibitions","Complexity":"Medium","Conversion-Focused":"◐ Medium","Dark Mode ✓":"◐ Dark by section only (inverted sections)","Design System Variables":"--color-bg: #FFFFFF, --color-fg: #000000, --color-muted: #F5F5F5, --color-muted-fg: #525252, --color-border: #000000, --color-border-light: #E5E5E5, --radius: 0px, --shadow: none, --border-hairline: 1px solid #E5E5E5, --border-thin: 1px solid #000000, --border-thick: 2px solid #000000, --border-heavy: 4px solid #000000, --font-display: Playfair Display, --font-body: Source Serif 4, --font-mono: JetBrains Mono","Do Not Use For":"Entertainment, colorful brands, friendly consumer apps, anything requiring visual warmth or gradient","Effects & Animation":"Instant inversion active state (tap → bg-black text-white, zero transition-none), no shadows (strictly 2D), full-bleed horizontal rules (4px black section dividers), subtle paper noise texture (opacity: 0.03), slide-in page transitions with hard edge","Era/Origin":"2020s Editorial Mobile","Framework Compatibility":"React Native 10/10, Expo 10/10, SwiftUI 9/10, Tailwind 9/10","Implementation Checklist":"☐ 0px border-radius on ALL elements, ☐ No shadows anywhere, ☐ Instant inversion on every tap (transition-none), ☐ 4px black line separates hero from content, ☐ Safe area respected (pt-safe pb-safe), ☐ h-14 touch targets, ☐ Sticky section headers with border-b, ☐ Typography hero: word spans full screen width, ☐ Paper noise texture on backgrounds, ☐ Menu word-label instead of icon","Keywords":"monochrome, black white, editorial, austere, typographic, sharp, zero radius, high contrast, brutalist, pocket editorial, serif, mechanical","Light Mode ✓":"✓ Full (Light Mode Enforced)","Mobile-Friendly":"✓ Mobile-First","No":70,"Performance":"⚡ Excellent","Primary Colors":"Pure Black #000000, Pure White #FFFFFF","Secondary Colors":"Muted #F5F5F5, Dark Gray #525252, Border Light #E5E5E5","Style Category":"Minimalist Monochrome","Type":"Mobile","domain":"styles","record_id":"styles/70"},{"Accessibility":"⚠ WCAG AA (requires careful accent contrast check)","Best For":"Developer tools, pro productivity apps, fintech/trading dashboards, media/streaming platforms, AI tool interfaces, high-end gaming companion apps","Complexity":"High","Conversion-Focused":"◐ Medium","Dark Mode ✓":"✓ Dark Mode Primary","Design System Variables":"--bg-deep: #020203, --bg-base: #050506, --bg-elevated: #0a0a0c, --surface: rgba(255 255 255/0.05), --foreground: #EDEDEF, --foreground-muted: #8A8F98, --accent: #5E6AD2, --accent-glow: rgba(94 106 210/0.2), --border: rgba(255 255 255/0.08), --radius: 16px, --easing: cubic-bezier(0.16 1 0.3 1), --font: Inter","Do Not Use For":"Consumer apps needing warmth, children's apps, health/medical contexts where dark feels harsh, high-accessibility contexts needing maximum contrast","Effects & Animation":"Expo.out Bezier(0.16,1,0.3,1) easing; spring modals (damping:20 stiffness:90); haptic-linked press (Impact Light/Medium); animated ambient light blobs (Reanimated translateX/Y slow oscillation); BlurView glassmorphism headers/nav (intensity 20); scale press 0.97 → 1.0; avoid pure #000000 (OLED smear)","Era/Origin":"2020s Cinematic Mobile","Framework Compatibility":"React Native 10/10, Expo 10/10, react-native-skia 9/10, SwiftUI 8/10","Implementation Checklist":"☐ No pure #000000 backgrounds, ☐ LinearGradient base screen, ☐ Animated ambient blobs (Reanimated, native driver), ☐ BlurView on tab bar and headers, ☐ borderRadius 16 on all cards, ☐ Haptic feedback on every Pressable, ☐ Bezier(0.16,1,0.3,1) easing used, ☐ Accent glow behind primary button, ☐ No solid grey borders (rgba only), ☐ Bottom sheets replace all modals","Keywords":"dark mode, cinematic, ambient light, glassmorphism, deep black, indigo, glow, blur, atmospheric, reanimated, haptic, premium, layered, frosted glass, linear gradient","Light Mode ✓":"✓ Light mode only as exception","Mobile-Friendly":"✓ Mobile-First","No":71,"Performance":"⚠ Good (blur effects require native driver)","Primary Colors":"Deep #020203, Base #050506, Elevated #0a0a0c, Accent #5E6AD2","Secondary Colors":"Foreground #EDEDEF, Muted #8A8F98, Accent Glow rgba(94 106 210/0.2), Border rgba(255 255 255/0.08), Surface rgba(255 255 255/0.05)","Style Category":"Modern Dark (Cinema Mobile)","Type":"Mobile","domain":"styles","record_id":"styles/71"},{"Accessibility":"✓ WCAG AA","Best For":"B2B SaaS mobile dashboards, fintech apps, developer tool mobile companions, marketing analytics apps, HR/operations apps, modern business productivity","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"◐ Partial","Design System Variables":"--bg: #FAFAFA, --fg: #0F172A, --muted: #F1F5F9, --accent: #0052FF, --accent-sec: #4D7CFF, --card: #FFFFFF, --border: #E2E8F0, --radius: 16px, --shadow: shadowOpacity 0.1 shadowRadius 10, --spring: mass 1 damping 15 stiffness 120, --font-display: Calistoga, --font-body: Inter, --font-mono: JetBrains Mono","Do Not Use For":"Pure consumer entertainment, children's apps, highly decorative lifestyle apps, contexts where Electric Blue feels too corporate","Effects & Animation":"Spring animations (mass:1 damping:15 stiffness:120); gradient buttons (0052FF→4D7CFF); scale press 0.96→1.0 with haptics; floating FAB with gentle bobbing (Reanimated); glassmorphism BlurView navigation bars; staggered fade-in entrance (Y:20→0 + opacity:0→1); pulsing status dot on section badges; layout transitions (LayoutAnimation or Reanimated entering)","Era/Origin":"2020s SaaS Mobile","Framework Compatibility":"React Native 10/10, Expo 10/10, NativeWind 10/10, SwiftUI 8/10, Flutter 9/10","Implementation Checklist":"☐ SafeAreaView wraps all screens, ☐ All touch targets ≥ 44×44px, ☐ Spring config used for all transitions, ☐ Gradient buttons (not flat), ☐ Haptic on every Pressable, ☐ Section badges with PulseDot, ☐ Staggered entrance animation on screen mount, ☐ JetBrains Mono for data labels, ☐ Calistoga for hero headlines, ☐ Elevation/shadow on cards","Keywords":"saas, electric blue, gradient, fintech, spring animation, dual font, glassmorphism, boutique, premium, calistoga, inter, mono, tactile, haptic, bento","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Mobile-First","No":72,"Performance":"⚡ Excellent","Primary Colors":"Electric Blue #0052FF, Gradient End #4D7CFF","Secondary Colors":"Background #FAFAFA, Foreground #0F172A, Muted #F1F5F9, Card #FFFFFF, Border #E2E8F0","Style Category":"SaaS Mobile (High-Tech Boutique)","Type":"Mobile","domain":"styles","record_id":"styles/72"},{"Accessibility":"✓ High contrast (green on black ≫4.5:1 ratio)","Best For":"Developer tools, Web3/blockchain apps, geek-culture apps, ARG games, sci-fi/noir gaming companions, hacker/security tools, creative studio portfolios","Complexity":"Medium","Conversion-Focused":"✗ Low","Dark Mode ✓":"✓ OLED Dark Only","Design System Variables":"--bg: #050505, --fg-primary: #33FF00, --fg-amber: #FFB000, --fg-muted: #1A3D1A, --fg-error: #FF3333, --border: #33FF00, --radius: 0px, --font: SpaceMono-Regular or JetBrains Mono, --font-sizes: 12 14 16 only, --blink-duration: 500ms, --scanline-opacity: 0.05","Do Not Use For":"Consumer products, health apps, anything requiring approachability or warmth, children's apps, standard enterprise contexts","Effects & Animation":"Blinking cursor (500ms opacity loop), typewriter text reveal hook, scanline overlay (repeating lines 0.05 opacity), ASCII art headers, instant color inversion on press (bg-green text-black), haptic on every keystroke, boot sequence splash on launch","Era/Origin":"Retro-Future 1980s–2020s","Framework Compatibility":"React Native 10/10, Expo 10/10, NativeWind 9/10","Implementation Checklist":"☐ 0px border-radius everywhere, ☐ ASCII-style borders on cards, ☐ Boot sequence on launch, ☐ Blinking cursor component, ☐ Typewriter hook for new content, ☐ Scanline overlay (0.05 opacity), ☐ Haptic on every button press, ☐ Footer status bar component, ☐ hitSlop on all bracketed buttons (44×44dp), ☐ Reduced motion respected","Keywords":"terminal, cli, matrix green, monospace, hacker, ascii, command line, developer, web3, crypto, sci-fi, OLED, retro-future, field operative","Light Mode ✓":"✗ No","Mobile-Friendly":"✓ Mobile-First (OLED optimized)","No":73,"Performance":"⚡ Excellent","Primary Colors":"Matrix Green #33FF00, OLED Black #050505","Secondary Colors":"Amber #FFB000, Muted Green #1A3D1A, Error Red #FF3333, Border Green #33FF00","Style Category":"Terminal CLI (Mobile)","Type":"Mobile","domain":"styles","record_id":"styles/73"},{"Accessibility":"⚠ WCAG AA (verify zinc body text on dark bg)","Best For":"Immersive storytelling apps, brand flagship mobile, music/culture platforms, sports apps, underground zines, limited-edition product drops, performance dashboards","Complexity":"High","Conversion-Focused":"✓ High energy","Dark Mode ✓":"◐ Dark only (inverted sections)","Design System Variables":"--bg: #09090B, --fg: #FAFAFA, --muted: #27272A, --muted-fg: #A1A1AA, --accent: #DFE104, --accent-fg: #000000, --border: #3F3F46, --radius: 0px, --border-width: 2px, --shadow: none, --marquee-speed: 5000ms, --press-duration: 100ms, --font: Space Grotesk or Inter","Do Not Use For":"Calm informational apps, healthcare, finance contexts needing trust, children's, any context where aggressive typography feels inappropriate","Effects & Animation":"Infinite marquee (Reanimated, Linear easing, 5s loop, hard clip), hero parallax (scale 1.0→1.3 + fade), sticky section header push, card flood inversion on press (bg→#DFE104, text→#000000), haptic Medium on every press, scroll-triggered interpolate transforms, 0px radius, 2px borders, 100ms color transitions","Era/Origin":"2020s Mobile Brutalism","Framework Compatibility":"React Native 10/10, Expo 10/10, Reanimated 10/10, NativeWind 9/10","Implementation Checklist":"☐ Infinite marquee rows (Reanimated, no fade edges), ☐ Hero parallax scroll (scale+opacity Interpolate), ☐ All display text uppercase, ☐ 0px border-radius, ☐ 2px borders, ☐ Acid yellow card flood on press, ☐ Haptic Medium on every interaction, ☐ Font scale helper (windowWidth/375*size), ☐ Safe area for massive headers, ☐ Reduced motion stops marquees","Keywords":"kinetic, brutalism, motion, marquee, acid yellow, uppercase, oversized, aggressive typography, street, zine, high contrast, scroll-driven, haptic, reanimated","Light Mode ✓":"✓ Dark Primary","Mobile-Friendly":"✓ Mobile-First","No":74,"Performance":"⚡ Excellent (native driver required)","Primary Colors":"Acid Yellow #DFE104, Rich Black #09090B","Secondary Colors":"Off-white #FAFAFA, Dark Gray #27272A, Zinc #A1A1AA, Border Zinc #3F3F46","Style Category":"Kinetic Brutalism (Mobile)","Type":"Mobile","domain":"styles","record_id":"styles/74"},{"Accessibility":"✓ WCAG AA (large bold type helps)","Best For":"Cross-platform apps (iOS+Android parity), information-dense dashboards, system UI, brand illustration, onboarding flows, marketing pages, icon design","Complexity":"Low","Conversion-Focused":"✓ High","Dark Mode ✓":"◐ Partial (Dark mode via color swap only)","Design System Variables":"--bg: #FFFFFF, --surface: #F3F4F6, --fg: #111827, --primary: #3B82F6, --secondary: #10B981, --accent: #F59E0B, --border: #E5E7EB, --radius-sm: 6px, --radius-md: 12px, --radius-pill: 999px, --shadow: none, --elevation: 0, --touch-target: 48px, --spacing: 4 8 16 24 32 48","Do Not Use For":"Ultra-premium contexts needing depth/shadow, dark-mode-first products, contexts where flat design reads as unfinished or sterile","Effects & Animation":"Immediate press feedback (scale 0.97, no delay), color section blocking (full-width contrasting View), zero elevation/shadow, solid icon containers (colored squares/circles), geometric low-opacity shape overlays, bottom tabs solid fill (no floating)","Era/Origin":"2010s–2020s Flat Mobile","Framework Compatibility":"React Native 10/10, Expo 10/10, NativeWind 10/10, Flutter 9/10, SwiftUI 9/10","Implementation Checklist":"☐ Zero elevation AND shadowOpacity on all elements, ☐ Color-blocking sections (not borders), ☐ All touch targets ≥ 48×48, ☐ No gradients on flat elements, ☐ Icons inside solid colored containers, ☐ Pressable scale feedback, ☐ Geometric shapes as bg decoration, ☐ Bold flat bottom tabs (no floating), ☐ Primary headlines much larger than body, ☐ 4pt spacing system throughout","Keywords":"flat, 2D, no shadow, color blocking, geometric, bold, poster, icon, touch-first, minimal, clean, tailored, cross-platform","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Mobile-First","No":75,"Performance":"⚡ Excellent (no GPU effects)","Primary Colors":"Blue #3B82F6, Emerald #10B981","Secondary Colors":"Background #FFFFFF, Surface #F3F4F6, Text #111827, Amber #F59E0B, Border #E5E7EB","Style Category":"Flat Design Mobile (Touch-First)","Type":"Mobile","domain":"styles","record_id":"styles/75"},{"Accessibility":"✓ WCAG AA (with MD3 token checks)","Best For":"Android ecosystem apps, cross-platform productivity tools, MD3-based admin panels, data-heavy back-office UI with Material UI","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Full","Design System Variables":"--md3-bg: #FFFBFE, --md3-on-surface: #1C1B1F, --md3-primary: #6750A4, --md3-on-primary: #FFFFFF, --md3-secondary-container: #E8DEF8, --md3-on-secondary-container: #1D192B, --md3-tertiary: #7D5260, --md3-surface-container: #F3EDF7, --md3-outline: #79747E, --radius-pill: 999px, --easing-emphasized: cubic-bezier(0.2,0,0,1)","Do Not Use For":"Ultra-minimal brutalist brands, terminal/hacker aesthetics, monochrome editorial apps","Effects & Animation":"Tonal elevation (overlay colors instead of strong shadows), pill-shaped buttons and chips (borderRadius 999), emphasized easing Easing.bezier(0.2,0,0,1), state layers (pressed overlays 10–15% opacity), Reanimated-filled label float for inputs, HapticFeedback on FAB/toggles","Era/Origin":"Material Design 3","Framework Compatibility":"React Native 9/10, Expo 10/10, React Native Paper 9/10","Implementation Checklist":"☐ MD3 color tokens applied (background/surface/container), ☐ All CTAs are pill-shaped, ☐ State-layer overlays instead of opacity 0.5 hacks, ☐ Emphasized easing used for all animations, ☐ Floating label inputs implemented, ☐ FAB uses tertiary color with correct elevation, ☐ Safe areas respected for organic shapes, ☐ No pure white background, ☐ No harsh box-shadows (ambient only)","Keywords":"material design 3, md3, tonal surfaces, pills, soft curves, android, md3 easing, state layers, haptic, fab, google","Light Mode ✓":"✓ Full","Mobile-Friendly":"✓ Mobile-First","No":76,"Performance":"⚠ Good (requires gradients and overlays)","Primary Colors":"Primary Violet #6750A4, Secondary Container #E8DEF8, Tertiary #7D5260","Secondary Colors":"Surface #FFFBFE, On Surface #1C1B1F, Surface Container #F3EDF7, Outline #79747E","Style Category":"Material You (MD3 Mobile)","Type":"Mobile","domain":"styles","record_id":"styles/76"},{"Accessibility":"⚠ Requires careful contrast tuning","Best For":"Creative tools, collab platforms, Gen Z marketing & e-commerce, portfolio sites, sticker-book style content apps","Complexity":"High","Conversion-Focused":"✓ High","Dark Mode ✓":"✗ Dark","Design System Variables":"--bg: #FFFDF5, --ink: #000000, --accent-primary: #FF6B6B, --accent-secondary: #FFD93D, --accent-muted: #C4B5FD, --white: #FFFFFF, --border-primary: 4px solid #000000, --shadow-offset-small: 4px, --shadow-offset-medium: 8px, --radius: 0px, --radius-pill: 999px, --font: Space Grotesk","Do Not Use For":"Serious enterprise apps, conservative industries, sober fintech, accessibility-first contexts (must tune contrast)","Effects & Animation":"Thick 4px black borders on all major elements, hard offset shadows (4–8px, no blur), mechanical press: translateX/Y equal to shadow offset, slightly rotated cards/badges (-2deg/2deg), high-saturation color blocking, spring/linear animations only","Era/Origin":"2020s Neo-Brutalism","Framework Compatibility":"React Native 10/10, Expo 10/10, NativeWind 9/10","Implementation Checklist":"☐ 4px borders on major elements, ☐ Hard offset shadow implemented via extra View, ☐ Mechanical press hides shadow, ☐ Cream canvas background, ☐ Pop-art color palette used, ☐ Cards/badges slightly rotated, ☐ No gradients or soft shadows, ☐ Only bold/black type weights, ☐ Badges slapped with absolute positioning, ☐ Anti-patterns (no subtle gray, no blur) avoided","Keywords":"neo brutalism, pop art, stickers, thick borders, cream background, hot red, vivid yellow, soft violet, hard offset shadow, mechanical press, collage","Light Mode ✓":"✓ Light-first","Mobile-Friendly":"✓ Mobile-First","No":77,"Performance":"⚠ Moderate (shadows + transforms)","Primary Colors":"Cream #FFFDF5, Hot Red #FF6B6B, Vivid Yellow #FFD93D","Secondary Colors":"Soft Violet #C4B5FD, Pure Black #000000, White #FFFFFF","Style Category":"Neo Brutalism (Mobile)","Type":"Mobile","domain":"styles","record_id":"styles/77"},{"Accessibility":"✓ Contrast 18:1 achievable","Best For":"Creative brand heroes, reading-focused apps, event/exhibition pages, editorial mobile experiences, landing hero sections","Complexity":"Medium","Conversion-Focused":"✓ High","Dark Mode ✓":"◐ Light sections optional","Design System Variables":"--bg: #0A0A0A, --fg: #FAFAFA, --muted: #1A1A1A, --muted-fg: #737373, --accent: #FF3D00, --accent-fg: #0A0A0A, --border: #262626, --font-primary: Inter Tight, --font-display: Playfair Display Italic, --font-mono: JetBrains Mono","Do Not Use For":"Utility dashboards, kids apps, playful consumer products, contexts needing many icons or heavy imagery","Effects & Animation":"Hero headlines 48–72px (5:1 vs body size), tight tracking (-1.5px), edge-to-edge type, massive vertical spacing (60px+), underline CTAs (2–3px accent line), instant 200ms transitions (no bounce), strictly 0px radius containers, color shifts for active state instead of elevation","Era/Origin":"Editorial 2020s","Framework Compatibility":"React Native 10/10, Expo 10/10","Implementation Checklist":"☐ H1 at least 4–5× body size, ☐ All containers 0 radius, ☐ Underline CTA pattern used, ☐ Large vertical gaps between sections, ☐ No shadows or soft corners, ☐ Accent used only for interaction, ☐ Text bleeds to/over screen edges, ☐ Animation timings 200ms, ☐ Accessible contrast ≥ 18:1, ☐ Body text never below 16px","Keywords":"bold typography, editorial, poster, broadsheet, vermillion, negative space, edge-to-edge type, underline CTA, near-black, warm white","Light Mode ✓":"✓ Dark Mode Primary","Mobile-Friendly":"✓ Mobile-First","No":78,"Performance":"⚡ Excellent","Primary Colors":"Near Black #0A0A0A, Warm White #FAFAFA","Secondary Colors":"Muted #1A1A1A, Secondary Text #737373, Accent Vermillion #FF3D00, Border #262626","Style Category":"Bold Typography (Mobile Poster)","Type":"Mobile","domain":"styles","record_id":"styles/78"},{"Accessibility":"✓ Legible (serif optimized)","Best For":"Knowledge management apps, deep reading tools, ritual-heavy personal brands, lore-heavy RPG/roleplay apps, culture-specific community platforms","Complexity":"High","Conversion-Focused":"◐ Medium","Dark Mode ✓":"◐ Light parchment sections","Design System Variables":"--bg: #1C1714, --bg-alt: #251E19, --fg: #E8DFD4, --muted: #3D332B, --muted-fg: #9C8B7A, --border: #4A3F35, --accent-brass: #C9A962, --accent-crimson: #8B2635, --radius: 4px, --arch-radius: 100px, --shadow-card: 0 4px 6px rgba(0,0,0,0.4), --font-heading: Cormorant Garamond, --font-body: Crimson Pro, --font-label: Cinzel","Do Not Use For":"Hyper-modern tech dashboards, neon/glassmorphism, playful Gen Z branding","Effects & Animation":"Deep mahogany backgrounds, oak surface cards, brass accented CTAs, arch-top hero/imagery, heavy vignette overlays, sepia-tinted images, drop caps with brass Cinzel, Roman numeral volume headings, slow timing-based animations (Easing.out poly(4)), zero neon or modern tech cues","Era/Origin":"Timeless Scholarly","Framework Compatibility":"React Native 9/10, Expo 10/10","Implementation Checklist":"☐ Mahogany/oak/parchment palette applied, ☐ Brass used on all tappable items, ☐ Arch-top imagery used in hero/cards, ☐ Drop caps & Roman numerals used, ☐ Vignette overlay present, ☐ No sans-serif body fonts, ☐ No neon/bright modern colors, ☐ Animations use non-spring timing, ☐ Inputs use worn-leather style, ☐ Wax seal badges implemented","Keywords":"academia, library, mahogany, parchment, brass, crimson, serif, drop cap, arch-top, vignette, leather, scholarly, tactile","Light Mode ✓":"✓ Dark Rich","Mobile-Friendly":"◐ Mobile-First","No":79,"Performance":"⚠ Moderate (vignette + shadows)","Primary Colors":"Mahogany #1C1714, Oak #251E19","Secondary Colors":"Parchment #E8DFD4, Worn Leather #3D332B, Faded Ink #9C8B7A, Brass #C9A962, Library Crimson #8B2635","Style Category":"Academia (Scholarly Mobile)","Type":"Mobile","domain":"styles","record_id":"styles/79"},{"Accessibility":"⚠ Requires careful reduced-motion handling","Best For":"Gaming dashboards, crypto/cyberpunk apps, sci-fi companion tools, hacker OS skins, data-heavy monitoring HUDs","Complexity":"High","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Dark-only","Design System Variables":"--bg: #0A0A0F, --card: #12121A, --fg: #E0E0E0, --muted: #1C1C2E, --accent: #00FF88, --accent2: #FF00FF, --accent3: #00D4FF, --border: #2A2A3A, --destructive: #FF3366, --radius: 0px, --font-heading: Orbitron, --font-body: JetBrains Mono","Do Not Use For":"Serious enterprise, health/finance requiring calm trust, minimal editorial apps","Effects & Animation":"Deep void background with neon radiance, chamfered 45° corners via SVG/Skia, scanline overlay, CRT flicker opacity oscillation, glitch animations (translateX ±2), neon pulses around buttons, HUD corner brackets, terminal prompt text inputs, heavy use of blurView holographic panels","Era/Origin":"Cyber-Noir","Framework Compatibility":"React Native 10/10, Skia 9/10, Expo 10/10","Implementation Checklist":"☐ Chamfered corners used instead of radius, ☐ Scanline & CRT flicker implemented, ☐ Orbitron + JetBrains Mono typography, ☐ Neon glow shadows on primary buttons, ☐ Glitch animation on active states, ☐ Prompt-style inputs with custom cursor, ☐ HUD corner brackets implemented, ☐ Safe-area system status bar styled, ☐ Reduced motion disables glitch/flicker, ☐ Icons configured with Lucide accent color","Keywords":"cyberpunk, neon, glitch, chamfered, orbitron, jetbrains, scanlines, crt, hud, matrix, military, decker","Light Mode ✓":"✗ Light","Mobile-Friendly":"✓ Mobile-First HUD","No":80,"Performance":"⚠ Moderate–Heavy (Skia/blur/animations)","Primary Colors":"Void #0A0A0F, Card #12121A","Secondary Colors":"Neon Green #00FF88, Neon Magenta #FF00FF, Cyber Cyan #00D4FF, Neutral Text #E0E0E0, Alert Red #FF3366, Border #2A2A3A","Style Category":"Cyberpunk Mobile HUD","Type":"Mobile","domain":"styles","record_id":"styles/80"},{"Accessibility":"✓ WCAG AA with care","Best For":"DeFi dashboards, wallets, NFT marketplaces, Web3 social, metaverse utilities, high-tech fintech brands","Complexity":"High","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Dark-only","Design System Variables":"--bg-void: #030304, --bg-surface: #0F1115, --fg: #FFFFFF, --fg-muted: #94A3B8, --border-dim: rgba(30,41,59,0.2), --accent-bitcoin: #F7931A, --accent-burnt: #EA580C, --accent-gold: #FFD600, --radius-card: 24px, --radius-pill: 999px, --blur-intensity: 20, --font-heading: Space Grotesk, --font-body: Inter, --font-mono: JetBrains Mono","Do Not Use For":"Playful casual apps, low-tech brands, ultra-minimal editorial apps","Effects & Animation":"Deep void + dark matter surfaces, Bitcoin orange/gold gradients for CTAs, pill buttons with glowing shadows, glassmorphic BlurView nav, monospace data rows, gradient text balances + masked orange-gold, pulsing status indicators and vertical ledger timelines, ultra-thin borders, high-precision typography","Era/Origin":"Fintech/Web3","Framework Compatibility":"React Native 10/10, Expo 10/10, Reanimated 10/10","Implementation Checklist":"☐ Void/dark-matter palette applied, ☐ Bitcoin orange/gold gradient buttons, ☐ BlurView nav implemented, ☐ Monospace for numeric data, ☐ Hairline borders on blocks, ☐ Gradient text on balances, ☐ Pulsing network status indicators, ☐ Ledger vertical timeline, ☐ Haptics on money actions, ☐ SafeArea + FlashList for heavy lists","Keywords":"web3, bitcoin, defi, digital gold, fintech, wallet, orange, glassmorphism, gradient, blur, holographic, trust, precision","Light Mode ✓":"✗ Light","Mobile-Friendly":"✓ Mobile-First","No":81,"Performance":"⚠ Moderate (gradients+blur)","Primary Colors":"Bitcoin Orange #F7931A, Burnt Orange #EA580C, Digital Gold #FFD600","Secondary Colors":"Void #030304, Dark Matter #0F1115, Pure Light #FFFFFF, Stardust #94A3B8, Border Dim rgba(30,41,59,0.2)","Style Category":"Bitcoin DeFi (Mobile)","Type":"Mobile","domain":"styles","record_id":"styles/81"},{"Accessibility":"✓ WCAG AA (careful)","Best For":"Children education apps, teen social products, crypto gamification, creative tools, brand mascot-led apps","Complexity":"High","Conversion-Focused":"✓ High","Dark Mode ✓":"⚠ Dark (adjusted)","Design System Variables":"--bg: #F4F1FA, --card-bg: rgba(255,255,255,0.7), --text: #332F3A, --muted: #635F69, --accent: #7C3AED, --accent2: #DB2777, --success: #10B981, --warning: #F59E0B, --radius-outer: 50px, --radius-card: 32px, --radius-button: 20px, --font-heading: Nunito Black, --font-body: DM Sans","Do Not Use For":"Serious enterprise, high-density data, editorial reading apps, fintech trust signals","Effects & Animation":"Multi-layer shadow stacks (nested View) to simulate clay depth, LinearGradient #A78BFA→#7C3AED buttons, borderRadius 40–50 outer / 32 cards / 20 buttons, Reanimated spring squish (scale 0.92 on press), BlurView glass-clay hybrid cards, floating blobs with slow ±20px drift, Haptics Light on every press","Era/Origin":"Consumer/Education","Framework Compatibility":"React Native 10/10, Reanimated 10/10, Expo 10/10","Implementation Checklist":"☐ Background uses #F4F1FA (no pure white), ☐ Multi-layer clay shadow stack applied, ☐ Cards use blurred glass-clay hybrid, ☐ Buttons squish to scale 0.92 on press, ☐ Spring physics on all interactions, ☐ Nunito Black for headings, ☐ Background blobs drifting, ☐ Haptics on every press, ☐ Nested border radius (card 32, inner 24), ☐ Bento layout with hero span","Keywords":"claymorphism, clay, 3d, soft, bubbly, candy, playful, rounded, squish, tactile, inflate, silicone, haptic, spring","Light Mode ✓":"✓ Light","Mobile-Friendly":"✓ Mobile-First (thumb zone)","No":82,"Performance":"⚠ Moderate–Heavy (shadows+blur)","Primary Colors":"Vivid Violet #7C3AED, Hot Pink #DB2777","Secondary Colors":"Canvas #F4F1FA, Soft Charcoal #332F3A, Emerald #10B981, Amber #F59E0B, Lavender-Gray #635F69","Style Category":"Claymorphism (Mobile)","Type":"Mobile","domain":"styles","record_id":"styles/82"},{"Accessibility":"✓ WCAG AA","Best For":"B2B backend management, productivity tools, government and finance mobile apps, SaaS companion apps, enterprise dashboards","Complexity":"High","Conversion-Focused":"✓ High","Dark Mode ✓":"✓ Dark-ready (token inversion)","Design System Variables":"--bg: #F8FAFC, --surface: #FFFFFF, --text: #0F172A, --muted: #64748B, --primary: #4F46E5, --secondary: #7C3AED, --success: #10B981, --border: #E2E8F0, --radius-card: 16px, --radius-pill: 999px, --radius-input: 8px, --shadow-card: rgba(79,70,229,0.08), --font: Plus Jakarta Sans","Do Not Use For":"Pure consumer entertainment, Gen-Z youth apps, gaming UI, ultra-minimal editorial","Effects & Animation":"Indigo→Violet gradient primary CTAs + active tab highlights, colored card shadows rgba(79,70,229,0.08), pill buttons or 12pt radius, full-width CTA at screen bottom, spring press scale 0.97, floating label inputs with animated focus border, skeletal loading pulses (Indigo/Slate tint), Bottom Sheets with drag dismiss, swipe-to-action list cards, scroll-linked title collapse","Era/Origin":"Enterprise/SaaS","Framework Compatibility":"React Native 10/10, Reanimated 10/10, NativeWind 9/10","Implementation Checklist":"☐ Background #F8FAFC applied, ☐ Indigo→Violet gradient on primary CTA, ☐ Colored card shadows (not gray), ☐ Plus Jakarta Sans typography, ☐ Floating label inputs with Indigo focus, ☐ Scale 0.97 press with haptic Medium, ☐ Bottom Tab Navigation implemented, ☐ Safe Area strict compliance, ☐ Skeletal loading placeholders, ☐ Reduced Motion fallback","Keywords":"enterprise, saas, b2b, professional, indigo, violet, gradient, polished, trustworthy, clean, approachable, spring, haptic","Light Mode ✓":"✓ Light","Mobile-Friendly":"✓ Mobile-First (Safe Area strict)","No":83,"Performance":"✓ Performant","Primary Colors":"Indigo #4F46E5, Violet #7C3AED","Secondary Colors":"Slate 50 #F8FAFC, White #FFFFFF, Slate 900 #0F172A, Slate 500 #64748B, Emerald #10B981, Slate 200 #E2E8F0","Style Category":"Enterprise SaaS (Mobile)","Type":"Mobile","domain":"styles","record_id":"styles/83"},{"Accessibility":"⚠ Moderate (small/muted text risk)","Best For":"Low-fidelity prototyping, creative brands, children/picturebook apps, education tools, journaling apps, gamified puzzles","Complexity":"Medium","Conversion-Focused":"✗ Low-Conversion","Dark Mode ✓":"⚠ Dark (requires texture inversion)","Design System Variables":"--bg: #FDFBF7, --text: #2D2D2D, --accent-red: #FF4D4D, --accent-blue: #2D5DA1, --postit: #FFF9C4, --border-width: 3px, --shadow-offset: 4px 4px, --font-heading: Kalam Bold, --font-body: Patrick Hand, --rotation-card: -1deg to 1deg","Do Not Use For":"Enterprise dashboards, high-density data tables, fintech precision tools, medical or legal apps","Effects & Animation":"Wobbly borderRadius (unique per corner: 15/25/20/10), borderWidth 2–3 solid/dashed, hard offset shadow via rear View (4px,4px) #2D2D2D, Kalam Bold headings, PatrickHand Regular body, slight rotation (-1deg/1deg) on cards, absolute SVG scribble overlays (arrows/tape/tacks), jiggle -2deg↔2deg on error, LayoutAnimation spring on layout changes, Haptics on press, paper texture repeating background","Era/Origin":"Creative/Education","Framework Compatibility":"React Native 10/10, Reanimated 9/10, Expo 9/10","Implementation Checklist":"☐ Warm paper background texture applied, ☐ Kalam Bold headings, ☐ Wobbly corner radii on all cards, ☐ Hard offset shadow View (not blur), ☐ Cards slightly rotated, ☐ Button press shifts to cover shadow, ☐ SVG tape/tack decorations, ☐ PatrickHand for inputs, ☐ Jiggle error animation, ☐ Minimum 48x48 touch targets","Keywords":"sketch, hand-drawn, handwriting, wobbly, imperfect, paper, kalam, organic, collage, post-it, tape, offset shadow, scribble","Light Mode ✓":"✓ Light","Mobile-Friendly":"✓ Mobile-First (wobbly touch targets 48x48)","No":84,"Performance":"✓ Lightweight","Primary Colors":"Red Marker #FF4D4D, Pencil Black #2D2D2D","Secondary Colors":"Warm Paper #FDFBF7, Old Paper #E5E0D8, Blue Ballpoint #2D5DA1, Post-it Yellow #FFF9C4","Style Category":"Sketch Hand-Drawn (Mobile)","Type":"Mobile","domain":"styles","record_id":"styles/84"},{"Accessibility":"⚠ Moderate (low-contrast risk)","Best For":"Minimal hardware controls, smart home apps, aesthetic utility tools, health monitors, brand showcase pages","Complexity":"Medium","Conversion-Focused":"✗ Low-Conversion","Dark Mode ✓":"✗ Dark (breaks material metaphor)","Design System Variables":"--bg: #E0E5EC, --text: #3D4852, --muted: #6B7280, --accent: #6C63FF, --shadow-light: rgba(255,255,255,0.6), --shadow-dark: rgba(163,177,198,0.7), --inset-bg: #D1D9E6, --radius-card: 32px, --radius-button: 16px, --font: Plus Jakarta Sans or System","Do Not Use For":"High-density data, bright multi-color apps, apps needing strong visual hierarchy via color, dark-mode-only products","Effects & Animation":"Full-screen #E0E5EC base, dual-layer shadow via nested View (light top-left + dark bottom-right), extruded convex resting state, inset concave pressed/input state, Reanimated scale 0.97 on press, shadow opacity interpolates 1→0.4 on press, Haptics Light on every interaction, 8pt grid, no blur shadows (no shadowRadius blend), nested depth (extruded card contains inset icon slot)","Era/Origin":"Tools/Lifestyle","Framework Compatibility":"React Native 10/10, react-native-shadow-2 9/10, Reanimated 9/10","Implementation Checklist":"☐ Single #E0E5EC base applied across all screens, ☐ Dual shadow (light+dark) implemented via nested View, ☐ Extruded resting state on cards/buttons, ☐ Inset concave state on inputs, ☐ Scale 0.97 press + shadow opacity interpolation, ☐ Haptics Light on all presses, ☐ No black shadows or white backgrounds, ☐ Nested depth pattern (extruded→inset), ☐ Accent #6C63FF on active/focus only, ☐ 8pt grid spacing","Keywords":"neumorphism, soft ui, dual shadow, extruded, inset, clay surface, monochromatic, cool grey, haptic, ceramic, physical, depth","Light Mode ✓":"✓ Light-only","Mobile-Friendly":"✓ Mobile-First","No":85,"Performance":"✓ Lightweight","Primary Colors":"Accent Violet #6C63FF, Clay Base #E0E5EC","Secondary Colors":"Text Dark #3D4852, Text Muted #6B7280, Shadow Light rgba(255,255,255,0.6), Shadow Dark rgba(163,177,198,0.7), Inset Background #D1D9E6","Style Category":"Neumorphism (Mobile)","Type":"Mobile","domain":"styles","record_id":"styles/85"},{"Best For":"Luxury brands, fashion, spa, beauty, editorial, magazines, high-end e-commerce","Body Font":"Inter","Category":"Serif + Sans","Font Pairing Name":"Classic Elegant","Heading Font":"Playfair Display","Mood/Style Keywords":"elegant, luxury, sophisticated, timeless, premium, editorial","No":1,"Notes":"High contrast between elegant heading and clean body. Perfect for luxury/premium.","domain":"typography","record_id":"typography/1"},{"Best For":"SaaS, corporate sites, business apps, startups, professional services","Body Font":"Open Sans","Category":"Sans + Sans","Font Pairing Name":"Modern Professional","Heading Font":"Poppins","Mood/Style Keywords":"modern, professional, clean, corporate, friendly, approachable","No":2,"Notes":"Geometric Poppins for headings, humanist Open Sans for readability.","domain":"typography","record_id":"typography/2"},{"Best For":"Tech companies, startups, SaaS, developer tools, AI products","Body Font":"DM Sans","Category":"Sans + Sans","Font Pairing Name":"Tech Startup","Heading Font":"Space Grotesk","Mood/Style Keywords":"tech, startup, modern, innovative, bold, futuristic","No":3,"Notes":"Space Grotesk has unique character, DM Sans is highly readable.","domain":"typography","record_id":"typography/3"},{"Best For":"Publishing, blogs, news sites, literary magazines, book covers","Body Font":"Libre Baskerville","Category":"Serif + Serif","Font Pairing Name":"Editorial Classic","Heading Font":"Cormorant Garamond","Mood/Style Keywords":"editorial, classic, literary, traditional, refined, bookish","No":4,"Notes":"All-serif pairing for traditional editorial feel.","domain":"typography","record_id":"typography/4"},{"Best For":"Dashboards, admin panels, documentation, enterprise apps, design systems","Body Font":"Inter","Category":"Sans + Sans","Font Pairing Name":"Minimal Swiss","Heading Font":"Inter","Mood/Style Keywords":"minimal, clean, swiss, functional, neutral, professional","No":5,"Notes":"Single font family with weight variations. Ultimate simplicity.","domain":"typography","record_id":"typography/5"},{"Best For":"Children's apps, educational, gaming, creative tools, entertainment","Body Font":"Nunito","Category":"Display + Sans","Font Pairing Name":"Playful Creative","Heading Font":"Fredoka","Mood/Style Keywords":"playful, friendly, fun, creative, warm, approachable","No":6,"Notes":"Rounded, friendly fonts perfect for playful UIs.","domain":"typography","record_id":"typography/6"},{"Best For":"Marketing sites, portfolios, agencies, event pages, sports","Body Font":"Source Sans 3","Category":"Display + Sans","Font Pairing Name":"Bold Statement","Heading Font":"Bebas Neue","Mood/Style Keywords":"bold, impactful, strong, dramatic, modern, headlines","No":7,"Notes":"Bebas Neue for large headlines only. All-caps display font.","domain":"typography","record_id":"typography/7"},{"Best For":"Health apps, wellness, spa, meditation, yoga, organic brands","Body Font":"Raleway","Category":"Serif + Sans","Font Pairing Name":"Wellness Calm","Heading Font":"Lora","Mood/Style Keywords":"calm, wellness, health, relaxing, natural, organic","No":8,"Notes":"Lora's organic curves with Raleway's elegant simplicity.","domain":"typography","record_id":"typography/8"},{"Best For":"Developer tools, documentation, code editors, tech blogs, CLI apps","Body Font":"IBM Plex Sans","Category":"Mono + Sans","Font Pairing Name":"Developer Mono","Heading Font":"JetBrains Mono","Mood/Style Keywords":"code, developer, technical, precise, functional, hacker","No":9,"Notes":"JetBrains for code, IBM Plex for UI. Developer-focused.","domain":"typography","record_id":"typography/9"},{"Best For":"Vintage brands, breweries, restaurants, creative portfolios, posters","Body Font":"Merriweather","Category":"Display + Serif","Font Pairing Name":"Retro Vintage","Heading Font":"Abril Fatface","Mood/Style Keywords":"retro, vintage, nostalgic, dramatic, decorative, bold","No":10,"Notes":"Abril Fatface for hero headlines only. High-impact vintage feel.","domain":"typography","record_id":"typography/10"},{"Best For":"General purpose, portfolios, agencies, modern brands, landing pages","Body Font":"Work Sans","Category":"Sans + Sans","Font Pairing Name":"Geometric Modern","Heading Font":"Outfit","Mood/Style Keywords":"geometric, modern, clean, balanced, contemporary, versatile","No":11,"Notes":"Both geometric but Outfit more distinctive for headings.","domain":"typography","record_id":"typography/11"},{"Best For":"Fashion brands, luxury e-commerce, jewelry, high-end services","Body Font":"Montserrat","Category":"Serif + Sans","Font Pairing Name":"Luxury Serif","Heading Font":"Cormorant","Mood/Style Keywords":"luxury, high-end, fashion, elegant, refined, premium","No":12,"Notes":"Cormorant's elegance with Montserrat's geometric precision.","domain":"typography","record_id":"typography/12"},{"Best For":"SaaS products, web apps, dashboards, B2B, productivity tools","Body Font":"Plus Jakarta Sans","Category":"Sans + Sans","Font Pairing Name":"Friendly SaaS","Heading Font":"Plus Jakarta Sans","Mood/Style Keywords":"friendly, modern, saas, clean, approachable, professional","No":13,"Notes":"Single versatile font. Modern alternative to Inter.","domain":"typography","record_id":"typography/13"},{"Best For":"News sites, blogs, magazines, journalism, content-heavy sites","Body Font":"Roboto","Category":"Serif + Sans","Font Pairing Name":"News Editorial","Heading Font":"Newsreader","Mood/Style Keywords":"news, editorial, journalism, trustworthy, readable, informative","No":14,"Notes":"Newsreader designed for long-form reading. Roboto for UI.","domain":"typography","record_id":"typography/14"},{"Best For":"Personal blogs, invitations, creative portfolios, lifestyle brands","Body Font":"Quicksand","Category":"Script + Sans","Font Pairing Name":"Handwritten Charm","Heading Font":"Caveat","Mood/Style Keywords":"handwritten, personal, friendly, casual, warm, charming","No":15,"Notes":"Use Caveat sparingly for accents. Quicksand for body.","domain":"typography","record_id":"typography/15"},{"Best For":"Enterprise, government, healthcare, finance, accessibility-focused","Body Font":"Source Sans 3","Category":"Sans + Sans","Font Pairing Name":"Corporate Trust","Heading Font":"Lexend","Mood/Style Keywords":"corporate, trustworthy, accessible, readable, professional, clean","No":16,"Notes":"Lexend designed for readability. Excellent accessibility.","domain":"typography","record_id":"typography/16"},{"Best For":"Brutalist designs, developer portfolios, experimental, tech art","Body Font":"Space Mono","Category":"Mono + Mono","Font Pairing Name":"Brutalist Raw","Heading Font":"Space Mono","Mood/Style Keywords":"brutalist, raw, technical, monospace, minimal, stark","No":17,"Notes":"All-mono for raw brutalist aesthetic. Limited weights.","domain":"typography","record_id":"typography/17"},{"Best For":"Fashion brands, creative agencies, art galleries, design studios","Body Font":"Manrope","Category":"Sans + Sans","Font Pairing Name":"Fashion Forward","Heading Font":"Syne","Mood/Style Keywords":"fashion, avant-garde, creative, bold, artistic, edgy","No":18,"Notes":"Syne's unique character for headlines. Manrope for readability.","domain":"typography","record_id":"typography/18"},{"Best For":"Children's products, pet apps, friendly brands, wellness, soft UI","Body Font":"Nunito Sans","Category":"Sans + Sans","Font Pairing Name":"Soft Rounded","Heading Font":"Varela Round","Mood/Style Keywords":"soft, rounded, friendly, approachable, warm, gentle","No":19,"Notes":"Both rounded and friendly. Perfect for soft UI designs.","domain":"typography","record_id":"typography/19"},{"Best For":"Premium brands, modern agencies, SaaS, portfolios, startups","Body Font":"General Sans","Category":"Sans + Sans","Font Pairing Name":"Premium Sans","Heading Font":"Satoshi","Mood/Style Keywords":"premium, modern, clean, sophisticated, versatile, balanced","No":20,"Notes":"Note: Satoshi/General Sans on Fontshare. DM Sans as Google alternative.","domain":"typography","record_id":"typography/20"},{"Best For":"Vietnamese sites, multilingual apps, international products","Body Font":"Noto Sans","Category":"Sans + Sans","Font Pairing Name":"Vietnamese Friendly","Heading Font":"Be Vietnam Pro","Mood/Style Keywords":"vietnamese, international, readable, clean, multilingual, accessible","No":21,"Notes":"Be Vietnam Pro excellent Vietnamese support. Noto as fallback.","domain":"typography","record_id":"typography/21"},{"Best For":"Japanese sites, Japanese restaurants, cultural sites, anime/manga","Body Font":"Noto Sans JP","Category":"Serif + Sans","Font Pairing Name":"Japanese Elegant","Heading Font":"Noto Serif JP","Mood/Style Keywords":"japanese, elegant, traditional, modern, multilingual, readable","No":22,"Notes":"Noto fonts excellent Japanese support. Traditional + modern feel.","domain":"typography","record_id":"typography/22"},{"Best For":"Korean sites, K-beauty, K-pop, Korean businesses, multilingual","Body Font":"Noto Sans KR","Category":"Sans + Sans","Font Pairing Name":"Korean Modern","Heading Font":"Noto Sans KR","Mood/Style Keywords":"korean, modern, clean, professional, multilingual, readable","No":23,"Notes":"Clean Korean typography. Single font with weight variations.","domain":"typography","record_id":"typography/23"},{"Best For":"Traditional Chinese sites, cultural content, Taiwan/Hong Kong markets","Body Font":"Noto Sans TC","Category":"Serif + Sans","Font Pairing Name":"Chinese Traditional","Heading Font":"Noto Serif TC","Mood/Style Keywords":"chinese, traditional, elegant, cultural, multilingual, readable","No":24,"Notes":"Traditional Chinese character support. Elegant pairing.","domain":"typography","record_id":"typography/24"},{"Best For":"Simplified Chinese sites, mainland China market, business apps","Body Font":"Noto Sans SC","Category":"Sans + Sans","Font Pairing Name":"Chinese Simplified","Heading Font":"Noto Sans SC","Mood/Style Keywords":"chinese, simplified, modern, professional, multilingual, readable","No":25,"Notes":"Simplified Chinese support. Clean modern look.","domain":"typography","record_id":"typography/25"},{"Best For":"Arabic sites, Middle East market, Islamic content, bilingual sites","Body Font":"Noto Sans Arabic","Category":"Serif + Sans","Font Pairing Name":"Arabic Elegant","Heading Font":"Noto Naskh Arabic","Mood/Style Keywords":"arabic, elegant, traditional, cultural, RTL, readable","No":26,"Notes":"RTL support. Naskh for traditional, Sans for modern Arabic.","domain":"typography","record_id":"typography/26"},{"Best For":"Thai sites, Southeast Asia, tourism, Thai restaurants","Body Font":"Noto Sans Thai","Category":"Sans + Sans","Font Pairing Name":"Thai Modern","Heading Font":"Noto Sans Thai","Mood/Style Keywords":"thai, modern, readable, clean, multilingual, accessible","No":27,"Notes":"Clean Thai typography. Excellent readability.","domain":"typography","record_id":"typography/27"},{"Best For":"Hebrew sites, Israeli market, Jewish content, bilingual sites","Body Font":"Noto Sans Hebrew","Category":"Sans + Sans","Font Pairing Name":"Hebrew Modern","Heading Font":"Noto Sans Hebrew","Mood/Style Keywords":"hebrew, modern, RTL, clean, professional, readable","No":28,"Notes":"RTL support. Clean modern Hebrew typography.","domain":"typography","record_id":"typography/28"},{"Best For":"Law firms, legal services, contracts, formal documents, government","Body Font":"Lato","Category":"Serif + Sans","Font Pairing Name":"Legal Professional","Heading Font":"EB Garamond","Mood/Style Keywords":"legal, professional, traditional, trustworthy, formal, authoritative","No":29,"Notes":"EB Garamond for authority. Lato for clean body text.","domain":"typography","record_id":"typography/29"},{"Best For":"Healthcare, medical clinics, pharma, health apps, accessibility","Body Font":"Noto Sans","Category":"Sans + Sans","Font Pairing Name":"Medical Clean","Heading Font":"Figtree","Mood/Style Keywords":"medical, clean, accessible, professional, healthcare, trustworthy","No":30,"Notes":"Clean, accessible fonts for medical contexts.","domain":"typography","record_id":"typography/30"},{"Best For":"Banks, finance, insurance, investment, fintech, enterprise","Body Font":"IBM Plex Sans","Category":"Sans + Sans","Font Pairing Name":"Financial Trust","Heading Font":"IBM Plex Sans","Mood/Style Keywords":"financial, trustworthy, professional, corporate, banking, serious","No":31,"Notes":"IBM Plex conveys trust and professionalism. Excellent for data.","domain":"typography","record_id":"typography/31"},{"Best For":"Real estate, luxury properties, architecture, interior design","Body Font":"Josefin Sans","Category":"Serif + Sans","Font Pairing Name":"Real Estate Luxury","Heading Font":"Cinzel","Mood/Style Keywords":"real estate, luxury, elegant, sophisticated, property, premium","No":32,"Notes":"Cinzel's elegance for headlines. Josefin for modern body.","domain":"typography","record_id":"typography/32"},{"Best For":"Restaurants, cafes, food blogs, culinary, hospitality","Body Font":"Karla","Category":"Serif + Sans","Font Pairing Name":"Restaurant Menu","Heading Font":"Playfair Display SC","Mood/Style Keywords":"restaurant, menu, culinary, elegant, foodie, hospitality","No":33,"Notes":"Small caps Playfair for menu headers. Karla for descriptions.","domain":"typography","record_id":"typography/33"},{"Best For":"Vintage events, art deco themes, luxury hotels, classic cocktails","Body Font":"Didact Gothic","Category":"Display + Sans","Font Pairing Name":"Art Deco","Heading Font":"Poiret One","Mood/Style Keywords":"art deco, vintage, 1920s, elegant, decorative, gatsby","No":34,"Notes":"Poiret One for art deco headlines only. Didact for body.","domain":"typography","record_id":"typography/34"},{"Best For":"Magazines, online publications, editorial content, journalism","Body Font":"Public Sans","Category":"Serif + Sans","Font Pairing Name":"Magazine Style","Heading Font":"Libre Bodoni","Mood/Style Keywords":"magazine, editorial, publishing, refined, journalism, print","No":35,"Notes":"Bodoni's editorial elegance. Public Sans for clean UI.","domain":"typography","record_id":"typography/35"},{"Best For":"Crypto platforms, NFT, blockchain, web3, futuristic tech","Body Font":"Exo 2","Category":"Sans + Sans","Font Pairing Name":"Crypto/Web3","Heading Font":"Orbitron","Mood/Style Keywords":"crypto, web3, futuristic, tech, blockchain, digital","No":36,"Notes":"Orbitron for futuristic headers. Exo 2 for readable body.","domain":"typography","record_id":"typography/36"},{"Best For":"Gaming, esports, action games, competitive sports, entertainment","Body Font":"Chakra Petch","Category":"Display + Sans","Font Pairing Name":"Gaming Bold","Heading Font":"Russo One","Mood/Style Keywords":"gaming, bold, action, esports, competitive, energetic","No":37,"Notes":"Russo One for impact. Chakra Petch for techy body text.","domain":"typography","record_id":"typography/37"},{"Best For":"Craft brands, indie products, artisan, handmade, organic products","Body Font":"Cabin","Category":"Display + Sans","Font Pairing Name":"Indie/Craft","Heading Font":"Amatic SC","Mood/Style Keywords":"indie, craft, handmade, artisan, organic, creative","No":38,"Notes":"Amatic for handwritten feel. Cabin for readable body.","domain":"typography","record_id":"typography/38"},{"Best For":"Startups, pitch decks, product launches, bold brands","Body Font":"Satoshi","Category":"Sans + Sans","Font Pairing Name":"Startup Bold","Heading Font":"Clash Display","Mood/Style Keywords":"startup, bold, modern, innovative, confident, dynamic","No":39,"Notes":"Note: Clash Display on Fontshare. Outfit as Google alternative.","domain":"typography","record_id":"typography/39"},{"Best For":"E-commerce, online stores, product pages, retail, shopping","Body Font":"Nunito Sans","Category":"Sans + Sans","Font Pairing Name":"E-commerce Clean","Heading Font":"Rubik","Mood/Style Keywords":"ecommerce, clean, shopping, product, retail, conversion","No":40,"Notes":"Clean readable fonts perfect for product descriptions.","domain":"typography","record_id":"typography/40"},{"Best For":"Universities, research papers, academic journals, educational","Body Font":"Atkinson Hyperlegible","Category":"Serif + Sans","Font Pairing Name":"Academic/Research","Heading Font":"Crimson Pro","Mood/Style Keywords":"academic, research, scholarly, accessible, readable, educational","No":41,"Notes":"Crimson for scholarly headlines. Atkinson for accessibility.","domain":"typography","record_id":"typography/41"},{"Best For":"Dashboards, analytics, data visualization, admin panels","Body Font":"Fira Sans","Category":"Mono + Sans","Font Pairing Name":"Dashboard Data","Heading Font":"Fira Code","Mood/Style Keywords":"dashboard, data, analytics, code, technical, precise","No":42,"Notes":"Fira family cohesion. Code for data, Sans for labels.","domain":"typography","record_id":"typography/42"},{"Best For":"Music platforms, entertainment, events, festivals, performers","Body Font":"Poppins","Category":"Display + Sans","Font Pairing Name":"Music/Entertainment","Heading Font":"Righteous","Mood/Style Keywords":"music, entertainment, fun, energetic, bold, performance","No":43,"Notes":"Righteous for bold entertainment headers. Poppins for body.","domain":"typography","record_id":"typography/43"},{"Best For":"Design portfolios, creative professionals, minimalist brands","Body Font":"Space Grotesk","Category":"Sans + Sans","Font Pairing Name":"Minimalist Portfolio","Heading Font":"Archivo","Mood/Style Keywords":"minimal, portfolio, designer, creative, clean, artistic","No":44,"Notes":"Space Grotesk for distinctive headers. Archivo for clean body.","domain":"typography","record_id":"typography/44"},{"Best For":"Children's apps, educational games, kid-friendly content","Body Font":"Comic Neue","Category":"Display + Sans","Font Pairing Name":"Kids/Education","Heading Font":"Baloo 2","Mood/Style Keywords":"kids, education, playful, friendly, colorful, learning","No":45,"Notes":"Fun, playful fonts for children. Comic Neue is readable comic style.","domain":"typography","record_id":"typography/45"},{"Best For":"Wedding sites, invitations, romantic brands, bridal","Body Font":"Cormorant Infant","Category":"Script + Serif","Font Pairing Name":"Wedding/Romance","Heading Font":"Great Vibes","Mood/Style Keywords":"wedding, romance, elegant, script, invitation, feminine","No":46,"Notes":"Great Vibes for elegant accents. Cormorant for readable text.","domain":"typography","record_id":"typography/46"},{"Best For":"Science, research, tech documentation, data-heavy sites","Body Font":"Roboto Mono","Category":"Sans + Sans","Font Pairing Name":"Science/Tech","Heading Font":"Exo","Mood/Style Keywords":"science, technology, research, data, futuristic, precise","No":47,"Notes":"Exo for modern tech feel. Roboto Mono for code/data.","domain":"typography","record_id":"typography/47"},{"Best For":"Accessibility-critical sites, government, healthcare, inclusive design","Body Font":"Atkinson Hyperlegible","Category":"Sans + Sans","Font Pairing Name":"Accessibility First","Heading Font":"Atkinson Hyperlegible","Mood/Style Keywords":"accessible, readable, inclusive, WCAG, dyslexia-friendly, clear","No":48,"Notes":"Designed for maximum legibility. Excellent for accessibility.","domain":"typography","record_id":"typography/48"},{"Best For":"Sports, fitness, gyms, athletic brands, competition","Body Font":"Barlow","Category":"Sans + Sans","Font Pairing Name":"Sports/Fitness","Heading Font":"Barlow Condensed","Mood/Style Keywords":"sports, fitness, athletic, energetic, condensed, action","No":49,"Notes":"Condensed for impact headlines. Regular Barlow for body.","domain":"typography","record_id":"typography/49"},{"Best For":"Luxury minimalist brands, high-end fashion, premium products","Body Font":"Jost","Category":"Serif + Sans","Font Pairing Name":"Luxury Minimalist","Heading Font":"Bodoni Moda","Mood/Style Keywords":"luxury, minimalist, high-end, sophisticated, refined, premium","No":50,"Notes":"Bodoni's high contrast elegance. Jost for geometric body.","domain":"typography","record_id":"typography/50"},{"Best For":"Sci-fi interfaces, developer tools, cybersecurity, dashboards","Body Font":"Fira Code","Category":"Mono + Mono","Font Pairing Name":"Tech/HUD Mono","Heading Font":"Share Tech Mono","Mood/Style Keywords":"tech, futuristic, hud, sci-fi, data, monospaced, precise","No":51,"Notes":"Share Tech Mono has that classic sci-fi look.","domain":"typography","record_id":"typography/51"},{"Best For":"Pixel art games, retro websites, creative portfolios","Body Font":"VT323","Category":"Display + Sans","Font Pairing Name":"Pixel Retro","Heading Font":"Press Start 2P","Mood/Style Keywords":"pixel, retro, gaming, 8-bit, nostalgic, arcade","No":52,"Notes":"Press Start 2P is very wide/large. VT323 is better for body text.","domain":"typography","record_id":"typography/52"},{"Best For":"Neubrutalist designs, Gen Z brands, bold marketing","Body Font":"Public Sans","Category":"Display + Sans","Font Pairing Name":"Neubrutalist Bold","Heading Font":"Lexend Mega","Mood/Style Keywords":"bold, neubrutalist, loud, strong, geometric, quirky","No":53,"Notes":"Lexend Mega has distinct character and variable weight.","domain":"typography","record_id":"typography/53"},{"Best For":"University sites, archives, research papers, history","Body Font":"Crimson Text","Category":"Serif + Serif","Font Pairing Name":"Academic/Archival","Heading Font":"EB Garamond","Mood/Style Keywords":"academic, old-school, university, research, serious, traditional","No":54,"Notes":"Classic academic aesthetic. Very legible.","domain":"typography","record_id":"typography/54"},{"Best For":"Spatial computing, AR/VR, glassmorphism interfaces","Body Font":"Inter","Category":"Sans + Sans","Font Pairing Name":"Spatial Clear","Heading Font":"Inter","Mood/Style Keywords":"spatial, legible, glass, system, clean, neutral","No":55,"Notes":"Optimized for readability on dynamic backgrounds.","domain":"typography","record_id":"typography/55"},{"Best For":"Music festivals, automotive, high-energy brands","Body Font":"Space Mono","Category":"Display + Mono","Font Pairing Name":"Kinetic Motion","Heading Font":"Syncopate","Mood/Style Keywords":"kinetic, motion, futuristic, speed, wide, tech","No":56,"Notes":"Syncopate's wide stance works well with motion effects.","domain":"typography","record_id":"typography/56"},{"Best For":"Gen Z marketing, streetwear, viral campaigns","Body Font":"Epilogue","Category":"Display + Sans","Font Pairing Name":"Gen Z Brutal","Heading Font":"Anton","Mood/Style Keywords":"brutal, loud, shouty, meme, internet, bold","No":57,"Notes":"Anton is impactful and condensed. Good for stickers/badges.","domain":"typography","record_id":"typography/57"},{"Best For":"Bauhaus mobile apps, bold editorial mobile, design-forward branding apps, art/culture platforms","Body Font":"Outfit","Category":"Geometric Sans + Single Weight","Font Pairing Name":"Bauhaus Geometric","Heading Font":"Outfit","Mood/Style Keywords":"bauhaus, geometric, constructivist, bold, uppercase, architectural, mechanical, poster, tactile","No":58,"Notes":"Single-family system: Outfit 900 uppercase tracking-tighter for heroes; Outfit 700 uppercase for buttons/nav; Outfit 500 for body. Scale aggressively: text-4xl–text-5xl headlines on mobile.","domain":"typography","record_id":"typography/58"},{"Best For":"Luxury fashion mobile apps, editorial publications, digital exhibitions, portfolio apps, high-contrast e-reader aesthetics","Body Font":"Source Serif 4","Category":"Serif + Serif + Mono (Triple Stack)","Font Pairing Name":"Minimalist Monochrome Editorial","Heading Font":"Playfair Display","Mood/Style Keywords":"monochrome, editorial, austere, typographic, pocket manifesto, luxury, high contrast, brutalist mobile","No":59,"Notes":"Triple stack: Playfair Display 900 tracking-tighter leading-[0.9] for heroes (text-5xl–text-6xl breaks words graphically). Source Serif 4 300–600 for body legibility. JetBrains Mono 400–500 uppercase tracking-widest for tags/dates/labels. NO UI sans-serif — 100% serif/mono.","domain":"typography","record_id":"typography/59"},{"Best For":"Developer tools, fintech/trading, AI dashboards, streaming platforms, high-end productivity apps","Body Font":"Inter","Category":"Sans + Mono","Font Pairing Name":"Modern Dark Cinema (Inter System)","Heading Font":"Inter","Mood/Style Keywords":"dark, cinematic, technical, precision, clean, premium, developer, professional, high-end utility","No":60,"Notes":"Single-family precision system: Inter 700 (-1.5 tracking) for Display 48pt; Inter 600 (-0.5 tracking) for H1 32pt / H2 24pt; Inter 400 for body 16pt; Inter 500 uppercase +1.2 tracking for labels/mono. Gradient text via mask-view + react-native-linear-gradient (#FFFFFF → rgba(255,255,255,0.7)) on major headers.","domain":"typography","record_id":"typography/60"},{"Best For":"B2B SaaS mobile, fintech apps, analytics dashboards, marketing tools, operations platforms","Body Font":"Inter","Category":"Display Serif + Sans + Mono","Font Pairing Name":"SaaS Mobile Boutique (Calistoga + Inter)","Heading Font":"Calistoga","Mood/Style Keywords":"saas, boutique, electric, warm, editorial, bold, premium, fintech, business, dual font, human warmth","No":61,"Notes":"Tri-stack: Calistoga (adds human warmth) for heroes 36–42pt leading-1.1; Inter 400–600 for body/UI 16–18pt; JetBrains Mono 12pt uppercase tracking-[1.5] for data labels and section badges. Scale: Hero 36–42pt, Section H2 28–32pt, Body 16–18pt, Label 12pt. Avoid italic Calistoga except editorial callouts.","domain":"typography","record_id":"typography/61"},{"Best For":"Developer tools, Web3/blockchain apps, hacker aesthetic, sci-fi games, ARG, security tools, geek-culture portfolios","Body Font":"JetBrains Mono","Category":"Mono + Mono (Single Family)","Font Pairing Name":"Terminal CLI Monospace","Heading Font":"JetBrains Mono","Mood/Style Keywords":"terminal, cli, hacker, monospace, matrix, developer, retro-future, command line, precision, OLED","No":62,"Notes":"Single monospace system: use ONLY JetBrains Mono (or SpaceMono-Regular as system fallback). Strict sizes: 12pt / 14pt / 16pt only — no in-between. Weight: 400 normal (bold ruins mono character). Line height: 1.2x font size for information density. Letter spacing: normal (monospaced auto-spacing). All UI labels uppercase. ASCII borders and text-based progress bars.","domain":"typography","record_id":"typography/62"},{"Best For":"Music/culture apps, sports platforms, brand flagship mobile, performance dashboards, underground product drops","Body Font":"Space Grotesk","Category":"Geometric Sans (Single Dominant)","Font Pairing Name":"Kinetic Brutalism (Space Grotesk)","Heading Font":"Space Grotesk","Mood/Style Keywords":"kinetic, brutalist, aggressive, uppercase, oversized, display, motion, street, bold, high-energy, zine","No":63,"Notes":"Dominant single-family system: Space Grotesk 700–900 for ALL display. Scale: Hero 60–120pt (windowWidth/375*size), Section 40–50pt, Card titles 28–32pt, Body 18–20pt, Labels 12pt. ALL display/buttons/nav: UPPERCASE, letterSpacing -1 (large) / +2 (labels), lineHeight 0.9–1.1x. Use Inter as fallback. Font scale must use PixelRatio helper for responsive sizing.","domain":"typography","record_id":"typography/63"},{"Best For":"Cross-platform apps, dashboards, system UI, onboarding, marketing pages, informational apps, icon-heavy interfaces","Body Font":"Inter","Category":"Sans + Sans","Font Pairing Name":"Flat Design Mobile (System Bold)","Heading Font":"Inter","Mood/Style Keywords":"flat, clean, system, bold, geometric, cross-platform, icon, poster, minimal, functional, responsive","No":64,"Notes":"System-first strategy: Inter as primary, falls back to system SF/Roboto on iOS/Android. Scale: Headlines fontWeight 800 letterSpacing -0.5; Subheadings fontWeight 600 fontSize 18; Body fontWeight 400 lineHeight 24; Labels fontWeight 700 uppercase letterSpacing 1. Thick weights carry all hierarchy since there are no shadows. Use aggressive size contrast (poster rule: body 16pt vs headline 40pt+). Avoid italic.","domain":"typography","record_id":"typography/64"},{"Best For":"Android apps, cross-platform tools, productivity software, data-heavy B2B dashboards, enterprise mobile","Body Font":"Roboto","Category":"Sans (System Default)","Font Pairing Name":"Material You MD3 (Roboto System)","Heading Font":"Roboto","Mood/Style Keywords":"material design 3, md3, android, google, tonal, friendly, rounded, accessible, adaptive","No":65,"Notes":"MD3 type scale: Display Large 56px/400/64px. Headline Large 32px/500/40px. Title Large 22px/500/28px. Body Large 16px/400/24px. Label Medium 12px/500/16px. Buttons and Labels: letterSpacing 0.1px. Use system Roboto on Android; load from Google Fonts for iOS parity. Never use custom weights beyond 300–700.","domain":"typography","record_id":"typography/65"},{"Best For":"Creative tools, Gen-Z marketing, e-commerce for youth culture, content portfolios, collage-style apps","Body Font":"Space Grotesk","Category":"Geometric Sans (Bold-Only)","Font Pairing Name":"Neo Brutalism Mobile (Space Grotesk Heavy)","Heading Font":"Space Grotesk","Mood/Style Keywords":"neo brutalism, pop art, loud, bold, heavy, stickers, mechanical, high contrast, cream, gen-z","No":66,"Notes":"Strictly 700 (Bold) and 900 (Black/Heavy) ONLY — never Regular or Light. Display: 48–64px. Heading: 24–32px. Body: 18–20px (stays heavy for brutalist density). Labels: 14px ALL CAPS letterSpacing 2. All buttons and navigation: uppercase. System bold as fallback. No italic, no thin weights.","domain":"typography","record_id":"typography/66"},{"Best For":"Creative brand flagships, reading platforms, event apps, flash pages, luxury mobile experiences","Body Font":"Playfair Display","Category":"Sans + Serif (Display) + Mono","Font Pairing Name":"Bold Typography Mobile (Inter-Tight Poster)","Heading Font":"Inter","Mood/Style Keywords":"bold typography, editorial, poster, near-black, vermillion, luxury, type-as-hero, manifesto, high-contrast","No":67,"Notes":"Tri-stack: Inter 600–800 for all UI (letterSpacing -1.5px heroes, -0.5px subheads). Playfair Display Italic ONLY for pull quotes. JetBrains Mono for labels and stats. Scale: 12px labels, 16px body, 22px sub, 32px section, 40px H2, 56px H1, 72px Hero Statement. 5:1 ratio H1:Body is mandatory. lineHeight 1.1 headlines, 1.6 body. Underlines (2–3pt accent) replace buttons for interactions.","domain":"typography","record_id":"typography/67"},{"Best For":"Knowledge management apps, scholarly reading tools, personal brand portfolios, RPG games, cultural community platforms","Body Font":"Crimson Pro","Category":"Serif + Book Serif + Engraved (Triple Stack)","Font Pairing Name":"Academia Mobile (Cormorant + Crimson + Cinzel)","Heading Font":"Cormorant Garamond","Mood/Style Keywords":"academia, library, mahogany, parchment, brass, scholarly, prestige, antique, victorian, leather","No":68,"Notes":"Triple-stack: Cormorant Garamond Medium for all headings (32–40px tight leading). Crimson Pro Regular for body reading text (16–18px, lineHeight 24–26px). Cinzel SemiBold for ALL-CAPS labels, overlines, section prefixes (10–12px, letterSpacing 2–3px). Drop caps: first letter 60px Cinzel in Brass #C9A962. Section prefix: VOLUME I/II/III in Cinzel 10px. NO sans-serif anywhere.","domain":"typography","record_id":"typography/68"},{"Best For":"Gaming companion apps, fintech/crypto, data visualization, dark brand apps, cyberpunk narrative games","Body Font":"JetBrains Mono","Category":"Tech Display + Mono","Font Pairing Name":"Cyberpunk Mobile (Orbitron + JetBrains Mono)","Heading Font":"Orbitron","Mood/Style Keywords":"cyberpunk, neon, glitch, hud, sci-fi, dark, matrix green, magenta, chamfered, tactical","No":69,"Notes":"Dual-stack: Orbitron 700–900 for H1 (42px uppercase letterSpacing 4, fontWeight 900). JetBrains Mono 400–500 for all body/data text (14px letterSpacing 1). Labels: 10px uppercase opacity 0.7. Heading scale aggressive: H1 42px, H2 28px, Section 20px. Body 14px monospace only. NO mixed sans-serif. Fallback: monospace system font. Orbitron requires loading — use NativeWind or useFonts hook.","domain":"typography","record_id":"typography/69"},{"Best For":"DeFi protocols and wallets, NFT platforms, metaverse social apps, high-tech brand landing pages","Body Font":"Inter","Category":"Geometric Sans + Sans + Mono (Triple)","Font Pairing Name":"Web3 Bitcoin DeFi (Space Grotesk + Inter + Mono)","Heading Font":"Space Grotesk","Mood/Style Keywords":"web3, bitcoin, defi, digital gold, fintech, crypto, trustless, luminescent, precision, dark","No":70,"Notes":"Tri-stack: Space Grotesk 600–700 for headings (geometric, technical character). Inter 400–600 for all body and UI text (high legibility). JetBrains Mono Medium for all data/stats/prices/hashes (technical accuracy). Buttons: Inter Bold uppercase letterSpacing 1.5. Balance figures use MaskedView gradient text (orange→gold). Heading scale: H1 36–42px, H2 24–28px, body 16–18px, mono labels 12–14px.","domain":"typography","record_id":"typography/70"},{"Best For":"Children education apps, teen social, brand mascot apps, creative tools, fintech gamification","Body Font":"DM Sans","Category":"Display Rounded + Geometric Sans","Font Pairing Name":"Claymorphism Mobile (Nunito + DM Sans)","Heading Font":"Nunito","Mood/Style Keywords":"claymorphism, clay, rounded, playful, candy, bubbly, soft, 3d, children, education, tactile, spring, nunito, dm sans","No":71,"Notes":"Dual-stack: Nunito Black (900) or ExtraBold (800) for ALL headings — rounded terminals are mandatory. DM Sans Medium (500) for body text — clean and geometric. Scale: Hero 48px lineHeight 52 letterSpacing -1. Section Title 32px lineHeight 38. Card Title 22px lineHeight 28. Body 16px lineHeight 24. Never use Nunito for body text (too decorative at small sizes). Never use weights below 700 for any heading. includeFontPadding: false on all Nunito Text components for vertical centering in rounded buttons.","domain":"typography","record_id":"typography/71"},{"Best For":"B2B SaaS apps, productivity tools, government and finance mobile apps, admin dashboards, enterprise onboarding","Body Font":"Plus Jakarta Sans","Category":"Geometric Sans (Single Family)","Font Pairing Name":"Enterprise SaaS Mobile (Plus Jakarta Sans)","Heading Font":"Plus Jakarta Sans","Mood/Style Keywords":"enterprise, saas, b2b, professional, indigo, modern, approachable, legible, ios dynamic type, android scaling","No":72,"Notes":"Single-family system: Plus Jakarta Sans balances professional authority with mobile approachability. Weight scale: ExtraBold 800 for screen titles/hero (line height 1.1–1.2). Bold 700 for section headers. SemiBold 600 for card titles and buttons. Regular 400 for body text (line height 1.4–1.5). Must support iOS Dynamic Type and Android font scaling — never hardcode pixel sizes without respecting system font scale. Button text: uppercase, letterSpacing 0.5. Caption: 12px Regular. Muted: Slate 500 #64748B.","domain":"typography","record_id":"typography/72"},{"Best For":"Journaling apps, prototype tools, children's picturebook apps, creative platforms, gamified puzzle apps","Body Font":"Patrick Hand","Category":"Handwritten + Handwritten (Dual)","Font Pairing Name":"Sketch Hand-Drawn Mobile (Kalam + Patrick Hand)","Heading Font":"Kalam","Mood/Style Keywords":"sketch, hand-drawn, handwriting, human, imperfect, organic, paper, kalam, patrick hand, education, journal, creative","No":73,"Notes":"Dual handwritten stack: Kalam Bold (700) for all headings — high visual weight, felt-tip marker aesthetic, conveys intentional messiness. Patrick Hand Regular for all body text — highly legible at mobile sizes while remaining distinctly human. Scale: Heading 28–36px with lineHeight adjusted for descenders. Body 16–18px lineHeight 1.5. Labels 14px. Vary font sizes slightly between adjacent elements for spontaneous feel. Avoid alignment: 'center' for long body text — left-aligned reads more naturally. Both fonts require useFonts loading in Expo. Never use these fonts for financial figures or legal text.","domain":"typography","record_id":"typography/73"},{"Best For":"Smart home controls, minimal tools, aesthetic dashboards, health monitors, brand showcase pages","Body Font":"Plus Jakarta Sans","Category":"Geometric Sans (System Fallback)","Font Pairing Name":"Neumorphism Mobile (Plus Jakarta Sans + System)","Heading Font":"Plus Jakarta Sans","Mood/Style Keywords":"neumorphism, soft ui, monochromatic, cool grey, minimal, physical, depth, ceramic, system font, utility","No":74,"Notes":"Single-family or System fallback: Plus Jakarta Sans Bold/Medium pairs beautifully with the monochromatic #E0E5EC surface — subtle geometry without competing with the depth effect. Heading: 24–32px Bold (700), letterSpacing -0.5 for modern premium feel. Body: 16px Medium (500), lineHeight 1.4. Caption: 12px Regular (400). Use Text Primary #3D4852 (7.5:1 contrast against #E0E5EC) for all primary text. Use Text Muted #6B7280 (4.6:1 contrast) for secondary text. Accent color #6C63FF only on active labels or focus indicators. Never use italic or thin weights — they lose legibility against the embossed background. System (SF Pro / Roboto) is an acceptable fallback for performance-sensitive implementations.","domain":"typography","record_id":"typography/74"},{"Anti_Patterns":"Excessive animation + Dark mode by default","Color_Mood":"Trust blue + Accent contrast","Decision_Rules":"{\"if_ux_focused\": \"prioritize-minimalism\", \"if_data_heavy\": \"add-glassmorphism\"}","Key_Effects":"Subtle hover (200-250ms) + Smooth transitions","No":1,"Recommended_Pattern":"Hero + Features + CTA","Severity":"HIGH","Style_Priority":"Glassmorphism + Flat Design","Typography_Mood":"Professional + Hierarchy","UI_Category":"SaaS (General)","domain":"ui-reasoning","record_id":"ui-reasoning/1"},{"Anti_Patterns":"Static design + No video + Poor mobile","Color_Mood":"Bold primaries + Accent contrast","Decision_Rules":"{\"if_pre_launch\": \"use-waitlist-pattern\", \"if_video_ready\": \"add-hero-video\"}","Key_Effects":"Scroll-triggered animations + Parallax","No":2,"Recommended_Pattern":"Hero-Centric + Trust","Severity":"HIGH","Style_Priority":"Motion-Driven + Vibrant & Block","Typography_Mood":"Modern + Energetic typography","UI_Category":"Micro SaaS","domain":"ui-reasoning","record_id":"ui-reasoning/2"},{"Anti_Patterns":"Flat design without depth + Text-heavy pages","Color_Mood":"Brand primary + Success green","Decision_Rules":"{\"if_luxury\": \"switch-to-liquid-glass\", \"if_conversion_focused\": \"add-urgency-colors\"}","Key_Effects":"Card hover lift (200ms) + Scale effect","No":3,"Recommended_Pattern":"Feature-Rich Showcase","Severity":"HIGH","Style_Priority":"Vibrant & Block-based","Typography_Mood":"Engaging + Clear hierarchy","UI_Category":"E-commerce","domain":"ui-reasoning","record_id":"ui-reasoning/3"},{"Anti_Patterns":"Vibrant & Block-based + Playful colors","Color_Mood":"Premium colors + Minimal accent","Decision_Rules":"{\"if_checkout\": \"emphasize-trust\", \"if_hero_needed\": \"use-3d-hyperrealism\"}","Key_Effects":"Chromatic aberration + Fluid animations (400-600ms)","No":4,"Recommended_Pattern":"Feature-Rich Showcase","Severity":"HIGH","Style_Priority":"Liquid Glass + Glassmorphism","Typography_Mood":"Elegant + Refined typography","UI_Category":"E-commerce Luxury","domain":"ui-reasoning","record_id":"ui-reasoning/4"},{"Anti_Patterns":"Playful design + Hidden credentials + AI purple/pink gradients","Color_Mood":"Professional blue + Neutral grey","Decision_Rules":"{\"must_have\": \"case-studies\", \"must_have\": \"roi-messaging\"}","Key_Effects":"Section transitions + Feature reveals","No":5,"Recommended_Pattern":"Feature-Rich Showcase + Trust","Severity":"HIGH","Style_Priority":"Trust & Authority + Minimalism","Typography_Mood":"Formal + Clear typography","UI_Category":"B2B Service","domain":"ui-reasoning","record_id":"ui-reasoning/5"},{"Anti_Patterns":"Light mode default + Slow rendering","Color_Mood":"Dark bg + Red/Green alerts + Trust blue","Decision_Rules":"{\"must_have\": \"real-time-updates\", \"must_have\": \"high-contrast\"}","Key_Effects":"Real-time number animations + Alert pulse","No":6,"Recommended_Pattern":"Data-Dense Dashboard","Severity":"HIGH","Style_Priority":"Dark Mode (OLED) + Data-Dense","Typography_Mood":"Clear + Readable typography","UI_Category":"Financial Dashboard","domain":"ui-reasoning","record_id":"ui-reasoning/6"},{"Anti_Patterns":"Ornate design + No filtering","Color_Mood":"Cool→Hot gradients + Neutral grey","Decision_Rules":"{\"must_have\": \"data-export\", \"if_large_dataset\": \"virtualize-lists\"}","Key_Effects":"Hover tooltips + Chart zoom + Filter animations","No":7,"Recommended_Pattern":"Data-Dense + Drill-Down","Severity":"HIGH","Style_Priority":"Data-Dense + Heat Map","Typography_Mood":"Clear + Functional typography","UI_Category":"Analytics Dashboard","domain":"ui-reasoning","record_id":"ui-reasoning/7"},{"Anti_Patterns":"Bright neon colors + Motion-heavy animations + AI purple/pink gradients","Color_Mood":"Calm blue + Health green","Decision_Rules":"{\"must_have\": \"wcag-aaa-compliance\", \"if_medication\": \"red-alert-colors\"}","Key_Effects":"Soft box-shadow + Smooth press (150ms)","No":8,"Recommended_Pattern":"Social Proof-Focused","Severity":"HIGH","Style_Priority":"Neumorphism + Accessible & Ethical","Typography_Mood":"Readable + Large type (16px+)","UI_Category":"Healthcare App","domain":"ui-reasoning","record_id":"ui-reasoning/8"},{"Anti_Patterns":"Dark modes + Complex jargon","Color_Mood":"Playful colors + Clear hierarchy","Decision_Rules":"{\"if_gamification\": \"add-progress-animation\", \"if_children\": \"increase-playfulness\"}","Key_Effects":"Soft press (200ms) + Fluffy elements","No":9,"Recommended_Pattern":"Feature-Rich Showcase","Severity":"MEDIUM","Style_Priority":"Claymorphism + Micro-interactions","Typography_Mood":"Friendly + Engaging typography","UI_Category":"Educational App","domain":"ui-reasoning","record_id":"ui-reasoning/9"},{"Anti_Patterns":"Corporate minimalism + Hidden portfolio","Color_Mood":"Bold primaries + Artistic freedom","Decision_Rules":"{\"must_have\": \"case-studies\", \"if_boutique\": \"increase-artistic-freedom\"}","Key_Effects":"CRT scanlines + Neon glow + Glitch effects","No":10,"Recommended_Pattern":"Storytelling-Driven","Severity":"HIGH","Style_Priority":"Brutalism + Motion-Driven","Typography_Mood":"Bold + Expressive typography","UI_Category":"Creative Agency","domain":"ui-reasoning","record_id":"ui-reasoning/10"},{"Anti_Patterns":"Corporate templates + Generic layouts","Color_Mood":"Brand primary + Artistic","Decision_Rules":"{\"if_creative_field\": \"add-brutalism\", \"if_minimal_portfolio\": \"reduce-motion\"}","Key_Effects":"Parallax (3-5 layers) + Scroll-triggered reveals","No":11,"Recommended_Pattern":"Storytelling-Driven","Severity":"MEDIUM","Style_Priority":"Motion-Driven + Minimalism","Typography_Mood":"Expressive + Variable typography","UI_Category":"Portfolio/Personal","domain":"ui-reasoning","record_id":"ui-reasoning/11"},{"Anti_Patterns":"Minimalist design + Static assets","Color_Mood":"Vibrant + Neon + Immersive","Decision_Rules":"{\"if_competitive\": \"add-real-time-stats\", \"if_casual\": \"increase-playfulness\"}","Key_Effects":"WebGL 3D rendering + Glitch effects","No":12,"Recommended_Pattern":"Feature-Rich Showcase","Severity":"HIGH","Style_Priority":"3D & Hyperrealism + Retro-Futurism","Typography_Mood":"Bold + Impactful typography","UI_Category":"Gaming","domain":"ui-reasoning","record_id":"ui-reasoning/12"},{"Anti_Patterns":"Ornate design + Low contrast + Motion effects + AI purple/pink gradients","Color_Mood":"Professional blue + High contrast","Decision_Rules":"{\"must_have\": \"wcag-aaa\", \"must_have\": \"keyboard-navigation\"}","Key_Effects":"Clear focus rings (3-4px) + Skip links","No":13,"Recommended_Pattern":"Minimal & Direct","Severity":"HIGH","Style_Priority":"Accessible & Ethical + Minimalism","Typography_Mood":"Clear + Large typography","UI_Category":"Government/Public Service","domain":"ui-reasoning","record_id":"ui-reasoning/13"},{"Anti_Patterns":"Playful design + Unclear fees + AI purple/pink gradients","Color_Mood":"Navy + Trust Blue + Gold","Decision_Rules":"{\"must_have\": \"security-first\", \"if_dashboard\": \"use-dark-mode\"}","Key_Effects":"Smooth state transitions + Number animations","No":14,"Recommended_Pattern":"Trust & Authority","Severity":"HIGH","Style_Priority":"Minimalism + Accessible & Ethical","Typography_Mood":"Professional + Trustworthy","UI_Category":"Fintech/Crypto","domain":"ui-reasoning","record_id":"ui-reasoning/14"},{"Anti_Patterns":"Heavy skeuomorphism + Accessibility ignored","Color_Mood":"Vibrant + Engagement colors","Decision_Rules":"{\"if_engagement_metric\": \"add-motion\", \"if_content_focused\": \"minimize-chrome\"}","Key_Effects":"Large scroll animations + Icon animations","No":15,"Recommended_Pattern":"Feature-Rich Showcase","Severity":"MEDIUM","Style_Priority":"Vibrant & Block-based + Motion-Driven","Typography_Mood":"Modern + Bold typography","UI_Category":"Social Media App","domain":"ui-reasoning","record_id":"ui-reasoning/15"},{"Anti_Patterns":"Complex onboarding + Slow performance","Color_Mood":"Clear hierarchy + Functional colors","Decision_Rules":"{\"must_have\": \"keyboard-shortcuts\", \"if_collaboration\": \"add-real-time-cursors\"}","Key_Effects":"Quick actions (150ms) + Task animations","No":16,"Recommended_Pattern":"Interactive Demo + Feature-Rich","Severity":"HIGH","Style_Priority":"Flat Design + Micro-interactions","Typography_Mood":"Clean + Efficient typography","UI_Category":"Productivity Tool","domain":"ui-reasoning","record_id":"ui-reasoning/16"},{"Anti_Patterns":"Poor documentation + No live preview","Color_Mood":"Clear hierarchy + Code-like structure","Decision_Rules":"{\"must_have\": \"search\", \"must_have\": \"code-examples\"}","Key_Effects":"Code copy animations + Component previews","No":17,"Recommended_Pattern":"Feature-Rich + Documentation","Severity":"HIGH","Style_Priority":"Minimalism + Accessible & Ethical","Typography_Mood":"Monospace + Clear typography","UI_Category":"Design System/Component Library","domain":"ui-reasoning","record_id":"ui-reasoning/17"},{"Anti_Patterns":"Heavy chrome + Slow response feedback","Color_Mood":"Neutral + AI Purple (#6366F1)","Decision_Rules":"{\"must_have\": \"conversational-ui\", \"must_have\": \"context-awareness\"}","Key_Effects":"Streaming text + Typing indicators + Fade-in","No":18,"Recommended_Pattern":"Interactive Demo + Minimal","Severity":"HIGH","Style_Priority":"AI-Native UI + Minimalism","Typography_Mood":"Modern + Clear typography","UI_Category":"AI/Chatbot Platform","domain":"ui-reasoning","record_id":"ui-reasoning/18"},{"Anti_Patterns":"Light mode default + No transaction status","Color_Mood":"Dark + Neon + Gold (#FFD700)","Decision_Rules":"{\"must_have\": \"wallet-integration\", \"must_have\": \"gas-fees-display\"}","Key_Effects":"Wallet connect animations + Transaction feedback","No":19,"Recommended_Pattern":"Feature-Rich Showcase","Severity":"HIGH","Style_Priority":"Cyberpunk UI + Glassmorphism","Typography_Mood":"Bold + Modern typography","UI_Category":"NFT/Web3 Platform","domain":"ui-reasoning","record_id":"ui-reasoning/19"},{"Anti_Patterns":"Generic layout + Hidden earnings","Color_Mood":"Vibrant + Brand colors","Decision_Rules":"{\"must_have\": \"creator-profiles\", \"must_have\": \"monetization-display\"}","Key_Effects":"Engagement counter animations + Profile reveals","No":20,"Recommended_Pattern":"Social Proof + Feature-Rich","Severity":"MEDIUM","Style_Priority":"Vibrant & Block-based + Bento Box Grid","Typography_Mood":"Modern + Bold typography","UI_Category":"Creator Economy Platform","domain":"ui-reasoning","record_id":"ui-reasoning/20"},{"Anti_Patterns":"Cluttered interface + No presence","Color_Mood":"Calm Blue + Neutral grey","Decision_Rules":"{\"must_have\": \"status-indicators\", \"must_have\": \"video-integration\"}","Key_Effects":"Real-time presence indicators + Notification badges","No":21,"Recommended_Pattern":"Feature-Rich + Real-Time","Severity":"HIGH","Style_Priority":"Soft UI Evolution + Minimalism","Typography_Mood":"Clean + Readable typography","UI_Category":"Remote Work/Collaboration Tool","domain":"ui-reasoning","record_id":"ui-reasoning/21"},{"Anti_Patterns":"Bright neon + Motion overload","Color_Mood":"Calm Pastels + Trust colors","Decision_Rules":"{\"must_have\": \"privacy-first\", \"if_meditation\": \"add-breathing-animation\"}","Key_Effects":"Soft press + Breathing animations","No":22,"Recommended_Pattern":"Social Proof-Focused","Severity":"HIGH","Style_Priority":"Neumorphism + Accessible & Ethical","Typography_Mood":"Calming + Readable typography","UI_Category":"Mental Health App","domain":"ui-reasoning","record_id":"ui-reasoning/22"},{"Anti_Patterns":"Generic design + No personality","Color_Mood":"Playful + Warm colors","Decision_Rules":"{\"must_have\": \"pet-profiles\", \"if_health\": \"add-vet-integration\"}","Key_Effects":"Pet profile animations + Health tracking charts","No":23,"Recommended_Pattern":"Storytelling + Feature-Rich","Severity":"MEDIUM","Style_Priority":"Claymorphism + Vibrant & Block-based","Typography_Mood":"Friendly + Playful typography","UI_Category":"Pet Tech App","domain":"ui-reasoning","record_id":"ui-reasoning/23"},{"Anti_Patterns":"Slow updates + No automation","Color_Mood":"Dark + Status indicator colors","Decision_Rules":"{\"must_have\": \"real-time-controls\", \"must_have\": \"energy-monitoring\"}","Key_Effects":"Device status pulse + Quick action animations","No":24,"Recommended_Pattern":"Real-Time Monitoring","Severity":"HIGH","Style_Priority":"Glassmorphism + Dark Mode (OLED)","Typography_Mood":"Clear + Functional typography","UI_Category":"Smart Home/IoT Dashboard","domain":"ui-reasoning","record_id":"ui-reasoning/24"},{"Anti_Patterns":"Poor map UX + Hidden costs","Color_Mood":"Electric Blue (#009CD1) + Green","Decision_Rules":"{\"must_have\": \"charging-map\", \"must_have\": \"range-calculator\"}","Key_Effects":"Range estimation animations + Map interactions","No":25,"Recommended_Pattern":"Hero-Centric + Feature-Rich","Severity":"HIGH","Style_Priority":"Minimalism + Aurora UI","Typography_Mood":"Modern + Clear typography","UI_Category":"EV/Charging Ecosystem","domain":"ui-reasoning","record_id":"ui-reasoning/25"},{"Anti_Patterns":"Confusing pricing + No unboxing preview","Color_Mood":"Brand + Excitement colors","Decision_Rules":"{\"must_have\": \"personalization-quiz\", \"must_have\": \"subscription-management\"}","Key_Effects":"Unboxing reveal animations + Product carousel","No":26,"Recommended_Pattern":"Feature-Rich + Conversion","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Motion-Driven","Typography_Mood":"Engaging + Clear typography","UI_Category":"Subscription Box Service","domain":"ui-reasoning","record_id":"ui-reasoning/26"},{"Anti_Patterns":"Poor audio player + Cluttered layout","Color_Mood":"Dark + Audio waveform accents","Decision_Rules":"{\"must_have\": \"audio-player-ux\", \"must_have\": \"episode-discovery\"}","Key_Effects":"Waveform visualizations + Episode transitions","No":27,"Recommended_Pattern":"Storytelling + Feature-Rich","Severity":"HIGH","Style_Priority":"Dark Mode (OLED) + Minimalism","Typography_Mood":"Modern + Clear typography","UI_Category":"Podcast Platform","domain":"ui-reasoning","record_id":"ui-reasoning/27"},{"Anti_Patterns":"Generic profiles + No safety","Color_Mood":"Warm + Romantic (Pink/Red gradients)","Decision_Rules":"{\"must_have\": \"profile-cards\", \"must_have\": \"safety-features\"}","Key_Effects":"Profile card swipe + Match animations","No":28,"Recommended_Pattern":"Social Proof + Feature-Rich","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Motion-Driven","Typography_Mood":"Modern + Friendly typography","UI_Category":"Dating App","domain":"ui-reasoning","record_id":"ui-reasoning/28"},{"Anti_Patterns":"No verification + Hidden progress","Color_Mood":"Trust Blue + Gold (#FFD700)","Decision_Rules":"{\"must_have\": \"credential-verification\", \"must_have\": \"progress-display\"}","Key_Effects":"Badge reveal animations + Progress tracking","No":29,"Recommended_Pattern":"Trust & Authority + Feature","Severity":"MEDIUM","Style_Priority":"Minimalism + Flat Design","Typography_Mood":"Professional + Clear typography","UI_Category":"Micro-Credentials/Badges Platform","domain":"ui-reasoning","record_id":"ui-reasoning/29"},{"Anti_Patterns":"Poor navigation + No search","Color_Mood":"Clean hierarchy + Minimal color","Decision_Rules":"{\"must_have\": \"search-first\", \"must_have\": \"version-switching\"}","Key_Effects":"Search highlight + Smooth scrolling","No":30,"Recommended_Pattern":"FAQ + Minimal","Severity":"HIGH","Style_Priority":"Minimalism + Accessible & Ethical","Typography_Mood":"Clear + Readable typography","UI_Category":"Knowledge Base/Documentation","domain":"ui-reasoning","record_id":"ui-reasoning/30"},{"Anti_Patterns":"No map + Hidden reviews","Color_Mood":"Location markers + Trust colors","Decision_Rules":"{\"must_have\": \"map-integration\", \"must_have\": \"booking-system\"}","Key_Effects":"Map hover + Provider card reveals","No":31,"Recommended_Pattern":"Conversion + Feature-Rich","Severity":"HIGH","Style_Priority":"Minimalism + Vibrant & Block-based","Typography_Mood":"Clear + Functional typography","UI_Category":"Hyperlocal Services","domain":"ui-reasoning","record_id":"ui-reasoning/31"},{"Anti_Patterns":"Bright neon colors + Harsh animations + Dark mode","Color_Mood":"Soft pastels (Pink Sage Cream) + Gold accents","Decision_Rules":"{\"must_have\": \"booking-system\", \"must_have\": \"before-after-gallery\", \"if_luxury\": \"add-gold-accents\"}","Key_Effects":"Soft shadows + Smooth transitions (200-300ms) + Gentle hover","No":32,"Recommended_Pattern":"Hero-Centric + Social Proof","Severity":"HIGH","Style_Priority":"Soft UI Evolution + Neumorphism","Typography_Mood":"Elegant + Calming typography","UI_Category":"Beauty/Spa/Wellness Service","domain":"ui-reasoning","record_id":"ui-reasoning/32"},{"Anti_Patterns":"Cheap visuals + Fast animations","Color_Mood":"Black + Gold (#FFD700) + White","Decision_Rules":"{\"must_have\": \"high-quality-imagery\", \"must_have\": \"storytelling\"}","Key_Effects":"Slow parallax + Premium reveals (400-600ms)","No":33,"Recommended_Pattern":"Storytelling + Feature-Rich","Severity":"HIGH","Style_Priority":"Liquid Glass + Glassmorphism","Typography_Mood":"Elegant + Refined typography","UI_Category":"Luxury/Premium Brand","domain":"ui-reasoning","record_id":"ui-reasoning/33"},{"Anti_Patterns":"Low-quality imagery + Outdated hours","Color_Mood":"Warm colors (Orange Red Brown)","Decision_Rules":"{\"must_have\": \"high_quality_images\", \"if_delivery\": \"emphasize-speed\"}","Key_Effects":"Food image reveal + Menu hover effects","No":34,"Recommended_Pattern":"Hero-Centric + Conversion","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Motion-Driven","Typography_Mood":"Appetizing + Clear typography","UI_Category":"Restaurant/Food Service","domain":"ui-reasoning","record_id":"ui-reasoning/34"},{"Anti_Patterns":"Static design + No gamification","Color_Mood":"Energetic (Orange #FF6B35) + Dark bg","Decision_Rules":"{\"must_have\": \"progress-tracking\", \"must_have\": \"workout-plans\"}","Key_Effects":"Progress ring animations + Achievement unlocks","No":35,"Recommended_Pattern":"Feature-Rich + Data","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Dark Mode (OLED)","Typography_Mood":"Bold + Motivational typography","UI_Category":"Fitness/Gym App","domain":"ui-reasoning","record_id":"ui-reasoning/35"},{"Anti_Patterns":"Poor photos + No virtual tours","Color_Mood":"Trust Blue + Gold + White","Decision_Rules":"{\"if_luxury\": \"add-3d-models\", \"must_have\": \"map-integration\"}","Key_Effects":"3D property tour zoom + Map hover","No":36,"Recommended_Pattern":"Hero-Centric + Feature-Rich","Severity":"HIGH","Style_Priority":"Glassmorphism + Minimalism","Typography_Mood":"Professional + Confident","UI_Category":"Real Estate/Property","domain":"ui-reasoning","record_id":"ui-reasoning/36"},{"Anti_Patterns":"Generic photos + Complex booking","Color_Mood":"Vibrant destination + Sky Blue","Decision_Rules":"{\"if_experience_focused\": \"use-storytelling\", \"must_have\": \"mobile-booking\"}","Key_Effects":"Destination parallax + Itinerary animations","No":37,"Recommended_Pattern":"Storytelling-Driven + Hero","Severity":"HIGH","Style_Priority":"Aurora UI + Motion-Driven","Typography_Mood":"Inspirational + Engaging","UI_Category":"Travel/Tourism Agency","domain":"ui-reasoning","record_id":"ui-reasoning/37"},{"Anti_Patterns":"Poor photos + Complex booking","Color_Mood":"Warm neutrals + Gold (#D4AF37)","Decision_Rules":"{\"must_have\": \"room-booking\", \"must_have\": \"virtual-tour\"}","Key_Effects":"Room gallery + Amenity reveals","No":38,"Recommended_Pattern":"Hero-Centric + Social Proof","Severity":"HIGH","Style_Priority":"Liquid Glass + Minimalism","Typography_Mood":"Elegant + Welcoming typography","UI_Category":"Hotel/Hospitality","domain":"ui-reasoning","record_id":"ui-reasoning/38"},{"Anti_Patterns":"Generic templates + No portfolio","Color_Mood":"Soft Pink (#FFD6E0) + Gold + Cream","Decision_Rules":"{\"must_have\": \"portfolio-gallery\", \"must_have\": \"planning-tools\"}","Key_Effects":"Gallery reveals + Timeline animations","No":39,"Recommended_Pattern":"Storytelling + Social Proof","Severity":"HIGH","Style_Priority":"Soft UI Evolution + Aurora UI","Typography_Mood":"Elegant + Romantic typography","UI_Category":"Wedding/Event Planning","domain":"ui-reasoning","record_id":"ui-reasoning/39"},{"Anti_Patterns":"Outdated design + Hidden credentials + AI purple/pink gradients","Color_Mood":"Navy Blue (#1E3A5F) + Gold + White","Decision_Rules":"{\"must_have\": \"case-results\", \"must_have\": \"credential-display\"}","Key_Effects":"Practice area reveal + Attorney profile animations","No":40,"Recommended_Pattern":"Trust & Authority + Minimal","Severity":"HIGH","Style_Priority":"Trust & Authority + Minimalism","Typography_Mood":"Professional + Authoritative typography","UI_Category":"Legal Services","domain":"ui-reasoning","record_id":"ui-reasoning/40"},{"Anti_Patterns":"Confusing pricing + No trust signals + AI purple/pink gradients","Color_Mood":"Trust Blue (#0066CC) + Green + Neutral","Decision_Rules":"{\"must_have\": \"quote-calculator\", \"must_have\": \"policy-comparison\"}","Key_Effects":"Quote calculator animations + Policy comparison","No":41,"Recommended_Pattern":"Conversion + Trust","Severity":"HIGH","Style_Priority":"Trust & Authority + Flat Design","Typography_Mood":"Clear + Professional typography","UI_Category":"Insurance Platform","domain":"ui-reasoning","record_id":"ui-reasoning/41"},{"Anti_Patterns":"Playful design + Poor security UX + AI purple/pink gradients","Color_Mood":"Navy (#0A1628) + Trust Blue + Gold","Decision_Rules":"{\"must_have\": \"security-first\", \"must_have\": \"accessibility\"}","Key_Effects":"Smooth number animations + Security indicators","No":42,"Recommended_Pattern":"Trust & Authority + Feature","Severity":"HIGH","Style_Priority":"Minimalism + Accessible & Ethical","Typography_Mood":"Professional + Trustworthy typography","UI_Category":"Banking/Traditional Finance","domain":"ui-reasoning","record_id":"ui-reasoning/42"},{"Anti_Patterns":"Boring design + No gamification","Color_Mood":"Vibrant learning colors + Progress green","Decision_Rules":"{\"must_have\": \"progress-tracking\", \"must_have\": \"video-player\"}","Key_Effects":"Progress bar animations + Certificate reveals","No":43,"Recommended_Pattern":"Feature-Rich + Social Proof","Severity":"HIGH","Style_Priority":"Claymorphism + Vibrant & Block-based","Typography_Mood":"Friendly + Engaging typography","UI_Category":"Online Course/E-learning","domain":"ui-reasoning","record_id":"ui-reasoning/43"},{"Anti_Patterns":"No impact data + Hidden financials","Color_Mood":"Cause-related colors + Trust + Warm","Decision_Rules":"{\"must_have\": \"impact-stories\", \"must_have\": \"donation-transparency\"}","Key_Effects":"Impact counter animations + Story reveals","No":44,"Recommended_Pattern":"Storytelling + Trust","Severity":"HIGH","Style_Priority":"Accessible & Ethical + Organic Biophilic","Typography_Mood":"Heartfelt + Readable typography","UI_Category":"Non-profit/Charity","domain":"ui-reasoning","record_id":"ui-reasoning/44"},{"Anti_Patterns":"Cluttered layout + Poor audio player UX","Color_Mood":"Dark (#121212) + Vibrant accents + Album art colors","Decision_Rules":"{\"must_have\": \"audio-player-ux\", \"if_discovery_focused\": \"add-playlist-recommendations\"}","Key_Effects":"Waveform visualization + Playlist animations","No":45,"Recommended_Pattern":"Feature-Rich Showcase","Severity":"HIGH","Style_Priority":"Dark Mode (OLED) + Vibrant & Block-based","Typography_Mood":"Modern + Bold typography","UI_Category":"Music Streaming","domain":"ui-reasoning","record_id":"ui-reasoning/45"},{"Anti_Patterns":"Static layout + Slow video player","Color_Mood":"Dark bg + Poster colors + Brand accent","Decision_Rules":"{\"must_have\": \"continue-watching\", \"if_personalized\": \"add-recommendations\"}","Key_Effects":"Video player animations + Content carousel (parallax)","No":46,"Recommended_Pattern":"Hero-Centric + Feature-Rich","Severity":"HIGH","Style_Priority":"Dark Mode (OLED) + Motion-Driven","Typography_Mood":"Bold + Engaging typography","UI_Category":"Video Streaming/OTT","domain":"ui-reasoning","record_id":"ui-reasoning/46"},{"Anti_Patterns":"Outdated forms + Hidden filters","Color_Mood":"Professional Blue + Success Green + Neutral","Decision_Rules":"{\"must_have\": \"advanced-search\", \"if_salary_focused\": \"highlight-compensation\"}","Key_Effects":"Search/filter animations + Application flow","No":47,"Recommended_Pattern":"Conversion-Optimized + Feature-Rich","Severity":"HIGH","Style_Priority":"Flat Design + Minimalism","Typography_Mood":"Clear + Professional typography","UI_Category":"Job Board/Recruitment","domain":"ui-reasoning","record_id":"ui-reasoning/47"},{"Anti_Patterns":"Low trust signals + Confusing layout","Color_Mood":"Trust colors + Category colors + Success green","Decision_Rules":"{\"must_have\": \"seller-profiles\", \"must_have\": \"secure-payment\"}","Key_Effects":"Review star animations + Listing hover effects","No":48,"Recommended_Pattern":"Feature-Rich Showcase + Social Proof","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Flat Design","Typography_Mood":"Modern + Engaging typography","UI_Category":"Marketplace (P2P)","domain":"ui-reasoning","record_id":"ui-reasoning/48"},{"Anti_Patterns":"Static tracking + No map integration + AI purple/pink gradients","Color_Mood":"Blue (#2563EB) + Orange (tracking) + Green","Decision_Rules":"{\"must_have\": \"tracking-map\", \"must_have\": \"delivery-updates\"}","Key_Effects":"Real-time tracking animation + Status pulse","No":49,"Recommended_Pattern":"Feature-Rich Showcase + Real-Time","Severity":"HIGH","Style_Priority":"Minimalism + Flat Design","Typography_Mood":"Clear + Functional typography","UI_Category":"Logistics/Delivery","domain":"ui-reasoning","record_id":"ui-reasoning/49"},{"Anti_Patterns":"Generic design + Ignored accessibility + AI purple/pink gradients","Color_Mood":"Earth Green (#4A7C23) + Brown + Sky Blue","Decision_Rules":"{\"must_have\": \"sensor-dashboard\", \"if_crop_focused\": \"add-health-indicators\"}","Key_Effects":"Data visualization + Weather animations","No":50,"Recommended_Pattern":"Feature-Rich Showcase","Severity":"MEDIUM","Style_Priority":"Organic Biophilic + Flat Design","Typography_Mood":"Clear + Informative typography","UI_Category":"Agriculture/Farm Tech","domain":"ui-reasoning","record_id":"ui-reasoning/50"},{"Anti_Patterns":"2D-only layouts + Poor image quality + AI purple/pink gradients","Color_Mood":"Grey (#4A4A4A) + Orange (safety) + Blueprint Blue","Decision_Rules":"{\"must_have\": \"project-portfolio\", \"if_team_collaboration\": \"add-real-time-updates\"}","Key_Effects":"3D model viewer + Timeline animations","No":51,"Recommended_Pattern":"Hero-Centric + Feature-Rich","Severity":"HIGH","Style_Priority":"Minimalism + 3D & Hyperrealism","Typography_Mood":"Professional + Bold typography","UI_Category":"Construction/Architecture","domain":"ui-reasoning","record_id":"ui-reasoning/51"},{"Anti_Patterns":"Static product pages + Poor UX","Color_Mood":"Brand colors + Metallic + Dark/Light","Decision_Rules":"{\"must_have\": \"vehicle-comparison\", \"must_have\": \"financing-calculator\"}","Key_Effects":"360 product view + Configurator animations","No":52,"Recommended_Pattern":"Hero-Centric + Feature-Rich","Severity":"HIGH","Style_Priority":"Motion-Driven + 3D & Hyperrealism","Typography_Mood":"Bold + Confident typography","UI_Category":"Automotive/Car Dealership","domain":"ui-reasoning","record_id":"ui-reasoning/52"},{"Anti_Patterns":"Heavy text + Poor image showcase","Color_Mood":"Black + White + Minimal accent","Decision_Rules":"{\"must_have\": \"portfolio-showcase\", \"if_booking\": \"add-calendar-system\"}","Key_Effects":"Full-bleed gallery + Before/after reveal","No":53,"Recommended_Pattern":"Storytelling-Driven + Hero-Centric","Severity":"HIGH","Style_Priority":"Motion-Driven + Minimalism","Typography_Mood":"Elegant + Minimal typography","UI_Category":"Photography Studio","domain":"ui-reasoning","record_id":"ui-reasoning/53"},{"Anti_Patterns":"Outdated photos + Confusing layout","Color_Mood":"Energetic colors + Wood tones + Brand","Decision_Rules":"{\"must_have\": \"virtual-tour\", \"must_have\": \"booking-system\"}","Key_Effects":"Space tour video + Amenity reveal animations","No":54,"Recommended_Pattern":"Hero-Centric + Feature-Rich","Severity":"MEDIUM","Style_Priority":"Vibrant & Block-based + Glassmorphism","Typography_Mood":"Modern + Engaging typography","UI_Category":"Coworking Space","domain":"ui-reasoning","record_id":"ui-reasoning/54"},{"Anti_Patterns":"Hidden contact info + No certifications","Color_Mood":"Trust Blue + Safety Orange + Grey","Decision_Rules":"{\"must_have\": \"emergency-contact\", \"must_have\": \"certifications-display\"}","Key_Effects":"Emergency contact highlight + Service menu animations","No":55,"Recommended_Pattern":"Conversion-Optimized + Trust","Severity":"HIGH","Style_Priority":"Flat Design + Trust & Authority","Typography_Mood":"Professional + Clear typography","UI_Category":"Home Services (Plumber/Electrician)","domain":"ui-reasoning","record_id":"ui-reasoning/55"},{"Anti_Patterns":"Generic design + Hidden safety info","Color_Mood":"Playful pastels + Safe colors + Warm","Decision_Rules":"{\"must_have\": \"parent-communication\", \"must_have\": \"safety-certifications\"}","Key_Effects":"Parent portal animations + Activity gallery reveal","No":56,"Recommended_Pattern":"Social Proof-Focused + Trust","Severity":"HIGH","Style_Priority":"Claymorphism + Vibrant & Block-based","Typography_Mood":"Friendly + Playful typography","UI_Category":"Childcare/Daycare","domain":"ui-reasoning","record_id":"ui-reasoning/56"},{"Anti_Patterns":"Small text + Complex navigation + AI purple/pink gradients","Color_Mood":"Calm Blue + Warm neutrals + Large text","Decision_Rules":"{\"must_have\": \"wcag-aaa\", \"must_have\": \"family-portal\"}","Key_Effects":"Large touch targets + Clear navigation","No":57,"Recommended_Pattern":"Trust & Authority + Accessible","Severity":"HIGH","Style_Priority":"Accessible & Ethical + Soft UI Evolution","Typography_Mood":"Large + Clear typography (18px+)","UI_Category":"Senior Care/Elderly","domain":"ui-reasoning","record_id":"ui-reasoning/57"},{"Anti_Patterns":"Outdated interface + Confusing booking + AI purple/pink gradients","Color_Mood":"Medical Blue (#0077B6) + Trust White","Decision_Rules":"{\"must_have\": \"appointment-booking\", \"must_have\": \"insurance-info\"}","Key_Effects":"Online booking flow + Doctor profile reveals","No":58,"Recommended_Pattern":"Trust & Authority + Conversion","Severity":"HIGH","Style_Priority":"Accessible & Ethical + Minimalism","Typography_Mood":"Professional + Readable typography","UI_Category":"Medical Clinic","domain":"ui-reasoning","record_id":"ui-reasoning/58"},{"Anti_Patterns":"Confusing layout + Privacy concerns + AI purple/pink gradients","Color_Mood":"Pharmacy Green + Trust Blue + Clean White","Decision_Rules":"{\"must_have\": \"prescription-management\", \"must_have\": \"drug-interaction-warnings\"}","Key_Effects":"Prescription upload flow + Refill reminders","No":59,"Recommended_Pattern":"Conversion-Optimized + Trust","Severity":"HIGH","Style_Priority":"Flat Design + Accessible & Ethical","Typography_Mood":"Clear + Functional typography","UI_Category":"Pharmacy/Drug Store","domain":"ui-reasoning","record_id":"ui-reasoning/59"},{"Anti_Patterns":"Poor imagery + No testimonials","Color_Mood":"Fresh Blue + White + Smile Yellow","Decision_Rules":"{\"must_have\": \"before-after-gallery\", \"must_have\": \"appointment-system\"}","Key_Effects":"Before/after gallery + Patient testimonial carousel","No":60,"Recommended_Pattern":"Social Proof-Focused + Conversion","Severity":"HIGH","Style_Priority":"Soft UI Evolution + Minimalism","Typography_Mood":"Friendly + Professional typography","UI_Category":"Dental Practice","domain":"ui-reasoning","record_id":"ui-reasoning/60"},{"Anti_Patterns":"Generic design + Hidden services","Color_Mood":"Caring Blue + Pet colors + Warm","Decision_Rules":"{\"must_have\": \"pet-portal\", \"must_have\": \"emergency-contact\"}","Key_Effects":"Pet profile management + Service animations","No":61,"Recommended_Pattern":"Social Proof-Focused + Trust","Severity":"MEDIUM","Style_Priority":"Claymorphism + Accessible & Ethical","Typography_Mood":"Friendly + Welcoming typography","UI_Category":"Veterinary Clinic","domain":"ui-reasoning","record_id":"ui-reasoning/61"},{"Anti_Patterns":"Poor imagery + No seasonal content","Color_Mood":"Natural Green + Floral pinks/purples","Decision_Rules":"{\"must_have\": \"delivery-scheduling\", \"must_have\": \"care-guides\"}","Key_Effects":"Product reveal + Seasonal transitions","No":62,"Recommended_Pattern":"Hero-Centric + Conversion","Severity":"MEDIUM","Style_Priority":"Organic Biophilic + Vibrant & Block-based","Typography_Mood":"Elegant + Natural typography","UI_Category":"Florist/Plant Shop","domain":"ui-reasoning","record_id":"ui-reasoning/62"},{"Anti_Patterns":"Poor food photos + Hidden hours","Color_Mood":"Warm Brown + Cream + Appetizing accents","Decision_Rules":"{\"must_have\": \"menu-display\", \"must_have\": \"online-ordering\"}","Key_Effects":"Menu hover + Order animations","No":63,"Recommended_Pattern":"Hero-Centric + Conversion","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Soft UI Evolution","Typography_Mood":"Warm + Inviting typography","UI_Category":"Bakery/Cafe","domain":"ui-reasoning","record_id":"ui-reasoning/63"},{"Anti_Patterns":"Generic product pages + No story","Color_Mood":"Deep amber/burgundy + Gold + Craft","Decision_Rules":"{\"must_have\": \"product-showcase\", \"must_have\": \"story-heritage\"}","Key_Effects":"Tasting note reveals + Heritage timeline","No":64,"Recommended_Pattern":"Storytelling + Hero-Centric","Severity":"HIGH","Style_Priority":"Motion-Driven + Storytelling-Driven","Typography_Mood":"Artisanal + Heritage typography","UI_Category":"Brewery/Winery","domain":"ui-reasoning","record_id":"ui-reasoning/64"},{"Anti_Patterns":"Complex booking + Poor mobile","Color_Mood":"Sky Blue + Brand colors + Trust","Decision_Rules":"{\"must_have\": \"flight-search\", \"must_have\": \"mobile-first\"}","Key_Effects":"Flight search animations + Boarding pass reveals","No":65,"Recommended_Pattern":"Conversion + Feature-Rich","Severity":"HIGH","Style_Priority":"Minimalism + Glassmorphism","Typography_Mood":"Clear + Professional typography","UI_Category":"Airline","domain":"ui-reasoning","record_id":"ui-reasoning/65"},{"Anti_Patterns":"Cluttered layout + Slow loading","Color_Mood":"Brand colors + High contrast","Decision_Rules":"{\"must_have\": \"mobile-first-reading\", \"must_have\": \"category-navigation\"}","Key_Effects":"Breaking news badge + Article reveal animations","No":66,"Recommended_Pattern":"Hero-Centric + Feature-Rich","Severity":"HIGH","Style_Priority":"Minimalism + Flat Design","Typography_Mood":"Clear + Readable typography","UI_Category":"News/Media Platform","domain":"ui-reasoning","record_id":"ui-reasoning/66"},{"Anti_Patterns":"Poor typography + Slow loading","Color_Mood":"Editorial colors + Brand + Clean white","Decision_Rules":"{\"must_have\": \"article-showcase\", \"must_have\": \"newsletter-signup\"}","Key_Effects":"Article transitions + Category reveals","No":67,"Recommended_Pattern":"Storytelling + Hero-Centric","Severity":"HIGH","Style_Priority":"Swiss Modernism 2.0 + Motion-Driven","Typography_Mood":"Editorial + Elegant typography","UI_Category":"Magazine/Blog","domain":"ui-reasoning","record_id":"ui-reasoning/67"},{"Anti_Patterns":"Poor profiles + No reviews","Color_Mood":"Professional Blue + Success Green","Decision_Rules":"{\"must_have\": \"portfolio-display\", \"must_have\": \"skill-matching\"}","Key_Effects":"Skill match animations + Review reveals","No":68,"Recommended_Pattern":"Feature-Rich + Conversion","Severity":"HIGH","Style_Priority":"Flat Design + Minimalism","Typography_Mood":"Clear + Professional typography","UI_Category":"Freelancer Platform","domain":"ui-reasoning","record_id":"ui-reasoning/68"},{"Anti_Patterns":"Boring design + Hidden work","Color_Mood":"Bold brand colors + Creative freedom","Decision_Rules":"{\"must_have\": \"portfolio\", \"must_have\": \"results-metrics\"}","Key_Effects":"Portfolio reveals + Results animations","No":69,"Recommended_Pattern":"Storytelling + Feature-Rich","Severity":"HIGH","Style_Priority":"Brutalism + Motion-Driven","Typography_Mood":"Bold + Expressive typography","UI_Category":"Marketing Agency","domain":"ui-reasoning","record_id":"ui-reasoning/69"},{"Anti_Patterns":"Confusing registration + No countdown","Color_Mood":"Event theme colors + Excitement accents","Decision_Rules":"{\"must_have\": \"registration\", \"must_have\": \"agenda-display\"}","Key_Effects":"Countdown timer + Registration flow","No":70,"Recommended_Pattern":"Hero-Centric + Feature-Rich","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Motion-Driven","Typography_Mood":"Bold + Engaging typography","UI_Category":"Event Management","domain":"ui-reasoning","record_id":"ui-reasoning/70"},{"Anti_Patterns":"Hidden benefits + No community proof","Color_Mood":"Community brand colors + Engagement","Decision_Rules":"{\"must_have\": \"member-benefits\", \"must_have\": \"pricing-tiers\"}","Key_Effects":"Member counter + Benefit reveals","No":71,"Recommended_Pattern":"Social Proof + Conversion","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Soft UI Evolution","Typography_Mood":"Friendly + Engaging typography","UI_Category":"Membership/Community","domain":"ui-reasoning","record_id":"ui-reasoning/71"},{"Anti_Patterns":"Complex signup + No preview","Color_Mood":"Brand primary + Clean white + CTA","Decision_Rules":"{\"must_have\": \"subscribe-form\", \"must_have\": \"sample-content\"}","Key_Effects":"Subscribe form + Archive reveals","No":72,"Recommended_Pattern":"Minimal + Conversion","Severity":"MEDIUM","Style_Priority":"Minimalism + Flat Design","Typography_Mood":"Clean + Readable typography","UI_Category":"Newsletter Platform","domain":"ui-reasoning","record_id":"ui-reasoning/72"},{"Anti_Patterns":"No preview + Slow delivery","Color_Mood":"Product colors + Brand + Success green","Decision_Rules":"{\"must_have\": \"product-preview\", \"must_have\": \"instant-delivery\"}","Key_Effects":"Product preview + Instant delivery animations","No":73,"Recommended_Pattern":"Feature-Rich + Conversion","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Motion-Driven","Typography_Mood":"Modern + Clear typography","UI_Category":"Digital Products/Downloads","domain":"ui-reasoning","record_id":"ui-reasoning/73"},{"Anti_Patterns":"Outdated design + Hidden info","Color_Mood":"Warm Gold + Deep Purple/Blue + White","Decision_Rules":"{\"must_have\": \"service-times\", \"must_have\": \"community-events\"}","Key_Effects":"Service time highlights + Event calendar","No":74,"Recommended_Pattern":"Hero-Centric + Social Proof","Severity":"MEDIUM","Style_Priority":"Accessible & Ethical + Soft UI Evolution","Typography_Mood":"Welcoming + Clear typography","UI_Category":"Church/Religious Organization","domain":"ui-reasoning","record_id":"ui-reasoning/74"},{"Anti_Patterns":"Static content + Poor fan engagement","Color_Mood":"Team colors + Energetic accents","Decision_Rules":"{\"must_have\": \"schedule\", \"must_have\": \"roster\"}","Key_Effects":"Score animations + Schedule reveals","No":75,"Recommended_Pattern":"Hero-Centric + Feature-Rich","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Motion-Driven","Typography_Mood":"Bold + Impactful typography","UI_Category":"Sports Team/Club","domain":"ui-reasoning","record_id":"ui-reasoning/75"},{"Anti_Patterns":"Cluttered layout + No online access","Color_Mood":"Art-appropriate neutrals + Exhibition accents","Decision_Rules":"{\"must_have\": \"virtual-tour\", \"must_have\": \"exhibition-info\"}","Key_Effects":"Virtual tour + Collection reveals","No":76,"Recommended_Pattern":"Storytelling + Feature-Rich","Severity":"HIGH","Style_Priority":"Minimalism + Motion-Driven","Typography_Mood":"Elegant + Minimal typography","UI_Category":"Museum/Gallery","domain":"ui-reasoning","record_id":"ui-reasoning/76"},{"Anti_Patterns":"Poor booking UX + No trailers","Color_Mood":"Dark + Spotlight accents + Gold","Decision_Rules":"{\"must_have\": \"showtimes\", \"must_have\": \"seat-selection\"}","Key_Effects":"Seat selection + Trailer reveals","No":77,"Recommended_Pattern":"Hero-Centric + Conversion","Severity":"HIGH","Style_Priority":"Dark Mode (OLED) + Motion-Driven","Typography_Mood":"Dramatic + Bold typography","UI_Category":"Theater/Cinema","domain":"ui-reasoning","record_id":"ui-reasoning/77"},{"Anti_Patterns":"Boring design + No motivation","Color_Mood":"Playful colors + Progress indicators","Decision_Rules":"{\"must_have\": \"progress-tracking\", \"must_have\": \"gamification\"}","Key_Effects":"Progress animations + Achievement unlocks","No":78,"Recommended_Pattern":"Feature-Rich + Social Proof","Severity":"HIGH","Style_Priority":"Claymorphism + Vibrant & Block-based","Typography_Mood":"Friendly + Clear typography","UI_Category":"Language Learning App","domain":"ui-reasoning","record_id":"ui-reasoning/78"},{"Anti_Patterns":"Light mode only + Hidden results","Color_Mood":"Code editor colors + Brand + Success","Decision_Rules":"{\"must_have\": \"curriculum\", \"must_have\": \"career-outcomes\"}","Key_Effects":"Terminal animations + Career outcome reveals","No":79,"Recommended_Pattern":"Feature-Rich + Social Proof","Severity":"HIGH","Style_Priority":"Dark Mode (OLED) + Minimalism","Typography_Mood":"Technical + Clear typography","UI_Category":"Coding Bootcamp","domain":"ui-reasoning","record_id":"ui-reasoning/79"},{"Anti_Patterns":"Light mode + Poor data viz","Color_Mood":"Matrix Green (#00FF00) + Deep Black","Decision_Rules":"{\"must_have\": \"real-time-monitoring\", \"must_have\": \"threat-display\"}","Key_Effects":"Threat visualization + Alert animations","No":80,"Recommended_Pattern":"Trust & Authority + Real-Time","Severity":"HIGH","Style_Priority":"Cyberpunk UI + Dark Mode (OLED)","Typography_Mood":"Technical + Clear typography","UI_Category":"Cybersecurity Platform","domain":"ui-reasoning","record_id":"ui-reasoning/80"},{"Anti_Patterns":"Light mode default + Slow performance","Color_Mood":"Dark syntax theme + Blue focus","Decision_Rules":"{\"must_have\": \"keyboard-shortcuts\", \"must_have\": \"documentation\"}","Key_Effects":"Syntax highlighting + Command palette","No":81,"Recommended_Pattern":"Minimal + Documentation","Severity":"HIGH","Style_Priority":"Dark Mode (OLED) + Minimalism","Typography_Mood":"Monospace + Functional typography","UI_Category":"Developer Tool / IDE","domain":"ui-reasoning","record_id":"ui-reasoning/81"},{"Anti_Patterns":"Cluttered data + Poor credibility","Color_Mood":"Sterile White + DNA Blue + Life Green","Decision_Rules":"{\"must_have\": \"data-accuracy\", \"must_have\": \"clean-aesthetic\"}","Key_Effects":"Data visualization + Research reveals","No":82,"Recommended_Pattern":"Storytelling + Data","Severity":"HIGH","Style_Priority":"Glassmorphism + Clean Science","Typography_Mood":"Scientific + Clear typography","UI_Category":"Biotech / Life Sciences","domain":"ui-reasoning","record_id":"ui-reasoning/82"},{"Anti_Patterns":"Generic design + No immersion","Color_Mood":"Deep Space Black + Star White + Metallic","Decision_Rules":"{\"must_have\": \"high-tech-feel\", \"must_have\": \"precision-data\"}","Key_Effects":"Telemetry animations + 3D renders","No":83,"Recommended_Pattern":"Immersive + Feature-Rich","Severity":"HIGH","Style_Priority":"Holographic/HUD + Dark Mode","Typography_Mood":"Futuristic + Precise typography","UI_Category":"Space Tech / Aerospace","domain":"ui-reasoning","record_id":"ui-reasoning/83"},{"Anti_Patterns":"Poor imagery + Cluttered layout","Color_Mood":"Monochrome + Gold Accent + High Imagery","Decision_Rules":"{\"must_have\": \"high-res-images\", \"must_have\": \"project-portfolio\"}","Key_Effects":"Project gallery + Blueprint reveals","No":84,"Recommended_Pattern":"Portfolio + Hero-Centric","Severity":"HIGH","Style_Priority":"Exaggerated Minimalism + High Imagery","Typography_Mood":"Architectural + Elegant typography","UI_Category":"Architecture / Interior","domain":"ui-reasoning","record_id":"ui-reasoning/84"},{"Anti_Patterns":"Generic tech design + No viz","Color_Mood":"Quantum Blue (#00FFFF) + Deep Black","Decision_Rules":"{\"must_have\": \"complexity-visualization\", \"must_have\": \"scientific-credibility\"}","Key_Effects":"Probability visualizations + Qubit state animations","No":85,"Recommended_Pattern":"Immersive + Interactive","Severity":"HIGH","Style_Priority":"Holographic/HUD + Dark Mode","Typography_Mood":"Futuristic + Scientific typography","UI_Category":"Quantum Computing Interface","domain":"ui-reasoning","record_id":"ui-reasoning/85"},{"Anti_Patterns":"Generic health app + No privacy","Color_Mood":"Cellular Pink/Red + DNA Blue + White","Decision_Rules":"{\"must_have\": \"data-privacy\", \"must_have\": \"scientific-credibility\"}","Key_Effects":"Biological data viz + Progress animations","No":86,"Recommended_Pattern":"Data-Dense + Storytelling","Severity":"HIGH","Style_Priority":"Biomimetic/Organic 2.0 + Minimalism","Typography_Mood":"Scientific + Clear typography","UI_Category":"Biohacking / Longevity App","domain":"ui-reasoning","record_id":"ui-reasoning/86"},{"Anti_Patterns":"Slow updates + Poor spatial viz","Color_Mood":"Tactical Green + Alert Red + Map Dark","Decision_Rules":"{\"must_have\": \"real-time-telemetry\", \"must_have\": \"safety-alerts\"}","Key_Effects":"Telemetry animations + 3D spatial awareness","No":87,"Recommended_Pattern":"Real-Time + Feature-Rich","Severity":"HIGH","Style_Priority":"HUD/Sci-Fi FUI + Real-Time","Typography_Mood":"Technical + Functional typography","UI_Category":"Autonomous Drone Fleet Manager","domain":"ui-reasoning","record_id":"ui-reasoning/87"},{"Anti_Patterns":"Heavy chrome + Slow loading","Color_Mood":"Neutral (#F5F5F5) + User Content","Decision_Rules":"{\"must_have\": \"fast-loading\", \"must_have\": \"creator-attribution\"}","Key_Effects":"Gallery masonry + Minting animations","No":88,"Recommended_Pattern":"Showcase + Feature-Rich","Severity":"HIGH","Style_Priority":"Minimalism + Gen Z Chaos","Typography_Mood":"Minimal + Content-focused typography","UI_Category":"Generative Art Platform","domain":"ui-reasoning","record_id":"ui-reasoning/88"},{"Anti_Patterns":"2D design + No spatial depth","Color_Mood":"Frosted Glass + System Colors + Depth","Decision_Rules":"{\"must_have\": \"depth-hierarchy\", \"must_have\": \"environment-awareness\"}","Key_Effects":"Depth hierarchy + Gaze interactions","No":89,"Recommended_Pattern":"Immersive + Interactive","Severity":"HIGH","Style_Priority":"Spatial UI (VisionOS) + Glassmorphism","Typography_Mood":"Spatial + Readable typography","UI_Category":"Spatial Computing OS / App","domain":"ui-reasoning","record_id":"ui-reasoning/89"},{"Anti_Patterns":"Greenwashing + No real data","Color_Mood":"Earth Green + Sky Blue + Solar Yellow","Decision_Rules":"{\"must_have\": \"data-transparency\", \"must_have\": \"impact-visualization\"}","Key_Effects":"Impact viz + Progress animations","No":90,"Recommended_Pattern":"Data + Trust","Severity":"HIGH","Style_Priority":"Organic Biophilic + E-Ink/Paper","Typography_Mood":"Clear + Informative typography","UI_Category":"Sustainable Energy / Climate Tech","domain":"ui-reasoning","record_id":"ui-reasoning/90"},{"Anti_Patterns":"Pure white backgrounds","Color_Mood":"Calm blue + success green + alert red + chart accents","Decision_Rules":"{\"if_light_mode_needed\": \"provide-theme-toggle\", \"if_low_performance\": \"fallback-to-flat\"}","Key_Effects":"Backdrop blur (10-20px) + Translucent overlays","No":91,"Recommended_Pattern":"Interactive Product Demo","Severity":"HIGH","Style_Priority":"Glassmorphism + Dark Mode (OLED)","Typography_Mood":"Modern + Clear hierarchy","UI_Category":"Personal Finance Tracker","domain":"ui-reasoning","record_id":"ui-reasoning/91"},{"Anti_Patterns":"Excessive decoration","Color_Mood":"Brand primary + bubble contrast (sender/receiver) + typing grey","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Subtle hover 200ms + Smooth transitions + Clean","No":92,"Recommended_Pattern":"Feature-Rich Showcase + Demo","Severity":"HIGH","Style_Priority":"Minimalism + Micro-interactions","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Chat & Messaging App","domain":"ui-reasoning","record_id":"ui-reasoning/92"},{"Anti_Patterns":"Excessive decoration + Complex shadows + 3D effects","Color_Mood":"Clean white/cream + minimal accent + editor syntax colors","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":93,"Recommended_Pattern":"Minimal & Direct","Severity":"HIGH","Style_Priority":"Minimalism + Flat Design","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Notes & Writing App","domain":"ui-reasoning","record_id":"ui-reasoning/93"},{"Anti_Patterns":"Muted colors + Low energy","Color_Mood":"Streak warm (amber/orange) + progress green + motivational accents","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Multi-layer shadows + Spring bounce + Soft press 200ms","No":94,"Recommended_Pattern":"Social Proof-Focused + Demo","Severity":"HIGH","Style_Priority":"Claymorphism + Vibrant & Block-based","Typography_Mood":"Playful + Rounded + Friendly","UI_Category":"Habit Tracker","domain":"ui-reasoning","record_id":"ui-reasoning/94"},{"Anti_Patterns":"Muted colors + Low energy","Color_Mood":"Appetizing warm (orange/red) + trust blue + map accent","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Scroll animations + Parallax + Page transitions","No":95,"Recommended_Pattern":"Hero-Centric Design + Feature-Rich","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Motion-Driven","Typography_Mood":"Energetic + Bold + Large","UI_Category":"Food Delivery / On-Demand","domain":"ui-reasoning","record_id":"ui-reasoning/95"},{"Anti_Patterns":"Excessive decoration","Color_Mood":"Brand primary + map neutral + status indicator colors","Decision_Rules":"{\"if_low_performance\": \"fallback-to-flat\", \"if_conversion_focused\": \"add-urgency-colors\"}","Key_Effects":"Backdrop blur (10-20px) + Translucent overlays","No":96,"Recommended_Pattern":"Conversion-Optimized + Demo","Severity":"HIGH","Style_Priority":"Minimalism + Glassmorphism","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Ride Hailing / Transportation","domain":"ui-reasoning","record_id":"ui-reasoning/96"},{"Anti_Patterns":"Muted colors + Low energy","Color_Mood":"Warm food tones (terracotta/sage/cream) + appetizing imagery","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Multi-layer shadows + Spring bounce + Soft press 200ms","No":97,"Recommended_Pattern":"Hero-Centric Design + Feature-Rich","Severity":"HIGH","Style_Priority":"Claymorphism + Vibrant & Block-based","Typography_Mood":"Playful + Rounded + Friendly","UI_Category":"Recipe & Cooking App","domain":"ui-reasoning","record_id":"ui-reasoning/97"},{"Anti_Patterns":"Inconsistent styling + Poor contrast ratios","Color_Mood":"Ultra-calm pastels (lavender/sage/sky) + breathing animation gradient","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Dual shadows (light+dark) + Soft press 150ms","No":98,"Recommended_Pattern":"Storytelling-Driven + Social Proof","Severity":"HIGH","Style_Priority":"Neumorphism + Soft UI Evolution","Typography_Mood":"Subtle + Soft + Monochromatic","UI_Category":"Meditation & Mindfulness","domain":"ui-reasoning","record_id":"ui-reasoning/98"},{"Anti_Patterns":"Inconsistent styling + Poor contrast ratios","Color_Mood":"Atmospheric gradients (sky blue → sunset → storm grey) + temp scale","Decision_Rules":"{\"if_low_performance\": \"fallback-to-flat\"}","Key_Effects":"Backdrop blur (10-20px) + Translucent overlays","No":99,"Recommended_Pattern":"Hero-Centric Design","Severity":"HIGH","Style_Priority":"Glassmorphism + Aurora UI","Typography_Mood":"Modern + Clear hierarchy","UI_Category":"Weather App","domain":"ui-reasoning","record_id":"ui-reasoning/99"},{"Anti_Patterns":"Excessive decoration","Color_Mood":"Warm paper tones (cream/linen) + muted ink + mood-coded accents","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Subtle hover 200ms + Smooth transitions + Clean","No":100,"Recommended_Pattern":"Storytelling-Driven","Severity":"HIGH","Style_Priority":"Soft UI Evolution + Minimalism","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Diary & Journal App","domain":"ui-reasoning","record_id":"ui-reasoning/100"},{"Anti_Patterns":"Excessive decoration + Complex shadows + 3D effects","Color_Mood":"Professional blue + pipeline stage colors + closed-won green","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":101,"Recommended_Pattern":"Feature-Rich Showcase + Demo","Severity":"HIGH","Style_Priority":"Flat Design + Minimalism","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"CRM & Client Management","domain":"ui-reasoning","record_id":"ui-reasoning/101"},{"Anti_Patterns":"Excessive decoration + Complex shadows + 3D effects","Color_Mood":"Functional neutral + status traffic-light (green/amber/red) + scanner accent","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":102,"Recommended_Pattern":"Feature-Rich Showcase","Severity":"HIGH","Style_Priority":"Flat Design + Minimalism","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Inventory & Stock Management","domain":"ui-reasoning","record_id":"ui-reasoning/102"},{"Anti_Patterns":"Inconsistent styling + Poor contrast ratios","Color_Mood":"Playful primary + correct green + incorrect red + progress blue","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Multi-layer shadows + Spring bounce + Soft press 200ms","No":103,"Recommended_Pattern":"Feature-Rich Showcase + Demo","Severity":"HIGH","Style_Priority":"Claymorphism + Micro-interactions","Typography_Mood":"Playful + Rounded + Friendly","UI_Category":"Flashcard & Study Tool","domain":"ui-reasoning","record_id":"ui-reasoning/103"},{"Anti_Patterns":"Complex shadows + 3D effects","Color_Mood":"Trust blue + available green + booked grey + confirm accent","Decision_Rules":"{\"if_conversion_focused\": \"add-urgency-colors\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":104,"Recommended_Pattern":"Conversion-Optimized","Severity":"HIGH","Style_Priority":"Soft UI Evolution + Flat Design","Typography_Mood":"Bold + Clean + Sans-serif","UI_Category":"Booking & Appointment App","domain":"ui-reasoning","record_id":"ui-reasoning/104"},{"Anti_Patterns":"Excessive decoration + Complex shadows + 3D effects","Color_Mood":"Professional navy + paid green + overdue red + neutral grey","Decision_Rules":"{\"if_conversion_focused\": \"add-urgency-colors\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":105,"Recommended_Pattern":"Conversion-Optimized + Trust","Severity":"HIGH","Style_Priority":"Minimalism + Flat Design","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Invoice & Billing Tool","domain":"ui-reasoning","record_id":"ui-reasoning/105"},{"Anti_Patterns":"Complex shadows + 3D effects + Muted colors + Low energy","Color_Mood":"Fresh green + food-category colors + checkmark accent","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":106,"Recommended_Pattern":"Minimal & Direct + Demo","Severity":"HIGH","Style_Priority":"Flat Design + Vibrant & Block-based","Typography_Mood":"Bold + Clean + Sans-serif","UI_Category":"Grocery & Shopping List","domain":"ui-reasoning","record_id":"ui-reasoning/106"},{"Anti_Patterns":"Excessive decoration","Color_Mood":"High-contrast on dark + focus red/amber + break green","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Dual shadows (light+dark) + Soft press 150ms","No":107,"Recommended_Pattern":"Minimal & Direct","Severity":"HIGH","Style_Priority":"Minimalism + Neumorphism","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Timer & Pomodoro","domain":"ui-reasoning","record_id":"ui-reasoning/107"},{"Anti_Patterns":"Inconsistent styling + Poor contrast ratios","Color_Mood":"Soft pastels (baby pink/sky blue/mint/peach) + warm accents","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Multi-layer shadows + Spring bounce + Soft press 200ms","No":108,"Recommended_Pattern":"Social Proof-Focused + Trust","Severity":"HIGH","Style_Priority":"Claymorphism + Soft UI Evolution","Typography_Mood":"Playful + Rounded + Friendly","UI_Category":"Parenting & Baby Tracker","domain":"ui-reasoning","record_id":"ui-reasoning/108"},{"Anti_Patterns":"Excessive decoration + Complex shadows + 3D effects","Color_Mood":"Clean white + camera viewfinder accent + file-type color coding","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":109,"Recommended_Pattern":"Feature-Rich Showcase + Demo","Severity":"HIGH","Style_Priority":"Minimalism + Flat Design","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Scanner & Document Manager","domain":"ui-reasoning","record_id":"ui-reasoning/109"},{"Anti_Patterns":"Complex shadows + 3D effects","Color_Mood":"Clean blue + event category accent colors + success green","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":110,"Recommended_Pattern":"Feature-Rich Showcase + Demo","Severity":"HIGH","Style_Priority":"Flat Design + Micro-interactions","Typography_Mood":"Bold + Clean + Sans-serif","UI_Category":"Calendar & Scheduling App","domain":"ui-reasoning","record_id":"ui-reasoning/110"},{"Anti_Patterns":"Excessive decoration + Color-only indicators","Color_Mood":"Trust blue + security green + dark neutral","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Subtle hover 200ms + Smooth transitions + Clean","No":111,"Recommended_Pattern":"Trust & Authority + Feature-Rich","Severity":"HIGH","Style_Priority":"Minimalism + Accessible & Ethical","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Password Manager","domain":"ui-reasoning","record_id":"ui-reasoning/111"},{"Anti_Patterns":"Complex shadows + 3D effects + Muted colors + Low energy","Color_Mood":"Success green + alert red + neutral grey + avatar accent colors","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":112,"Recommended_Pattern":"Minimal & Direct + Demo","Severity":"HIGH","Style_Priority":"Flat Design + Vibrant & Block-based","Typography_Mood":"Bold + Clean + Sans-serif","UI_Category":"Expense Splitter / Bill Split","domain":"ui-reasoning","record_id":"ui-reasoning/112"},{"Anti_Patterns":"Excessive decoration","Color_Mood":"Clean white + recording red + waveform accent","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Subtle hover 200ms + Smooth transitions + Clean","No":113,"Recommended_Pattern":"Interactive Product Demo + Minimal","Severity":"HIGH","Style_Priority":"Minimalism + AI-Native UI","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Voice Recorder & Memo","domain":"ui-reasoning","record_id":"ui-reasoning/113"},{"Anti_Patterns":"Excessive decoration + Complex shadows + 3D effects","Color_Mood":"Paper warm white + ink neutral + minimal accent + tag colors","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":114,"Recommended_Pattern":"Minimal & Direct + Demo","Severity":"HIGH","Style_Priority":"Minimalism + Flat Design","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Bookmark & Read-Later","domain":"ui-reasoning","record_id":"ui-reasoning/114"},{"Anti_Patterns":"Complex shadows + 3D effects","Color_Mood":"Global blue + neutral grey + language flag accent","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":115,"Recommended_Pattern":"Feature-Rich Showcase + Interactive Demo","Severity":"HIGH","Style_Priority":"Flat Design + AI-Native UI","Typography_Mood":"Bold + Clean + Sans-serif","UI_Category":"Translator App","domain":"ui-reasoning","record_id":"ui-reasoning/115"},{"Anti_Patterns":"Excessive decoration","Color_Mood":"Dark functional + orange operation keys + clear button hierarchy","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Dual shadows (light+dark) + Soft press 150ms","No":116,"Recommended_Pattern":"Minimal & Direct","Severity":"HIGH","Style_Priority":"Neumorphism + Minimalism","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Calculator & Unit Converter","domain":"ui-reasoning","record_id":"ui-reasoning/116"},{"Anti_Patterns":"Excessive decoration + Pure white backgrounds","Color_Mood":"Deep dark + ambient glow accent + timezone gradient","Decision_Rules":"{\"if_light_mode_needed\": \"provide-theme-toggle\"}","Key_Effects":"Subtle glow + Neon accents + High contrast","No":117,"Recommended_Pattern":"Minimal & Direct","Severity":"HIGH","Style_Priority":"Dark Mode (OLED) + Minimalism","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Alarm & World Clock","domain":"ui-reasoning","record_id":"ui-reasoning/117"},{"Anti_Patterns":"Excessive decoration + Complex shadows + 3D effects","Color_Mood":"Functional neutral + file type color coding (PDF orange, doc blue, image purple)","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":118,"Recommended_Pattern":"Feature-Rich Showcase + Demo","Severity":"HIGH","Style_Priority":"Flat Design + Minimalism","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"File Manager & Transfer","domain":"ui-reasoning","record_id":"ui-reasoning/118"},{"Anti_Patterns":"Excessive decoration + Complex shadows + 3D effects","Color_Mood":"Clean white + brand primary + priority red + snooze amber","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":119,"Recommended_Pattern":"Feature-Rich Showcase + Demo","Severity":"HIGH","Style_Priority":"Flat Design + Minimalism","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Email Client","domain":"ui-reasoning","record_id":"ui-reasoning/119"},{"Anti_Patterns":"Muted colors + Low energy","Color_Mood":"Cheerful pastels + progression gradient + reward gold + bright accent","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Multi-layer shadows + Spring bounce + Soft press 200ms","No":120,"Recommended_Pattern":"Feature-Rich Showcase + Social Proof","Severity":"HIGH","Style_Priority":"Claymorphism + Vibrant & Block-based","Typography_Mood":"Playful + Rounded + Friendly","UI_Category":"Casual Puzzle Game","domain":"ui-reasoning","record_id":"ui-reasoning/120"},{"Anti_Patterns":"Muted colors + Low energy","Color_Mood":"Energetic blue + correct green + incorrect red + leaderboard gold","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Haptic feedback + Small 50-100ms animations","No":121,"Recommended_Pattern":"Feature-Rich Showcase + Social Proof","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Micro-interactions","Typography_Mood":"Energetic + Bold + Large","UI_Category":"Trivia & Quiz Game","domain":"ui-reasoning","record_id":"ui-reasoning/121"},{"Anti_Patterns":"Complex shadows + 3D effects","Color_Mood":"Game-theme felt green + dark wood + card back patterns","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":122,"Recommended_Pattern":"Feature-Rich Showcase","Severity":"HIGH","Style_Priority":"3D & Hyperrealism + Flat Design","Typography_Mood":"Bold + Clean + Sans-serif","UI_Category":"Card & Board Game","domain":"ui-reasoning","record_id":"ui-reasoning/122"},{"Anti_Patterns":"Muted colors + Low energy","Color_Mood":"Coin gold + upgrade blue + prestige purple + progress green","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Scroll animations + Parallax + Page transitions","No":123,"Recommended_Pattern":"Feature-Rich Showcase","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Motion-Driven","Typography_Mood":"Energetic + Bold + Large","UI_Category":"Idle & Clicker Game","domain":"ui-reasoning","record_id":"ui-reasoning/123"},{"Anti_Patterns":"Excessive decoration + Complex shadows + 3D effects","Color_Mood":"Clean white + warm letter tiles + success green + shake red","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":124,"Recommended_Pattern":"Minimal & Direct + Demo","Severity":"HIGH","Style_Priority":"Minimalism + Flat Design","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Word & Crossword Game","domain":"ui-reasoning","record_id":"ui-reasoning/124"},{"Anti_Patterns":"Inconsistent styling + Poor contrast ratios","Color_Mood":"Neon on black + pixel palette + score gold + danger red","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Subtle hover (200ms) + Smooth transitions","No":125,"Recommended_Pattern":"Feature-Rich Showcase + Hero-Centric","Severity":"HIGH","Style_Priority":"Pixel Art + Retro-Futurism","Typography_Mood":"Nostalgic + Monospace + Neon","UI_Category":"Arcade & Retro Game","domain":"ui-reasoning","record_id":"ui-reasoning/125"},{"Anti_Patterns":"Excessive decoration + Pure white backgrounds","Color_Mood":"Dark editor background + vibrant filter preview strip + tool icon accent","Decision_Rules":"{\"if_light_mode_needed\": \"provide-theme-toggle\"}","Key_Effects":"Subtle glow + Neon accents + High contrast","No":126,"Recommended_Pattern":"Feature-Rich Showcase + Interactive Demo","Severity":"HIGH","Style_Priority":"Minimalism + Dark Mode (OLED)","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Photo Editor & Filters","domain":"ui-reasoning","record_id":"ui-reasoning/126"},{"Anti_Patterns":"Pure white backgrounds","Color_Mood":"Dark background + timeline track accent colors + effect preview vivid","Decision_Rules":"{\"if_light_mode_needed\": \"provide-theme-toggle\"}","Key_Effects":"Subtle glow + Neon accents + High contrast","No":127,"Recommended_Pattern":"Feature-Rich Showcase + Hero-Centric","Severity":"HIGH","Style_Priority":"Dark Mode (OLED) + Motion-Driven","Typography_Mood":"High contrast + Light on dark","UI_Category":"Short Video Editor","domain":"ui-reasoning","record_id":"ui-reasoning/127"},{"Anti_Patterns":"Excessive decoration + Pure white backgrounds","Color_Mood":"Neutral canvas + full-spectrum color picker + tool panel dark","Decision_Rules":"{\"if_light_mode_needed\": \"provide-theme-toggle\"}","Key_Effects":"Subtle glow + Neon accents + High contrast","No":128,"Recommended_Pattern":"Interactive Product Demo + Storytelling","Severity":"HIGH","Style_Priority":"Minimalism + Dark Mode (OLED)","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Drawing & Sketching Canvas","domain":"ui-reasoning","record_id":"ui-reasoning/128"},{"Anti_Patterns":"Pure white backgrounds","Color_Mood":"Dark studio background + track colors rainbow + waveform accent + BPM pulse","Decision_Rules":"{\"if_light_mode_needed\": \"provide-theme-toggle\"}","Key_Effects":"Subtle glow + Neon accents + High contrast","No":129,"Recommended_Pattern":"Interactive Product Demo + Storytelling","Severity":"HIGH","Style_Priority":"Dark Mode (OLED) + Motion-Driven","Typography_Mood":"High contrast + Light on dark","UI_Category":"Music Creation & Beat Maker","domain":"ui-reasoning","record_id":"ui-reasoning/129"},{"Anti_Patterns":"Complex shadows + 3D effects + Muted colors + Low energy","Color_Mood":"Bold primary + comedic yellow + viral red + high saturation accent","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":130,"Recommended_Pattern":"Feature-Rich Showcase + Social Proof","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Flat Design","Typography_Mood":"Bold + Clean + Sans-serif","UI_Category":"Meme & Sticker Maker","domain":"ui-reasoning","record_id":"ui-reasoning/130"},{"Anti_Patterns":"Inconsistent styling + Poor contrast ratios","Color_Mood":"AI purple + aurora gradients + before/after neutral","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Flowing gradients 8-12s + Color morphing","No":131,"Recommended_Pattern":"Feature-Rich Showcase + Social Proof","Severity":"HIGH","Style_Priority":"AI-Native UI + Aurora UI","Typography_Mood":"Elegant + Gradient-friendly","UI_Category":"AI Photo & Avatar Generator","domain":"ui-reasoning","record_id":"ui-reasoning/131"},{"Anti_Patterns":"Muted colors + Low energy","Color_Mood":"Brand-customizable + accent link color + clean white canvas","Decision_Rules":"{\"if_conversion_focused\": \"add-urgency-colors\", \"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Large section gaps 48px+ + Color shift hover + Scroll-snap","No":132,"Recommended_Pattern":"Conversion-Optimized + Social Proof","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Bento Box Grid","Typography_Mood":"Energetic + Bold + Large","UI_Category":"Link-in-Bio Page Builder","domain":"ui-reasoning","record_id":"ui-reasoning/132"},{"Anti_Patterns":"Excessive decoration","Color_Mood":"Clean fashion neutral + full clothes color palette + accent","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Subtle hover 200ms + Smooth transitions + Clean","No":133,"Recommended_Pattern":"Storytelling-Driven + Feature-Rich","Severity":"HIGH","Style_Priority":"Minimalism + Motion-Driven","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Wardrobe & Outfit Planner","domain":"ui-reasoning","record_id":"ui-reasoning/133"},{"Anti_Patterns":"Inconsistent styling + Poor contrast ratios","Color_Mood":"Nature greens + earth brown + sunny yellow reminder + water blue","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Rounded 16-24px + Natural shadows + Flowing SVG","No":134,"Recommended_Pattern":"Storytelling-Driven + Social Proof","Severity":"HIGH","Style_Priority":"Organic Biophilic + Soft UI Evolution","Typography_Mood":"Warm + Humanist + Natural","UI_Category":"Plant Care Tracker","domain":"ui-reasoning","record_id":"ui-reasoning/134"},{"Anti_Patterns":"Excessive decoration","Color_Mood":"Warm paper white + ink brown + reading progress green + book cover colors","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Subtle hover 200ms + Smooth transitions + Clean","No":135,"Recommended_Pattern":"Social Proof-Focused + Feature-Rich","Severity":"HIGH","Style_Priority":"Swiss Modernism 2.0 + Minimalism","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Book & Reading Tracker","domain":"ui-reasoning","record_id":"ui-reasoning/135"},{"Anti_Patterns":"Inconsistent styling + Poor contrast ratios","Color_Mood":"Warm romantic pink/rose + soft gradient + memory photo tones","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Flowing gradients 8-12s + Color morphing","No":136,"Recommended_Pattern":"Storytelling-Driven + Social Proof","Severity":"HIGH","Style_Priority":"Aurora UI + Soft UI Evolution","Typography_Mood":"Elegant + Gradient-friendly","UI_Category":"Couple & Relationship App","domain":"ui-reasoning","record_id":"ui-reasoning/136"},{"Anti_Patterns":"Complex shadows + 3D effects","Color_Mood":"Warm playful + member color coding + chore completion green","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Multi-layer shadows + Spring bounce + Soft press 200ms","No":137,"Recommended_Pattern":"Feature-Rich Showcase + Social Proof","Severity":"HIGH","Style_Priority":"Flat Design + Claymorphism","Typography_Mood":"Playful + Rounded + Friendly","UI_Category":"Family Calendar & Chores","domain":"ui-reasoning","record_id":"ui-reasoning/137"},{"Anti_Patterns":"Excessive decoration","Color_Mood":"Emotion gradient (blue sad to yellow happy) + pastel per mood + insight accent","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Subtle hover 200ms + Smooth transitions + Clean","No":138,"Recommended_Pattern":"Storytelling-Driven + Social Proof","Severity":"HIGH","Style_Priority":"Soft UI Evolution + Minimalism","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Mood Tracker","domain":"ui-reasoning","record_id":"ui-reasoning/138"},{"Anti_Patterns":"Muted colors + Low energy","Color_Mood":"Celebration warm pink/gold/red + category colors + surprise accent","Decision_Rules":"{\"if_conversion_focused\": \"add-urgency-colors\"}","Key_Effects":"Large section gaps 48px+ + Color shift hover + Scroll-snap","No":139,"Recommended_Pattern":"Minimal & Direct + Conversion","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Soft UI Evolution","Typography_Mood":"Energetic + Bold + Large","UI_Category":"Gift & Wishlist","domain":"ui-reasoning","record_id":"ui-reasoning/139"},{"Anti_Patterns":"Pure white backgrounds + Muted colors + Low energy","Color_Mood":"Energetic orange + map accent + pace zones (green/yellow/red)","Decision_Rules":"{\"if_light_mode_needed\": \"provide-theme-toggle\", \"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Subtle glow + Neon accents + High contrast","No":140,"Recommended_Pattern":"Feature-Rich Showcase + Social Proof","Severity":"HIGH","Style_Priority":"Dark Mode (OLED) + Vibrant & Block-based","Typography_Mood":"High contrast + Light on dark","UI_Category":"Running & Cycling GPS","domain":"ui-reasoning","record_id":"ui-reasoning/140"},{"Anti_Patterns":"Inconsistent styling + Poor contrast ratios","Color_Mood":"Earth calming sage/terracotta/cream + breathing gradient + warm accent","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Rounded 16-24px + Natural shadows + Flowing SVG","No":141,"Recommended_Pattern":"Storytelling-Driven + Social Proof","Severity":"HIGH","Style_Priority":"Organic Biophilic + Soft UI Evolution","Typography_Mood":"Warm + Humanist + Natural","UI_Category":"Yoga & Stretching Guide","domain":"ui-reasoning","record_id":"ui-reasoning/141"},{"Anti_Patterns":"Pure white backgrounds","Color_Mood":"Deep midnight blue + stars/moon accent + sleep quality gradient (poor red to great green)","Decision_Rules":"{\"if_light_mode_needed\": \"provide-theme-toggle\", \"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Dual shadows (light+dark) + Soft press 150ms","No":142,"Recommended_Pattern":"Feature-Rich Showcase + Social Proof","Severity":"HIGH","Style_Priority":"Dark Mode (OLED) + Neumorphism","Typography_Mood":"High contrast + Light on dark","UI_Category":"Sleep Tracker","domain":"ui-reasoning","record_id":"ui-reasoning/142"},{"Anti_Patterns":"Complex shadows + 3D effects + Muted colors + Low energy","Color_Mood":"Healthy green + macro colors (protein blue, carb orange, fat yellow) + progress circle","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":143,"Recommended_Pattern":"Feature-Rich Showcase + Social Proof","Severity":"HIGH","Style_Priority":"Flat Design + Vibrant & Block-based","Typography_Mood":"Bold + Clean + Sans-serif","UI_Category":"Calorie & Nutrition Counter","domain":"ui-reasoning","record_id":"ui-reasoning/143"},{"Anti_Patterns":"Inconsistent styling + Poor contrast ratios","Color_Mood":"Rose/blush + lavender + fertility green + soft calendar tones","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Flowing gradients 8-12s + Color morphing","No":144,"Recommended_Pattern":"Social Proof-Focused + Trust","Severity":"HIGH","Style_Priority":"Soft UI Evolution + Aurora UI","Typography_Mood":"Elegant + Gradient-friendly","UI_Category":"Period & Cycle Tracker","domain":"ui-reasoning","record_id":"ui-reasoning/144"},{"Anti_Patterns":"Complex shadows + 3D effects + Color-only indicators","Color_Mood":"Medical trust blue + missed alert red + taken green + clean white","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":145,"Recommended_Pattern":"Trust & Authority + Feature-Rich","Severity":"HIGH","Style_Priority":"Accessible & Ethical + Flat Design","Typography_Mood":"Bold + Clean + Sans-serif","UI_Category":"Medication & Pill Reminder","domain":"ui-reasoning","record_id":"ui-reasoning/145"},{"Anti_Patterns":"Muted colors + Low energy","Color_Mood":"Refreshing blue + water wave animation + goal progress accent","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Multi-layer shadows + Spring bounce + Soft press 200ms","No":146,"Recommended_Pattern":"Minimal & Direct + Demo","Severity":"HIGH","Style_Priority":"Claymorphism + Vibrant & Block-based","Typography_Mood":"Playful + Rounded + Friendly","UI_Category":"Water & Hydration Reminder","domain":"ui-reasoning","record_id":"ui-reasoning/146"},{"Anti_Patterns":"Excessive decoration + Pure white backgrounds","Color_Mood":"Fasting deep blue/purple + eating window green + timeline neutral","Decision_Rules":"{\"if_light_mode_needed\": \"provide-theme-toggle\", \"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Subtle glow + Neon accents + High contrast","No":147,"Recommended_Pattern":"Feature-Rich Showcase + Social Proof","Severity":"HIGH","Style_Priority":"Minimalism + Dark Mode (OLED)","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Fasting & Intermittent Timer","domain":"ui-reasoning","record_id":"ui-reasoning/147"},{"Anti_Patterns":"Excessive decoration + Pure white backgrounds","Color_Mood":"Dark protective + subtle gradient + upvote green + empathy warm accent","Decision_Rules":"{\"if_light_mode_needed\": \"provide-theme-toggle\", \"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Subtle glow + Neon accents + High contrast","No":148,"Recommended_Pattern":"Social Proof-Focused + Feature-Rich","Severity":"HIGH","Style_Priority":"Dark Mode (OLED) + Minimalism","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Anonymous Community / Confession","domain":"ui-reasoning","record_id":"ui-reasoning/148"},{"Anti_Patterns":"Muted colors + Low energy","Color_Mood":"City vibrant + event category colors + map accent + date highlight","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Scroll animations + Parallax + Page transitions","No":149,"Recommended_Pattern":"Hero-Centric Design + Feature-Rich","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Motion-Driven","Typography_Mood":"Energetic + Bold + Large","UI_Category":"Local Events & Discovery","domain":"ui-reasoning","record_id":"ui-reasoning/149"},{"Anti_Patterns":"Excessive decoration","Color_Mood":"Calm focus blue + session progress indicator + ambient warm neutrals","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Subtle hover 200ms + Smooth transitions + Clean","No":150,"Recommended_Pattern":"Social Proof-Focused + Feature-Rich","Severity":"HIGH","Style_Priority":"Minimalism + Soft UI Evolution","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Study Together / Virtual Coworking","domain":"ui-reasoning","record_id":"ui-reasoning/150"},{"Anti_Patterns":"Pure white backgrounds","Color_Mood":"Code editor dark + success green + difficulty gradient (easy green / medium amber / hard red)","Decision_Rules":"{\"if_light_mode_needed\": \"provide-theme-toggle\", \"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Subtle glow + Neon accents + High contrast","No":151,"Recommended_Pattern":"Feature-Rich Showcase + Social Proof","Severity":"HIGH","Style_Priority":"Dark Mode (OLED) + Cyberpunk UI","Typography_Mood":"High contrast + Light on dark","UI_Category":"Coding Challenge & Practice","domain":"ui-reasoning","record_id":"ui-reasoning/151"},{"Anti_Patterns":"Muted colors + Low energy","Color_Mood":"Bright primary + child-safe pastels + reward gold + interactive accent","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Multi-layer shadows + Spring bounce + Soft press 200ms","No":152,"Recommended_Pattern":"Social Proof-Focused + Trust","Severity":"HIGH","Style_Priority":"Claymorphism + Vibrant & Block-based","Typography_Mood":"Playful + Rounded + Friendly","UI_Category":"Kids Learning (ABC & Math)","domain":"ui-reasoning","record_id":"ui-reasoning/152"},{"Anti_Patterns":"Muted colors + Low energy","Color_Mood":"Musical warm deep red/brown + note color system + skill progress bar","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Scroll animations + Parallax + Page transitions","No":153,"Recommended_Pattern":"Interactive Product Demo + Social Proof","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Motion-Driven","Typography_Mood":"Energetic + Bold + Large","UI_Category":"Music Instrument Learning","domain":"ui-reasoning","record_id":"ui-reasoning/153"},{"Anti_Patterns":"Excessive decoration","Color_Mood":"Trust blue + available green + occupied red + map neutral","Decision_Rules":"{\"if_low_performance\": \"fallback-to-flat\", \"if_conversion_focused\": \"add-urgency-colors\"}","Key_Effects":"Backdrop blur (10-20px) + Translucent overlays","No":154,"Recommended_Pattern":"Conversion-Optimized + Feature-Rich","Severity":"HIGH","Style_Priority":"Minimalism + Glassmorphism","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Parking Finder","domain":"ui-reasoning","record_id":"ui-reasoning/154"},{"Anti_Patterns":"Complex shadows + 3D effects + Color-only indicators","Color_Mood":"Transit brand line colors + real-time indicator green/red + map neutral","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":155,"Recommended_Pattern":"Feature-Rich Showcase + Interactive Demo","Severity":"HIGH","Style_Priority":"Flat Design + Accessible & Ethical","Typography_Mood":"Bold + Clean + Sans-serif","UI_Category":"Public Transit Guide","domain":"ui-reasoning","record_id":"ui-reasoning/155"},{"Anti_Patterns":"Inconsistent styling + Poor contrast ratios","Color_Mood":"Adventure warm sunset orange + map teal + stop markers + road neutral","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Flowing gradients 8-12s + Color morphing","No":156,"Recommended_Pattern":"Storytelling-Driven + Hero-Centric","Severity":"HIGH","Style_Priority":"Aurora UI + Organic Biophilic","Typography_Mood":"Elegant + Gradient-friendly","UI_Category":"Road Trip Planner","domain":"ui-reasoning","record_id":"ui-reasoning/156"},{"Anti_Patterns":"Excessive decoration + Pure white backgrounds","Color_Mood":"Dark shield blue + connected green + disconnected red + trust accent","Decision_Rules":"{\"if_light_mode_needed\": \"provide-theme-toggle\", \"if_conversion_focused\": \"add-urgency-colors\"}","Key_Effects":"Subtle glow + Neon accents + High contrast","No":157,"Recommended_Pattern":"Trust & Authority + Conversion-Optimized","Severity":"HIGH","Style_Priority":"Minimalism + Dark Mode (OLED)","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"VPN & Privacy Tool","domain":"ui-reasoning","record_id":"ui-reasoning/157"},{"Anti_Patterns":"Complex shadows + 3D effects + Color-only indicators","Color_Mood":"Alert red + safety blue + location green + high contrast critical","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Color shift hover + Fast 150ms transitions + No shadows","No":158,"Recommended_Pattern":"Trust & Authority + Social Proof","Severity":"HIGH","Style_Priority":"Accessible & Ethical + Flat Design","Typography_Mood":"Bold + Clean + Sans-serif","UI_Category":"Emergency SOS & Safety","domain":"ui-reasoning","record_id":"ui-reasoning/158"},{"Anti_Patterns":"Muted colors + Low energy","Color_Mood":"Content-driven + trending aesthetic palettes + download accent","Decision_Rules":"{\"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Large section gaps 48px+ + Color shift hover + Scroll-snap","No":159,"Recommended_Pattern":"Feature-Rich Showcase + Social Proof","Severity":"HIGH","Style_Priority":"Vibrant & Block-based + Aurora UI","Typography_Mood":"Energetic + Bold + Large","UI_Category":"Wallpaper & Theme App","domain":"ui-reasoning","record_id":"ui-reasoning/159"},{"Anti_Patterns":"Excessive decoration + Pure white backgrounds","Color_Mood":"Calming dark + ambient texture visual + subtle sound wave + sleep blue","Decision_Rules":"{\"if_light_mode_needed\": \"provide-theme-toggle\", \"if_trust_needed\": \"add-testimonials\"}","Key_Effects":"Subtle glow + Neon accents + High contrast","No":160,"Recommended_Pattern":"Minimal & Direct + Social Proof","Severity":"HIGH","Style_Priority":"Minimalism + Dark Mode (OLED)","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"White Noise & Ambient Sound","domain":"ui-reasoning","record_id":"ui-reasoning/160"},{"Anti_Patterns":"Excessive decoration","Color_Mood":"Neutral interior palette + material texture accent + AR blue","Decision_Rules":"{\"if_ux_focused\": \"prioritize-clarity\", \"if_mobile\": \"optimize-touch-targets\"}","Key_Effects":"Subtle hover 200ms + Smooth transitions + Clean","No":161,"Recommended_Pattern":"Storytelling-Driven + Feature-Rich","Severity":"HIGH","Style_Priority":"Minimalism + 3D Product Preview","Typography_Mood":"Professional + Clean hierarchy","UI_Category":"Home Decoration & Interior Design","domain":"ui-reasoning","record_id":"ui-reasoning/161"},{"Category":"Navigation","Description":"Anchor links should scroll smoothly to target section","Do":"Use scroll-behavior: smooth on html element","Don't":"Jump directly without transition","Issue":"Smooth Scroll","No":1,"Platform":"Web","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/1"},{"Category":"Navigation","Description":"Fixed nav should not obscure content","Do":"Add padding-top to body equal to nav height","Don't":"Let nav overlap first section content","Issue":"Sticky Navigation","No":2,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/2"},{"Category":"Navigation","Description":"Current page/section should be visually indicated","Do":"Highlight active nav item with color/underline","Don't":"No visual feedback on current location","Issue":"Active State","No":3,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/3"},{"Category":"Navigation","Description":"Users expect back to work predictably","Do":"Preserve navigation history properly","Don't":"Break browser/app back button behavior","Issue":"Back Button","No":4,"Platform":"Mobile","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/4"},{"Category":"Navigation","Description":"URLs should reflect current state for sharing","Do":"Update URL on state/view changes","Don't":"Static URLs for dynamic content","Issue":"Deep Linking","No":5,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/5"},{"Category":"Navigation","Description":"Show user location in site hierarchy","Do":"Use for sites with 3+ levels of depth","Don't":"Use for flat single-level sites","Issue":"Breadcrumbs","No":6,"Platform":"Web","Severity":"Low","domain":"ux-guidelines","record_id":"ux-guidelines/6"},{"Category":"Animation","Description":"Too many animations cause distraction and motion sickness","Do":"Animate 1-2 key elements per view maximum","Don't":"Animate everything that moves","Issue":"Excessive Motion","No":7,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/7"},{"Category":"Animation","Description":"Animations should feel responsive not sluggish","Do":"Use 150-300ms for micro-interactions","Don't":"Use animations longer than 500ms for UI","Issue":"Duration Timing","No":8,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/8"},{"Category":"Animation","Description":"Respect user's motion preferences","Do":"Check prefers-reduced-motion media query","Don't":"Ignore accessibility motion settings","Issue":"Reduced Motion","No":9,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/9"},{"Category":"Animation","Description":"Show feedback during async operations","Do":"Use skeleton screens or spinners","Don't":"Leave UI frozen with no feedback","Issue":"Loading States","No":10,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/10"},{"Category":"Animation","Description":"Hover effects don't work on touch devices","Do":"Use click/tap for primary interactions","Don't":"Rely only on hover for important actions","Issue":"Hover vs Tap","No":11,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/11"},{"Category":"Animation","Description":"Infinite animations are distracting","Do":"Use for loading indicators only","Don't":"Use for decorative elements","Issue":"Continuous Animation","No":12,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/12"},{"Category":"Animation","Description":"Some CSS properties trigger expensive repaints","Do":"Use transform and opacity for animations","Don't":"Animate width/height/top/left properties","Issue":"Transform Performance","No":13,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/13"},{"Category":"Animation","Description":"Linear motion feels robotic","Do":"Use ease-out for entering ease-in for exiting","Don't":"Use linear for UI transitions","Issue":"Easing Functions","No":14,"Platform":"All","Severity":"Low","domain":"ux-guidelines","record_id":"ux-guidelines/14"},{"Category":"Layout","Description":"Stacking context conflicts cause hidden elements","Do":"Define z-index scale system (10 20 30 50)","Don't":"Use arbitrary large z-index values","Issue":"Z-Index Management","No":15,"Platform":"Web","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/15"},{"Category":"Layout","Description":"Hidden overflow can clip important content","Do":"Test all content fits within containers","Don't":"Blindly apply overflow-hidden","Issue":"Overflow Hidden","No":16,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/16"},{"Category":"Layout","Description":"Fixed elements can overlap or be inaccessible","Do":"Account for safe areas and other fixed elements","Don't":"Stack multiple fixed elements carelessly","Issue":"Fixed Positioning","No":17,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/17"},{"Category":"Layout","Description":"New stacking contexts reset z-index","Do":"Understand what creates new stacking context","Don't":"Expect z-index to work across contexts","Issue":"Stacking Context","No":18,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/18"},{"Category":"Layout","Description":"Layout shift when content loads is jarring","Do":"Reserve space for async content","Don't":"Let images/content push layout around","Issue":"Content Jumping","No":19,"Platform":"Web","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/19"},{"Category":"Layout","Description":"100vh can be problematic on mobile browsers","Do":"Use dvh or account for mobile browser chrome","Don't":"Use 100vh for full-screen mobile layouts","Issue":"Viewport Units","No":20,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/20"},{"Category":"Layout","Description":"Content too wide is hard to read","Do":"Limit max-width for text content (65-75ch)","Don't":"Let text span full viewport width","Issue":"Container Width","No":21,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/21"},{"Category":"Touch","Description":"Small buttons are hard to tap accurately","Do":"Minimum 44x44px touch targets","Don't":"Tiny clickable areas","Issue":"Touch Target Size","No":22,"Platform":"Mobile","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/22"},{"Category":"Touch","Description":"Adjacent touch targets need adequate spacing","Do":"Minimum 8px gap between touch targets","Don't":"Tightly packed clickable elements","Issue":"Touch Spacing","No":23,"Platform":"Mobile","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/23"},{"Category":"Touch","Description":"Custom gestures can conflict with system","Do":"Avoid horizontal swipe on main content","Don't":"Override system gestures","Issue":"Gesture Conflicts","No":24,"Platform":"Mobile","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/24"},{"Category":"Touch","Description":"300ms tap delay feels laggy","Do":"Use touch-action CSS or fastclick","Don't":"Default mobile tap handling","Issue":"Tap Delay","No":25,"Platform":"Mobile","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/25"},{"Category":"Touch","Description":"Accidental refresh is frustrating","Do":"Disable where not needed","Don't":"Enable by default everywhere","Issue":"Pull to Refresh","No":26,"Platform":"Mobile","Severity":"Low","domain":"ux-guidelines","record_id":"ux-guidelines/26"},{"Category":"Touch","Description":"Tactile feedback improves interaction feel","Do":"Use for confirmations and important actions","Don't":"Overuse vibration feedback","Issue":"Haptic Feedback","No":27,"Platform":"Mobile","Severity":"Low","domain":"ux-guidelines","record_id":"ux-guidelines/27"},{"Category":"Interaction","Description":"Keyboard users need visible focus indicators","Do":"Use visible focus rings on interactive elements","Don't":"Remove focus outline without replacement","Issue":"Focus States","No":28,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/28"},{"Category":"Interaction","Description":"Visual feedback on interactive elements","Do":"Change cursor and add subtle visual change","Don't":"No hover feedback on clickable elements","Issue":"Hover States","No":29,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/29"},{"Category":"Interaction","Description":"Show immediate feedback on press/click","Do":"Add pressed/active state visual change","Don't":"No feedback during interaction","Issue":"Active States","No":30,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/30"},{"Category":"Interaction","Description":"Clearly indicate non-interactive elements","Do":"Reduce opacity and change cursor","Don't":"Confuse disabled with normal state","Issue":"Disabled States","No":31,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/31"},{"Category":"Interaction","Description":"Prevent double submission during async actions","Do":"Disable button and show loading state","Don't":"Allow multiple clicks during processing","Issue":"Loading Buttons","No":32,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/32"},{"Category":"Interaction","Description":"Users need to know when something fails","Do":"Show clear error messages near problem","Don't":"Silent failures with no feedback","Issue":"Error Feedback","No":33,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/33"},{"Category":"Interaction","Description":"Confirm successful actions to users","Do":"Show success message or visual change","Don't":"No confirmation of completed action","Issue":"Success Feedback","No":34,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/34"},{"Category":"Interaction","Description":"Prevent accidental destructive actions","Do":"Confirm before delete/irreversible actions","Don't":"Delete without confirmation","Issue":"Confirmation Dialogs","No":35,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/35"},{"Category":"Accessibility","Description":"Text must be readable against background","Do":"Minimum 4.5:1 ratio for normal text","Don't":"Low contrast text","Issue":"Color Contrast","No":36,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/36"},{"Category":"Accessibility","Description":"Don't convey information by color alone","Do":"Use icons/text in addition to color","Don't":"Red/green only for error/success","Issue":"Color Only","No":37,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/37"},{"Category":"Accessibility","Description":"Images need text alternatives","Do":"Descriptive alt text for meaningful images","Don't":"Empty or missing alt attributes","Issue":"Alt Text","No":38,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/38"},{"Category":"Accessibility","Description":"Screen readers use headings for navigation","Do":"Use sequential heading levels h1-h6","Don't":"Skip heading levels or misuse for styling","Issue":"Heading Hierarchy","No":39,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/39"},{"Category":"Accessibility","Description":"Interactive elements need accessible names","Do":"Add aria-label for icon-only buttons","Don't":"Icon buttons without labels","Issue":"ARIA Labels","No":40,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/40"},{"Category":"Accessibility","Description":"All functionality accessible via keyboard","Do":"Tab order matches visual order","Don't":"Keyboard traps or illogical tab order","Issue":"Keyboard Navigation","No":41,"Platform":"Web","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/41"},{"Category":"Accessibility","Description":"Content should make sense when read aloud","Do":"Use semantic HTML and ARIA properly","Don't":"Div soup with no semantics","Issue":"Screen Reader","No":42,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/42"},{"Category":"Accessibility","Description":"Inputs must have associated labels","Do":"Use label with for attribute or wrap input","Don't":"Placeholder-only inputs","Issue":"Form Labels","No":43,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/43"},{"Category":"Accessibility","Description":"Error messages must be announced","Do":"Use aria-live or role=alert for errors","Don't":"Visual-only error indication","Issue":"Error Messages","No":44,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/44"},{"Category":"Accessibility","Description":"Allow keyboard users to skip navigation","Do":"Provide skip to main content link","Don't":"No skip link on nav-heavy pages","Issue":"Skip Links","No":45,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/45"},{"Category":"Performance","Description":"Large images slow page load","Do":"Use appropriate size and format (WebP)","Don't":"Unoptimized full-size images","Issue":"Image Optimization","No":46,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/46"},{"Category":"Performance","Description":"Load content as needed","Do":"Lazy load below-fold images and content","Don't":"Load everything upfront","Issue":"Lazy Loading","No":47,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/47"},{"Category":"Performance","Description":"Large bundles slow initial load","Do":"Split code by route/feature","Don't":"Single large bundle","Issue":"Code Splitting","No":48,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/48"},{"Category":"Performance","Description":"Repeat visits should be fast","Do":"Set appropriate cache headers","Don't":"No caching strategy","Issue":"Caching","No":49,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/49"},{"Category":"Performance","Description":"Web fonts can block rendering","Do":"Use font-display swap or optional","Don't":"Invisible text during font load","Issue":"Font Loading","No":50,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/50"},{"Category":"Performance","Description":"External scripts can block rendering","Do":"Load non-critical scripts async/defer","Don't":"Synchronous third-party scripts","Issue":"Third Party Scripts","No":51,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/51"},{"Category":"Performance","Description":"Large JavaScript slows interaction","Do":"Monitor and minimize bundle size","Don't":"Ignore bundle size growth","Issue":"Bundle Size","No":52,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/52"},{"Category":"Performance","Description":"CSS/JS can block first paint","Do":"Inline critical CSS defer non-critical","Don't":"Large blocking CSS files","Issue":"Render Blocking","No":53,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/53"},{"Category":"Forms","Description":"Every input needs a visible label","Do":"Always show label above or beside input","Don't":"Placeholder as only label","Issue":"Input Labels","No":54,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/54"},{"Category":"Forms","Description":"Errors should appear near the problem","Do":"Show error below related input","Don't":"Single error message at top of form","Issue":"Error Placement","No":55,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/55"},{"Category":"Forms","Description":"Validate as user types or on blur","Do":"Validate on blur for most fields","Don't":"Validate only on submit","Issue":"Inline Validation","No":56,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/56"},{"Category":"Forms","Description":"Use appropriate input types","Do":"Use email tel number url etc","Don't":"Text input for everything","Issue":"Input Types","No":57,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/57"},{"Category":"Forms","Description":"Help browsers autofill correctly","Do":"Use autocomplete attribute properly","Don't":"Block or ignore autofill","Issue":"Autofill Support","No":58,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/58"},{"Category":"Forms","Description":"Mark required fields clearly","Do":"Use asterisk or (required) text","Don't":"No indication of required fields","Issue":"Required Indicators","No":59,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/59"},{"Category":"Forms","Description":"Let users see password while typing","Do":"Toggle to show/hide password","Don't":"No visibility toggle","Issue":"Password Visibility","No":60,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/60"},{"Category":"Forms","Description":"Confirm form submission status","Do":"Show loading then success/error state","Don't":"No feedback after submit","Issue":"Submit Feedback","No":61,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/61"},{"Category":"Forms","Description":"Inputs should look interactive","Do":"Use distinct input styling","Don't":"Inputs that look like plain text","Issue":"Input Affordance","No":62,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/62"},{"Category":"Forms","Description":"Show appropriate keyboard for input type","Do":"Use inputmode attribute","Don't":"Default keyboard for all inputs","Issue":"Mobile Keyboards","No":63,"Platform":"Mobile","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/63"},{"Category":"Responsive","Description":"Design for mobile then enhance for larger","Do":"Start with mobile styles then add breakpoints","Don't":"Desktop-first causing mobile issues","Issue":"Mobile First","No":64,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/64"},{"Category":"Responsive","Description":"Test at all common screen sizes","Do":"Test at 320 375 414 768 1024 1440","Don't":"Only test on your device","Issue":"Breakpoint Testing","No":65,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/65"},{"Category":"Responsive","Description":"Mobile layouts need touch-sized targets","Do":"Increase touch targets on mobile","Don't":"Same tiny buttons on mobile","Issue":"Touch Friendly","No":66,"Platform":"Web","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/66"},{"Category":"Responsive","Description":"Text must be readable on all devices","Do":"Minimum 16px body text on mobile","Don't":"Tiny text on mobile","Issue":"Readable Font Size","No":67,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/67"},{"Category":"Responsive","Description":"Set viewport for mobile devices","Do":"Use width=device-width initial-scale=1","Don't":"Missing or incorrect viewport","Issue":"Viewport Meta","No":68,"Platform":"Web","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/68"},{"Category":"Responsive","Description":"Avoid horizontal scrolling","Do":"Ensure content fits viewport width","Don't":"Content wider than viewport","Issue":"Horizontal Scroll","No":69,"Platform":"Web","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/69"},{"Category":"Responsive","Description":"Images should scale with container","Do":"Use max-width: 100% on images","Don't":"Fixed width images overflow","Issue":"Image Scaling","No":70,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/70"},{"Category":"Responsive","Description":"Tables can overflow on mobile","Do":"Use horizontal scroll or card layout","Don't":"Wide tables breaking layout","Issue":"Table Handling","No":71,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/71"},{"Category":"Typography","Description":"Adequate line height improves readability","Do":"Use 1.5-1.75 for body text","Don't":"Cramped or excessive line height","Issue":"Line Height","No":72,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/72"},{"Category":"Typography","Description":"Long lines are hard to read","Do":"Limit to 65-75 characters per line","Don't":"Full-width text on large screens","Issue":"Line Length","No":73,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/73"},{"Category":"Typography","Description":"Consistent type hierarchy aids scanning","Do":"Use consistent modular scale","Don't":"Random font sizes","Issue":"Font Size Scale","No":74,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/74"},{"Category":"Typography","Description":"Fonts should load without layout shift","Do":"Reserve space with fallback font","Don't":"Layout shift when fonts load","Issue":"Font Loading","No":75,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/75"},{"Category":"Typography","Description":"Body text needs good contrast","Do":"Use darker text on light backgrounds","Don't":"Gray text on gray background","Issue":"Contrast Readability","No":76,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/76"},{"Category":"Typography","Description":"Headings should stand out from body","Do":"Clear size/weight difference","Don't":"Headings similar to body text","Issue":"Heading Clarity","No":77,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/77"},{"Category":"Feedback","Description":"Show system status during waits","Do":"Show spinner/skeleton for operations > 300ms","Don't":"No feedback during loading","Issue":"Loading Indicators","No":78,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/78"},{"Category":"Feedback","Description":"Guide users when no content exists","Do":"Show helpful message and action","Don't":"Blank empty screens","Issue":"Empty States","No":79,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/79"},{"Category":"Feedback","Description":"Help users recover from errors","Do":"Provide clear next steps","Don't":"Error without recovery path","Issue":"Error Recovery","No":80,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/80"},{"Category":"Feedback","Description":"Show progress for multi-step processes","Do":"Step indicators or progress bar","Don't":"No indication of progress","Issue":"Progress Indicators","No":81,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/81"},{"Category":"Feedback","Description":"Transient messages for non-critical info","Do":"Auto-dismiss after 3-5 seconds","Don't":"Toasts that never disappear","Issue":"Toast Notifications","No":82,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/82"},{"Category":"Feedback","Description":"Confirm successful actions","Do":"Brief success message","Don't":"Silent success","Issue":"Confirmation Messages","No":83,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/83"},{"Category":"Content","Description":"Handle long content gracefully","Do":"Truncate with ellipsis and expand option","Don't":"Overflow or broken layout","Issue":"Truncation","No":84,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/84"},{"Category":"Content","Description":"Use locale-appropriate date formats","Do":"Use relative or locale-aware dates","Don't":"Ambiguous date formats","Issue":"Date Formatting","No":85,"Platform":"All","Severity":"Low","domain":"ux-guidelines","record_id":"ux-guidelines/85"},{"Category":"Content","Description":"Format large numbers for readability","Do":"Use thousand separators or abbreviations","Don't":"Long unformatted numbers","Issue":"Number Formatting","No":86,"Platform":"All","Severity":"Low","domain":"ux-guidelines","record_id":"ux-guidelines/86"},{"Category":"Content","Description":"Show realistic placeholders during dev","Do":"Use realistic sample data","Don't":"Lorem ipsum everywhere","Issue":"Placeholder Content","No":87,"Platform":"All","Severity":"Low","domain":"ux-guidelines","record_id":"ux-guidelines/87"},{"Category":"Onboarding","Description":"Users should be able to skip tutorials","Do":"Provide Skip and Back buttons","Don't":"Force linear unskippable tour","Issue":"User Freedom","No":88,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/88"},{"Category":"Search","Description":"Help users find results faster","Do":"Show predictions as user types","Don't":"Require full type and enter","Issue":"Autocomplete","No":89,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/89"},{"Category":"Search","Description":"Dead ends frustrate users","Do":"Show 'No results' with suggestions","Don't":"Blank screen or '0 results'","Issue":"No Results","No":90,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/90"},{"Category":"Data Entry","Description":"Editing one by one is tedious","Do":"Allow multi-select and bulk edit","Don't":"Single row actions only","Issue":"Bulk Actions","No":91,"Platform":"Web","Severity":"Low","domain":"ux-guidelines","record_id":"ux-guidelines/91"},{"Category":"AI Interaction","Description":"Users need to know they talk to AI","Do":"Clearly label AI generated content","Don't":"Present AI as human","Issue":"Disclaimer","No":92,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/92"},{"Category":"AI Interaction","Description":"Waiting for full text is slow","Do":"Stream text response token by token","Don't":"Show loading spinner for 10s+","Issue":"Streaming","No":93,"Platform":"All","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/93"},{"Category":"Spatial UI","Description":"Elements should respond to eye tracking before pinch","Do":"Scale/highlight element on look","Don't":"Static element until pinch","Issue":"Gaze Hover","No":94,"Platform":"VisionOS","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/94"},{"Category":"Spatial UI","Description":"UI needs Z-depth to separate content from environment","Do":"Use glass material and z-offset","Don't":"Flat opaque panels blocking view","Issue":"Depth Layering","No":95,"Platform":"VisionOS","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/95"},{"Category":"Sustainability","Description":"Video consumes massive data and energy","Do":"Click-to-play or pause when off-screen","Don't":"Auto-play high-res video loops","Issue":"Auto-Play Video","No":96,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/96"},{"Category":"Sustainability","Description":"Heavy 3D/Image assets increase carbon footprint","Do":"Compress and lazy load 3D models","Don't":"Load 50MB textures","Issue":"Asset Weight","No":97,"Platform":"Web","Severity":"Medium","domain":"ux-guidelines","record_id":"ux-guidelines/97"},{"Category":"AI Interaction","Description":"AI needs user feedback to improve","Do":"Thumps up/down or 'Regenerate'","Don't":"Static output only","Issue":"Feedback Loop","No":98,"Platform":"All","Severity":"Low","domain":"ux-guidelines","record_id":"ux-guidelines/98"},{"Category":"Accessibility","Description":"Parallax/Scroll-jacking causes nausea","Do":"Respect prefers-reduced-motion","Don't":"Force scroll effects","Issue":"Motion Sensitivity","No":99,"Platform":"All","Severity":"High","domain":"ux-guidelines","record_id":"ux-guidelines/99"},{"Category":"Components","Description":"Angular 17+ default; no NgModule needed","Do":"Standalone components for all new code","Don't":"NgModule-based components for new projects","Guideline":"Use standalone components","No":1,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/1","stack":"angular"},{"Category":"Components","Description":"Signals are Angular's reactive primitive for fine-grained reactivity","Do":"Signals for component state over class properties","Don't":"Mutable class properties without signals","Guideline":"Use signals for state","No":2,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/2","stack":"angular"},{"Category":"Components","Description":"Built-in control flow syntax replaces *ngIf/*ngFor directives","Do":"@if and @for in templates","Don't":"*ngIf and *ngFor structural directives","Guideline":"Use @if/@for/@switch control flow","No":3,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/3","stack":"angular"},{"Category":"Components","Description":"Signal-based inputs/outputs replace @Input()/@Output() decorators","Do":"input() and output() for component API","Don't":"@Input() and @Output() decorators","Guideline":"Use input() and output() signals","No":4,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/4","stack":"angular"},{"Category":"Components","Description":"ng-content for flexible component composition","Do":"ng-content with select for named slots","Don't":"Rigid templates that can't be customized","Guideline":"Use content projection","No":5,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/5","stack":"angular"},{"Category":"Components","Description":"Single responsibility; components should do one thing","Do":"Extract sub-components when template exceeds 50 lines","Don't":"Monolithic components handling multiple concerns","Guideline":"Keep components small","No":6,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/6","stack":"angular"},{"Category":"Components","Description":"Reduces re-renders by only checking on input changes or signal updates","Do":"OnPush for all components","Don't":"Default change detection strategy","Guideline":"Use OnPush change detection","No":7,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/7","stack":"angular"},{"Category":"Components","Description":"Use renderer or ElementRef sparingly; prefer template bindings","Do":"Template bindings and Angular directives","Don't":"Direct document.querySelector or innerHTML","Guideline":"Avoid direct DOM manipulation","No":8,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/8","stack":"angular"},{"Category":"Routing","Description":"Load route chunks on demand to reduce initial bundle","Do":"loadComponent() for all feature routes","Don't":"Eager-loaded routes in app config","Guideline":"Lazy load feature routes","No":9,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/9","stack":"angular"},{"Category":"Routing","Description":"Protect routes with canActivate/canMatch functional guards","Do":"Functional guards returning boolean or UrlTree","Don't":"Class-based guards with CanActivate interface","Guideline":"Use route guards with functional API","No":10,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/10","stack":"angular"},{"Category":"Routing","Description":"Pre-fetch data before route activation using resolve","Do":"ResolveFn for route data","Don't":"Fetching data in ngOnInit causing flash of empty state","Guideline":"Use route resolvers for data","No":11,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/11","stack":"angular"},{"Category":"Routing","Description":"Use inject(ActivatedRoute) with signals or toSignal","Do":"Typed route params via ActivatedRoute","Don't":"Untyped route.snapshot.params string access","Guideline":"Type route params with inject","No":12,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/12","stack":"angular"},{"Category":"Routing","Description":"Compose shared layouts using router-outlet nesting","Do":"Nested routes with shared layout components","Don't":"Duplicating layout code across routes","Guideline":"Use nested routes for layouts","No":13,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/13","stack":"angular"},{"Category":"Routing","Description":"Preload lazy modules in background after initial load","Do":"PreloadAllModules or custom strategy","Don't":"No preloading causing delayed navigation","Guideline":"Configure preloading strategies","No":14,"Severity":"Low","domain":"stack/angular","record_id":"stack/angular/14","stack":"angular"},{"Category":"State","Description":"Signals provide synchronous reactive state without RxJS overhead","Do":"signal() for component-local reactive state","Don't":"BehaviorSubject for simple local state","Guideline":"Use signals for local state","No":15,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/15","stack":"angular"},{"Category":"State","Description":"Lazily evaluated derived values that update when dependencies change","Do":"computed() for values derived from other signals","Don't":"Duplicated state or manual sync","Guideline":"Use computed() for derived state","No":16,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/16","stack":"angular"},{"Category":"State","Description":"Effects run side effects when signals change; avoid overuse","Do":"effect() for side effects like logging or localStorage sync","Don't":"effect() for deriving state (use computed instead)","Guideline":"Use effect() carefully","No":17,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/17","stack":"angular"},{"Category":"State","Description":"NgRx Signal Store is the modern lightweight state management for Angular","Do":"@ngrx/signals SignalStore for feature state","Don't":"Full NgRx reducer/action/effect boilerplate for simple state","Guideline":"Use NgRx Signal Store for complex state","No":18,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/18","stack":"angular"},{"Category":"State","Description":"Services with signals share state across components without a store","Do":"Injectable service with signals for cross-component state","Don't":"Prop drilling or @Input chains for shared state","Guideline":"Inject services for shared state","No":19,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/19","stack":"angular"},{"Category":"State","Description":"Use toSignal() to bridge RxJS into signal world at the boundary","Do":"toSignal() to convert observable to signal at component edge","Don't":"Subscribing in components and storing in signal manually","Guideline":"Avoid mixing RxJS and signals unnecessarily","No":20,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/20","stack":"angular"},{"Category":"Forms","Description":"FormGroup/FormControl with explicit generics for compile-time safety","Do":"FormBuilder with typed controls","Don't":"Untyped FormControl or any casts","Guideline":"Use typed reactive forms","No":21,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/21","stack":"angular"},{"Category":"Forms","Description":"Reactive forms scale better and are fully testable","Do":"ReactiveFormsModule for all non-trivial forms","Don't":"FormsModule with ngModel for complex forms","Guideline":"Use reactive forms over template-driven","No":22,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/22","stack":"angular"},{"Category":"Forms","Description":"Functional validators are composable and tree-shakeable","Do":"ValidatorFn functions for custom validation","Don't":"Class-based validators implementing Validator interface","Guideline":"Write custom validators as functions","No":23,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/23","stack":"angular"},{"Category":"Forms","Description":"Control when validation runs to avoid per-keystroke validation overhead","Do":"updateOn: 'blur' or 'submit' for expensive validators","Don't":"Default updateOn: 'change' for async validators","Guideline":"Use updateOn for performance","No":24,"Severity":"Low","domain":"stack/angular","record_id":"stack/angular/24","stack":"angular"},{"Category":"Forms","Description":"FormArray manages variable-length lists of controls","Do":"FormArray for add/remove field scenarios","Don't":"Manually tracking index-based controls","Guideline":"Use FormArray for dynamic fields","No":25,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/25","stack":"angular"},{"Category":"Forms","Description":"Use form control touched and dirty states to show errors at the right time","Do":"Show errors after field is touched","Don't":"Show all errors on page load","Guideline":"Display validation errors clearly","No":26,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/26","stack":"angular"},{"Category":"Performance","Description":"OnPush + signals eliminates most unnecessary change detection cycles","Do":"OnPush change detection everywhere","Don't":"Default strategy which checks entire tree on every event","Guideline":"Apply OnPush to all components","No":27,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/27","stack":"angular"},{"Category":"Performance","Description":"Stable identity for list items prevents full DOM re-creation on change","Do":"track item.id in @for","Don't":"track $index for dynamic data","Guideline":"Use trackBy in @for blocks","No":28,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/28","stack":"angular"},{"Category":"Performance","Description":"Defer blocks lazy-load components when they enter the viewport","Do":"@defer with on viewport for non-critical UI","Don't":"Eagerly loading all components at startup","Guideline":"Use @defer for below-the-fold content","No":29,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/29","stack":"angular"},{"Category":"Performance","Description":"Enforces image best practices: lazy loading LCP hints and proper sizing","Do":"NgOptimizedImage for all img tags","Don't":"Plain img tags for CMS or user content","Guideline":"Use NgOptimizedImage","No":30,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/30","stack":"angular"},{"Category":"Performance","Description":"Import only what you use from Angular packages","Do":"Import specific Angular modules needed","Don't":"Import BrowserAnimationsModule when not using animations","Guideline":"Tree-shake unused Angular features","No":31,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/31","stack":"angular"},{"Category":"Performance","Description":"Subscriptions leak and cause bugs; prefer async pipe or toSignal","Do":"toSignal() or async pipe instead of manual subscribe","Don't":"Manual subscribe without unsubscribe in ngOnDestroy","Guideline":"Avoid subscribe in components","No":32,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/32","stack":"angular"},{"Category":"Performance","Description":"Pre-render pages for faster LCP and better SEO","Do":"SSR or SSG for public-facing routes","Don't":"Pure CSR for SEO-critical pages","Guideline":"Use SSR with Angular Universal","No":33,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/33","stack":"angular"},{"Category":"Performance","Description":"Standalone components + provideRouter() eliminate dead NgModule code","Do":"provideRouter() and provideHttpClient() in app.config","Don't":"Root AppModule with all imports","Guideline":"Minimize bundle with standalone APIs","No":34,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/34","stack":"angular"},{"Category":"Testing","Description":"TestBed sets up Angular DI for realistic component testing","Do":"TestBed.configureTestingModule for component tests","Don't":"Instantiate components with new keyword","Guideline":"Use TestBed for component tests","No":35,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/35","stack":"angular"},{"Category":"Testing","Description":"Harnesses provide a stable testing API that survives template refactors","Do":"MatButtonHarness and custom HarnessLoader","Don't":"Direct native element queries that break on template changes","Guideline":"Use Angular CDK component harnesses","No":36,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/36","stack":"angular"},{"Category":"Testing","Description":"Spectator wraps TestBed with a cleaner API reducing test setup noise","Do":"Spectator for unit tests","Don't":"Raw TestBed for every test","Guideline":"Use Spectator for less boilerplate","No":37,"Severity":"Low","domain":"stack/angular","record_id":"stack/angular/37","stack":"angular"},{"Category":"Testing","Description":"Isolate unit tests by providing mock implementations of dependencies","Do":"SpyObj or jest.fn() mocks for services","Don't":"Real HTTP calls in unit tests","Guideline":"Mock services with jasmine.createSpyObj","No":38,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/38","stack":"angular"},{"Category":"Testing","Description":"Test full route navigation including guards and resolvers","Do":"RouterTestingHarness for route integration tests","Don't":"Mock all routing behavior in unit tests","Guideline":"Write integration tests for routes","No":39,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/39","stack":"angular"},{"Category":"Testing","Description":"Signals update synchronously; no async flush needed in most cases","Do":"Read signal value directly in test assertions","Don't":"TestBed.tick() or fakeAsync for signal reads","Guideline":"Test signal-based components","No":40,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/40","stack":"angular"},{"Category":"Styling","Description":"Default emulation scopes styles to component preventing global leaks","Do":"Emulated or None for intentional global styles","Don't":"ViewEncapsulation.None for component-specific styles","Guideline":"Use ViewEncapsulation.Emulated","No":41,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/41","stack":"angular"},{"Category":"Styling","Description":"Style the component's host element using :host pseudo-class","Do":":host for host element styles","Don't":"Adding wrapper div just for styling","Guideline":"Use :host selector","No":42,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/42","stack":"angular"},{"Category":"Styling","Description":"CSS variables work across component boundaries and enable dynamic theming","Do":"CSS custom properties for colors and spacing","Don't":"Hardcoded hex values in component styles","Guideline":"Use CSS custom properties for theming","No":43,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/43","stack":"angular"},{"Category":"Styling","Description":"Tailwind utilities work alongside Angular's ViewEncapsulation via global stylesheet","Do":"Add Tailwind in styles.css and use utility classes in templates","Don't":"Custom CSS for layout that Tailwind already handles","Guideline":"Integrate Tailwind with Angular","No":44,"Severity":"Low","domain":"stack/angular","record_id":"stack/angular/44","stack":"angular"},{"Category":"Styling","Description":"Material 3 uses design tokens for systematic theming","Do":"M3 token-based theming for Angular Material","Don't":"Overriding Angular Material CSS with deep selectors","Guideline":"Use Angular Material theming tokens","No":45,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/45","stack":"angular"},{"Category":"Architecture","Description":"Provide configuration via InjectionToken for testability and flexibility","Do":"InjectionToken for environment-specific values","Don't":"Importing environment.ts directly in services","Guideline":"Use injection tokens for config","No":46,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/46","stack":"angular"},{"Category":"Architecture","Description":"Intercept requests for auth headers error handling and logging","Do":"Functional interceptors with withInterceptors()","Don't":"Service-level header management in every request","Guideline":"Use HTTP interceptors","No":47,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/47","stack":"angular"},{"Category":"Architecture","Description":"Feature-based folder structure scales better than type-based","Do":"Feature folders with collocated component service and routes","Don't":"Flat folders: all-components/ all-services/","Guideline":"Organize by feature not type","No":48,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/48","stack":"angular"},{"Category":"Architecture","Description":"Separate environment values for dev staging and prod via Angular build configs","Do":"angular.json fileReplacements for env configs","Don't":"Hardcoded API URLs or feature flags in source","Guideline":"Use environment configurations","No":49,"Severity":"High","domain":"stack/angular","record_id":"stack/angular/49","stack":"angular"},{"Category":"Architecture","Description":"inject() function is composable and works in more contexts than constructor injection","Do":"inject() for dependency injection","Don't":"Constructor parameters for new code","Guideline":"Prefer inject() over constructor DI","No":50,"Severity":"Medium","domain":"stack/angular","record_id":"stack/angular/50","stack":"angular"},{"Category":"Architecture","Description":"Astro's partial hydration only loads JS for interactive components","Do":"Interactive components with client directives","Don't":"Hydrate entire page like traditional SPA","Guideline":"Use Islands Architecture","No":1,"Severity":"High","domain":"stack/astro","record_id":"stack/astro/1","stack":"astro"},{"Category":"Architecture","Description":"Astro ships zero JS by default - add only when needed","Do":"Static components without client directive","Don't":"Add client:load to everything","Guideline":"Default to zero JS","No":2,"Severity":"High","domain":"stack/astro","record_id":"stack/astro/2","stack":"astro"},{"Category":"Architecture","Description":"Different directives for different hydration timing","Do":"client:visible for below-fold client:idle for non-critical","Don't":"client:load for everything","Guideline":"Choose right client directive","No":3,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/3","stack":"astro"},{"Category":"Architecture","Description":"Type-safe content management for blogs docs","Do":"Content collections for structured content","Don't":"Loose markdown files without schema","Guideline":"Use content collections","No":4,"Severity":"High","domain":"stack/astro","record_id":"stack/astro/4","stack":"astro"},{"Category":"Architecture","Description":"Zod schemas for content validation","Do":"Schema with required fields and types","Don't":"No schema validation","Guideline":"Define collection schemas","No":5,"Severity":"High","domain":"stack/astro","record_id":"stack/astro/5","stack":"astro"},{"Category":"Routing","Description":"Create routes by adding .astro files in pages/","Do":"pages/ directory for routes","Don't":"Manual route configuration","Guideline":"Use file-based routing","No":6,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/6","stack":"astro"},{"Category":"Routing","Description":"Use [param] for dynamic routes","Do":"Bracket notation for params","Don't":"Query strings for dynamic content","Guideline":"Dynamic routes with brackets","No":7,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/7","stack":"astro"},{"Category":"Routing","Description":"Generate static pages at build time","Do":"getStaticPaths for known dynamic routes","Don't":"Fetch at runtime for static content","Guideline":"Use getStaticPaths for SSG","No":8,"Severity":"High","domain":"stack/astro","record_id":"stack/astro/8","stack":"astro"},{"Category":"Routing","Description":"Server-side rendering for dynamic content","Do":"output: 'server' or 'hybrid' for dynamic","Don't":"SSR for purely static sites","Guideline":"Enable SSR when needed","No":9,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/9","stack":"astro"},{"Category":"Components","Description":"Use .astro components for static content","Do":"Astro components for layout structure","Don't":"React/Vue for static markup","Guideline":"Keep .astro for static","No":10,"Severity":"High","domain":"stack/astro","record_id":"stack/astro/10","stack":"astro"},{"Category":"Components","Description":"React Vue Svelte for complex interactivity","Do":"Framework component with client directive","Don't":"Astro component with inline scripts","Guideline":"Use framework components for interactivity","No":11,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/11","stack":"astro"},{"Category":"Components","Description":"Astro components receive props in frontmatter","Do":"Astro.props for component data","Don't":"Global state for simple data","Guideline":"Pass data via props","No":12,"Severity":"Low","domain":"stack/astro","record_id":"stack/astro/12","stack":"astro"},{"Category":"Components","Description":"Named and default slots for flexible layouts","Do":"<slot /> for child content","Don't":"Props for HTML content","Guideline":"Use slots for composition","No":13,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/13","stack":"astro"},{"Category":"Components","Description":"Scoped styles in component file","Do":"<style> in same .astro file","Don't":"Separate CSS files for component styles","Guideline":"Colocate component styles","No":14,"Severity":"Low","domain":"stack/astro","record_id":"stack/astro/14","stack":"astro"},{"Category":"Styling","Description":"Astro scopes styles to component automatically","Do":"<style> for component-specific styles","Don't":"Global styles for everything","Guideline":"Use scoped styles by default","No":15,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/15","stack":"astro"},{"Category":"Styling","Description":"Global styles only when truly needed","Do":"is:global for base styles or overrides","Don't":"is:global for component styles","Guideline":"Use is:global sparingly","No":16,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/16","stack":"astro"},{"Category":"Styling","Description":"Use @astrojs/tailwind integration","Do":"Official Tailwind integration","Don't":"Manual Tailwind setup","Guideline":"Integrate Tailwind properly","No":17,"Severity":"Low","domain":"stack/astro","record_id":"stack/astro/17","stack":"astro"},{"Category":"Styling","Description":"Define tokens in :root","Do":"CSS custom properties for themes","Don't":"Hardcoded colors everywhere","Guideline":"Use CSS variables for theming","No":18,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/18","stack":"astro"},{"Category":"Data","Description":"Data fetching in component frontmatter","Do":"Top-level await in frontmatter","Don't":"useEffect for initial data","Guideline":"Fetch in frontmatter","No":19,"Severity":"High","domain":"stack/astro","record_id":"stack/astro/19","stack":"astro"},{"Category":"Data","Description":"Import multiple local files","Do":"Astro.glob for markdown/data files","Don't":"Manual imports for each file","Guideline":"Use Astro.glob for local files","No":20,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/20","stack":"astro"},{"Category":"Data","Description":"Type-safe collections for structured content","Do":"getCollection() for blog/docs","Don't":"Astro.glob for structured content","Guideline":"Prefer content collections over glob","No":21,"Severity":"High","domain":"stack/astro","record_id":"stack/astro/21","stack":"astro"},{"Category":"Data","Description":"Import.meta.env for env vars","Do":"PUBLIC_ prefix for client vars","Don't":"Expose secrets to client","Guideline":"Use environment variables correctly","No":22,"Severity":"High","domain":"stack/astro","record_id":"stack/astro/22","stack":"astro"},{"Category":"Performance","Description":"Use link preload for important resources","Do":"Preload fonts above-fold images","Don't":"No preload hints","Guideline":"Preload critical assets","No":23,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/23","stack":"astro"},{"Category":"Performance","Description":"Built-in image optimization","Do":"<Image /> component for optimization","Don't":"<img> for local images","Guideline":"Optimize images with astro:assets","No":24,"Severity":"High","domain":"stack/astro","record_id":"stack/astro/24","stack":"astro"},{"Category":"Performance","Description":"Multiple formats and sizes","Do":"<Picture /> for art direction","Don't":"Single image size for all screens","Guideline":"Use picture for responsive images","No":25,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/25","stack":"astro"},{"Category":"Performance","Description":"Defer loading non-critical content","Do":"loading=lazy for images client:visible for components","Don't":"Load everything immediately","Guideline":"Lazy load below-fold content","No":26,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/26","stack":"astro"},{"Category":"Performance","Description":"Each directive adds JS bundle","Do":"Audit client: usage regularly","Don't":"Sprinkle client:load everywhere","Guideline":"Minimize client directives","No":27,"Severity":"High","domain":"stack/astro","record_id":"stack/astro/27","stack":"astro"},{"Category":"ViewTransitions","Description":"Smooth page transitions","Do":"<ViewTransitions /> in head","Don't":"Full page reloads","Guideline":"Enable View Transitions","No":28,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/28","stack":"astro"},{"Category":"ViewTransitions","Description":"Named elements for morphing","Do":"transition:name for persistent elements","Don't":"Unnamed transitions","Guideline":"Use transition:name","No":29,"Severity":"Low","domain":"stack/astro","record_id":"stack/astro/29","stack":"astro"},{"Category":"ViewTransitions","Description":"Keep state across navigations","Do":"transition:persist for media players","Don't":"Re-initialize on every navigation","Guideline":"Handle transition:persist","No":30,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/30","stack":"astro"},{"Category":"ViewTransitions","Description":"Graceful degradation","Do":"Content works without JS","Don't":"Require JS for basic navigation","Guideline":"Add fallback for no-JS","No":31,"Severity":"High","domain":"stack/astro","record_id":"stack/astro/31","stack":"astro"},{"Category":"SEO","Description":"Head management for meta tags","Do":"Astro SEO integration or manual head","Don't":"No meta tags","Guideline":"Use built-in SEO component","No":32,"Severity":"High","domain":"stack/astro","record_id":"stack/astro/32","stack":"astro"},{"Category":"SEO","Description":"Automatic sitemap generation","Do":"@astrojs/sitemap integration","Don't":"Manual sitemap maintenance","Guideline":"Generate sitemap","No":33,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/33","stack":"astro"},{"Category":"SEO","Description":"RSS for blogs and content sites","Do":"@astrojs/rss for feed generation","Don't":"No RSS feed","Guideline":"Add RSS feed for content","No":34,"Severity":"Low","domain":"stack/astro","record_id":"stack/astro/34","stack":"astro"},{"Category":"SEO","Description":"Prevent duplicate content issues","Do":"Astro.url for canonical generation","Don't":"No canonical tags","Guideline":"Use canonical URLs","No":35,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/35","stack":"astro"},{"Category":"Integrations","Description":"Astro's integration system","Do":"npx astro add for integrations","Don't":"Manual configuration","Guideline":"Use official integrations","No":36,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/36","stack":"astro"},{"Category":"Integrations","Description":"Centralized configuration","Do":"integrations array in config","Don't":"Scattered configuration","Guideline":"Configure integrations in astro.config","No":37,"Severity":"Low","domain":"stack/astro","record_id":"stack/astro/37","stack":"astro"},{"Category":"Integrations","Description":"Platform-specific adapters","Do":"Correct adapter for host","Don't":"Wrong or no adapter","Guideline":"Use adapter for deployment","No":38,"Severity":"High","domain":"stack/astro","record_id":"stack/astro/38","stack":"astro"},{"Category":"TypeScript","Description":"Type safety for Astro projects","Do":"tsconfig.json with astro types","Don't":"No TypeScript","Guideline":"Enable TypeScript","No":39,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/39","stack":"astro"},{"Category":"TypeScript","Description":"Define prop interfaces","Do":"Props interface in frontmatter","Don't":"Untyped props","Guideline":"Type component props","No":40,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/40","stack":"astro"},{"Category":"TypeScript","Description":"Catch errors early","Do":"strict: true in tsconfig","Don't":"Loose TypeScript config","Guideline":"Use strict mode","No":41,"Severity":"Low","domain":"stack/astro","record_id":"stack/astro/41","stack":"astro"},{"Category":"Markdown","Description":"Components in markdown content","Do":"@astrojs/mdx for interactive docs","Don't":"Plain markdown with workarounds","Guideline":"Use MDX for components","No":42,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/42","stack":"astro"},{"Category":"Markdown","Description":"Extend markdown capabilities","Do":"remarkPlugins rehypePlugins in config","Don't":"Manual HTML for features","Guideline":"Configure markdown plugins","No":43,"Severity":"Low","domain":"stack/astro","record_id":"stack/astro/43","stack":"astro"},{"Category":"Markdown","Description":"Structured post metadata","Do":"Frontmatter with typed schema","Don't":"Inline metadata","Guideline":"Use frontmatter for metadata","No":44,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/44","stack":"astro"},{"Category":"API","Description":"Server endpoints in pages/api","Do":"pages/api/[endpoint].ts for APIs","Don't":"External API for simple endpoints","Guideline":"Use API routes for endpoints","No":45,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/45","stack":"astro"},{"Category":"API","Description":"Use Response object","Do":"new Response() with headers","Don't":"Plain objects","Guideline":"Return proper responses","No":46,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/46","stack":"astro"},{"Category":"API","Description":"Export named method handlers","Do":"export GET POST handlers","Don't":"Single default export","Guideline":"Handle methods correctly","No":47,"Severity":"Low","domain":"stack/astro","record_id":"stack/astro/47","stack":"astro"},{"Category":"Security","Description":"Prevent XSS in dynamic content","Do":"set:html only for trusted content","Don't":"set:html with user input","Guideline":"Sanitize user content","No":48,"Severity":"High","domain":"stack/astro","record_id":"stack/astro/48","stack":"astro"},{"Category":"Security","Description":"Secure connections","Do":"HTTPS for all production sites","Don't":"HTTP in production","Guideline":"Use HTTPS in production","No":49,"Severity":"High","domain":"stack/astro","record_id":"stack/astro/49","stack":"astro"},{"Category":"Security","Description":"Check and sanitize all input","Do":"Zod validation for API routes","Don't":"Trust all input","Guideline":"Validate API input","No":50,"Severity":"High","domain":"stack/astro","record_id":"stack/astro/50","stack":"astro"},{"Category":"Build","Description":"Mix static and dynamic pages","Do":"output: 'hybrid' for flexibility","Don't":"All SSR or all static","Guideline":"Use hybrid rendering","No":51,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/51","stack":"astro"},{"Category":"Build","Description":"Monitor JS bundle impact","Do":"Build output shows bundle sizes","Don't":"Ignore bundle growth","Guideline":"Analyze bundle size","No":52,"Severity":"Medium","domain":"stack/astro","record_id":"stack/astro/52","stack":"astro"},{"Category":"Build","Description":"Preload linked pages","Do":"prefetch integration","Don't":"No prefetch for navigation","Guideline":"Use prefetch","No":53,"Severity":"Low","domain":"stack/astro","record_id":"stack/astro/53","stack":"astro"},{"Category":"XAML","Description":"Avalonia has its own XAML namespace not WPF","Do":"xmlns= for Avalonia-specific namespace","Don't":"WPF xmlns or UWP xmlns","Guideline":"Use Avalonia XAML namespace","No":1,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/1","stack":"avalonia"},{"Category":"XAML","Description":"Enable compile-time binding validation","Do":"x:DataType on root or DataTemplate for compiled bindings","Don't":"Reflection-based bindings in production","Guideline":"Use compiled bindings with x:DataType","No":2,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/2","stack":"avalonia"},{"Category":"XAML","Description":"AvaloniaUseCompiledBindingsByDefault in csproj makes every binding require x:DataType and is required for trim-safe Native AOT","Do":"AvaloniaUseCompiledBindingsByDefault MSBuild property in csproj","Don't":"Relying on runtime binding resolution","Guideline":"Enable compiled bindings globally","No":3,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/3","stack":"avalonia"},{"Category":"XAML","Description":"Compiled bindings cannot resolve {Binding ElementName=...} - use the #name shorthand which relies on NameScope lookup","Do":"#name shorthand referencing x:Name controls in the same NameScope","Don't":"ElementName binding inside a compiled-binding scope","Guideline":"Use #name shorthand for element-to-element bindings","No":4,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/4","stack":"avalonia"},{"Category":"Styling","Description":"Avalonia uses selectors not implicit styles","Do":"Selectors targeting control types classes and pseudoclasses","Don't":"WPF-style implicit Style with TargetType","Guideline":"Use CSS-like selectors","No":5,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/5","stack":"avalonia"},{"Category":"Styling","Description":"Target control states with colon syntax","Do":":pointerover :pressed :focus for interactive states","Don't":"VisualStateManager or Triggers","Guideline":"Use pseudoclass selectors for states","No":6,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/6","stack":"avalonia"},{"Category":"Styling","Description":"Child and descendant combinators for scoped styles","Do":"> for direct child and space for descendant","Don't":"Flat selectors that match too broadly","Guideline":"Use nesting selectors","No":7,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/7","stack":"avalonia"},{"Category":"Styling","Description":"Split styles into separate AXAML files","Do":"StyleInclude to import themed resource files","Don't":"All styles in a single monolithic App.axaml","Guideline":"Use StyleInclude for modularity","No":8,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/8","stack":"avalonia"},{"Category":"Styling","Description":"Built-in Avalonia themes","Do":"FluentTheme or SimpleTheme as base","Don't":"Custom theme from scratch","Guideline":"Use Fluent or Simple theme","No":9,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/9","stack":"avalonia"},{"Category":"Styling","Description":"Switch between light and dark","Do":"RequestedThemeVariant for theme switching","Don't":"Hardcoded colors ignoring theme variants","Guideline":"Use theme variants for dark mode","No":10,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/10","stack":"avalonia"},{"Category":"Controls","Description":"DataGrid is a separate Avalonia.Controls.DataGrid NuGet package and requires its theme StyleInclude in App.axaml","Do":"DataGrid after adding package and StyleInclude for the matching theme","Don't":"Custom Grid layouts for tabular data or DataGrid without the theme StyleInclude","Guideline":"Use DataGrid for tabular data","No":11,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/11","stack":"avalonia"},{"Category":"Controls","Description":"Avalonia uses TreeDataTemplate for hierarchical data - HierarchicalDataTemplate is WPF only","Do":"TreeDataTemplate inside TreeView.ItemTemplate with ItemsSource pointing at child collection","Don't":"HierarchicalDataTemplate copied from WPF or nested ItemsControls","Guideline":"Use TreeView with TreeDataTemplate","No":12,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/12","stack":"avalonia"},{"Category":"Controls","Description":"Native menu bar on macOS and desktop","Do":"NativeMenu for cross-platform menu bar","Don't":"Custom menu implementation per platform","Guideline":"Use NativeMenu for platform menus","No":13,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/13","stack":"avalonia"},{"Category":"Data Binding","Description":"Standard .NET property notification","Do":"INotifyPropertyChanged or CommunityToolkit.Mvvm","Don't":"Properties without change notification","Guideline":"Implement INotifyPropertyChanged","No":14,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/14","stack":"avalonia"},{"Category":"Data Binding","Description":"UI updates on collection changes","Do":"ObservableCollection<T> for bound collections","Don't":"List<T> for ItemsSources","Guideline":"Use ObservableCollection for lists","No":15,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/15","stack":"avalonia"},{"Category":"Data Binding","Description":"Element-to-element binding with # syntax","Do":"#ElementName.Property for cross-element binding","Don't":"Code-behind for element references","Guideline":"Use binding to named controls","No":16,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/16","stack":"avalonia"},{"Category":"Data Binding","Description":"Transform data for display","Do":"FuncValueConverter for simple inline conversions","Don't":"Complex IValueConverter classes for trivial transforms","Guideline":"Use converters or FuncValueConverter","No":17,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/17","stack":"avalonia"},{"Category":"Cross-Platform","Description":"Isolate platform code behind abstractions","Do":"Interface + platform implementation pattern","Don't":"#if directives scattered through ViewModels","Guideline":"Use platform-specific code carefully","No":18,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/18","stack":"avalonia"},{"Category":"Cross-Platform","Description":"Rendering and behavior varies across platforms","Do":"CI testing on Windows macOS and Linux","Don't":"Testing only on development platform","Guideline":"Test on all target platforms","No":19,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/19","stack":"avalonia"},{"Category":"Cross-Platform","Description":"Path separators differ across OS","Do":"Path.Combine and Environment.SpecialFolder","Don't":"Hardcoded backslashes or forward slashes","Guideline":"Handle platform file paths","No":20,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/20","stack":"avalonia"},{"Category":"Cross-Platform","Description":"Platform-agnostic resource loading","Do":"avares:// URI scheme for embedded resources","Don't":"File system paths for assets","Guideline":"Use Avalonia asset system","No":21,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/21","stack":"avalonia"},{"Category":"Performance","Description":"Only render visible items","Do":"ListBox and ItemsRepeater with virtualization","Don't":"Non-virtualizing ItemsControl for large lists","Guideline":"Use virtualization for large lists","No":22,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/22","stack":"avalonia"},{"Category":"Performance","Description":"Each binding has overhead","Do":"Bind only properties that change","Don't":"Binding static labels and headers","Guideline":"Avoid unnecessary bindings","No":23,"Severity":"Low","domain":"stack/avalonia","record_id":"stack/avalonia/23","stack":"avalonia"},{"Category":"Performance","Description":"RenderOptions.BitmapInterpolationMode controls image scaling quality vs cost; default may look aliased on upscaled or downscaled bitmaps","Do":"RenderOptions.SetBitmapInterpolationMode tuned to the use case","Don't":"Default interpolation on scaled images that look blurry or aliased","Guideline":"Set bitmap interpolation mode on scaled images","No":24,"Severity":"Low","domain":"stack/avalonia","record_id":"stack/avalonia/24","stack":"avalonia"},{"Category":"Performance","Description":"Built-in diagnostic tools","Do":"DevTools for visual tree and binding inspection","Don't":"Console.WriteLine debugging","Guideline":"Profile with Avalonia DevTools","No":25,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/25","stack":"avalonia"},{"Category":"Architecture","Description":"Proven MVVM frameworks for Avalonia","Do":"ReactiveUI or CommunityToolkit.Mvvm for ViewModels","Don't":"Code-behind for all logic","Guideline":"Use MVVM with ReactiveUI or CommunityToolkit","No":26,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/26","stack":"avalonia"},{"Category":"Architecture","Description":"Convention-based View-ViewModel resolution","Do":"ViewLocator for automatic view resolution","Don't":"Manual view instantiation and DataContext wiring","Guideline":"Use ViewLocator pattern","No":27,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/27","stack":"avalonia"},{"Category":"Architecture","Description":"Register services in a Microsoft.Extensions.DependencyInjection container during startup before any view is constructed - resolve ViewModels through the provider not via a static ServiceLocator","Do":"Build the ServiceProvider in BuildAvaloniaApp or OnFrameworkInitializationCompleted then resolve ViewModels from it","Don't":"Static ServiceLocator or new-ing ViewModels inline in code-behind","Guideline":"Use dependency injection","No":28,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/28","stack":"avalonia"},{"Category":"Architecture","Description":"Keep UI and logic in separate projects","Do":"ViewModels in a separate class library","Don't":"ViewModels in the same project referencing Avalonia types","Guideline":"Separate Views from ViewModels","No":29,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/29","stack":"avalonia"},{"Category":"Accessibility","Description":"Enable screen reader support","Do":"AutomationProperties.Name on interactive controls","Don't":"Controls without accessible names","Guideline":"Set AutomationProperties","No":30,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/30","stack":"avalonia"},{"Category":"Accessibility","Description":"Full keyboard operability","Do":"TabIndex and KeyboardNavigation properties","Don't":"Mouse-only interactions","Guideline":"Support keyboard navigation","No":31,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/31","stack":"avalonia"},{"Category":"Accessibility","Description":"Controls convey meaning to assistive tech","Do":"Button for actions ListBox for selection","Don't":"TextBlock with PointerPressed as fake button","Guideline":"Use semantic control types","No":32,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/32","stack":"avalonia"},{"Category":"Testing","Description":"Run UI tests without display server","Do":"Avalonia.Headless for CI-compatible UI testing","Don't":"Skipping UI tests in CI","Guideline":"Use Avalonia.Headless for UI tests","No":33,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/33","stack":"avalonia"},{"Category":"Testing","Description":"Test business logic independently","Do":"xUnit or NUnit on ViewModel methods","Don't":"Testing through UI only","Guideline":"Unit test ViewModels","No":34,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/34","stack":"avalonia"},{"Category":"Testing","Description":"Value converters contain testable logic","Do":"Unit tests on Convert and ConvertBack","Don't":"Assuming converters work without tests","Guideline":"Test converters independently","No":35,"Severity":"Low","domain":"stack/avalonia","record_id":"stack/avalonia/35","stack":"avalonia"},{"Category":"Navigation","Description":"IScreen and RoutingState for page navigation","Do":"ReactiveUI RoutingState with IScreen on main ViewModel","Don't":"Manual content swapping in code-behind","Guideline":"Use ReactiveUI routing for navigation","No":36,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/36","stack":"avalonia"},{"Category":"Navigation","Description":"Pages and screens should be UserControls hosted in a ContentControl","Do":"UserControl for each view with RoutedViewHost or ContentControl","Don't":"Window per page or nested Windows","Guideline":"Use UserControl for views","No":37,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/37","stack":"avalonia"},{"Category":"Navigation","Description":"Built-in transitions for smooth navigation","Do":"CrossFade PageSlide or CompositePageTransition declared as a property element","Don't":"Abrupt content swaps with no visual continuity","Guideline":"Use page transitions for view switching","No":38,"Severity":"Low","domain":"stack/avalonia","record_id":"stack/avalonia/38","stack":"avalonia"},{"Category":"Navigation","Description":"Maintain navigation history for complex apps","Do":"Router.NavigateBack or custom back stack","Don't":"No way to return to previous views","Guideline":"Support back navigation","No":39,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/39","stack":"avalonia"},{"Category":"Controls","Description":"Built-in autocomplete and suggestion control","Do":"AutoCompleteBox with FilterMode and ItemsSource","Don't":"TextBox with manual Popup and ListBox for suggestions","Guideline":"Use AutoCompleteBox for search","No":40,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/40","stack":"avalonia"},{"Category":"Controls","Description":"Standard tabbed navigation and content switching","Do":"TabControl with TabItem for tabbed layouts","Don't":"Manual toggle buttons swapping content","Guideline":"Use TabControl for tabbed interfaces","No":41,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/41","stack":"avalonia"},{"Category":"Controls","Description":"Collapsible pane layout for navigation or panels","Do":"SplitView with Pane and Content areas","Don't":"Manual Grid with column toggling for sidebar","Guideline":"Use SplitView for master-detail","No":42,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/42","stack":"avalonia"},{"Category":"Controls","Description":"Attach popup menus and actions to controls","Do":"Flyout and MenuFlyout on Button or other controls","Don't":"Custom Popup positioning and management","Guideline":"Use Flyout for contextual actions","No":43,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/43","stack":"avalonia"},{"Category":"Lifecycle","Description":"Configure platform features and services at startup","Do":"AppBuilder with UsePlatformDetect and fluent API","Don't":"Manual platform initialization","Guideline":"Use AppBuilder for app configuration","No":44,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/44","stack":"avalonia"},{"Category":"Lifecycle","Description":"Override OnFrameworkInitializationCompleted on App and check ApplicationLifetime - on desktop cast to IClassicDesktopStyleApplicationLifetime to set MainWindow and ShutdownMode; never create windows in the App constructor before the framework is ready","Do":"Override OnFrameworkInitializationCompleted and pattern-match on IClassicDesktopStyleApplicationLifetime for desktop-only setup","Don't":"Creating windows in the App constructor or assuming the same lifetime type on every platform","Guideline":"Initialize MainWindow in OnFrameworkInitializationCompleted","No":45,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/45","stack":"avalonia"},{"Category":"Animation","Description":"Avalonia supports declarative animations in XAML and code","Do":"Animation with KeyFrame and Setter for property animations","Don't":"Manual timer-based property updates","Guideline":"Use CSS-like keyframe animations","No":46,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/46","stack":"avalonia"},{"Category":"Animation","Description":"Automatic animation when property values change","Do":"Transitions collection on controls for smooth changes","Don't":"Instant property changes with no visual feedback","Guideline":"Use Transitions for implicit animations","No":47,"Severity":"Low","domain":"stack/avalonia","record_id":"stack/avalonia/47","stack":"avalonia"},{"Category":"Performance","Description":"Avalonia 11+ supports Native AOT for self-contained desktop deployments; XAML reflection paths must use compiled bindings or be preserved via TrimmerRoots so trimming does not strip them","Do":"x:CompileBindings=True on every view plus TrimmerRoots.xml for runtime-resolved types","Don't":"PublishAot with reflection-based {Binding} markup or trimming without checking warnings","Guideline":"Use compiled bindings and TrimmerRoots.xml for PublishAot","No":48,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/48","stack":"avalonia"},{"Category":"Threading","Description":"Avalonia controls and bound properties are not thread-safe and touching them off the UI thread throws InvalidOperationException","Do":"Dispatcher.UIThread.Post or InvokeAsync to bounce work back to the UI thread","Don't":"Direct property writes from Task.Run or background threads","Guideline":"Marshal cross-thread work to the UI thread","No":49,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/49","stack":"avalonia"},{"Category":"Commands","Description":"Async-aware commands disable themselves while running and surface CancellationToken so users cannot double-invoke a long operation","Do":"[RelayCommand] async Task method or ReactiveCommand.CreateFromTask","Don't":"async void event handlers or fire-and-forget Task.Run from a click handler","Guideline":"Use AsyncRelayCommand or ReactiveCommand for async work","No":50,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/50","stack":"avalonia"},{"Category":"Styling","Description":"ResourceDictionary.ThemeDictionaries entries must be looked up via DynamicResource - StaticResource resolves once at load and won't update when the active theme variant changes","Do":"DynamicResource for brushes and colors that follow the active theme variant","Don't":"Hardcoded hex colors or StaticResource for values that should follow theme","Guideline":"Use DynamicResource for theme-aware brushes","No":51,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/51","stack":"avalonia"},{"Category":"Input","Description":"Built-in HotKey on ICommandSource and Window.KeyBindings handle modifier keys focus scoping and cross-platform Ctrl/Cmd mapping","Do":"HotKey on a command-bound control or KeyBinding on the Window","Don't":"Manual KeyDown handlers checking Key and KeyModifiers","Guideline":"Use HotKey or KeyBinding for keyboard shortcuts","No":52,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/52","stack":"avalonia"},{"Category":"Windowing","Description":"Set ExtendClientAreaToDecorationsHint to extend content into the title bar area and tag a region with WindowDecorationProperties.ElementRole=TitleBar to keep native drag and maximize behavior","Do":"ExtendClientAreaToDecorationsHint plus a region tagged ElementRole=TitleBar","Don't":"SystemDecorations=None with hand-rolled PointerPressed dragging in code-behind","Guideline":"Customize window chrome with ExtendClientAreaToDecorationsHint","No":53,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/53","stack":"avalonia"},{"Category":"Storage","Description":"The legacy OpenFileDialog/SaveFileDialog APIs are obsolete in Avalonia 11 - use TopLevel.GetTopLevel(this).StorageProvider with OpenFilePickerAsync/SaveFilePickerAsync/OpenFolderPickerAsync which returns IStorageFile/IStorageFolder and works on desktop mobile and browser","Do":"TopLevel.StorageProvider with OpenFilePickerAsync and FilePickerOpenOptions","Don't":"OpenFileDialog or SaveFileDialog from older Avalonia samples or copied from WPF","Guideline":"Use TopLevel.StorageProvider for file pickers","No":54,"Severity":"High","domain":"stack/avalonia","record_id":"stack/avalonia/54","stack":"avalonia"},{"Category":"Windowing","Description":"TrayIcon shows a native system tray/notification-area icon with a NativeMenu - declare it via the Application.TrayIcon.Icons attached property in App.axaml; works on Windows macOS and most Linux desktops","Do":"TrayIcon with NativeMenu inside TrayIcon.Icons on the Application","Don't":"Custom borderless window pretending to be a tray icon or per-platform native interop","Guideline":"Use TrayIcon for system tray icon","No":55,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/55","stack":"avalonia"},{"Category":"Cross-Platform","Description":"OnPlatform and OnFormFactor markup extensions resolve to a different value per OS or form factor at XAML load time and replace if-statements in code-behind for tweaks like fonts spacing or icon sizes","Do":"OnPlatform with Default Windows macOS Linux entries directly in the property setter","Don't":"RuntimeInformation.IsOSPlatform branches in code-behind to set XAML properties","Guideline":"Use OnPlatform and OnFormFactor markup for per-OS values","No":56,"Severity":"Medium","domain":"stack/avalonia","record_id":"stack/avalonia/56","stack":"avalonia"},{"Category":"Widgets","Description":"Immutable widgets are simpler","Do":"StatelessWidget for static UI","Don't":"StatefulWidget for everything","Guideline":"Use StatelessWidget when possible","No":1,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/1","stack":"flutter"},{"Category":"Widgets","Description":"Single responsibility principle","Do":"Extract widgets into smaller pieces","Don't":"Large build methods","Guideline":"Keep widgets small","No":2,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/2","stack":"flutter"},{"Category":"Widgets","Description":"Compile-time constants for performance","Do":"const MyWidget() when possible","Don't":"Non-const for static widgets","Guideline":"Use const constructors","No":3,"Severity":"High","domain":"stack/flutter","record_id":"stack/flutter/3","stack":"flutter"},{"Category":"Widgets","Description":"Combine widgets using children","Do":"Compose widgets","Don't":"Extend widget classes","Guideline":"Prefer composition over inheritance","No":4,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/4","stack":"flutter"},{"Category":"State","Description":"Minimal state in StatefulWidget","Do":"setState for UI state changes","Don't":"setState for business logic","Guideline":"Use setState correctly","No":5,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/5","stack":"flutter"},{"Category":"State","Description":"Never call setState during build","Do":"setState in callbacks only","Don't":"setState in build method","Guideline":"Avoid setState in build","No":6,"Severity":"High","domain":"stack/flutter","record_id":"stack/flutter/6","stack":"flutter"},{"Category":"State","Description":"Provider Riverpod BLoC","Do":"State management for shared state","Don't":"setState for global state","Guideline":"Use state management for complex apps","No":7,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/7","stack":"flutter"},{"Category":"State","Description":"Recommended state solutions","Do":"Riverpod for new projects","Don't":"InheritedWidget manually","Guideline":"Prefer Riverpod or Provider","No":8,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/8","stack":"flutter"},{"Category":"State","Description":"Clean up controllers and subscriptions","Do":"dispose() for cleanup","Don't":"Memory leaks from subscriptions","Guideline":"Dispose resources","No":9,"Severity":"High","domain":"stack/flutter","record_id":"stack/flutter/9","stack":"flutter"},{"Category":"Layout","Description":"Basic layout widgets","Do":"Column Row for linear layouts","Don't":"Stack for simple layouts","Guideline":"Use Column and Row","No":10,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/10","stack":"flutter"},{"Category":"Layout","Description":"Control flex behavior","Do":"Expanded to fill space","Don't":"Fixed sizes in flex containers","Guideline":"Use Expanded and Flexible","No":11,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/11","stack":"flutter"},{"Category":"Layout","Description":"Consistent spacing","Do":"SizedBox for gaps","Don't":"Container for spacing only","Guideline":"Use SizedBox for spacing","No":12,"Severity":"Low","domain":"stack/flutter","record_id":"stack/flutter/12","stack":"flutter"},{"Category":"Layout","Description":"Respond to constraints","Do":"LayoutBuilder for adaptive layouts","Don't":"Fixed sizes for responsive","Guideline":"Use LayoutBuilder for responsive","No":13,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/13","stack":"flutter"},{"Category":"Layout","Description":"Keep widget tree shallow","Do":"Extract deeply nested widgets","Don't":"10+ levels of nesting","Guideline":"Avoid deep nesting","No":14,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/14","stack":"flutter"},{"Category":"Lists","Description":"Lazy list building","Do":"ListView.builder for long lists","Don't":"ListView with children for large lists","Guideline":"Use ListView.builder","No":15,"Severity":"High","domain":"stack/flutter","record_id":"stack/flutter/15","stack":"flutter"},{"Category":"Lists","Description":"Skip measurement","Do":"itemExtent for fixed height items","Don't":"No itemExtent for uniform lists","Guideline":"Provide itemExtent when known","No":16,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/16","stack":"flutter"},{"Category":"Lists","Description":"Preserve widget state","Do":"Key for stateful list items","Don't":"No key for dynamic lists","Guideline":"Use keys for stateful items","No":17,"Severity":"High","domain":"stack/flutter","record_id":"stack/flutter/17","stack":"flutter"},{"Category":"Lists","Description":"Custom scroll effects","Do":"CustomScrollView with Slivers","Don't":"Nested ListViews","Guideline":"Use SliverList for custom scroll","No":18,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/18","stack":"flutter"},{"Category":"Navigation","Description":"Declarative routing","Do":"go_router for navigation","Don't":"Navigator.push for complex apps","Guideline":"Use Navigator 2.0 or GoRouter","No":19,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/19","stack":"flutter"},{"Category":"Navigation","Description":"Organized navigation","Do":"Named routes for clarity","Don't":"Anonymous routes","Guideline":"Use named routes","No":20,"Severity":"Low","domain":"stack/flutter","record_id":"stack/flutter/20","stack":"flutter"},{"Category":"Navigation","Description":"Android back behavior and predictive back (Android 14+)","Do":"Use PopScope widget (WillPopScope is deprecated)","Don't":"Use WillPopScope","Guideline":"Handle back button (PopScope)","No":21,"Severity":"High","domain":"stack/flutter","record_id":"stack/flutter/21","stack":"flutter"},{"Category":"Navigation","Description":"Type-safe route arguments","Do":"Typed route arguments","Don't":"Dynamic arguments","Guideline":"Pass typed arguments","No":22,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/22","stack":"flutter"},{"Category":"Async","Description":"Async UI building","Do":"FutureBuilder for async data","Don't":"setState for async","Guideline":"Use FutureBuilder","No":23,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/23","stack":"flutter"},{"Category":"Async","Description":"Stream UI building","Do":"StreamBuilder for streams","Don't":"Manual stream subscription","Guideline":"Use StreamBuilder","No":24,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/24","stack":"flutter"},{"Category":"Async","Description":"Complete async UI states","Do":"ConnectionState checks","Don't":"Only success state","Guideline":"Handle loading and error states","No":25,"Severity":"High","domain":"stack/flutter","record_id":"stack/flutter/25","stack":"flutter"},{"Category":"Async","Description":"Clean up stream subscriptions","Do":"Cancel in dispose","Don't":"Memory leaks","Guideline":"Cancel subscriptions","No":26,"Severity":"High","domain":"stack/flutter","record_id":"stack/flutter/26","stack":"flutter"},{"Category":"Theming","Description":"Consistent theming","Do":"ThemeData for app theme","Don't":"Hardcoded colors","Guideline":"Use ThemeData","No":27,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/27","stack":"flutter"},{"Category":"Theming","Description":"Material 3 color system","Do":"ColorScheme for colors","Don't":"Individual color properties","Guideline":"Use ColorScheme","No":28,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/28","stack":"flutter"},{"Category":"Theming","Description":"Dynamic theme access","Do":"Theme.of(context)","Don't":"Static theme reference","Guideline":"Access theme via context","No":29,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/29","stack":"flutter"},{"Category":"Theming","Description":"Respect system theme","Do":"darkTheme in MaterialApp","Don't":"Light theme only","Guideline":"Support dark mode","No":30,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/30","stack":"flutter"},{"Category":"Animation","Description":"Simple animations","Do":"AnimatedContainer AnimatedOpacity","Don't":"Explicit for simple transitions","Guideline":"Use implicit animations","No":31,"Severity":"Low","domain":"stack/flutter","record_id":"stack/flutter/31","stack":"flutter"},{"Category":"Animation","Description":"Fine-grained control","Do":"AnimationController with Ticker","Don't":"Implicit for complex sequences","Guideline":"Use AnimationController for complex","No":32,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/32","stack":"flutter"},{"Category":"Animation","Description":"Clean up animation resources","Do":"dispose() for controllers","Don't":"Memory leaks","Guideline":"Dispose AnimationControllers","No":33,"Severity":"High","domain":"stack/flutter","record_id":"stack/flutter/33","stack":"flutter"},{"Category":"Animation","Description":"Shared element transitions","Do":"Hero for navigation animations","Don't":"Manual shared element","Guideline":"Use Hero for transitions","No":34,"Severity":"Low","domain":"stack/flutter","record_id":"stack/flutter/34","stack":"flutter"},{"Category":"Forms","Description":"Form validation","Do":"Form with GlobalKey","Don't":"Individual validation","Guideline":"Use Form widget","No":35,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/35","stack":"flutter"},{"Category":"Forms","Description":"Control text input","Do":"Controller for text fields","Don't":"onChanged for all text","Guideline":"Use TextEditingController","No":36,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/36","stack":"flutter"},{"Category":"Forms","Description":"Form validation flow","Do":"_formKey.currentState!.validate()","Don't":"Skip validation","Guideline":"Validate on submit","No":37,"Severity":"High","domain":"stack/flutter","record_id":"stack/flutter/37","stack":"flutter"},{"Category":"Forms","Description":"Clean up text controllers","Do":"dispose() for controllers","Don't":"Memory leaks","Guideline":"Dispose controllers","No":38,"Severity":"High","domain":"stack/flutter","record_id":"stack/flutter/38","stack":"flutter"},{"Category":"Performance","Description":"Reduce rebuilds","Do":"const for static widgets","Don't":"No const for literals","Guideline":"Use const widgets","No":39,"Severity":"High","domain":"stack/flutter","record_id":"stack/flutter/39","stack":"flutter"},{"Category":"Performance","Description":"Minimal rebuild scope","Do":"Isolate changing widgets","Don't":"setState on parent","Guideline":"Avoid rebuilding entire tree","No":40,"Severity":"High","domain":"stack/flutter","record_id":"stack/flutter/40","stack":"flutter"},{"Category":"Performance","Description":"Isolate repaints","Do":"RepaintBoundary for animations","Don't":"Full screen repaints","Guideline":"Use RepaintBoundary","No":41,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/41","stack":"flutter"},{"Category":"Performance","Description":"Measure before optimizing","Do":"Flutter DevTools profiling","Don't":"Guess at performance","Guideline":"Profile with DevTools","No":42,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/42","stack":"flutter"},{"Category":"Accessibility","Description":"Screen reader support","Do":"Semantics for accessibility","Don't":"Missing accessibility info","Guideline":"Use Semantics widget","No":43,"Severity":"High","domain":"stack/flutter","record_id":"stack/flutter/43","stack":"flutter"},{"Category":"Accessibility","Description":"MediaQuery text scaling","Do":"MediaQuery.textScaleFactor","Don't":"Fixed font sizes","Guideline":"Support large fonts","No":44,"Severity":"High","domain":"stack/flutter","record_id":"stack/flutter/44","stack":"flutter"},{"Category":"Accessibility","Description":"TalkBack and VoiceOver","Do":"Test accessibility regularly","Don't":"Skip accessibility testing","Guideline":"Test with screen readers","No":45,"Severity":"High","domain":"stack/flutter","record_id":"stack/flutter/45","stack":"flutter"},{"Category":"Testing","Description":"Test widget behavior","Do":"WidgetTester for UI tests","Don't":"Unit tests only","Guideline":"Use widget tests","No":46,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/46","stack":"flutter"},{"Category":"Testing","Description":"Full app testing","Do":"integration_test package","Don't":"Manual testing only","Guideline":"Use integration tests","No":47,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/47","stack":"flutter"},{"Category":"Testing","Description":"Isolate tests","Do":"Mockito or mocktail","Don't":"Real dependencies in tests","Guideline":"Mock dependencies","No":48,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/48","stack":"flutter"},{"Category":"Platform","Description":"Platform-specific code","Do":"Platform.isIOS Platform.isAndroid","Don't":"Same code for all platforms","Guideline":"Use Platform checks","No":49,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/49","stack":"flutter"},{"Category":"Platform","Description":"Web platform detection","Do":"kIsWeb for web checks","Don't":"Platform for web","Guideline":"Use kIsWeb for web","No":50,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/50","stack":"flutter"},{"Category":"Packages","Description":"Community packages","Do":"Popular maintained packages","Don't":"Custom implementations","Guideline":"Use pub.dev packages","No":51,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/51","stack":"flutter"},{"Category":"Packages","Description":"Quality before adding","Do":"Pub points and popularity","Don't":"Any package without review","Guideline":"Check package quality","No":52,"Severity":"Medium","domain":"stack/flutter","record_id":"stack/flutter/52","stack":"flutter"},{"Category":"Animation","Description":"Built-in animations are optimized and respect reduced-motion","Do":"Use animate-pulse animate-spin animate-ping","Don't":"Custom @keyframes for simple effects","Guideline":"Use Tailwind animate utilities","No":1,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/1","stack":"html-tailwind"},{"Category":"Animation","Description":"Continuous bounce is distracting and causes motion sickness","Do":"Use animate-bounce sparingly on CTAs only","Don't":"Multiple bounce animations on page","Guideline":"Limit bounce animations","No":2,"Severity":"High","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/2","stack":"html-tailwind"},{"Category":"Animation","Description":"Use appropriate transition speeds for UI feedback","Do":"duration-150 to duration-300 for UI","Don't":"duration-1000 or longer for UI elements","Guideline":"Transition duration","No":3,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/3","stack":"html-tailwind"},{"Category":"Animation","Description":"Add smooth transitions on hover state changes","Do":"Add transition class with hover states","Don't":"Instant hover changes without transition","Guideline":"Hover transitions","No":4,"Severity":"Low","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/4","stack":"html-tailwind"},{"Category":"Z-Index","Description":"Consistent stacking context with predefined scale","Do":"z-0 z-10 z-20 z-30 z-40 z-50","Don't":"Arbitrary z-index values","Guideline":"Use Tailwind z-* scale","No":5,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/5","stack":"html-tailwind"},{"Category":"Z-Index","Description":"Fixed navigation and modals need explicit z-index","Do":"z-50 for nav z-40 for dropdowns","Don't":"Relying on DOM order for stacking","Guideline":"Fixed elements z-index","No":6,"Severity":"High","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/6","stack":"html-tailwind"},{"Category":"Z-Index","Description":"Use negative z-index for decorative backgrounds","Do":"z-[-1] for background elements","Don't":"Positive z-index for backgrounds","Guideline":"Negative z-index for backgrounds","No":7,"Severity":"Low","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/7","stack":"html-tailwind"},{"Category":"Layout","Description":"Limit content width for readability","Do":"max-w-7xl mx-auto for main content","Don't":"Full-width content on large screens","Guideline":"Container max-width","No":8,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/8","stack":"html-tailwind"},{"Category":"Layout","Description":"Adjust padding for different screen sizes","Do":"px-4 md:px-6 lg:px-8","Don't":"Same padding all sizes","Guideline":"Responsive padding","No":9,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/9","stack":"html-tailwind"},{"Category":"Layout","Description":"Use consistent gap utilities for spacing","Do":"gap-4 gap-6 gap-8","Don't":"Margins on individual items","Guideline":"Grid gaps","No":10,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/10","stack":"html-tailwind"},{"Category":"Layout","Description":"Use flex utilities for alignment","Do":"items-center justify-between","Don't":"Multiple nested wrappers","Guideline":"Flexbox alignment","No":11,"Severity":"Low","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/11","stack":"html-tailwind"},{"Category":"Images","Description":"Maintain consistent image aspect ratios","Do":"aspect-video aspect-square","Don't":"No aspect ratio on containers","Guideline":"Aspect ratio","No":12,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/12","stack":"html-tailwind"},{"Category":"Images","Description":"Control image scaling within containers","Do":"object-cover object-contain","Don't":"Stretched distorted images","Guideline":"Object fit","No":13,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/13","stack":"html-tailwind"},{"Category":"Images","Description":"Defer loading of off-screen images","Do":"loading='lazy' on images","Don't":"All images eager load","Guideline":"Lazy loading","No":14,"Severity":"High","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/14","stack":"html-tailwind"},{"Category":"Images","Description":"Serve appropriate image sizes","Do":"srcset and sizes attributes","Don't":"Same large image all devices","Guideline":"Responsive images","No":15,"Severity":"High","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/15","stack":"html-tailwind"},{"Category":"Typography","Description":"Use @tailwindcss/typography for rich text","Do":"prose prose-lg for article content","Don't":"Custom styles for markdown","Guideline":"Prose plugin","No":16,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/16","stack":"html-tailwind"},{"Category":"Typography","Description":"Use appropriate line height for readability","Do":"leading-relaxed for body text","Don't":"Default tight line height","Guideline":"Line height","No":17,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/17","stack":"html-tailwind"},{"Category":"Typography","Description":"Use consistent text size scale","Do":"text-sm text-base text-lg text-xl","Don't":"Arbitrary font sizes","Guideline":"Font size scale","No":18,"Severity":"Low","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/18","stack":"html-tailwind"},{"Category":"Typography","Description":"Handle long text gracefully","Do":"truncate or line-clamp-*","Don't":"Overflow breaking layout","Guideline":"Text truncation","No":19,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/19","stack":"html-tailwind"},{"Category":"Colors","Description":"Use color opacity utilities","Do":"bg-black/50 text-white/80","Don't":"Separate opacity class","Guideline":"Opacity utilities","No":20,"Severity":"Low","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/20","stack":"html-tailwind"},{"Category":"Colors","Description":"Support dark mode with dark: prefix","Do":"dark:bg-gray-900 dark:text-white","Don't":"No dark mode support","Guideline":"Dark mode","No":21,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/21","stack":"html-tailwind"},{"Category":"Colors","Description":"Use semantic color naming in config","Do":"primary secondary danger success","Don't":"Generic color names in components","Guideline":"Semantic colors","No":22,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/22","stack":"html-tailwind"},{"Category":"Spacing","Description":"Use Tailwind spacing scale consistently","Do":"p-4 m-6 gap-8","Don't":"Arbitrary pixel values","Guideline":"Consistent spacing scale","No":23,"Severity":"Low","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/23","stack":"html-tailwind"},{"Category":"Spacing","Description":"Use sparingly for overlapping effects","Do":"-mt-4 for overlapping elements","Don't":"Negative margins for layout fixing","Guideline":"Negative margins","No":24,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/24","stack":"html-tailwind"},{"Category":"Spacing","Description":"Use space-y-* for vertical lists","Do":"space-y-4 on flex/grid column","Don't":"Margin on each child","Guideline":"Space between","No":25,"Severity":"Low","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/25","stack":"html-tailwind"},{"Category":"Forms","Description":"Always show focus indicators","Do":"focus:ring-2 focus:ring-blue-500","Don't":"Remove focus outline","Guideline":"Focus states","No":26,"Severity":"High","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/26","stack":"html-tailwind"},{"Category":"Forms","Description":"Consistent input dimensions","Do":"h-10 px-3 for inputs","Don't":"Inconsistent input heights","Guideline":"Input sizing","No":27,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/27","stack":"html-tailwind"},{"Category":"Forms","Description":"Clear disabled styling","Do":"disabled:opacity-50 disabled:cursor-not-allowed","Don't":"No disabled indication","Guideline":"Disabled states","No":28,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/28","stack":"html-tailwind"},{"Category":"Forms","Description":"Style placeholder text appropriately","Do":"placeholder:text-gray-400","Don't":"Dark placeholder text","Guideline":"Placeholder styling","No":29,"Severity":"Low","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/29","stack":"html-tailwind"},{"Category":"Responsive","Description":"Start with mobile styles and add breakpoints","Do":"Default mobile + md: lg: xl:","Don't":"Desktop-first approach","Guideline":"Mobile-first approach","No":30,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/30","stack":"html-tailwind"},{"Category":"Responsive","Description":"Test at standard breakpoints","Do":"320 375 768 1024 1280 1536","Don't":"Only test on development device","Guideline":"Breakpoint testing","No":31,"Severity":"High","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/31","stack":"html-tailwind"},{"Category":"Responsive","Description":"Control visibility per breakpoint","Do":"hidden md:block","Don't":"Different content per breakpoint","Guideline":"Hidden/shown utilities","No":32,"Severity":"Low","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/32","stack":"html-tailwind"},{"Category":"Buttons","Description":"Consistent button dimensions","Do":"px-4 py-2 or px-6 py-3","Don't":"Inconsistent button sizes","Guideline":"Button sizing","No":33,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/33","stack":"html-tailwind"},{"Category":"Buttons","Description":"Minimum 44px touch target on mobile","Do":"min-h-[44px] on mobile","Don't":"Small buttons on mobile","Guideline":"Touch targets","No":34,"Severity":"High","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/34","stack":"html-tailwind"},{"Category":"Buttons","Description":"Show loading feedback","Do":"disabled + spinner icon","Don't":"Clickable during loading","Guideline":"Loading states","No":35,"Severity":"High","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/35","stack":"html-tailwind"},{"Category":"Buttons","Description":"Accessible icon-only buttons","Do":"aria-label on icon buttons","Don't":"Icon button without label","Guideline":"Icon buttons","No":36,"Severity":"High","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/36","stack":"html-tailwind"},{"Category":"Cards","Description":"Consistent card styling","Do":"rounded-lg shadow-md p-6","Don't":"Inconsistent card styles","Guideline":"Card structure","No":37,"Severity":"Low","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/37","stack":"html-tailwind"},{"Category":"Cards","Description":"Interactive cards should have hover feedback","Do":"hover:shadow-lg transition-shadow","Don't":"No hover on clickable cards","Guideline":"Card hover states","No":38,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/38","stack":"html-tailwind"},{"Category":"Cards","Description":"Consistent internal card spacing","Do":"space-y-4 for card content","Don't":"Inconsistent internal spacing","Guideline":"Card spacing","No":39,"Severity":"Low","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/39","stack":"html-tailwind"},{"Category":"Accessibility","Description":"Provide context for screen readers","Do":"sr-only for hidden labels","Don't":"Missing context for icons","Guideline":"Screen reader text","No":40,"Severity":"High","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/40","stack":"html-tailwind"},{"Category":"Accessibility","Description":"Show focus only for keyboard users","Do":"focus-visible:ring-2","Don't":"Focus on all interactions","Guideline":"Focus visible","No":41,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/41","stack":"html-tailwind"},{"Category":"Accessibility","Description":"Respect user motion preferences","Do":"motion-reduce:animate-none","Don't":"Ignore motion preferences","Guideline":"Reduced motion","No":42,"Severity":"High","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/42","stack":"html-tailwind"},{"Category":"Performance","Description":"Tailwind needs to know where classes are used","Do":"Use 'content' array in config","Don't":"Use deprecated 'purge' option (v2)","Guideline":"Configure content paths","No":43,"Severity":"High","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/43","stack":"html-tailwind"},{"Category":"Performance","Description":"Use JIT for faster builds and smaller bundles","Do":"JIT enabled (default in v3)","Don't":"Full CSS in development","Guideline":"JIT mode","No":44,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/44","stack":"html-tailwind"},{"Category":"Performance","Description":"Use @apply sparingly","Do":"Direct utilities in HTML","Don't":"Heavy @apply usage","Guideline":"Avoid @apply bloat","No":45,"Severity":"Low","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/45","stack":"html-tailwind"},{"Category":"Plugins","Description":"Use official Tailwind plugins","Do":"@tailwindcss/forms typography aspect-ratio","Don't":"Custom implementations","Guideline":"Official plugins","No":46,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/46","stack":"html-tailwind"},{"Category":"Plugins","Description":"Create utilities for repeated patterns","Do":"Custom utility in config","Don't":"Repeated arbitrary values","Guideline":"Custom utilities","No":47,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/47","stack":"html-tailwind"},{"Category":"Layout","Description":"Use @container for component-based responsiveness","Do":"Use @container and @lg: etc.","Don't":"Media queries for component internals","Guideline":"Container Queries","No":48,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/48","stack":"html-tailwind"},{"Category":"Interactivity","Description":"Style based on parent/sibling state","Do":"group-hover peer-checked","Don't":"JS for simple state interactions","Guideline":"Group and Peer","No":49,"Severity":"Low","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/49","stack":"html-tailwind"},{"Category":"Customization","Description":"Use [] for one-off values","Do":"w-[350px] for specific needs","Don't":"Creating config for single use","Guideline":"Arbitrary Values","No":50,"Severity":"Low","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/50","stack":"html-tailwind"},{"Category":"Colors","Description":"Define colors in Tailwind theme and use directly","Do":"bg-primary text-success border-cta","Don't":"bg-[var(--color-primary)] text-[var(--color-success)]","Guideline":"Theme color variables","No":51,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/51","stack":"html-tailwind"},{"Category":"Colors","Description":"Tailwind v4 uses bg-linear-to-* syntax for gradients","Do":"bg-linear-to-r bg-linear-to-b","Don't":"bg-gradient-to-* (deprecated in v4)","Guideline":"Use bg-linear-to-* for gradients","No":52,"Severity":"Medium","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/52","stack":"html-tailwind"},{"Category":"Layout","Description":"Shorter class name for flex-shrink-0","Do":"shrink-0 shrink","Don't":"flex-shrink-0 flex-shrink","Guideline":"Use shrink-0 shorthand","No":53,"Severity":"Low","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/53","stack":"html-tailwind"},{"Category":"Layout","Description":"Single utility for equal width and height","Do":"size-4 size-8 size-12","Don't":"Separate h-* w-* for squares","Guideline":"Use size-* for square dimensions","No":54,"Severity":"Low","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/54","stack":"html-tailwind"},{"Category":"Images","Description":"Add width/height attributes to SVGs to prevent layout shift before CSS loads","Do":"<svg class='size-6' width='24' height='24'>","Don't":"SVG without explicit dimensions","Guideline":"SVG explicit dimensions","No":55,"Severity":"High","domain":"stack/html-tailwind","record_id":"stack/html-tailwind/55","stack":"html-tailwind"},{"Category":"Application","Description":"JavaFX apps should bootstrap the primary Stage through Application.start()","Do":"Extend Application and configure Scene in start()","Don't":"Create UI from a random main method without launching JavaFX","Guideline":"Start UI from Application subclass","No":1,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/1","stack":"javafx"},{"Category":"Threading","Description":"Long-running work blocks rendering and input when executed on the UI thread","Do":"Use Task or Service for background work","Don't":"Run network database or file work in button handlers","Guideline":"Keep work off the FX Application Thread","No":2,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/2","stack":"javafx"},{"Category":"Threading","Description":"Scene graph changes must happen on the JavaFX Application Thread","Do":"Use bindings task handlers or Platform.runLater for UI changes","Don't":"Mutate controls directly from background threads","Guideline":"Update UI only on FX thread","No":3,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/3","stack":"javafx"},{"Category":"Threading","Description":"Task exposes progress and message properties for responsive feedback","Do":"Bind ProgressBar and Label to task properties","Don't":"Poll progress manually or leave users without feedback","Guideline":"Bind progress to background tasks","No":4,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/4","stack":"javafx"},{"Category":"FXML","Description":"FXML keeps view structure readable for screens with many controls","Do":"Place layout in FXML and behavior in controller","Don't":"Build large screens entirely in one Java method","Guideline":"Use FXML for stable declarative layouts","No":5,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/5","stack":"javafx"},{"Category":"FXML","Description":"Controllers should coordinate controls and delegate business logic to services","Do":"Inject services or call application services from controller","Don't":"Put database queries and domain rules directly in controller","Guideline":"Keep controllers focused on view behavior","No":6,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/6","stack":"javafx"},{"Category":"FXML","Description":"FXML controls need stable fx:id values that match controller fields","Do":"Annotate fields with @FXML and keep ids descriptive","Don't":"Look up controls by CSS selector for normal wiring","Guideline":"Use fx:id for injected controls","No":7,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/7","stack":"javafx"},{"Category":"FXML","Description":"FXML load errors should surface during screen creation with clear context","Do":"Load resources with getResource and handle IOException explicitly","Don't":"Swallow loader errors and show a blank scene","Guideline":"Fail fast when loading FXML","No":8,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/8","stack":"javafx"},{"Category":"CSS","Description":"JavaFX CSS works best through reusable styleClass names","Do":"Add semantic style classes and define them in CSS","Don't":"Set long inline style strings throughout code","Guideline":"Style with style classes","No":9,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/9","stack":"javafx"},{"Category":"CSS","Description":"Looked-up colors keep palettes consistent across controls","Do":"Define named colors on root and reuse them in CSS","Don't":"Repeat hex values in every selector","Guideline":"Use design tokens through looked-up colors","No":10,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/10","stack":"javafx"},{"Category":"CSS","Description":"Expensive CSS effects and shadows can hurt desktop UI responsiveness","Do":"Use subtle shadows only on important elevated surfaces","Don't":"Apply blur drop shadow and glow to every node","Guideline":"Avoid overusing inline effects","No":11,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/11","stack":"javafx"},{"Category":"Layout","Description":"Each pane solves a different layout problem and should be selected intentionally","Do":"Use BorderPane for app shell GridPane for forms VBox/HBox for simple stacks","Don't":"Use absolute positioning for resizable app screens","Guideline":"Choose layout panes by responsibility","No":12,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/12","stack":"javafx"},{"Category":"Layout","Description":"Responsive JavaFX layouts depend on constraints and grow priorities","Do":"Use hgrow vgrow column constraints and alignment","Don't":"Hard-code pixel positions and sizes","Guideline":"Prefer constraints over fixed coordinates","No":13,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/13","stack":"javafx"},{"Category":"Layout","Description":"Controls should resize predictably across windows and DPI settings","Do":"Use Region.USE_COMPUTED_SIZE and max widths intentionally","Don't":"Lock every control to fixed width and height","Guideline":"Set sensible min pref and max sizes","No":14,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/14","stack":"javafx"},{"Category":"Layout","Description":"Desktop UI needs scan-friendly rhythm and clear grouping","Do":"Set spacing padding and Insets through shared constants or CSS","Don't":"Use inconsistent ad hoc gaps between controls","Guideline":"Use spacing and padding consistently","No":15,"Severity":"Low","domain":"stack/javafx","record_id":"stack/javafx/15","stack":"javafx"},{"Category":"Controls","Description":"TableView ListView and ComboBox update automatically from observable collections","Do":"Back controls with FXCollections.observableArrayList()","Don't":"Mutate plain lists and manually refresh controls","Guideline":"Use ObservableList for list controls","No":16,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/16","stack":"javafx"},{"Category":"Controls","Description":"Table columns should observe stable JavaFX properties for updates","Do":"Expose StringProperty ObjectProperty or use ReadOnlyObjectWrapper","Don't":"Return transient strings without observable support","Guideline":"Configure TableView cell value factories with properties","No":17,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/17","stack":"javafx"},{"Category":"Controls","Description":"Custom table or list visuals belong in reusable cell factories","Do":"Override updateItem and handle empty state","Don't":"Place complex Nodes directly in model objects","Guideline":"Use cell factories for custom rendering","No":18,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/18","stack":"javafx"},{"Category":"Controls","Description":"TableView ListView TreeView virtualize cells and outperform manual node lists","Do":"Use TableView or ListView for hundreds of rows","Don't":"Create hundreds of HBoxes inside a VBox","Guideline":"Virtualized controls are for large data","No":19,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/19","stack":"javafx"},{"Category":"Controls","Description":"Empty tables and lists need visible guidance or next actions","Do":"Set placeholder nodes for empty data views","Don't":"Leave blank white areas that look broken","Guideline":"Handle empty states explicitly","No":20,"Severity":"Low","domain":"stack/javafx","record_id":"stack/javafx/20","stack":"javafx"},{"Category":"Binding","Description":"JavaFX binding reduces imperative synchronization bugs","Do":"Bind disabled visible text and progress properties to source state","Don't":"Manually update every dependent control in each event handler","Guideline":"Use property binding for derived UI state","No":21,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/21","stack":"javafx"},{"Category":"Binding","Description":"Bound properties cannot be set directly without errors","Do":"Call unbind when switching from bound to manual state","Don't":"Set a bound property directly","Guideline":"Unbind before manual updates","No":22,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/22","stack":"javafx"},{"Category":"Binding","Description":"Bindings express simple relationships more clearly than listeners","Do":"Use listeners for side effects and bindings for values","Don't":"Create listener chains for simple computed text","Guideline":"Use listeners sparingly","No":23,"Severity":"Low","domain":"stack/javafx","record_id":"stack/javafx/23","stack":"javafx"},{"Category":"Events","Description":"Buttons and menu items should route to named command methods","Do":"Use setOnAction or @FXML handler methods with clear names","Don't":"Put large lambdas inline for complex operations","Guideline":"Use action handlers for commands","No":24,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/24","stack":"javafx"},{"Category":"Events","Description":"Filters can intercept keyboard events before child controls consume them","Do":"Register accelerators or filters at Scene level","Don't":"Add duplicate key handlers to every control","Guideline":"Use event filters for global shortcuts","No":25,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/25","stack":"javafx"},{"Category":"Accessibility","Description":"Accessible desktop forms need labels associated with controls","Do":"Use Label.setLabelFor and clear prompt text","Don't":"Use placeholder-only labels","Guideline":"Connect labels to inputs","No":26,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/26","stack":"javafx"},{"Category":"Accessibility","Description":"Icon-only controls need names for screen readers and tooltips","Do":"Set accessibleText and Tooltip on icon buttons","Don't":"Use unlabeled graphic-only buttons","Guideline":"Expose accessible text for icon buttons","No":27,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/27","stack":"javafx"},{"Category":"Accessibility","Description":"Desktop users rely on focus traversal and visible focus indicators","Do":"Preserve focus rings and tab order","Don't":"Remove outlines without alternative focus state","Guideline":"Keep keyboard focus visible","No":28,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/28","stack":"javafx"},{"Category":"Accessibility","Description":"Mnemonics make desktop workflows faster and more accessible","Do":"Enable mnemonicParsing and choose unique mnemonic letters","Don't":"Ignore keyboard alternatives for frequent actions","Guideline":"Use mnemonics for menu and form workflows","No":29,"Severity":"Low","domain":"stack/javafx","record_id":"stack/javafx/29","stack":"javafx"},{"Category":"Validation","Description":"Users should not hunt for form errors in desktop dialogs","Do":"Bind error labels or pseudo classes next to invalid controls","Don't":"Show only a generic alert after submit","Guideline":"Show validation near the field","No":30,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/30","stack":"javafx"},{"Category":"Validation","Description":"TextFormatter prevents invalid edits before they enter the model","Do":"Attach TextFormatter for numeric dates and masks","Don't":"Parse and reject invalid text only after submit","Guideline":"Use TextFormatter for constrained input","No":31,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/31","stack":"javafx"},{"Category":"Dialogs","Description":"Dialogs should block only the relevant window and return structured results","Do":"Set owner modality and use showAndWait","Don't":"Open unmanaged windows for confirmations","Guideline":"Use modal ownership for dialogs","No":32,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/32","stack":"javafx"},{"Category":"Dialogs","Description":"Dialog gives consistent buttons focus and result handling","Do":"Use Dialog<T> for forms confirmations and wizards","Don't":"Build every modal as a new Stage manually","Guideline":"Prefer custom DialogPane over ad hoc stages","No":33,"Severity":"Low","domain":"stack/javafx","record_id":"stack/javafx/33","stack":"javafx"},{"Category":"Images","Description":"Packaged apps need resources resolved from the classpath or module path","Do":"Use getResourceAsStream for bundled assets","Don't":"Use absolute local file paths in production UI","Guideline":"Load images as resources","No":34,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/34","stack":"javafx"},{"Category":"Images","Description":"Large image decoding can pause UI startup","Do":"Use Image(url true) or a background Task for heavy assets","Don't":"Load many full-size images synchronously during startup","Guideline":"Use background loading for large images","No":35,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/35","stack":"javafx"},{"Category":"Animation","Description":"Desktop UI animations should clarify state changes without delaying work","Do":"Use 150-250ms transitions for reveal hover and selection","Don't":"Animate every layout change with long timelines","Guideline":"Keep animations purposeful and short","No":36,"Severity":"Low","domain":"stack/javafx","record_id":"stack/javafx/36","stack":"javafx"},{"Category":"Animation","Description":"Some users experience motion sensitivity in desktop apps","Do":"Provide a setting to disable decorative animations","Don't":"Make animation required for comprehension","Guideline":"Respect reduced-motion contexts where possible","No":37,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/37","stack":"javafx"},{"Category":"Performance","Description":"Replacing whole scenes loses state and can flicker","Do":"Swap center content or update view models","Don't":"Rebuild the entire Stage for every navigation click","Guideline":"Avoid recreating scenes for small state changes","No":38,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/38","stack":"javafx"},{"Category":"Performance","Description":"FXML loading and CSS application are not free","Do":"Cache stable views or controllers for frequent navigation","Don't":"Reload heavyweight screens repeatedly without need","Guideline":"Reuse loaded views when appropriate","No":39,"Severity":"Low","domain":"stack/javafx","record_id":"stack/javafx/39","stack":"javafx"},{"Category":"Performance","Description":"Many single-item updates can cause repeated layout and sort work","Do":"Use setAll or addAll for bulk replacement","Don't":"Loop add items one by one to visible lists","Guideline":"Batch observable list changes","No":40,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/40","stack":"javafx"},{"Category":"Architecture","Description":"View models keep controller state testable and separate from controls","Do":"Expose JavaFX properties from a screen model","Don't":"Store all state only inside controls","Guideline":"Use view models for complex screens","No":41,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/41","stack":"javafx"},{"Category":"Architecture","Description":"Feature controllers should not know how every screen is launched","Do":"Use a navigator or application shell service","Don't":"Call FXMLLoader for unrelated screens from each controller","Guideline":"Separate navigation from feature controllers","No":42,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/42","stack":"javafx"},{"Category":"Modules","Description":"Modular JavaFX apps must require the modules they use","Do":"Add javafx.controls javafx.fxml and opens controller packages","Don't":"Depend on classpath accidents only","Guideline":"Declare required JavaFX modules","No":43,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/43","stack":"javafx"},{"Category":"Packaging","Description":"JavaFX apps should ship with the runtime they need","Do":"Package a runtime image or native installer","Don't":"Ask end users to install matching Java and JavaFX manually","Guideline":"Use jlink or jpackage for desktop delivery","No":44,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/44","stack":"javafx"},{"Category":"Testing","Description":"UI flows need automated coverage beyond controller unit tests","Do":"Write TestFX tests for key forms dialogs and navigation","Don't":"Only manually click through releases","Guideline":"Use TestFX for interaction tests","No":45,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/45","stack":"javafx"},{"Category":"Theme","Description":"AtlantaFX provides modern JavaFX themes while preserving standard controls","Do":"Use AtlantaFX user-agent stylesheet plus a small app CSS layer","Don't":"Rewrite every standard control style from scratch","Guideline":"Use AtlantaFX as the enterprise theme baseline","No":46,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/46","stack":"javafx"},{"Category":"Theme","Description":"PrimerLight and PrimerDark are neutral enough for dense business workflows","Do":"Use PrimerLight as default and PrimerDark for dark mode","Don't":"Use Dracula or Cupertino as the default enterprise theme","Guideline":"Prefer Primer for enterprise applications","No":47,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/47","stack":"javafx"},{"Category":"Theme","Description":"Application CSS should customize brand tokens and business states after the base theme","Do":"Add app.css to the Scene after setting AtlantaFX","Don't":"Edit AtlantaFX source CSS directly","Guideline":"Layer brand CSS after AtlantaFX","No":48,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/48","stack":"javafx"},{"Category":"Theme","Description":"JavaFX looked-up colors keep brand and semantic colors reusable across controls","Do":"Define app-primary app-success app-warning app-danger on root","Don't":"Repeat hex values in every selector","Guideline":"Use looked-up colors as enterprise tokens","No":49,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/49","stack":"javafx"},{"Category":"Theme","Description":"Dark mode switching should not be scattered across controllers","Do":"Use a ThemeService that sets user-agent stylesheet and app CSS variants","Don't":"Let each controller decide its own theme","Guideline":"Keep theme switching centralized","No":50,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/50","stack":"javafx"},{"Category":"Theme","Description":"Enterprise screens use status colors heavily and need readable contrast","Do":"Check text on success warning danger and selected row backgrounds","Don't":"Assume brand colors are accessible","Guideline":"Validate contrast for business status colors","No":51,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/51","stack":"javafx"},{"Category":"Theme","Description":"AtlantaFX exposes utility styles that reduce custom CSS drift","Do":"Prefer Styles constants or documented style classes","Don't":"Create one-off class names for every button variant","Guideline":"Use AtlantaFX style classes before custom CSS","No":52,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/52","stack":"javafx"},{"Category":"Theme","Description":"AtlantaFX modernizes controls but enterprise UX still needs layout density and workflow rules","Do":"Define app shell navigation table density form and validation conventions","Don't":"Assume theme choice alone solves enterprise usability","Guideline":"Treat AtlantaFX as a base not the whole design system","No":53,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/53","stack":"javafx"},{"Category":"Icons","Description":"Icon fonts integrate cleanly with JavaFX controls and avoid emoji-style UI","Do":"Use FontIcon with semantic style classes","Don't":"Use emoji as toolbar or menu icons","Guideline":"Use Ikonli for consistent enterprise icons","No":54,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/54","stack":"javafx"},{"Category":"Components","Description":"AtlantaFX provides useful controls such as Card Message ModalPane Popover and ToggleSwitch","Do":"Use built-in AtlantaFX controls before adding another dependency","Don't":"Add ControlsFX for components AtlantaFX already covers","Guideline":"Use AtlantaFX controls for common app affordances","No":55,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/55","stack":"javafx"},{"Category":"Components","Description":"ControlsFX is useful for specialized controls but should stay optional","Do":"Use ControlsFX for SpreadsheetView PropertySheet CheckComboBox or StatusBar needs","Don't":"Add ControlsFX by default before requirements are clear","Guideline":"Add ControlsFX only for missing enterprise controls","No":56,"Severity":"Low","domain":"stack/javafx","record_id":"stack/javafx/56","stack":"javafx"},{"Category":"Testing","Description":"Theme and CSS changes can break focus visibility dialogs and button affordance","Do":"Use TestFX for login save validation and modal workflows","Don't":"Only inspect AtlantaFX screens manually","Guideline":"Test theme-critical flows with TestFX","No":57,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/57","stack":"javafx"},{"Category":"Architecture","Description":"Enterprise JavaFX apps need stable navigation around changing work areas","Do":"Use BorderPane shell with navigation toolbar and central workspace","Don't":"Replace the whole Stage for every feature","Guideline":"Use application shell plus feature workspaces","No":58,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/58","stack":"javafx"},{"Category":"Architecture","Description":"Large forms and tables need testable state outside the controller","Do":"Expose JavaFX properties from view models and bind controls to them","Don't":"Put all screen state and validation in the controller","Guideline":"Use MVVM for complex enterprise screens","No":59,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/59","stack":"javafx"},{"Category":"Architecture","Description":"Enterprise controllers should coordinate UI and call application services","Do":"Use a controller factory or DI container for services","Don't":"Create database connections inside FXML controllers","Guideline":"Inject services into controllers","No":60,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/60","stack":"javafx"},{"Category":"Navigation","Description":"Menus toolbars and shortcuts should reflect the same permission model","Do":"Build navigation items from commands with required roles","Don't":"Hide buttons in one place and leave shortcuts enabled","Guideline":"Use role-aware navigation models","No":61,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/61","stack":"javafx"},{"Category":"Workflow","Description":"Approval and processing screens need clear business state signals","Do":"Use semantic badges row styles and disabled actions by workflow state","Don't":"Use only free text status columns","Guideline":"Represent workflow states visibly","No":62,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/62","stack":"javafx"},{"Category":"TableView","Description":"Enterprise users scan compare sort filter and act on rows for long periods","Do":"Use compact row height clear columns sorting filtering and selection summary","Don't":"Use card grids for large tabular datasets","Guideline":"Design TableView for high-density enterprise data","No":63,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/63","stack":"javafx"},{"Category":"TableView","Description":"Inline actions in dense tables should be limited and permission-aware","Do":"Use context menus or a side detail panel for secondary actions","Don't":"Place many buttons in every row","Guideline":"Keep row actions predictable","No":64,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/64","stack":"javafx"},{"Category":"TableView","Description":"Desktop clients should not load entire enterprise tables into memory","Do":"Fetch pages or filtered slices from services","Don't":"Load all records and filter in the UI","Guideline":"Use server-side paging for large enterprise datasets","No":65,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/65","stack":"javafx"},{"Category":"Forms","Description":"Long enterprise forms need grouping and progressive disclosure","Do":"Group fields into titled sections with validation summaries","Don't":"Place dozens of inputs in one unbroken GridPane","Guideline":"Use form sections for enterprise data entry","No":66,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/66","stack":"javafx"},{"Category":"Forms","Description":"Enterprise forms often need multiple corrections before submission","Do":"Show a summary at top and field-level messages near controls","Don't":"Show only one modal alert after Save","Guideline":"Provide validation summary plus field errors","No":67,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/67","stack":"javafx"},{"Category":"Tasks","Description":"Enterprise imports exports sync and reports need cancel paths","Do":"Expose cancel button bound to Task running state","Don't":"Force users to wait or kill the app","Guideline":"Make long operations cancellable","No":68,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/68","stack":"javafx"},{"Category":"Tasks","Description":"Network and service failures should preserve user input and next action","Do":"Show inline retry messages and keep form/table state","Don't":"Clear the screen on service failure","Guideline":"Surface retryable errors without losing context","No":69,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/69","stack":"javafx"},{"Category":"Audit","Description":"Enterprise desktop apps need traceability for sensitive changes","Do":"Record user action entity result and timestamp in service layer","Don't":"Log only UI button clicks","Guideline":"Log business actions through services","No":70,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/70","stack":"javafx"},{"Category":"Configuration","Description":"Enterprise apps need deploy-time config and per-user preferences","Do":"Use config files for endpoints and Preferences for UI choices","Don't":"Hard-code environment URLs and window state","Guideline":"Separate user preferences from application config","No":71,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/71","stack":"javafx"},{"Category":"Deployment","Description":"AtlantaFX app CSS icons and FXML must be available after jpackage","Do":"Load resources from classpath or module resources","Don't":"Load theme files from developer machine paths","Guideline":"Package resources and themes inside the runtime image","No":72,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/72","stack":"javafx"},{"Category":"Deployment","Description":"Installed desktop apps may not write inside the application directory","Do":"Use platform-specific user data directories for logs and cache","Don't":"Write logs beside the executable","Guideline":"Write logs to user-writable locations","No":73,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/73","stack":"javafx"},{"Category":"Testing","Description":"Enterprise UI tests should verify save validation permission and service failure flows","Do":"Use TestFX for core workflows and service fakes","Don't":"Only test controller methods without UI interaction","Guideline":"Cover enterprise happy path and failure path","No":74,"Severity":"High","domain":"stack/javafx","record_id":"stack/javafx/74","stack":"javafx"},{"Category":"Dependencies","Description":"AtlantaFX should be default but additional libraries should be justified","Do":"Start with JavaFX AtlantaFX Ikonli TestFX and add ControlsFX only for missing controls","Don't":"Adopt many UI libraries at project start","Guideline":"Keep optional UI libraries behind actual needs","No":75,"Severity":"Medium","domain":"stack/javafx","record_id":"stack/javafx/75","stack":"javafx"},{"Category":"Composable","Description":"Composable functions should only render UI","Do":"Accept state and callbacks","Don't":"Calling usecase/repo","Guideline":"Pure UI composables","No":1,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/1","stack":"jetpack-compose"},{"Category":"Composable","Description":"Each composable has single responsibility","Do":"Split into components","Don't":"Huge composable","Guideline":"Small composables","No":2,"Severity":"Medium","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/2","stack":"jetpack-compose"},{"Category":"Composable","Description":"Prefer stateless composables","Do":"Hoist state","Don't":"Local mutable state","Guideline":"Stateless by default","No":3,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/3","stack":"jetpack-compose"},{"Category":"State","Description":"UI state comes from one source","Do":"StateFlow from VM","Don't":"Multiple states","Guideline":"Single source of truth","No":4,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/4","stack":"jetpack-compose"},{"Category":"State","Description":"Use sealed interface/data class","Do":"UiState.Loading","Don't":"Boolean flags","Guideline":"Model UI State","No":5,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/5","stack":"jetpack-compose"},{"Category":"State","Description":"remember for UI-only state","Do":"Scroll, animation","Don't":"Business state","Guideline":"remember only UI state","No":6,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/6","stack":"jetpack-compose"},{"Category":"State","Description":"Persist state across config","Do":"rememberSaveable","Don't":"remember","Guideline":"rememberSaveable","No":7,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/7","stack":"jetpack-compose"},{"Category":"State","Description":"Optimize recomposition","Do":"derivedStateOf","Don't":"Recompute always","Guideline":"derivedStateOf","No":8,"Severity":"Medium","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/8","stack":"jetpack-compose"},{"Category":"SideEffect","Description":"Use correct keys","Do":"LaunchedEffect(id)","Don't":"LaunchedEffect(Unit)","Guideline":"LaunchedEffect keys","No":9,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/9","stack":"jetpack-compose"},{"Category":"SideEffect","Description":"Avoid stale lambdas","Do":"rememberUpdatedState","Don't":"Capture directly","Guideline":"rememberUpdatedState","No":10,"Severity":"Medium","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/10","stack":"jetpack-compose"},{"Category":"SideEffect","Description":"Clean up resources","Do":"onDispose","Don't":"No cleanup","Guideline":"DisposableEffect","No":11,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/11","stack":"jetpack-compose"},{"Category":"Architecture","Description":"UI → VM → State","Do":"onEvent","Don't":"Two-way binding","Guideline":"Unidirectional data flow","No":12,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/12","stack":"jetpack-compose"},{"Category":"Architecture","Description":"Logic belongs to VM","Do":"Collect state","Don't":"Call repo","Guideline":"No business logic in UI","No":13,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/13","stack":"jetpack-compose"},{"Category":"Architecture","Description":"Expose StateFlow","Do":"asStateFlow","Don't":"Mutable exposed","Guideline":"Expose immutable state","No":14,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/14","stack":"jetpack-compose"},{"Category":"Lifecycle","Description":"Use collectAsStateWithLifecycle","Do":"Lifecycle aware","Don't":"collectAsState","Guideline":"Lifecycle-aware collect","No":15,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/15","stack":"jetpack-compose"},{"Category":"Navigation","Description":"VM emits navigation event","Do":"VM: Channel + receiveAsFlow(), V: Collect with Dispatchers.Main.immediate","Don't":"Nav in UI","Guideline":"Event-based navigation","No":16,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/16","stack":"jetpack-compose"},{"Category":"Navigation","Description":"Use sealed routes","Do":"sealed class Route","Don't":"String routes","Guideline":"Typed routes","No":17,"Severity":"Medium","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/17","stack":"jetpack-compose"},{"Category":"Performance","Description":"Prefer immutable/stable params","Do":"@Immutable","Don't":"Mutable params","Guideline":"Stable parameters","No":18,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/18","stack":"jetpack-compose"},{"Category":"Performance","Description":"Provide stable keys","Do":"key=id","Don't":"No key","Guideline":"Use key in Lazy","No":19,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/19","stack":"jetpack-compose"},{"Category":"Performance","Description":"No heavy computation in UI","Do":"Precompute in VM","Don't":"Compute in UI","Guideline":"Avoid heavy work","No":20,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/20","stack":"jetpack-compose"},{"Category":"Performance","Description":"remember heavy objects","Do":"remember","Don't":"Recreate each recomposition","Guideline":"Remember expensive objects","No":21,"Severity":"Medium","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/21","stack":"jetpack-compose"},{"Category":"Theming","Description":"Centralized theme","Do":"Material3 tokens","Don't":"Hardcoded values","Guideline":"Design system","No":22,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/22","stack":"jetpack-compose"},{"Category":"Theming","Description":"Theme-based colors","Do":"colorScheme","Don't":"Fixed color","Guideline":"Dark mode support","No":23,"Severity":"Medium","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/23","stack":"jetpack-compose"},{"Category":"Layout","Description":"Use Modifier to adjust layout instead of adding wrapper composables","Do":"Use Modifier.padding()","Don't":"Wrap content with extra Box","Guideline":"Prefer Modifier over extra layouts","No":24,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/24","stack":"jetpack-compose"},{"Category":"Layout","Description":"Deep layout trees increase measure & layout cost","Do":"Keep layout flat","Don't":"Box ? Column ? Box ? Row","Guideline":"Avoid deep layout nesting","No":25,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/25","stack":"jetpack-compose"},{"Category":"Layout","Description":"Linear layouts are simpler and more performant","Do":"Use Row / Column","Don't":"Custom layout for simple cases","Guideline":"Use Row/Column for linear layout","No":26,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/26","stack":"jetpack-compose"},{"Category":"Layout","Description":"Box should be used only when children overlap","Do":"Stack elements","Don't":"Use Box as Column","Guideline":"Use Box only for overlapping content","No":27,"Severity":"Medium","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/27","stack":"jetpack-compose"},{"Category":"Layout","Description":"Lazy layouts are virtualized and efficient","Do":"LazyColumn","Don't":"Column.verticalScroll()","Guideline":"Prefer LazyColumn over Column scroll","No":28,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/28","stack":"jetpack-compose"},{"Category":"Layout","Description":"Nested scrolling causes UX & performance issues","Do":"Single scroll container","Don't":"Scroll inside scroll","Guideline":"Avoid nested scroll containers","No":29,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/29","stack":"jetpack-compose"},{"Category":"Layout","Description":"fillMaxSize may break parent constraints","Do":"Use exact size","Don't":"Fill max everywhere","Guideline":"Avoid fillMaxSize by default","No":30,"Severity":"Medium","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/30","stack":"jetpack-compose"},{"Category":"Layout","Description":"Intrinsic measurement is expensive","Do":"Explicit sizing","Don't":"IntrinsicSize.Min","Guideline":"Avoid intrinsic size unless necessary","No":31,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/31","stack":"jetpack-compose"},{"Category":"Layout","Description":"Declare layout intent explicitly","Do":"Use Arrangement / Alignment","Don't":"Manual spacing hacks","Guideline":"Use Arrangement and Alignment APIs","No":32,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/32","stack":"jetpack-compose"},{"Category":"Layout","Description":"Repeated layouts should be shared","Do":"Create layout composable","Don't":"Copy-paste layouts","Guideline":"Extract reusable layout patterns","No":33,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/33","stack":"jetpack-compose"},{"Category":"Theming","Description":"Use typography","Do":"MaterialTheme.typography","Don't":"Hardcode sp","Guideline":"No hardcoded text style","No":34,"Severity":"Medium","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/34","stack":"jetpack-compose"},{"Category":"Testing","Description":"Composable easy to test","Do":"Pass state","Don't":"Hidden state","Guideline":"Stateless UI testing","No":35,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/35","stack":"jetpack-compose"},{"Category":"Testing","Description":"Stable UI selectors","Do":"Modifier.testTag","Don't":"Find by text","Guideline":"Use testTag","No":36,"Severity":"Medium","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/36","stack":"jetpack-compose"},{"Category":"Preview","Description":"Preview multiple states","Do":"@Preview","Don't":"Single preview","Guideline":"Multiple previews","No":37,"Severity":"Low","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/37","stack":"jetpack-compose"},{"Category":"DI","Description":"Use hiltViewModel","Do":"@HiltViewModel","Don't":"Manual VM","Guideline":"Inject VM via Hilt","No":38,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/38","stack":"jetpack-compose"},{"Category":"DI","Description":"Inject in VM","Do":"Constructor inject","Don't":"Inject composable","Guideline":"No DI in UI","No":39,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/39","stack":"jetpack-compose"},{"Category":"Accessibility","Description":"Accessible UI","Do":"contentDescription","Don't":"Ignore a11y","Guideline":"Content description","No":40,"Severity":"Medium","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/40","stack":"jetpack-compose"},{"Category":"Accessibility","Description":"Use semantics API","Do":"Modifier.semantics","Don't":"None","Guideline":"Semantics","No":41,"Severity":"Medium","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/41","stack":"jetpack-compose"},{"Category":"Animation","Description":"Use animate*AsState","Do":"AnimatedVisibility","Don't":"Manual anim","Guideline":"Compose animation APIs","No":42,"Severity":"Medium","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/42","stack":"jetpack-compose"},{"Category":"Animation","Description":"Animation is UI concern","Do":"Animate in UI","Don't":"Animate in VM","Guideline":"Avoid animation logic in VM","No":43,"Severity":"Low","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/43","stack":"jetpack-compose"},{"Category":"Modularization","Description":"UI per feature","Do":":feature:ui","Don't":"God module","Guideline":"Feature-based UI modules","No":44,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/44","stack":"jetpack-compose"},{"Category":"Modularization","Description":"Expose minimal UI API","Do":"Interface/Route","Don't":"Expose impl","Guideline":"Public UI contracts","No":45,"Severity":"Medium","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/45","stack":"jetpack-compose"},{"Category":"State","Description":"Use Compose state","Do":"mutableStateOf","Don't":"Custom observable","Guideline":"Snapshot state only","No":46,"Severity":"Medium","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/46","stack":"jetpack-compose"},{"Category":"State","Description":"Immutable list/map","Do":"PersistentList","Don't":"MutableList","Guideline":"Avoid mutable collections","No":47,"Severity":"High","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/47","stack":"jetpack-compose"},{"Category":"Lifecycle","Description":"Only for UI jobs","Do":"UI coroutine","Don't":"Long jobs","Guideline":"RememberCoroutineScope usage","No":48,"Severity":"Medium","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/48","stack":"jetpack-compose"},{"Category":"Interop","Description":"Use AndroidView","Do":"Isolated usage","Don't":"Mix everywhere","Guideline":"Interop View carefully","No":49,"Severity":"Low","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/49","stack":"jetpack-compose"},{"Category":"Interop","Description":"No LiveData in UI","Do":"StateFlow","Don't":"LiveData","Guideline":"Avoid legacy patterns","No":50,"Severity":"Medium","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/50","stack":"jetpack-compose"},{"Category":"Debug","Description":"Inspect recomposition","Do":"Tools","Don't":"Blind debug","Guideline":"Use layout inspector","No":51,"Severity":"Low","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/51","stack":"jetpack-compose"},{"Category":"Debug","Description":"Track recomposition","Do":"Debug flags","Don't":"Ignore","Guideline":"Enable recomposition counts","No":52,"Severity":"Low","domain":"stack/jetpack-compose","record_id":"stack/jetpack-compose/52","stack":"jetpack-compose"},{"Category":"Blade Templates","Description":"Extract repeated markup into named Blade components","Do":"Use x-* components with @props for all reusable UI","Don't":"Duplicate HTML blocks across views","Guideline":"Use Blade components for reusable UI","No":1,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/1","stack":"laravel"},{"Category":"Blade Templates","Description":"Define one master layout and extend it per page","Do":"@extends layout with named @section blocks","Don't":"Duplicate header/footer HTML in every view","Guideline":"Use layouts with @extends and @section","No":2,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/2","stack":"laravel"},{"Category":"Blade Templates","Description":"Declare accepted props inside components with @props","Do":"@props with defaults to document component API","Don't":"Pass arbitrary variables without declaration","Guideline":"Use @props for component type-safety","No":3,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/3","stack":"laravel"},{"Category":"Blade Templates","Description":"Build class strings conditionally without ternary noise","Do":"@class directive for conditional class binding","Don't":"String concatenation or nested ternaries","Guideline":"Use conditional CSS classes with @class","No":4,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/4","stack":"laravel"},{"Category":"Blade Templates","Description":"Named slots let callers inject content into specific regions","Do":"@slot('header') and $slot for flexible component APIs","Don't":"Hard-code all sub-sections inside components","Guideline":"Use named slots for flexible layouts","No":5,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/5","stack":"laravel"},{"Category":"Blade Templates","Description":"Blade directives are readable and IDE-supported","Do":"@if @foreach @forelse @empty instead of <?php ?>","Don't":"Raw PHP tags inside Blade templates","Guideline":"Use Blade directives instead of raw PHP","No":6,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/6","stack":"laravel"},{"Category":"Blade Templates","Description":"Use double curly braces for XSS-safe output","Do":"{{ }} for all user-supplied or dynamic text","Don't":"{!! !!} for untrusted data","Guideline":"Escape output with {{ }}","No":7,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/7","stack":"laravel"},{"Category":"Blade Templates","Description":"Vite integration handles cache busting and HMR automatically","Do":"@vite(['resources/css/app.css' 'resources/js/app.js'])","Don't":"Manual script/link tags with hardcoded paths","Guideline":"Use @vite for asset loading","No":8,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/8","stack":"laravel"},{"Category":"Livewire","Description":"Two-way data binding keeps component state in sync","Do":"wire:model for all form inputs managed by Livewire","Don't":"Manual JavaScript listeners syncing to component","Guideline":"Bind inputs with wire:model","No":9,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/9","stack":"laravel"},{"Category":"Livewire","Description":"Validate on input rather than only on submit","Do":"wire:model.live + #[Validate] for instant feedback","Don't":"Only validate on form submit","Guideline":"Use wire:model.live for real-time validation","No":10,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/10","stack":"laravel"},{"Category":"Livewire","Description":"Bind UI events to component methods cleanly","Do":"wire:click for buttons and interactive elements","Don't":"JavaScript fetch calls replicating Livewire actions","Guideline":"Use wire:click for actions","No":11,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/11","stack":"laravel"},{"Category":"Livewire","Description":"mount() for init; updated() for reactive side effects","Do":"mount() for initialization updatedFoo() for property changes","Don't":"Heavy logic in render() or __construct()","Guideline":"Use lifecycle hooks appropriately","No":12,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/12","stack":"laravel"},{"Category":"Livewire","Description":"Defer render of expensive components until visible","Do":"wire:init or lazy attribute on components","Don't":"Load all Livewire components on page load","Guideline":"Use lazy loading for heavy components","No":13,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/13","stack":"laravel"},{"Category":"Livewire","Description":"Use Alpine.js for UI-only state that doesn't need server round-trips","Do":"x-data / x-show / x-transition for tooltips dropdowns","Don't":"Livewire server calls for purely visual toggle state","Guideline":"Integrate Alpine.js for local UI state","No":14,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/14","stack":"laravel"},{"Category":"Livewire","Description":"Always indicate to users when a server action is in progress","Do":"wire:loading.attr=\"disabled\" and wire:loading elements","Don't":"Provide no feedback while Livewire request is in flight","Guideline":"Use wire:loading for feedback","No":15,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/15","stack":"laravel"},{"Category":"Livewire","Description":"Livewire's trait manages chunked upload and temp storage","Do":"WithFileUploads trait + wire:model for file inputs","Don't":"Manual multipart form submissions for Livewire pages","Guideline":"Handle file uploads with WithFileUploads","No":16,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/16","stack":"laravel"},{"Category":"Inertia.js","Description":"Each page is a Vue/React component rendered server-side via Inertia::render()","Do":"Inertia::render('Dashboard' ['data' => $data]) in controllers","Don't":"Return JSON and fetch from JavaScript","Guideline":"Use Inertia page components as route endpoints","No":17,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/17","stack":"laravel"},{"Category":"Inertia.js","Description":"Middleware share() provides auth user and flash to every page","Do":"Share auth/flash in HandleInertiaRequests middleware","Don't":"Pass auth to every Inertia::render() call","Guideline":"Share global data via HandleInertiaRequests","No":18,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/18","stack":"laravel"},{"Category":"Inertia.js","Description":"Inertia Link intercepts clicks for SPA-like transitions","Do":"<Link href=\"/dashboard\"> instead of <a href>","Don't":"Regular <a> tags for internal navigation","Guideline":"Use <Link> for client-side navigation","No":19,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/19","stack":"laravel"},{"Category":"Inertia.js","Description":"Inertia's useForm manages progress errors and transforms","Do":"useForm for all page-level forms, form.post() for submit","Don't":"Axios/fetch for form submissions on Inertia pages","Guideline":"Use useForm for form state and submission","No":20,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/20","stack":"laravel"},{"Category":"Inertia.js","Description":"Wrap pages in a persistent layout so header/sidebar don't remount","Do":"layout property on page component for persistent UI","Don't":"Re-render full layout on every page visit","Guideline":"Use persistent layouts to preserve state","No":21,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/21","stack":"laravel"},{"Category":"Inertia.js","Description":"Server-side rendering improves SEO and first paint","Do":"Enable Inertia SSR for marketing and public pages","Don't":"Client-only rendering for all pages including public","Guideline":"Enable SSR for public pages","No":22,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/22","stack":"laravel"},{"Category":"Styling","Description":"Use Vite + tailwindcss plugin for fast HMR and optimized builds","Do":"Install tailwindcss @tailwindcss/vite and configure vite.config.js","Don't":"Laravel Mix or manual PostCSS pipeline for new projects","Guideline":"Set up Tailwind CSS via Vite","No":23,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/23","stack":"laravel"},{"Category":"Styling","Description":"Tailwind scans Blade and JS files to tree-shake unused classes","Do":"content: ['./resources/views/**/*.blade.php', './resources/js/**/*.{js,vue}']","Don't":"No content config — ship all 3MB of CSS","Guideline":"Purge unused styles via content config","No":24,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/24","stack":"laravel"},{"Category":"Styling","Description":"class-based dark mode integrates with server-rendered preference","Do":"darkMode: 'class' with a toggle that sets class on <html>","Don't":"Media query only — no user override possible","Guideline":"Use dark mode class strategy","No":25,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/25","stack":"laravel"},{"Category":"Styling","Description":"Extract only truly repeated multi-class patterns","Do":"@apply for BEM base classes shared across many components","Don't":"@apply for every single element — defeats Tailwind's purpose","Guideline":"Use @apply sparingly in component CSS","No":26,"Severity":"Low","domain":"stack/laravel","record_id":"stack/laravel/26","stack":"laravel"},{"Category":"Styling","Description":"Define brand colors spacing fonts as CSS variables consumed by Tailwind","Do":"Custom @theme tokens matched to brand guidelines","Don't":"Magic color hex codes scattered across Blade templates","Guideline":"Configure custom design tokens in CSS","No":27,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/27","stack":"laravel"},{"Category":"Components","Description":"Blade files in resources/views/components/ auto-register as x-* components","Do":"Anonymous components for buttons alerts badges cards","Don't":"Blade @includes for anything reusable","Guideline":"Use anonymous Blade components for UI primitives","No":28,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/28","stack":"laravel"},{"Category":"Components","Description":"PHP class components can inject services and pre-process data","Do":"app/View/Components/ class when component needs PHP logic","Don't":"Blade @php blocks for business logic inside templates","Guideline":"Use class-based components for complex logic","No":29,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/29","stack":"laravel"},{"Category":"Components","Description":"Pass through HTML attributes like class id aria to root element","Do":"$attributes->merge() on root element of components","Don't":"Ignore caller-provided HTML attributes silently","Guideline":"Forward extra attributes with $attributes","No":30,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/30","stack":"laravel"},{"Category":"Components","Description":"Keep variant/size/color logic in a PHP class or helper not in Blade","Do":"Variant class or match() expression in component class","Don't":"Long @if chains for variants inside Blade templates","Guideline":"Separate variant logic from templates","No":31,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/31","stack":"laravel"},{"Category":"Components","Description":"Use {{ $slot ?? '' }} or named slot defaults so components are usable empty","Do":"Default content in slots for optional regions","Don't":"Require every slot to be filled — throws errors on empty usage","Guideline":"Provide default slot content","No":32,"Severity":"Low","domain":"stack/laravel","record_id":"stack/laravel/32","stack":"laravel"},{"Category":"Components","Description":"Prefix third-party or module components to avoid collisions","Do":"Register custom prefix via Blade::componentNamespace()","Don't":"Mix first-party and package component names with no prefix","Guideline":"Use component namespacing for packages","No":33,"Severity":"Low","domain":"stack/laravel","record_id":"stack/laravel/33","stack":"laravel"},{"Category":"Forms","Description":"Move validation rules out of controllers into dedicated FormRequest classes","Do":"php artisan make:request and define rules() + authorize()","Don't":"Inline validate() in controller actions","Guideline":"Validate with Form Request classes","No":34,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/34","stack":"laravel"},{"Category":"Forms","Description":"Use old() to repopulate form fields after server-side error redirect","Do":"old('field') as default value on all form inputs","Don't":"Empty form fields when validation fails","Guideline":"Preserve old input on validation failure","No":35,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/35","stack":"laravel"},{"Category":"Forms","Description":"Use the @error directive for inline field-level error messages","Do":"@error('field') to show per-field messages","Don't":"Dump $errors->all() in one block at top of form","Guideline":"Display validation errors with @error","No":36,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/36","stack":"laravel"},{"Category":"Forms","Description":"CSRF protection is enabled by default — include @csrf in every form","Do":"@csrf in every POST/PUT/PATCH/DELETE form","Don't":"Disable VerifyCsrfToken middleware for convenience","Guideline":"Use CSRF token on all forms","No":37,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/37","stack":"laravel"},{"Category":"Forms","Description":"HTML forms only support GET/POST — use @method for REST actions","Do":"@method('PUT') inside form for update/delete routes","Don't":"Route::post for all mutations including updates","Guideline":"Use method spoofing for PUT/PATCH/DELETE","No":38,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/38","stack":"laravel"},{"Category":"Forms","Description":"Flash success/error in controller; read in layout with session()","Do":"session('status') in layout for global flash display","Don't":"Re-query DB or pass flash from every controller individually","Guideline":"Display flash messages consistently","No":39,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/39","stack":"laravel"},{"Category":"Performance","Description":"Always eager load related models used in views with with()","Do":"with() in queries before passing collections to views","Don't":"Lazy-load relations inside Blade loops","Guideline":"Eager load relationships to prevent N+1","No":40,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/40","stack":"laravel"},{"Category":"Performance","Description":"Use cache() helper to wrap expensive rendered partials","Do":"cache() around slow partials that change infrequently","Don't":"Re-render identical content on every request","Guideline":"Cache rendered Blade fragments","No":41,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/41","stack":"laravel"},{"Category":"Performance","Description":"Always paginate collections in list views","Do":"->paginate() or ->simplePaginate() with {{ $items->links() }}","Don't":"->get() for large tables in views","Guideline":"Paginate large data sets","No":42,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/42","stack":"laravel"},{"Category":"Performance","Description":"Offload emails notifications and heavy processing to queues","Do":"Dispatch jobs for anything taking >200ms","Don't":"Block HTTP request with slow operations","Guideline":"Queue slow background tasks","No":43,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/43","stack":"laravel"},{"Category":"Performance","Description":"Laravel resolves models automatically — avoids manual find()","Do":"Type-hint model in controller method","Don't":"Manual User::findOrFail($id) in every method","Guideline":"Use route model binding","No":44,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/44","stack":"laravel"},{"Category":"Performance","Description":"Cache control headers for pages that rarely change","Do":"Cache-Control headers via middleware for public pages","Don't":"No caching — serve every response fresh","Guideline":"Enable HTTP response caching for static content","No":45,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/45","stack":"laravel"},{"Category":"Security","Description":"{{ }} auto-escapes HTML — never use {!! !!} on user data","Do":"{{ }} for all untrusted or dynamic content","Don't":"{!! !!} for user-controlled strings","Guideline":"Escape all output in Blade","No":46,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/46","stack":"laravel"},{"Category":"Security","Description":"Use policies for authorization — never inline permission checks in views","Do":"@can / Gate::allows() for UI visibility; policy()->authorize() for actions","Don't":"Hardcode role checks inline across templates","Guideline":"Protect routes with Gate and Policy","No":47,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/47","stack":"laravel"},{"Category":"Security","Description":"Check MIME type size and store outside public root","Do":"Store in storage/app/private + validate mimes and max","Don't":"Store raw upload in public/ without validation","Guideline":"Validate and authorize file uploads","No":48,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/48","stack":"laravel"},{"Category":"Security","Description":"Generate expiring URLs for private downloads or email confirmations","Do":"URL::signedRoute() or temporarySignedRoute()","Don't":"Expose sequential IDs in download URLs without auth","Guideline":"Use signed URLs for temporary links","No":49,"Severity":"High","domain":"stack/laravel","record_id":"stack/laravel/49","stack":"laravel"},{"Category":"Security","Description":"CSP headers prevent XSS injection of external scripts","Do":"spatie/laravel-csp or custom middleware to emit CSP header","Don't":"No CSP — browser runs any injected script","Guideline":"Set a strict Content Security Policy","No":50,"Severity":"Medium","domain":"stack/laravel","record_id":"stack/laravel/50","stack":"laravel"},{"Category":"Routing","Description":"App Router is the recommended approach in Next.js 14+","Do":"app/ directory with page.tsx","Don't":"pages/ for new projects","Guideline":"Use App Router for new projects","No":1,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/1","stack":"nextjs"},{"Category":"Routing","Description":"Create routes by adding files in app directory","Do":"page.tsx for routes layout.tsx for layouts","Don't":"Manual route configuration","Guideline":"Use file-based routing","No":2,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/2","stack":"nextjs"},{"Category":"Routing","Description":"Keep components styles tests with their routes","Do":"Component files alongside page.tsx","Don't":"Separate components folder","Guideline":"Colocate related files","No":3,"Severity":"Low","domain":"stack/nextjs","record_id":"stack/nextjs/3","stack":"nextjs"},{"Category":"Routing","Description":"Group routes without affecting URL","Do":"Parentheses for route groups","Don't":"Nested folders affecting URL","Guideline":"Use route groups for organization","No":4,"Severity":"Low","domain":"stack/nextjs","record_id":"stack/nextjs/4","stack":"nextjs"},{"Category":"Routing","Description":"Use loading.tsx for route loading UI","Do":"loading.tsx alongside page.tsx","Don't":"Manual loading state management","Guideline":"Handle loading states","No":5,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/5","stack":"nextjs"},{"Category":"Routing","Description":"Catch errors at route level","Do":"error.tsx with reset function","Don't":"try/catch in every component","Guideline":"Handle errors with error.tsx","No":6,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/6","stack":"nextjs"},{"Category":"Rendering","Description":"Server Components reduce client JS bundle","Do":"Keep components server by default","Don't":"Add 'use client' unnecessarily","Guideline":"Use Server Components by default","No":7,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/7","stack":"nextjs"},{"Category":"Rendering","Description":"'use client' for interactive components","Do":"Add 'use client' only when needed","Don't":"Server Component with hooks/events","Guideline":"Mark Client Components explicitly","No":8,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/8","stack":"nextjs"},{"Category":"Rendering","Description":"Keep Client Components as leaf nodes","Do":"Client wrapper for interactive parts only","Don't":"Mark page as Client Component","Guideline":"Push Client Components down","No":9,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/9","stack":"nextjs"},{"Category":"Rendering","Description":"Stream content with Suspense boundaries","Do":"Suspense for slow data fetches","Don't":"Wait for all data before render","Guideline":"Use streaming for better UX","No":10,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/10","stack":"nextjs"},{"Category":"Rendering","Description":"SSG for static SSR for dynamic ISR for semi-static","Do":"generateStaticParams for known paths","Don't":"SSR for static content","Guideline":"Choose correct rendering strategy","No":11,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/11","stack":"nextjs"},{"Category":"DataFetching","Description":"Fetch directly in async Server Components","Do":"async function Page() { const data = await fetch() }","Don't":"useEffect for initial data","Guideline":"Fetch data in Server Components","No":12,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/12","stack":"nextjs"},{"Category":"DataFetching","Description":"Next.js 15 changed defaults to uncached for fetch","Do":"Explicitly set cache: 'force-cache' for static data","Don't":"Assume default is cached (it's not in Next.js 15)","Guideline":"Configure caching explicitly (Next.js 15+)","No":13,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/13","stack":"nextjs"},{"Category":"DataFetching","Description":"React and Next.js dedupe same requests","Do":"Same fetch call in multiple components","Don't":"Manual request deduplication","Guideline":"Deduplicate fetch requests","No":14,"Severity":"Low","domain":"stack/nextjs","record_id":"stack/nextjs/14","stack":"nextjs"},{"Category":"DataFetching","Description":"Server Actions for form submissions","Do":"action={serverAction} in forms","Don't":"API route for every mutation","Guideline":"Use Server Actions for mutations","No":15,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/15","stack":"nextjs"},{"Category":"DataFetching","Description":"Use revalidatePath/revalidateTag after mutations","Do":"Revalidate after Server Action","Don't":"'use client' with manual refetch","Guideline":"Revalidate data appropriately","No":16,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/16","stack":"nextjs"},{"Category":"Images","Description":"Automatic image optimization and lazy loading","Do":"<Image> component for all images","Don't":"<img> tags directly","Guideline":"Use next/image for optimization","No":17,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/17","stack":"nextjs"},{"Category":"Images","Description":"Prevent layout shift with dimensions","Do":"width and height props or fill","Don't":"Missing dimensions","Guideline":"Provide width and height","No":18,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/18","stack":"nextjs"},{"Category":"Images","Description":"Fill container with object-fit","Do":"fill prop with relative parent","Don't":"Fixed dimensions for responsive","Guideline":"Use fill for responsive images","No":19,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/19","stack":"nextjs"},{"Category":"Images","Description":"Whitelist external image sources","Do":"remotePatterns in next.config.js","Don't":"Allow all domains","Guideline":"Configure remote image domains","No":20,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/20","stack":"nextjs"},{"Category":"Images","Description":"Mark above-fold images as priority","Do":"priority prop on hero images","Don't":"All images with priority","Guideline":"Use priority for LCP images","No":21,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/21","stack":"nextjs"},{"Category":"Fonts","Description":"Self-hosted fonts with zero layout shift","Do":"next/font/google or next/font/local","Don't":"External font links","Guideline":"Use next/font for fonts","No":22,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/22","stack":"nextjs"},{"Category":"Fonts","Description":"Set font in root layout for consistency","Do":"className on body in layout.tsx","Don't":"Font in individual pages","Guideline":"Apply font to layout","No":23,"Severity":"Low","domain":"stack/nextjs","record_id":"stack/nextjs/23","stack":"nextjs"},{"Category":"Fonts","Description":"Variable fonts reduce bundle size","Do":"Single variable font file","Don't":"Multiple font weights as files","Guideline":"Use variable fonts","No":24,"Severity":"Low","domain":"stack/nextjs","record_id":"stack/nextjs/24","stack":"nextjs"},{"Category":"Metadata","Description":"Generate metadata based on params","Do":"export async function generateMetadata()","Don't":"Hardcoded metadata everywhere","Guideline":"Use generateMetadata for dynamic","No":25,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/25","stack":"nextjs"},{"Category":"Metadata","Description":"Add OG images for social sharing","Do":"opengraph-image.tsx or og property","Don't":"Missing social preview images","Guideline":"Include OpenGraph images","No":26,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/26","stack":"nextjs"},{"Category":"Metadata","Description":"Export metadata object for static metadata","Do":"export const metadata = {}","Don't":"Manual head tags","Guideline":"Use metadata API","No":27,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/27","stack":"nextjs"},{"Category":"API","Description":"app/api routes for API endpoints","Do":"app/api/users/route.ts","Don't":"pages/api for new projects","Guideline":"Use Route Handlers for APIs","No":28,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/28","stack":"nextjs"},{"Category":"API","Description":"Use NextResponse for API responses","Do":"NextResponse.json() for JSON","Don't":"Plain objects or res.json()","Guideline":"Return proper Response objects","No":29,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/29","stack":"nextjs"},{"Category":"API","Description":"Export named functions for methods","Do":"Export GET POST PUT DELETE","Don't":"Single handler for all methods","Guideline":"Handle HTTP methods explicitly","No":30,"Severity":"Low","domain":"stack/nextjs","record_id":"stack/nextjs/30","stack":"nextjs"},{"Category":"API","Description":"Validate input before processing","Do":"Zod or similar for validation","Don't":"Trust client input","Guideline":"Validate request body","No":31,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/31","stack":"nextjs"},{"Category":"Middleware","Description":"Protect routes with middleware.ts","Do":"middleware.ts at root","Don't":"Auth check in every page","Guideline":"Use middleware for auth","No":32,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/32","stack":"nextjs"},{"Category":"Middleware","Description":"Configure middleware matcher","Do":"config.matcher for specific routes","Don't":"Run middleware on all routes","Guideline":"Match specific paths","No":33,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/33","stack":"nextjs"},{"Category":"Middleware","Description":"Middleware runs on Edge runtime","Do":"Edge-compatible code only","Don't":"Node.js APIs in middleware","Guideline":"Keep middleware edge-compatible","No":34,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/34","stack":"nextjs"},{"Category":"Environment","Description":"Client-accessible env vars need prefix","Do":"NEXT_PUBLIC_ for client vars","Don't":"Server vars exposed to client","Guideline":"Use NEXT_PUBLIC prefix","No":35,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/35","stack":"nextjs"},{"Category":"Environment","Description":"Check required env vars exist","Do":"Validate on startup","Don't":"Undefined env at runtime","Guideline":"Validate env vars","No":36,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/36","stack":"nextjs"},{"Category":"Environment","Description":"Local env file for development secrets","Do":".env.local gitignored","Don't":"Secrets in .env committed","Guideline":"Use .env.local for secrets","No":37,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/37","stack":"nextjs"},{"Category":"Performance","Description":"Use @next/bundle-analyzer","Do":"Bundle analyzer in dev","Don't":"Ship large bundles blindly","Guideline":"Analyze bundle size","No":38,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/38","stack":"nextjs"},{"Category":"Performance","Description":"Code split with next/dynamic","Do":"dynamic() for heavy components","Don't":"Import everything statically","Guideline":"Use dynamic imports","No":39,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/39","stack":"nextjs"},{"Category":"Performance","Description":"Reserve space for dynamic content","Do":"Skeleton loaders aspect ratios","Don't":"Content popping in","Guideline":"Avoid layout shifts","No":40,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/40","stack":"nextjs"},{"Category":"Performance","Description":"Combine static and dynamic in one route","Do":"Static shell with Suspense holes","Don't":"Full dynamic or static pages","Guideline":"Use Partial Prerendering","No":41,"Severity":"Low","domain":"stack/nextjs","record_id":"stack/nextjs/41","stack":"nextjs"},{"Category":"Link","Description":"Client-side navigation with prefetching","Do":"<Link href=\"\"> for internal links","Don't":"<a> for internal navigation","Guideline":"Use next/link for navigation","No":42,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/42","stack":"nextjs"},{"Category":"Link","Description":"Control prefetching behavior","Do":"prefetch={false} for low-priority","Don't":"Prefetch all links","Guideline":"Prefetch strategically","No":43,"Severity":"Low","domain":"stack/nextjs","record_id":"stack/nextjs/43","stack":"nextjs"},{"Category":"Link","Description":"Control scroll behavior on navigation","Do":"scroll={false} for tabs pagination","Don't":"Always scroll to top","Guideline":"Use scroll option appropriately","No":44,"Severity":"Low","domain":"stack/nextjs","record_id":"stack/nextjs/44","stack":"nextjs"},{"Category":"Config","Description":"Configure Next.js behavior","Do":"Proper config options","Don't":"Deprecated or wrong options","Guideline":"Use next.config.js correctly","No":45,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/45","stack":"nextjs"},{"Category":"Config","Description":"Catch potential issues early","Do":"reactStrictMode: true","Don't":"Strict mode disabled","Guideline":"Enable strict mode","No":46,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/46","stack":"nextjs"},{"Category":"Config","Description":"Use config for URL management","Do":"redirects() rewrites() in config","Don't":"Manual redirect handling","Guideline":"Configure redirects and rewrites","No":47,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/47","stack":"nextjs"},{"Category":"Deployment","Description":"Vercel optimized for Next.js","Do":"Deploy to Vercel","Don't":"Self-host without knowledge","Guideline":"Use Vercel for easiest deploy","No":48,"Severity":"Low","domain":"stack/nextjs","record_id":"stack/nextjs/48","stack":"nextjs"},{"Category":"Deployment","Description":"Set output option for deployment target","Do":"output: 'standalone' for Docker","Don't":"Default output for containers","Guideline":"Configure output for self-hosting","No":49,"Severity":"Medium","domain":"stack/nextjs","record_id":"stack/nextjs/49","stack":"nextjs"},{"Category":"Security","Description":"Never trust user input","Do":"Escape sanitize validate all input","Don't":"Direct interpolation of user data","Guideline":"Sanitize user input","No":50,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/50","stack":"nextjs"},{"Category":"Security","Description":"Content Security Policy for XSS protection","Do":"Configure CSP in next.config.js","Don't":"No security headers","Guideline":"Use CSP headers","No":51,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/51","stack":"nextjs"},{"Category":"Security","Description":"Server Actions are public endpoints","Do":"Validate and authorize in Server Action","Don't":"Trust Server Action input","Guideline":"Validate Server Action input","No":52,"Severity":"High","domain":"stack/nextjs","record_id":"stack/nextjs/52","stack":"nextjs"},{"Category":"Installation","Description":"Install and configure Nuxt UI in your Nuxt project","Do":"pnpm add @nuxt/ui and add to modules","Don't":"Manual component imports","Guideline":"Add Nuxt UI module","No":1,"Severity":"High","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/1","stack":"nuxt-ui"},{"Category":"Installation","Description":"Required CSS imports in main.css file","Do":"@import tailwindcss and @import @nuxt/ui","Don't":"Skip CSS imports","Guideline":"Import Tailwind and Nuxt UI CSS","No":2,"Severity":"High","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/2","stack":"nuxt-ui"},{"Category":"Installation","Description":"UApp provides global configs for Toast Tooltip and overlays","Do":"<UApp> wrapper in app.vue","Don't":"Skip UApp wrapper","Guideline":"Wrap app with UApp component","No":3,"Severity":"High","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/3","stack":"nuxt-ui"},{"Category":"Components","Description":"All Nuxt UI components use U prefix by default","Do":"UButton UInput UModal","Don't":"Button Input Modal","Guideline":"Use U prefix for components","No":4,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/4","stack":"nuxt-ui"},{"Category":"Components","Description":"Use semantic colors like primary secondary error","Do":"color=\"primary\" color=\"error\"","Don't":"Hardcoded colors","Guideline":"Use semantic color props","No":5,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/5","stack":"nuxt-ui"},{"Category":"Components","Description":"Nuxt UI provides solid outline soft subtle ghost link variants","Do":"variant=\"soft\" variant=\"outline\"","Don't":"Custom button classes","Guideline":"Use variant prop for styling","No":6,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/6","stack":"nuxt-ui"},{"Category":"Components","Description":"Components support xs sm md lg xl sizes","Do":"size=\"sm\" size=\"lg\"","Don't":"Arbitrary sizing classes","Guideline":"Use size prop consistently","No":7,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/7","stack":"nuxt-ui"},{"Category":"Icons","Description":"Nuxt UI v4 uses Iconify i-prefix format — lucide:home is v3 legacy","Do":"i-lucide-home i-heroicons-user format","Don't":"lucide:home format (v3 syntax)","Guideline":"Use i-{collection}-{name} format for icons","No":8,"Severity":"High","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/8","stack":"nuxt-ui"},{"Category":"Icons","Description":"Position icons with dedicated props for clarity","Do":"leadingIcon=\"i-lucide-plus\" trailingIcon=\"i-lucide-arrow-right\"","Don't":"Manual icon positioning or slots","Guideline":"Use leadingIcon and trailingIcon props","No":9,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/9","stack":"nuxt-ui"},{"Category":"Theming","Description":"Runtime color configuration without restart","Do":"ui.colors.primary in app.config.ts","Don't":"Hardcoded colors in components","Guideline":"Configure colors in app.config.ts","No":10,"Severity":"High","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/10","stack":"nuxt-ui"},{"Category":"Theming","Description":"Define design tokens in CSS with Tailwind @theme","Do":"@theme { --color-brand-500: #xxx }","Don't":"Inline color definitions","Guideline":"Use @theme directive for custom colors","No":11,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/11","stack":"nuxt-ui"},{"Category":"Theming","Description":"Register new colors like tertiary in theme.colors","Do":"theme.colors array in ui config","Don't":"Use undefined colors","Guideline":"Extend semantic colors in nuxt.config","No":12,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/12","stack":"nuxt-ui"},{"Category":"Forms","Description":"UForm supports Zod Yup Joi Valibot schemas","Do":":schema prop with validation schema","Don't":"Manual form validation","Guideline":"Use UForm with schema validation","No":13,"Severity":"High","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/13","stack":"nuxt-ui"},{"Category":"Forms","Description":"Provides label error message and validation display","Do":"UFormField with name prop","Don't":"Manual error handling","Guideline":"Use UFormField for field wrapper","No":14,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/14","stack":"nuxt-ui"},{"Category":"Forms","Description":"UForm emits submit event with validated data","Do":"@submit handler on UForm","Don't":"@click on submit button","Guideline":"Handle form submit with @submit","No":15,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/15","stack":"nuxt-ui"},{"Category":"Forms","Description":"Control when validation triggers (blur change input)","Do":"validateOn=\"['blur']\" for performance","Don't":"Always validate on input","Guideline":"Use validateOn prop for validation timing","No":16,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/16","stack":"nuxt-ui"},{"Category":"Overlays","Description":"Modal Slideover Drawer use v-model:open","Do":"v-model:open for controlled state","Don't":"Manual show/hide logic","Guideline":"Use v-model:open for overlay control","No":17,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/17","stack":"nuxt-ui"},{"Category":"Overlays","Description":"Open overlays programmatically — v4 API is create().open() not open(Component)","Do":"overlay.create(Component).open({ props }) pattern","Don't":"v3 overlay.open(Component) pattern (removed in v4)","Guideline":"Use useOverlay composable for programmatic overlays","No":18,"Severity":"High","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/18","stack":"nuxt-ui"},{"Category":"Overlays","Description":"Built-in header support for overlays","Do":"title=\"Confirm\" description=\"Are you sure?\"","Don't":"Manual header content","Guideline":"Use title and description props","No":19,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/19","stack":"nuxt-ui"},{"Category":"Dashboard","Description":"Provides collapsible resizable sidebar with mobile support","Do":"UDashboardSidebar with header default footer slots","Don't":"Custom sidebar implementation","Guideline":"Use UDashboardSidebar for navigation","No":20,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/20","stack":"nuxt-ui"},{"Category":"Dashboard","Description":"Wraps dashboard components with sidebar state management","Do":"UDashboardGroup > UDashboardSidebar + UDashboardPanel","Don't":"Manual layout flex containers","Guideline":"Use UDashboardGroup for layout","No":21,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/21","stack":"nuxt-ui"},{"Category":"Dashboard","Description":"Responsive navbar with mobile menu support","Do":"UDashboardNavbar in dashboard layout","Don't":"Custom navbar implementation","Guideline":"Use UDashboardNavbar for top navigation","No":22,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/22","stack":"nuxt-ui"},{"Category":"Tables","Description":"Powered by TanStack Table with built-in features","Do":":data and :columns props","Don't":"Manual table markup","Guideline":"Use UTable with data and columns props","No":23,"Severity":"High","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/23","stack":"nuxt-ui"},{"Category":"Tables","Description":"Column definitions use accessorKey for data binding","Do":"accessorKey: 'email' in column def","Don't":"String column names only","Guideline":"Define columns with accessorKey","No":24,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/24","stack":"nuxt-ui"},{"Category":"Tables","Description":"Customize cell content with scoped slots","Do":"#cell-columnName slot","Don't":"Override entire table","Guideline":"Use cell slot for custom rendering","No":25,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/25","stack":"nuxt-ui"},{"Category":"Tables","Description":"Add sortable: true to column definition","Do":"sortable: true in column","Don't":"Manual sort implementation","Guideline":"Enable sorting with sortable column option","No":26,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/26","stack":"nuxt-ui"},{"Category":"Navigation","Description":"Horizontal or vertical navigation with dropdown support","Do":"UNavigationMenu with items array","Don't":"Manual nav with v-for","Guideline":"Use UNavigationMenu for nav links","No":27,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/27","stack":"nuxt-ui"},{"Category":"Navigation","Description":"Automatic breadcrumb with NuxtLink support","Do":":items array with label and to","Don't":"Manual breadcrumb links","Guideline":"Use UBreadcrumb for page hierarchy","No":28,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/28","stack":"nuxt-ui"},{"Category":"Navigation","Description":"Tab navigation with content panels","Do":"UTabs with items containing slot content","Don't":"Manual tab state","Guideline":"Use UTabs for tabbed content","No":29,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/29","stack":"nuxt-ui"},{"Category":"Feedback","Description":"Composable for toast notifications","Do":"useToast().add({ title description })","Don't":"Alert components for toasts","Guideline":"Use useToast for notifications","No":30,"Severity":"High","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/30","stack":"nuxt-ui"},{"Category":"Feedback","Description":"Static alert messages with icon and actions","Do":"UAlert with title description color","Don't":"Toast for static messages","Guideline":"Use UAlert for inline messages","No":31,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/31","stack":"nuxt-ui"},{"Category":"Feedback","Description":"Placeholder content during data loading","Do":"USkeleton with appropriate size","Don't":"Spinner for content loading","Guideline":"Use USkeleton for loading states","No":32,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/32","stack":"nuxt-ui"},{"Category":"Color Mode","Description":"Built-in light/dark mode toggle button","Do":"UColorModeButton component","Don't":"Manual color mode logic","Guideline":"Use UColorModeButton for theme toggle","No":33,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/33","stack":"nuxt-ui"},{"Category":"Color Mode","Description":"Dropdown to select system light or dark mode","Do":"UColorModeSelect component","Don't":"Custom select for theme","Guideline":"Use UColorModeSelect for theme picker","No":34,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/34","stack":"nuxt-ui"},{"Category":"Customization","Description":"Override component styles via ui prop","Do":"ui prop with slot class overrides","Don't":"Global CSS overrides","Guideline":"Use ui prop for component styling","No":35,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/35","stack":"nuxt-ui"},{"Category":"Customization","Description":"Set default color and size for all components","Do":"theme.defaultVariants in ui config","Don't":"Repeat props on every component","Guideline":"Configure default variants in nuxt.config","No":36,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/36","stack":"nuxt-ui"},{"Category":"Customization","Description":"Runtime theme customization","Do":"defineAppConfig with ui key","Don't":"nuxt.config for runtime values","Guideline":"Use app.config.ts for theme overrides","No":37,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/37","stack":"nuxt-ui"},{"Category":"Performance","Description":"Tree-shake unused component CSS","Do":"experimental.componentDetection: true","Don't":"Include all component CSS","Guideline":"Enable component detection","No":38,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/38","stack":"nuxt-ui"},{"Category":"Performance","Description":"Enable virtualization for 1000+ rows","Do":":virtualize prop on UTable","Don't":"Render all rows","Guideline":"Use UTable virtualize for large data","No":39,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/39","stack":"nuxt-ui"},{"Category":"Accessibility","Description":"Components have built-in ARIA support","Do":"Use title description label props","Don't":"Skip accessibility props","Guideline":"Use semantic component props","No":40,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/40","stack":"nuxt-ui"},{"Category":"Accessibility","Description":"Automatic label-input association","Do":"UFormField wraps inputs","Don't":"Manual id and for attributes","Guideline":"Use UFormField for form accessibility","No":41,"Severity":"High","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/41","stack":"nuxt-ui"},{"Category":"Content","Description":"Automatic TOC with active heading highlight","Do":"UContentToc with :links","Don't":"Manual TOC implementation","Guideline":"Use UContentToc for table of contents","No":42,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/42","stack":"nuxt-ui"},{"Category":"Content","Description":"Command palette for documentation search","Do":"UContentSearch with Nuxt Content","Don't":"Custom search implementation","Guideline":"Use UContentSearch for docs search","No":43,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/43","stack":"nuxt-ui"},{"Category":"AI/Chat","Description":"Designed for Vercel AI SDK integration","Do":"UChatMessages with messages array","Don't":"Custom chat message list","Guideline":"Use UChatMessages for chat UI","No":44,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/44","stack":"nuxt-ui"},{"Category":"AI/Chat","Description":"Enhanced textarea for AI prompts","Do":"UChatPrompt with v-model","Don't":"Basic textarea","Guideline":"Use UChatPrompt for input","No":45,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/45","stack":"nuxt-ui"},{"Category":"Editor","Description":"TipTap-based editor with toolbar support","Do":"UEditor with v-model:content","Don't":"Custom TipTap setup","Guideline":"Use UEditor for rich text","No":46,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/46","stack":"nuxt-ui"},{"Category":"Links","Description":"UButton and ULink support NuxtLink to prop","Do":"to=\"/dashboard\" for internal links","Don't":"href for internal navigation","Guideline":"Use to prop for navigation","No":47,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/47","stack":"nuxt-ui"},{"Category":"Links","Description":"Explicitly mark external links","Do":"target=\"_blank\" with external URLs","Don't":"Forget rel=\"noopener\"","Guideline":"Use external prop for outside links","No":48,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/48","stack":"nuxt-ui"},{"Category":"Loading","Description":"Automatic loading state from @click promise","Do":"loadingAuto prop on UButton","Don't":"Manual loading state","Guideline":"Use loadingAuto on buttons","No":49,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/49","stack":"nuxt-ui"},{"Category":"Loading","Description":"Auto-disable form during submit","Do":"loadingAuto on UForm (default true)","Don't":"Manual form disabled state","Guideline":"Use UForm loadingAuto","No":50,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/50","stack":"nuxt-ui"},{"Category":"Installation","Description":"Nuxt UI v4 auto-registers @nuxt/icon @nuxt/fonts @nuxtjs/color-mode","Do":"Configure via root-level keys in nuxt.config","Don't":"Adding them to modules array causes duplicate registration","Guideline":"Do not manually add auto-registered modules","No":51,"Severity":"High","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/51","stack":"nuxt-ui"},{"Category":"Installation","Description":"Nuxt UI provides starter templates via nuxi init","Do":"npx nuxi init -t ui/dashboard for dashboard project","Don't":"Manual project setup from scratch","Guideline":"Use official templates to bootstrap projects","No":52,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/52","stack":"nuxt-ui"},{"Category":"Icons","Description":"Local Iconify JSON prevents network requests and flash","Do":"pnpm i @iconify-json/lucide for reliable server rendering","Don't":"Rely on remote icon fetching in production","Guideline":"Install icon collections locally for SSR","No":53,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/53","stack":"nuxt-ui"},{"Category":"Icons","Description":"Components use default icons configurable via appConfig.ui.icons","Do":"Set loading close check icons in app.config.ts","Don't":"Accept default icons for all components","Guideline":"Override default component icons globally","No":54,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/54","stack":"nuxt-ui"},{"Category":"Forms","Description":"Built-in drag-drop and preview support","Do":"UFileUpload with v-model and accept prop","Don't":"Custom input type=file","Guideline":"Use UFileUpload for file input","No":55,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/55","stack":"nuxt-ui"},{"Category":"Forms","Description":"Locale-aware date picker built on UCalendar","Do":"UInputDate with v-model and locale prop","Don't":"Third-party date picker libraries","Guideline":"Use UInputDate for date selection","No":56,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/56","stack":"nuxt-ui"},{"Category":"Forms","Description":"Multi-value tag input with keyboard support","Do":"UInputTags with v-model and max prop","Don't":"Custom chip input implementation","Guideline":"Use UInputTags for tag input","No":57,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/57","stack":"nuxt-ui"},{"Category":"Forms","Description":"Full-featured color picker with multiple format support","Do":"UColorPicker with v-model and format prop","Don't":"Native input type=color","Guideline":"Use UColorPicker for color selection","No":58,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/58","stack":"nuxt-ui"},{"Category":"Data","Description":"Built-in tree component with expand/collapse","Do":"UTree with items prop containing nested children","Don't":"Custom recursive component","Guideline":"Use UTree for hierarchical data","No":59,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/59","stack":"nuxt-ui"},{"Category":"Data","Description":"Animated infinite scroll band for logos or testimonials","Do":"UMarquee with repeat and pauseOnHover props","Don't":"CSS animation keyframes loop","Guideline":"Use UMarquee for infinite scroll content","No":60,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/60","stack":"nuxt-ui"},{"Category":"Overlays","Description":"Context menu triggered by right-click on children","Do":"UContextMenu wrapping target element","Don't":"Browser default context menu","Guideline":"Use UContextMenu for right-click menus","No":61,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/61","stack":"nuxt-ui"},{"Category":"Overlays","Description":"useOverlay returns a result Promise resolving to user action","Do":"await instance.result to get confirm/cancel","Don't":"Emit events from overlay components","Guideline":"Await overlay result for confirmation dialogs","No":62,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/62","stack":"nuxt-ui"},{"Category":"Navigation","Description":"Command palette supports grouped search with icons and kbds","Do":"groups array with id label items","Don't":"Flat list without categories","Guideline":"Use UCommandPalette with grouped items","No":63,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/63","stack":"nuxt-ui"},{"Category":"Navigation","Description":"Wire keyboard shortcuts from menu item kbds automatically","Do":"extractShortcuts(items) + defineShortcuts to sync keybindings","Don't":"Manually duplicate shortcuts from menu items","Guideline":"Use defineShortcuts with extractShortcuts","No":64,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/64","stack":"nuxt-ui"},{"Category":"Layout","Description":"Responsive header/footer with built-in mobile menu","Do":"UHeader with #default slot for nav UFooter with columns","Don't":"Custom header/footer from scratch","Guideline":"Use UHeader and UFooter for page layout","No":65,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/65","stack":"nuxt-ui"},{"Category":"Layout","Description":"Sidebar that hides below lg breakpoint automatically","Do":"UPageAside for docs and landing page sidebars","Don't":"Manual hidden lg: classes","Guideline":"Use UPageAside for sidebar content","No":66,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/66","stack":"nuxt-ui"},{"Category":"Color Mode","Description":"Prevents hydration mismatch on server-rendered color mode","Do":"ClientOnly with fallback placeholder","Don't":"Direct useColorMode in template without ClientOnly","Guideline":"Wrap custom color mode toggles in ClientOnly","No":67,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/67","stack":"nuxt-ui"},{"Category":"Theming","Description":"Nuxt UI generates theme files listing all component slots and variants","Do":"Check .nuxt/ui/<component>.ts for slot names","Don't":"Guess slot names or use trial-and-error","Guideline":"Read generated theme file to find slot names","No":68,"Severity":"Medium","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/68","stack":"nuxt-ui"},{"Category":"Composables","Description":"whenever array condition prevents shortcut firing when inactive","Do":"whenever: [isFormValid] to guard shortcut execution","Don't":"Always-on shortcuts that fire in wrong context","Guideline":"Use defineShortcuts whenever keyword shortcut","No":69,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/69","stack":"nuxt-ui"},{"Category":"i18n","Description":"Nuxt UI supports 50+ built-in locales via locale prop on UApp","Do":"Import locale from @nuxt/ui/locale and pass to UApp","Don't":"Manual translation of component UI strings","Guideline":"Use UApp locale prop for internationalization","No":70,"Severity":"Low","domain":"stack/nuxt-ui","record_id":"stack/nuxt-ui/70","stack":"nuxt-ui"},{"Category":"Routing","Description":"Create routes by adding files in pages directory","Do":"pages/ directory with index.vue","Don't":"Manual route configuration","Guideline":"Use file-based routing","No":1,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/1","stack":"nuxtjs"},{"Category":"Routing","Description":"Create dynamic routes with bracket syntax","Do":"[id].vue for dynamic params","Don't":"Hardcoded routes for dynamic content","Guideline":"Use dynamic route parameters","No":2,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/2","stack":"nuxtjs"},{"Category":"Routing","Description":"Handle multiple path segments with [...slug]","Do":"[...slug].vue for catch-all","Don't":"Multiple nested dynamic routes","Guideline":"Use catch-all routes","No":3,"Severity":"Low","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/3","stack":"nuxtjs"},{"Category":"Routing","Description":"Set page-level configuration and middleware","Do":"definePageMeta for layout middleware title","Don't":"Manual route meta configuration","Guideline":"Define page metadata with definePageMeta","No":4,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/4","stack":"nuxtjs"},{"Category":"Routing","Description":"Validate dynamic route parameters before rendering","Do":"validate function in definePageMeta","Don't":"Manual validation in setup","Guideline":"Use validate for route params","No":5,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/5","stack":"nuxtjs"},{"Category":"Rendering","Description":"Server-side rendering is enabled by default","Do":"Keep ssr: true (default)","Don't":"Disable SSR unnecessarily","Guideline":"Use SSR by default","No":6,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/6","stack":"nuxtjs"},{"Category":"Rendering","Description":"Mark components to render only on client","Do":"ComponentName.client.vue suffix","Don't":"v-if with process.client check","Guideline":"Use .client suffix for client-only components","No":7,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/7","stack":"nuxtjs"},{"Category":"Rendering","Description":"Mark components to render only on server","Do":"ComponentName.server.vue suffix","Don't":"Manual server check","Guideline":"Use .server suffix for server-only components","No":8,"Severity":"Low","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/8","stack":"nuxtjs"},{"Category":"DataFetching","Description":"Wrapper around useAsyncData for URL fetching","Do":"useFetch for API calls","Don't":"$fetch in onMounted","Guideline":"Use useFetch for simple data fetching","No":9,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/9","stack":"nuxtjs"},{"Category":"DataFetching","Description":"Fine-grained control over async data","Do":"useAsyncData for CMS or custom fetching","Don't":"useFetch for non-URL data sources","Guideline":"Use useAsyncData for complex fetching","No":10,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/10","stack":"nuxtjs"},{"Category":"DataFetching","Description":"$fetch for event handlers and non-component code","Do":"$fetch in event handlers or server routes","Don't":"useFetch in click handlers","Guideline":"Use $fetch for non-reactive requests","No":11,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/11","stack":"nuxtjs"},{"Category":"DataFetching","Description":"Defer data fetching for better initial load","Do":"lazy: true for below-fold content","Don't":"Blocking fetch for non-critical data","Guideline":"Use lazy option for non-blocking fetch","No":12,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/12","stack":"nuxtjs"},{"Category":"DataFetching","Description":"Choose where data is fetched","Do":"server: false for client-only data","Don't":"Server fetch for user-specific client data","Guideline":"Use server option to control fetch location","No":13,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/13","stack":"nuxtjs"},{"Category":"DataFetching","Description":"Select only needed fields from response","Do":"pick option for large responses","Don't":"Fetching entire objects when few fields needed","Guideline":"Use pick to reduce payload size","No":14,"Severity":"Low","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/14","stack":"nuxtjs"},{"Category":"DataFetching","Description":"Transform data before storing in state","Do":"transform option for data shaping","Don't":"Manual transformation after fetch","Guideline":"Use transform for data manipulation","No":15,"Severity":"Low","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/15","stack":"nuxtjs"},{"Category":"DataFetching","Description":"Always handle pending and error states","Do":"Check status pending error refs","Don't":"Ignoring loading states","Guideline":"Handle loading and error states","No":16,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/16","stack":"nuxtjs"},{"Category":"Lifecycle","Description":"Move side effects to lifecycle hooks","Do":"Side effects in onMounted","Don't":"setInterval in root script setup","Guideline":"Avoid side effects in script setup root","No":17,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/17","stack":"nuxtjs"},{"Category":"Lifecycle","Description":"Access DOM only after component is mounted","Do":"onMounted for DOM manipulation","Don't":"Direct DOM access in setup","Guideline":"Use onMounted for DOM access","No":18,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/18","stack":"nuxtjs"},{"Category":"Lifecycle","Description":"Wait for DOM updates before accessing elements","Do":"await nextTick() after state changes","Don't":"Immediate DOM access after state change","Guideline":"Use nextTick for post-render access","No":19,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/19","stack":"nuxtjs"},{"Category":"Lifecycle","Description":"Run code before Nuxt hydrates the page","Do":"onPrehydrate for client setup","Don't":"onMounted for hydration-critical code","Guideline":"Use onPrehydrate for pre-hydration logic","No":20,"Severity":"Low","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/20","stack":"nuxtjs"},{"Category":"Server","Description":"Create API endpoints in server/api directory","Do":"server/api/users.ts for /api/users","Don't":"Manual Express setup","Guideline":"Use server/api for API routes","No":21,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/21","stack":"nuxtjs"},{"Category":"Server","Description":"Define server route handlers","Do":"defineEventHandler for all handlers","Don't":"export default function","Guideline":"Use defineEventHandler for handlers","No":22,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/22","stack":"nuxtjs"},{"Category":"Server","Description":"Routes without /api prefix","Do":"server/routes for custom paths","Don't":"server/api for non-api routes","Guideline":"Use server/routes for non-api routes","No":23,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/23","stack":"nuxtjs"},{"Category":"Server","Description":"Access query params and request body","Do":"getQuery(event) readBody(event)","Don't":"Direct event access","Guideline":"Use getQuery and readBody for input","No":24,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/24","stack":"nuxtjs"},{"Category":"Server","Description":"Always validate input in server handlers","Do":"Zod or similar for validation","Don't":"Trust client input","Guideline":"Validate server input","No":25,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/25","stack":"nuxtjs"},{"Category":"State","Description":"SSR-friendly shared state across components","Do":"useState for cross-component state","Don't":"ref for shared state","Guideline":"Use useState for shared reactive state","No":26,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/26","stack":"nuxtjs"},{"Category":"State","Description":"Prevent state conflicts with unique keys","Do":"Descriptive unique keys for each state","Don't":"Generic or duplicate keys","Guideline":"Use unique keys for useState","No":27,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/27","stack":"nuxtjs"},{"Category":"State","Description":"Pinia for advanced state management","Do":"@pinia/nuxt for complex apps","Don't":"Custom state management","Guideline":"Use Pinia for complex state","No":28,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/28","stack":"nuxtjs"},{"Category":"State","Description":"Ensure async operations run only once","Do":"callOnce for store initialization","Don't":"Direct await in component","Guideline":"Use callOnce for one-time async operations","No":29,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/29","stack":"nuxtjs"},{"Category":"SEO","Description":"Type-safe SEO meta tag management","Do":"useSeoMeta for meta tags","Don't":"useHead for simple meta","Guideline":"Use useSeoMeta for SEO tags","No":30,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/30","stack":"nuxtjs"},{"Category":"SEO","Description":"Dynamic SEO tags with refs or getters","Do":"Computed getters for dynamic values","Don't":"Static values for dynamic content","Guideline":"Use reactive values in useSeoMeta","No":31,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/31","stack":"nuxtjs"},{"Category":"SEO","Description":"Scripts styles links in head","Do":"useHead for scripts and links","Don't":"useSeoMeta for scripts","Guideline":"Use useHead for non-meta head elements","No":32,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/32","stack":"nuxtjs"},{"Category":"SEO","Description":"Add OG tags for social sharing","Do":"ogTitle ogDescription ogImage","Don't":"Missing social preview","Guideline":"Include OpenGraph tags","No":33,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/33","stack":"nuxtjs"},{"Category":"Middleware","Description":"Define route middleware properly","Do":"defineNuxtRouteMiddleware wrapper","Don't":"export default function","Guideline":"Use defineNuxtRouteMiddleware","No":34,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/34","stack":"nuxtjs"},{"Category":"Middleware","Description":"Redirect in middleware with navigateTo","Do":"return navigateTo('/login')","Don't":"router.push in middleware","Guideline":"Use navigateTo for redirects","No":35,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/35","stack":"nuxtjs"},{"Category":"Middleware","Description":"Apply middleware to specific pages","Do":"middleware array in definePageMeta","Don't":"Global middleware for page-specific","Guideline":"Reference middleware in definePageMeta","No":36,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/36","stack":"nuxtjs"},{"Category":"Middleware","Description":"Apply middleware to all routes","Do":"auth.global.ts for app-wide auth","Don't":"Manual middleware on every page","Guideline":"Use .global suffix for global middleware","No":37,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/37","stack":"nuxtjs"},{"Category":"ErrorHandling","Description":"Create errors with proper status codes","Do":"createError with statusCode","Don't":"throw new Error","Guideline":"Use createError for errors","No":38,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/38","stack":"nuxtjs"},{"Category":"ErrorHandling","Description":"Handle errors within component subtree","Do":"NuxtErrorBoundary for component errors","Don't":"Global error page for local errors","Guideline":"Use NuxtErrorBoundary for local errors","No":39,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/39","stack":"nuxtjs"},{"Category":"ErrorHandling","Description":"Clear error state and optionally redirect","Do":"clearError({ redirect: '/' })","Don't":"Manual error state reset","Guideline":"Use clearError to recover from errors","No":40,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/40","stack":"nuxtjs"},{"Category":"ErrorHandling","Description":"Keep statusMessage brief for security","Do":"Short generic messages","Don't":"Detailed error info in statusMessage","Guideline":"Use short statusMessage","No":41,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/41","stack":"nuxtjs"},{"Category":"Link","Description":"Client-side navigation with prefetching","Do":"<NuxtLink to> for internal links","Don't":"<a href> for internal links","Guideline":"Use NuxtLink for internal navigation","No":42,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/42","stack":"nuxtjs"},{"Category":"Link","Description":"Control when prefetching occurs","Do":"prefetchOn for interaction-based","Don't":"Default prefetch for low-priority","Guideline":"Configure prefetch behavior","No":43,"Severity":"Low","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/43","stack":"nuxtjs"},{"Category":"Link","Description":"Navigate programmatically","Do":"useRouter().push() for navigation","Don't":"Direct window.location","Guideline":"Use useRouter for programmatic navigation","No":44,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/44","stack":"nuxtjs"},{"Category":"Link","Description":"Navigate outside components","Do":"navigateTo() in middleware or plugins","Don't":"useRouter in non-component code","Guideline":"Use navigateTo in composables","No":45,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/45","stack":"nuxtjs"},{"Category":"AutoImports","Description":"Use auto-imported composables directly","Do":"Direct use of ref computed useFetch","Don't":"Manual imports for Nuxt composables","Guideline":"Leverage auto-imports","No":46,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/46","stack":"nuxtjs"},{"Category":"AutoImports","Description":"Explicit imports when needed","Do":"#imports for clarity or disabled auto-imports","Don't":"import from 'vue' when auto-import enabled","Guideline":"Use #imports for explicit imports","No":47,"Severity":"Low","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/47","stack":"nuxtjs"},{"Category":"AutoImports","Description":"Add external package auto-imports","Do":"imports.presets in nuxt.config","Don't":"Manual imports everywhere","Guideline":"Configure third-party auto-imports","No":48,"Severity":"Low","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/48","stack":"nuxtjs"},{"Category":"Plugins","Description":"Define plugins properly","Do":"defineNuxtPlugin wrapper","Don't":"export default function","Guideline":"Use defineNuxtPlugin","No":49,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/49","stack":"nuxtjs"},{"Category":"Plugins","Description":"Provide helpers across app","Do":"return { provide: {} } for type safety","Don't":"nuxtApp.provide without types","Guideline":"Use provide for injection","No":50,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/50","stack":"nuxtjs"},{"Category":"Plugins","Description":"Control plugin execution environment","Do":"plugin.client.ts for client-only","Don't":"if (process.client) checks","Guideline":"Use .client or .server suffix","No":51,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/51","stack":"nuxtjs"},{"Category":"Environment","Description":"Access environment variables safely","Do":"runtimeConfig in nuxt.config","Don't":"process.env directly","Guideline":"Use runtimeConfig for env vars","No":52,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/52","stack":"nuxtjs"},{"Category":"Environment","Description":"Override config with environment variables","Do":"NUXT_API_SECRET NUXT_PUBLIC_API_BASE","Don't":"Custom env var names","Guideline":"Use NUXT_ prefix for env override","No":53,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/53","stack":"nuxtjs"},{"Category":"Environment","Description":"Get public config in components","Do":"useRuntimeConfig().public","Don't":"Direct process.env access","Guideline":"Access public config with useRuntimeConfig","No":54,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/54","stack":"nuxtjs"},{"Category":"Environment","Description":"Server-only secrets in runtimeConfig root","Do":"runtimeConfig.apiSecret (server only)","Don't":"Secrets in public config","Guideline":"Keep secrets in private config","No":55,"Severity":"High","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/55","stack":"nuxtjs"},{"Category":"Performance","Description":"Lazy load components with Lazy prefix","Do":"<LazyComponent> for below-fold","Don't":"Eager load all components","Guideline":"Use Lazy prefix for code splitting","No":56,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/56","stack":"nuxtjs"},{"Category":"Performance","Description":"Alias for useFetch with lazy: true","Do":"useLazyFetch for secondary data","Don't":"useFetch for all requests","Guideline":"Use useLazyFetch for non-blocking data","No":57,"Severity":"Medium","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/57","stack":"nuxtjs"},{"Category":"Performance","Description":"Delay component hydration until needed","Do":"LazyComponent with hydration strategy","Don't":"Immediate hydration for all","Guideline":"Use lazy hydration for interactivity","No":58,"Severity":"Low","domain":"stack/nuxtjs","record_id":"stack/nuxtjs/58","stack":"nuxtjs"},{"Category":"Components","Description":"Hooks-based components are standard","Do":"Functional components with hooks","Don't":"Class components","Guideline":"Use functional components","No":1,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/1","stack":"react-native"},{"Category":"Components","Description":"Single responsibility principle","Do":"Split into smaller components","Don't":"Large monolithic components","Guideline":"Keep components small","No":2,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/2","stack":"react-native"},{"Category":"Components","Description":"Type safety for props and state","Do":"TypeScript for new projects","Don't":"JavaScript without types","Guideline":"Use TypeScript","No":3,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/3","stack":"react-native"},{"Category":"Components","Description":"Keep related files together","Do":"Component folder with styles","Don't":"Flat structure","Guideline":"Colocate component files","No":4,"Severity":"Low","domain":"stack/react-native","record_id":"stack/react-native/4","stack":"react-native"},{"Category":"Styling","Description":"Optimized style objects","Do":"StyleSheet for all styles","Don't":"Inline style objects","Guideline":"Use StyleSheet.create","No":5,"Severity":"High","domain":"stack/react-native","record_id":"stack/react-native/5","stack":"react-native"},{"Category":"Styling","Description":"Prevent object recreation","Do":"Styles in StyleSheet","Don't":"Inline style objects in render","Guideline":"Avoid inline styles","No":6,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/6","stack":"react-native"},{"Category":"Styling","Description":"React Native uses flexbox","Do":"flexDirection alignItems justifyContent","Don't":"Absolute positioning everywhere","Guideline":"Use flexbox for layout","No":7,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/7","stack":"react-native"},{"Category":"Styling","Description":"Platform-specific styles","Do":"Platform.select or .ios/.android files","Don't":"Same styles for both platforms","Guideline":"Handle platform differences","No":8,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/8","stack":"react-native"},{"Category":"Styling","Description":"Scale for different screens","Do":"Dimensions or useWindowDimensions","Don't":"Fixed pixel values","Guideline":"Use responsive dimensions","No":9,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/9","stack":"react-native"},{"Category":"Navigation","Description":"Standard navigation library","Do":"React Navigation for routing","Don't":"Manual navigation management","Guideline":"Use React Navigation","No":10,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/10","stack":"react-native"},{"Category":"Navigation","Description":"Type-safe navigation","Do":"Typed navigation props","Don't":"Untyped navigation","Guideline":"Type navigation params","No":11,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/11","stack":"react-native"},{"Category":"Navigation","Description":"Support URL-based navigation","Do":"Configure linking prop","Don't":"No deep link support","Guideline":"Use deep linking","No":12,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/12","stack":"react-native"},{"Category":"Navigation","Description":"Android back button handling","Do":"useFocusEffect with BackHandler","Don't":"Ignore back button","Guideline":"Handle back button","No":13,"Severity":"High","domain":"stack/react-native","record_id":"stack/react-native/13","stack":"react-native"},{"Category":"State","Description":"Simple component state","Do":"useState for UI state","Don't":"Class component state","Guideline":"Use useState for local state","No":14,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/14","stack":"react-native"},{"Category":"State","Description":"Complex state logic","Do":"useReducer for related state","Don't":"Multiple useState for related values","Guideline":"Use useReducer for complex state","No":15,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/15","stack":"react-native"},{"Category":"State","Description":"Context for global state","Do":"Context for theme auth locale","Don't":"Context for frequently changing data","Guideline":"Use context sparingly","No":16,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/16","stack":"react-native"},{"Category":"State","Description":"External state management","Do":"Zustand for simple Redux for complex","Don't":"useState for global state","Guideline":"Consider Zustand or Redux","No":17,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/17","stack":"react-native"},{"Category":"Lists","Description":"Virtualized list rendering","Do":"FlatList for 50+ items","Don't":"ScrollView with map","Guideline":"Use FlatList for long lists","No":18,"Severity":"High","domain":"stack/react-native","record_id":"stack/react-native/18","stack":"react-native"},{"Category":"Lists","Description":"Unique keys for list items","Do":"keyExtractor with stable ID","Don't":"Index as key","Guideline":"Provide keyExtractor","No":19,"Severity":"High","domain":"stack/react-native","record_id":"stack/react-native/19","stack":"react-native"},{"Category":"Lists","Description":"Memoize list item components","Do":"React.memo for list items","Don't":"Inline render function","Guideline":"Optimize renderItem","No":20,"Severity":"High","domain":"stack/react-native","record_id":"stack/react-native/20","stack":"react-native"},{"Category":"Lists","Description":"Skip measurement for performance","Do":"getItemLayout when height known","Don't":"Dynamic measurement for fixed items","Guideline":"Use getItemLayout for fixed height","No":21,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/21","stack":"react-native"},{"Category":"Lists","Description":"Control render window","Do":"Smaller windowSize for memory","Don't":"Default windowSize for large lists","Guideline":"Implement windowSize","No":22,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/22","stack":"react-native"},{"Category":"Performance","Description":"Prevent unnecessary re-renders","Do":"memo for pure components","Don't":"No memoization","Guideline":"Use React.memo","No":23,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/23","stack":"react-native"},{"Category":"Performance","Description":"Stable function references","Do":"useCallback for props","Don't":"New function on every render","Guideline":"Use useCallback for handlers","No":24,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/24","stack":"react-native"},{"Category":"Performance","Description":"Cache expensive calculations","Do":"useMemo for heavy computations","Don't":"Recalculate every render","Guideline":"Use useMemo for expensive ops","No":25,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/25","stack":"react-native"},{"Category":"Performance","Description":"Prevent re-renders","Do":"Named handlers or useCallback","Don't":"Inline arrow functions","Guideline":"Avoid anonymous functions in JSX","No":26,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/26","stack":"react-native"},{"Category":"Performance","Description":"Improved startup and memory","Do":"Enable Hermes in build","Don't":"JavaScriptCore for new projects","Guideline":"Use Hermes engine","No":27,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/27","stack":"react-native"},{"Category":"Images","Description":"Modern performant image component for React Native","Do":"Use expo-image for caching, blurring, and performance","Don't":"Use default Image for heavy lists or unmaintained libraries","Guideline":"Use expo-image","No":28,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/28","stack":"react-native"},{"Category":"Images","Description":"Prevent layout shifts","Do":"width and height for remote images","Don't":"No dimensions for network images","Guideline":"Specify image dimensions","No":29,"Severity":"High","domain":"stack/react-native","record_id":"stack/react-native/29","stack":"react-native"},{"Category":"Images","Description":"Control image scaling","Do":"resizeMode cover contain","Don't":"Stretch images","Guideline":"Use resizeMode","No":30,"Severity":"Low","domain":"stack/react-native","record_id":"stack/react-native/30","stack":"react-native"},{"Category":"Forms","Description":"State-controlled form fields","Do":"value + onChangeText","Don't":"Uncontrolled inputs","Guideline":"Use controlled inputs","No":31,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/31","stack":"react-native"},{"Category":"Forms","Description":"Manage keyboard visibility","Do":"KeyboardAvoidingView","Don't":"Content hidden by keyboard","Guideline":"Handle keyboard","No":32,"Severity":"High","domain":"stack/react-native","record_id":"stack/react-native/32","stack":"react-native"},{"Category":"Forms","Description":"Appropriate keyboard for input","Do":"keyboardType for input type","Don't":"Default keyboard for all","Guideline":"Use proper keyboard types","No":33,"Severity":"Low","domain":"stack/react-native","record_id":"stack/react-native/33","stack":"react-native"},{"Category":"Touch","Description":"Modern touch handling","Do":"Pressable for touch interactions","Don't":"TouchableOpacity for new code","Guideline":"Use Pressable","No":34,"Severity":"Low","domain":"stack/react-native","record_id":"stack/react-native/34","stack":"react-native"},{"Category":"Touch","Description":"Visual feedback on press","Do":"Ripple or opacity change","Don't":"No feedback on press","Guideline":"Provide touch feedback","No":35,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/35","stack":"react-native"},{"Category":"Touch","Description":"Increase touch area","Do":"hitSlop for icons and small buttons","Don't":"Tiny touch targets","Guideline":"Set hitSlop for small targets","No":36,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/36","stack":"react-native"},{"Category":"Animation","Description":"High-performance animations","Do":"react-native-reanimated","Don't":"Animated API for complex","Guideline":"Use Reanimated","No":37,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/37","stack":"react-native"},{"Category":"Animation","Description":"worklets for smooth animation","Do":"Run animations on UI thread","Don't":"JS thread animations","Guideline":"Run on UI thread","No":38,"Severity":"High","domain":"stack/react-native","record_id":"stack/react-native/38","stack":"react-native"},{"Category":"Animation","Description":"Native gesture recognition","Do":"react-native-gesture-handler","Don't":"JS-based gesture handling","Guideline":"Use gesture handler","No":39,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/39","stack":"react-native"},{"Category":"Async","Description":"Show loading indicators","Do":"ActivityIndicator during load","Don't":"Empty screen during load","Guideline":"Handle loading states","No":40,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/40","stack":"react-native"},{"Category":"Async","Description":"Error boundaries and fallbacks","Do":"Error UI for failed requests","Don't":"Crash on error","Guideline":"Handle errors gracefully","No":41,"Severity":"High","domain":"stack/react-native","record_id":"stack/react-native/41","stack":"react-native"},{"Category":"Async","Description":"Cleanup on unmount","Do":"AbortController or cleanup","Don't":"Memory leaks from async","Guideline":"Cancel async operations","No":42,"Severity":"High","domain":"stack/react-native","record_id":"stack/react-native/42","stack":"react-native"},{"Category":"Accessibility","Description":"Describe UI elements","Do":"accessibilityLabel for all interactive","Don't":"Missing labels","Guideline":"Add accessibility labels","No":43,"Severity":"High","domain":"stack/react-native","record_id":"stack/react-native/43","stack":"react-native"},{"Category":"Accessibility","Description":"Semantic meaning","Do":"accessibilityRole for elements","Don't":"Wrong roles","Guideline":"Use accessibility roles","No":44,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/44","stack":"react-native"},{"Category":"Accessibility","Description":"Test with TalkBack/VoiceOver","Do":"Test with screen readers","Don't":"Skip accessibility testing","Guideline":"Support screen readers","No":45,"Severity":"High","domain":"stack/react-native","record_id":"stack/react-native/45","stack":"react-native"},{"Category":"Testing","Description":"Component testing","Do":"render and fireEvent","Don't":"Enzyme or manual testing","Guideline":"Use React Native Testing Library","No":46,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/46","stack":"react-native"},{"Category":"Testing","Description":"Real device behavior","Do":"Test on iOS and Android devices","Don't":"Simulator only","Guideline":"Test on real devices","No":47,"Severity":"High","domain":"stack/react-native","record_id":"stack/react-native/47","stack":"react-native"},{"Category":"Testing","Description":"End-to-end testing","Do":"Detox for critical flows","Don't":"Manual E2E testing","Guideline":"Use Detox for E2E","No":48,"Severity":"Medium","domain":"stack/react-native","record_id":"stack/react-native/48","stack":"react-native"},{"Category":"Native","Description":"Bridge has overhead","Do":"Batch native calls","Don't":"Frequent bridge crossing","Guideline":"Use native modules carefully","No":49,"Severity":"High","domain":"stack/react-native","record_id":"stack/react-native/49","stack":"react-native"},{"Category":"Native","Description":"Simplified development","Do":"Expo for standard features","Don't":"Bare RN for simple apps","Guideline":"Use Expo when possible","No":50,"Severity":"Low","domain":"stack/react-native","record_id":"stack/react-native/50","stack":"react-native"},{"Category":"Native","Description":"Request permissions properly","Do":"Check and request permissions","Don't":"Assume permissions granted","Guideline":"Handle permissions","No":51,"Severity":"High","domain":"stack/react-native","record_id":"stack/react-native/51","stack":"react-native"},{"Category":"State","Description":"Simple component state should use useState hook","Do":"useState for form inputs toggles counters","Don't":"Class components this.state","Guideline":"Use useState for local state","No":1,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/1","stack":"react"},{"Category":"State","Description":"Share state between siblings by lifting to parent","Do":"Lift shared state to common ancestor","Don't":"Prop drilling through many levels","Guideline":"Lift state up when needed","No":2,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/2","stack":"react"},{"Category":"State","Description":"Complex state logic benefits from reducer pattern","Do":"useReducer for state with multiple sub-values","Don't":"Multiple useState for related values","Guideline":"Use useReducer for complex state","No":3,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/3","stack":"react"},{"Category":"State","Description":"Derive values from existing state when possible","Do":"Compute derived values in render","Don't":"Store derivable values in state","Guideline":"Avoid unnecessary state","No":4,"Severity":"High","domain":"stack/react","record_id":"stack/react/4","stack":"react"},{"Category":"State","Description":"Use function form for expensive initial state","Do":"useState(() => computeExpensive())","Don't":"useState(computeExpensive())","Guideline":"Initialize state lazily","No":5,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/5","stack":"react"},{"Category":"Effects","Description":"Return cleanup function for subscriptions timers","Do":"Return cleanup function in useEffect","Don't":"No cleanup for subscriptions","Guideline":"Clean up effects","No":6,"Severity":"High","domain":"stack/react","record_id":"stack/react/6","stack":"react"},{"Category":"Effects","Description":"Include all values used inside effect in deps array","Do":"All referenced values in dependency array","Don't":"Empty deps with external references","Guideline":"Specify dependencies correctly","No":7,"Severity":"High","domain":"stack/react","record_id":"stack/react/7","stack":"react"},{"Category":"Effects","Description":"Don't use effects for transforming data or events","Do":"Transform data during render handle events directly","Don't":"useEffect for derived state or event handling","Guideline":"Avoid unnecessary effects","No":8,"Severity":"High","domain":"stack/react","record_id":"stack/react/8","stack":"react"},{"Category":"Effects","Description":"Store values that don't trigger re-renders in refs","Do":"useRef for interval IDs DOM elements","Don't":"useState for values that don't need render","Guideline":"Use refs for non-reactive values","No":9,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/9","stack":"react"},{"Category":"Rendering","Description":"Stable unique keys for list items","Do":"Use stable IDs as keys","Don't":"Array index as key for dynamic lists","Guideline":"Use keys properly","No":10,"Severity":"High","domain":"stack/react","record_id":"stack/react/10","stack":"react"},{"Category":"Rendering","Description":"Use useMemo for costly computations","Do":"useMemo for expensive filtering/sorting","Don't":"Recalculate every render","Guideline":"Memoize expensive calculations","No":11,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/11","stack":"react"},{"Category":"Rendering","Description":"Use useCallback for functions passed as props","Do":"useCallback for handlers passed to memoized children","Don't":"New function reference every render","Guideline":"Memoize callbacks passed to children","No":12,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/12","stack":"react"},{"Category":"Rendering","Description":"Wrap components that render often with same props","Do":"memo for pure components with stable props","Don't":"memo everything or nothing","Guideline":"Use React.memo wisely","No":13,"Severity":"Low","domain":"stack/react","record_id":"stack/react/13","stack":"react"},{"Category":"Rendering","Description":"Create objects outside render or memoize","Do":"Define style objects outside component","Don't":"Inline objects in props","Guideline":"Avoid inline object/array creation in JSX","No":14,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/14","stack":"react"},{"Category":"Components","Description":"Single responsibility for each component","Do":"One concern per component","Don't":"Large multi-purpose components","Guideline":"Keep components small and focused","No":15,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/15","stack":"react"},{"Category":"Components","Description":"Compose components using children and props","Do":"Use children prop for flexibility","Don't":"Inheritance hierarchies","Guideline":"Use composition over inheritance","No":16,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/16","stack":"react"},{"Category":"Components","Description":"Keep related components and hooks together","Do":"Related files in same directory","Don't":"Flat structure with many files","Guideline":"Colocate related code","No":17,"Severity":"Low","domain":"stack/react","record_id":"stack/react/17","stack":"react"},{"Category":"Components","Description":"Fragment or <> for multiple elements without wrapper","Do":"<> for grouping without DOM node","Don't":"Extra div wrappers","Guideline":"Use fragments to avoid extra DOM","No":18,"Severity":"Low","domain":"stack/react","record_id":"stack/react/18","stack":"react"},{"Category":"Props","Description":"Destructure props for cleaner component code","Do":"Destructure in function signature","Don't":"props.name props.value throughout","Guideline":"Destructure props","No":19,"Severity":"Low","domain":"stack/react","record_id":"stack/react/19","stack":"react"},{"Category":"Props","Description":"Use default parameters or defaultProps","Do":"Default values in destructuring","Don't":"Undefined checks throughout","Guideline":"Provide default props values","No":20,"Severity":"Low","domain":"stack/react","record_id":"stack/react/20","stack":"react"},{"Category":"Props","Description":"Use context or composition for deeply nested data","Do":"Context for global data composition for UI","Don't":"Passing props through 5+ levels","Guideline":"Avoid prop drilling","No":21,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/21","stack":"react"},{"Category":"Props","Description":"Use TypeScript interfaces for prop types","Do":"interface Props { name: string }","Don't":"PropTypes or no validation","Guideline":"Validate props with TypeScript","No":22,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/22","stack":"react"},{"Category":"Events","Description":"React normalizes events across browsers","Do":"e.preventDefault() e.stopPropagation()","Don't":"Access native event unnecessarily","Guideline":"Use synthetic events correctly","No":23,"Severity":"Low","domain":"stack/react","record_id":"stack/react/23","stack":"react"},{"Category":"Events","Description":"Use arrow functions in class or hooks","Do":"Arrow functions in functional components","Don't":"bind in render or constructor","Guideline":"Avoid binding in render","No":24,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/24","stack":"react"},{"Category":"Events","Description":"Pass function reference not invocation","Do":"onClick={handleClick}","Don't":"onClick={handleClick()} causing immediate call","Guideline":"Pass event handlers not call results","No":25,"Severity":"High","domain":"stack/react","record_id":"stack/react/25","stack":"react"},{"Category":"Forms","Description":"Use state to control form inputs","Do":"value + onChange for inputs","Don't":"Uncontrolled inputs with refs","Guideline":"Controlled components for forms","No":26,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/26","stack":"react"},{"Category":"Forms","Description":"Prevent default and handle in submit handler","Do":"onSubmit with preventDefault","Don't":"onClick on submit button only","Guideline":"Handle form submission properly","No":27,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/27","stack":"react"},{"Category":"Forms","Description":"Debounce search/filter inputs","Do":"useDeferredValue or debounce for search","Don't":"Filter on every keystroke","Guideline":"Debounce rapid input changes","No":28,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/28","stack":"react"},{"Category":"Hooks","Description":"Only call hooks at top level and in React functions","Do":"Hooks at component top level","Don't":"Hooks in conditions loops or callbacks","Guideline":"Follow rules of hooks","No":29,"Severity":"High","domain":"stack/react","record_id":"stack/react/29","stack":"react"},{"Category":"Hooks","Description":"Extract shared stateful logic to custom hooks","Do":"useCustomHook for reusable patterns","Don't":"Duplicate hook logic across components","Guideline":"Custom hooks for reusable logic","No":30,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/30","stack":"react"},{"Category":"Hooks","Description":"Custom hooks must start with use","Do":"useFetch useForm useAuth","Don't":"fetchData or getData for hook","Guideline":"Name custom hooks with use prefix","No":31,"Severity":"High","domain":"stack/react","record_id":"stack/react/31","stack":"react"},{"Category":"Context","Description":"Context for theme auth locale","Do":"Context for app-wide state","Don't":"Context for frequently changing data","Guideline":"Use context for global data","No":32,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/32","stack":"react"},{"Category":"Context","Description":"Separate contexts for different domains","Do":"ThemeContext + AuthContext","Don't":"One giant AppContext","Guideline":"Split contexts by concern","No":33,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/33","stack":"react"},{"Category":"Context","Description":"Prevent unnecessary re-renders with useMemo","Do":"useMemo for context value object","Don't":"New object reference every render","Guideline":"Memoize context values","No":34,"Severity":"High","domain":"stack/react","record_id":"stack/react/34","stack":"react"},{"Category":"Performance","Description":"Profile to identify performance bottlenecks","Do":"Profile before optimizing","Don't":"Optimize without measuring","Guideline":"Use React DevTools Profiler","No":35,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/35","stack":"react"},{"Category":"Performance","Description":"Use React.lazy for code splitting","Do":"lazy() for routes and heavy components","Don't":"Import everything upfront","Guideline":"Lazy load components","No":36,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/36","stack":"react"},{"Category":"Performance","Description":"Use windowing for lists over 100 items","Do":"react-window or react-virtual","Don't":"Render thousands of DOM nodes","Guideline":"Virtualize long lists","No":37,"Severity":"High","domain":"stack/react","record_id":"stack/react/37","stack":"react"},{"Category":"Performance","Description":"React 18 auto-batches but be aware","Do":"Let React batch related updates","Don't":"Manual batching with flushSync","Guideline":"Batch state updates","No":38,"Severity":"Low","domain":"stack/react","record_id":"stack/react/38","stack":"react"},{"Category":"ErrorHandling","Description":"Catch JavaScript errors in component tree","Do":"ErrorBoundary wrapping sections","Don't":"Let errors crash entire app","Guideline":"Use error boundaries","No":39,"Severity":"High","domain":"stack/react","record_id":"stack/react/39","stack":"react"},{"Category":"ErrorHandling","Description":"Catch errors in async operations","Do":"try/catch in async handlers","Don't":"Unhandled promise rejections","Guideline":"Handle async errors","No":40,"Severity":"High","domain":"stack/react","record_id":"stack/react/40","stack":"react"},{"Category":"Testing","Description":"Test what user sees and does","Do":"Test renders and interactions","Don't":"Test internal state or methods","Guideline":"Test behavior not implementation","No":41,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/41","stack":"react"},{"Category":"Testing","Description":"Use accessible queries","Do":"getByRole getByLabelText","Don't":"getByTestId for everything","Guideline":"Use testing-library queries","No":42,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/42","stack":"react"},{"Category":"Accessibility","Description":"Proper HTML elements for their purpose","Do":"button for clicks nav for navigation","Don't":"div with onClick for buttons","Guideline":"Use semantic HTML","No":43,"Severity":"High","domain":"stack/react","record_id":"stack/react/43","stack":"react"},{"Category":"Accessibility","Description":"Handle focus for modals dialogs","Do":"Focus trap in modals return focus on close","Don't":"No focus management","Guideline":"Manage focus properly","No":44,"Severity":"High","domain":"stack/react","record_id":"stack/react/44","stack":"react"},{"Category":"Accessibility","Description":"Use ARIA live regions for updates","Do":"aria-live for dynamic updates","Don't":"Silent updates to screen readers","Guideline":"Announce dynamic content","No":45,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/45","stack":"react"},{"Category":"Accessibility","Description":"Associate labels with inputs","Do":"htmlFor matching input id","Don't":"Placeholder as only label","Guideline":"Label form controls","No":46,"Severity":"High","domain":"stack/react","record_id":"stack/react/46","stack":"react"},{"Category":"TypeScript","Description":"Define interfaces for all props","Do":"interface Props with all prop types","Don't":"any or missing types","Guideline":"Type component props","No":47,"Severity":"High","domain":"stack/react","record_id":"stack/react/47","stack":"react"},{"Category":"TypeScript","Description":"Provide types for useState","Do":"useState<Type>() for complex state","Don't":"Inferred any types","Guideline":"Type state properly","No":48,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/48","stack":"react"},{"Category":"TypeScript","Description":"Use React event types","Do":"React.ChangeEvent<HTMLInputElement>","Don't":"Generic Event type","Guideline":"Type event handlers","No":49,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/49","stack":"react"},{"Category":"TypeScript","Description":"Generic components for flexible typing","Do":"Generic props for list components","Don't":"Union types for flexibility","Guideline":"Use generics for reusable components","No":50,"Severity":"Medium","domain":"stack/react","record_id":"stack/react/50","stack":"react"},{"Category":"Patterns","Description":"Separate data logic from UI","Do":"Container fetches presentational renders","Don't":"Mixed data and UI in one","Guideline":"Container/Presentational split","No":51,"Severity":"Low","domain":"stack/react","record_id":"stack/react/51","stack":"react"},{"Category":"Patterns","Description":"Share code via render prop pattern","Do":"Render prop for customizable rendering","Don't":"Duplicate logic across components","Guideline":"Render props for flexibility","No":52,"Severity":"Low","domain":"stack/react","record_id":"stack/react/52","stack":"react"},{"Category":"Patterns","Description":"Related components sharing state","Do":"Tab + TabPanel sharing context","Don't":"Prop drilling between related","Guideline":"Compound components","No":53,"Severity":"Low","domain":"stack/react","record_id":"stack/react/53","stack":"react"},{"Category":"Setup","Description":"Install components via shadcn CLI for proper setup","Do":"npx shadcn@latest add component-name","Don't":"Manual copy-paste from docs","Guideline":"Use CLI for installation","No":1,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/1","stack":"shadcn"},{"Category":"Setup","Description":"Run init command to set up components.json and globals.css","Do":"npx shadcn@latest init before adding components","Don't":"Skip init and add components directly","Guideline":"Initialize project properly","No":2,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/2","stack":"shadcn"},{"Category":"Setup","Description":"Set up proper import aliases in tsconfig and components.json","Do":"Use @/components/ui path aliases","Don't":"Relative imports like ../../components","Guideline":"Configure path aliases","No":3,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/3","stack":"shadcn"},{"Category":"Theming","Description":"Define colors as CSS variables in globals.css for theming","Do":"CSS variables in :root and .dark","Don't":"Hardcoded color values in components","Guideline":"Use CSS variables for colors","No":4,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/4","stack":"shadcn"},{"Category":"Theming","Description":"Use semantic color names with foreground pattern","Do":"primary/primary-foreground secondary/secondary-foreground","Don't":"Generic color names","Guideline":"Follow naming convention","No":5,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/5","stack":"shadcn"},{"Category":"Theming","Description":"Include .dark class styles for all custom CSS","Do":"Define both :root and .dark color schemes","Don't":"Only light mode colors","Guideline":"Support dark mode","No":6,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/6","stack":"shadcn"},{"Category":"Components","Description":"Leverage cva variants for consistent styling","Do":"Use variant prop for different styles","Don't":"Inline conditional classes","Guideline":"Use component variants","No":7,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/7","stack":"shadcn"},{"Category":"Components","Description":"Add custom classes via className prop for overrides","Do":"Extend with className for one-off customizations","Don't":"Modify component source directly","Guideline":"Compose with className","No":8,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/8","stack":"shadcn"},{"Category":"Components","Description":"Apply size prop for consistent sizing across components","Do":"size=\"sm\" size=\"lg\" for sizing","Don't":"Mix size classes inconsistently","Guideline":"Use size variants consistently","No":9,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/9","stack":"shadcn"},{"Category":"Components","Description":"Use provided sub-components for complex UI","Do":"Card + CardHeader + CardContent pattern","Don't":"Single component with many props","Guideline":"Prefer compound components","No":10,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/10","stack":"shadcn"},{"Category":"Dialog","Description":"Dialog component for overlay modal windows","Do":"Dialog for confirmations forms details","Don't":"Alert for modal content","Guideline":"Use Dialog for modal content","No":11,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/11","stack":"shadcn"},{"Category":"Dialog","Description":"Use open and onOpenChange for controlled dialogs","Do":"Controlled state with useState","Don't":"Uncontrolled with default open only","Guideline":"Handle dialog state properly","No":12,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/12","stack":"shadcn"},{"Category":"Dialog","Description":"Use DialogHeader DialogTitle DialogDescription","Do":"Complete semantic structure","Don't":"Missing title or description","Guideline":"Include proper dialog structure","No":13,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/13","stack":"shadcn"},{"Category":"Sheet","Description":"Sheet component for slide-out panels and drawers","Do":"Sheet for navigation filters settings","Don't":"Dialog for side content","Guideline":"Use Sheet for side panels","No":14,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/14","stack":"shadcn"},{"Category":"Sheet","Description":"Set side prop for sheet slide direction","Do":"Explicit side=\"left\" or side=\"right\"","Don't":"Default side without consideration","Guideline":"Specify sheet side","No":15,"Severity":"Low","domain":"stack/shadcn","record_id":"stack/shadcn/15","stack":"shadcn"},{"Category":"Form","Description":"Integrate Form component with react-hook-form for validation","Do":"useForm + Form + FormField pattern","Don't":"Custom form handling without Form","Guideline":"Use Form with react-hook-form","No":16,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/16","stack":"shadcn"},{"Category":"Form","Description":"Wrap inputs in FormField for proper labeling and errors","Do":"FormField + FormItem + FormLabel + FormControl","Don't":"Input without FormField wrapper","Guideline":"Use FormField for inputs","No":17,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/17","stack":"shadcn"},{"Category":"Form","Description":"Use FormMessage for validation error display","Do":"FormMessage after FormControl","Don't":"Custom error text without FormMessage","Guideline":"Display form messages","No":18,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/18","stack":"shadcn"},{"Category":"Form","Description":"Define form schema with Zod for type-safe validation","Do":"zodResolver with form schema","Don't":"Manual validation logic","Guideline":"Use Zod for validation","No":19,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/19","stack":"shadcn"},{"Category":"Select","Description":"Select component for option selection","Do":"Select for choosing from list","Don't":"Native select element","Guideline":"Use Select for dropdowns","No":20,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/20","stack":"shadcn"},{"Category":"Select","Description":"Include Trigger Value Content and Items","Do":"Complete Select structure","Don't":"Missing SelectValue or SelectContent","Guideline":"Structure Select properly","No":21,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/21","stack":"shadcn"},{"Category":"Command","Description":"Command component for searchable lists and palettes","Do":"Command for command palette search","Don't":"Input with custom dropdown","Guideline":"Use Command for search","No":22,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/22","stack":"shadcn"},{"Category":"Command","Description":"Use CommandGroup for categorized items","Do":"CommandGroup with heading for sections","Don't":"Flat list without grouping","Guideline":"Group command items","No":23,"Severity":"Low","domain":"stack/shadcn","record_id":"stack/shadcn/23","stack":"shadcn"},{"Category":"Table","Description":"Table component for structured data","Do":"Table for tabular data display","Don't":"Div grid for table-like layouts","Guideline":"Use Table for data display","No":24,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/24","stack":"shadcn"},{"Category":"Table","Description":"Use TableHeader TableBody TableRow TableCell","Do":"Semantic table structure","Don't":"Missing thead or tbody","Guideline":"Include proper table structure","No":25,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/25","stack":"shadcn"},{"Category":"DataTable","Description":"Combine Table with TanStack Table for features","Do":"DataTable pattern for sorting filtering pagination","Don't":"Custom table implementation","Guideline":"Use DataTable for complex tables","No":26,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/26","stack":"shadcn"},{"Category":"Tabs","Description":"Tabs component for tabbed interfaces","Do":"Tabs for related content sections","Don't":"Custom tab implementation","Guideline":"Use Tabs for content switching","No":27,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/27","stack":"shadcn"},{"Category":"Tabs","Description":"Specify defaultValue for initial tab","Do":"defaultValue on Tabs component","Don't":"No default leaving first tab","Guideline":"Set default tab value","No":28,"Severity":"Low","domain":"stack/shadcn","record_id":"stack/shadcn/28","stack":"shadcn"},{"Category":"Accordion","Description":"Accordion for expandable content sections","Do":"Accordion for FAQ settings panels","Don't":"Custom collapse implementation","Guideline":"Use Accordion for collapsible","No":29,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/29","stack":"shadcn"},{"Category":"Accordion","Description":"Use type=\"single\" or type=\"multiple\" appropriately","Do":"type=\"single\" for one open type=\"multiple\" for many","Don't":"Default type without consideration","Guideline":"Choose accordion type","No":30,"Severity":"Low","domain":"stack/shadcn","record_id":"stack/shadcn/30","stack":"shadcn"},{"Category":"Toast","Description":"Sonner integration for toast notifications","Do":"toast() from sonner for notifications","Don't":"Custom toast implementation","Guideline":"Use Sonner for toasts","No":31,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/31","stack":"shadcn"},{"Category":"Toast","Description":"Include Toaster component in root layout","Do":"<Toaster /> in app layout","Don't":"Toaster in individual pages","Guideline":"Add Toaster to layout","No":32,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/32","stack":"shadcn"},{"Category":"Toast","Description":"Apply toast.success toast.error for context","Do":"Semantic toast methods","Don't":"Generic toast for all messages","Guideline":"Use toast variants","No":33,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/33","stack":"shadcn"},{"Category":"Popover","Description":"Popover for dropdown menus and floating panels","Do":"Popover for contextual actions","Don't":"Absolute positioned divs","Guideline":"Use Popover for floating content","No":34,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/34","stack":"shadcn"},{"Category":"Popover","Description":"Use align and side props for positioning","Do":"Explicit alignment configuration","Don't":"Default alignment for all","Guideline":"Handle popover alignment","No":35,"Severity":"Low","domain":"stack/shadcn","record_id":"stack/shadcn/35","stack":"shadcn"},{"Category":"DropdownMenu","Description":"DropdownMenu for action lists and context menus","Do":"DropdownMenu for user menu actions","Don't":"Popover for action lists","Guideline":"Use DropdownMenu for actions","No":36,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/36","stack":"shadcn"},{"Category":"DropdownMenu","Description":"Use DropdownMenuGroup and DropdownMenuSeparator","Do":"Organized menu with separators","Don't":"Flat list of items","Guideline":"Group menu items","No":37,"Severity":"Low","domain":"stack/shadcn","record_id":"stack/shadcn/37","stack":"shadcn"},{"Category":"Tooltip","Description":"Tooltip for icon buttons and truncated text","Do":"Tooltip for additional context","Don't":"Title attribute for tooltips","Guideline":"Use Tooltip for hints","No":38,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/38","stack":"shadcn"},{"Category":"Tooltip","Description":"Wrap app or section in TooltipProvider","Do":"TooltipProvider at app level","Don't":"TooltipProvider per tooltip","Guideline":"Add TooltipProvider","No":39,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/39","stack":"shadcn"},{"Category":"Skeleton","Description":"Skeleton component for loading placeholders","Do":"Skeleton matching content layout","Don't":"Spinner for content loading","Guideline":"Use Skeleton for loading","No":40,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/40","stack":"shadcn"},{"Category":"Skeleton","Description":"Size skeleton to match loaded content","Do":"Skeleton same size as expected content","Don't":"Generic skeleton size","Guideline":"Match skeleton dimensions","No":41,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/41","stack":"shadcn"},{"Category":"AlertDialog","Description":"AlertDialog for destructive action confirmation","Do":"AlertDialog for delete confirmations","Don't":"Dialog for confirmations","Guideline":"Use AlertDialog for confirms","No":42,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/42","stack":"shadcn"},{"Category":"AlertDialog","Description":"Use AlertDialogAction and AlertDialogCancel","Do":"Standard confirm/cancel pattern","Don't":"Custom buttons in AlertDialog","Guideline":"Include action buttons","No":43,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/43","stack":"shadcn"},{"Category":"Sidebar","Description":"Sidebar component for app navigation","Do":"Sidebar for main app navigation","Don't":"Custom sidebar implementation","Guideline":"Use Sidebar for navigation","No":44,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/44","stack":"shadcn"},{"Category":"Sidebar","Description":"Use SidebarProvider for sidebar state management","Do":"SidebarProvider at layout level","Don't":"Sidebar without provider","Guideline":"Wrap in SidebarProvider","No":45,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/45","stack":"shadcn"},{"Category":"Sidebar","Description":"Include SidebarTrigger for mobile toggle","Do":"SidebarTrigger for responsive toggle","Don't":"Custom toggle button","Guideline":"Use SidebarTrigger","No":46,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/46","stack":"shadcn"},{"Category":"Chart","Description":"Chart component with Recharts integration","Do":"Chart component for dashboards","Don't":"Direct Recharts without wrapper","Guideline":"Use Chart for data viz","No":47,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/47","stack":"shadcn"},{"Category":"Chart","Description":"Create chartConfig for consistent theming","Do":"chartConfig with color definitions","Don't":"Inline colors in charts","Guideline":"Define chart config","No":48,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/48","stack":"shadcn"},{"Category":"Chart","Description":"Apply ChartTooltip for interactive charts","Do":"ChartTooltip with ChartTooltipContent","Don't":"Recharts Tooltip directly","Guideline":"Use ChartTooltip","No":49,"Severity":"Low","domain":"stack/shadcn","record_id":"stack/shadcn/49","stack":"shadcn"},{"Category":"Blocks","Description":"Start from shadcn blocks for common layouts","Do":"npx shadcn@latest add dashboard-01","Don't":"Build dashboard from scratch","Guideline":"Use blocks for scaffolding","No":50,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/50","stack":"shadcn"},{"Category":"Blocks","Description":"Modify copied block code to fit needs","Do":"Edit block files after installation","Don't":"Use blocks without modification","Guideline":"Customize block components","No":51,"Severity":"Low","domain":"stack/shadcn","record_id":"stack/shadcn/51","stack":"shadcn"},{"Category":"A11y","Description":"Shadcn components have built-in ARIA","Do":"Rely on component accessibility","Don't":"Override ARIA attributes","Guideline":"Use semantic components","No":52,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/52","stack":"shadcn"},{"Category":"A11y","Description":"Dialog Sheet handle focus automatically","Do":"Let components manage focus","Don't":"Custom focus handling","Guideline":"Maintain focus management","No":53,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/53","stack":"shadcn"},{"Category":"A11y","Description":"Use FormLabel and aria-label appropriately","Do":"FormLabel for form inputs","Don't":"Placeholder as only label","Guideline":"Provide labels","No":54,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/54","stack":"shadcn"},{"Category":"Performance","Description":"Import only needed components","Do":"Named imports from component files","Don't":"Import all from index","Guideline":"Import components individually","No":55,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/55","stack":"shadcn"},{"Category":"Performance","Description":"Dynamic import for heavy dialog content","Do":"React.lazy for dialog content","Don't":"Import all dialogs upfront","Guideline":"Lazy load dialogs","No":56,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/56","stack":"shadcn"},{"Category":"Customization","Description":"Add new variants using class-variance-authority","Do":"Extend buttonVariants for new styles","Don't":"Inline classes for variants","Guideline":"Extend variants with cva","No":57,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/57","stack":"shadcn"},{"Category":"Customization","Description":"Build new components following shadcn patterns","Do":"Use cn() and cva for custom components","Don't":"Different patterns for custom","Guideline":"Create custom components","No":58,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/58","stack":"shadcn"},{"Category":"Patterns","Description":"asChild prop for component composition","Do":"Slot pattern with asChild","Don't":"Wrapper divs for composition","Guideline":"Use asChild for composition","No":59,"Severity":"Medium","domain":"stack/shadcn","record_id":"stack/shadcn/59","stack":"shadcn"},{"Category":"Patterns","Description":"Form + useForm for complete forms","Do":"RHF Controller with shadcn inputs","Don't":"Custom form state management","Guideline":"Combine with React Hook Form","No":60,"Severity":"High","domain":"stack/shadcn","record_id":"stack/shadcn/60","stack":"shadcn"},{"Category":"Reactivity","Description":"Automatic dependency tracking","Do":"$: for derived values","Don't":"Manual recalculation","Guideline":"Use $: for reactive statements","No":1,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/1","stack":"svelte"},{"Category":"Reactivity","Description":"Svelte tracks assignments not mutations","Do":"Reassign arrays/objects to trigger update","Don't":"Mutate without reassignment","Guideline":"Trigger reactivity with assignment","No":2,"Severity":"High","domain":"stack/svelte","record_id":"stack/svelte/2","stack":"svelte"},{"Category":"Reactivity","Description":"Runes for explicit reactivity","Do":"let count = $state(0)","Don't":"Implicit reactivity in Svelte 5","Guideline":"Use $state in Svelte 5","No":3,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/3","stack":"svelte"},{"Category":"Reactivity","Description":"$derived replaces $: in Svelte 5","Do":"let doubled = $derived(count * 2)","Don't":"$: in Svelte 5","Guideline":"Use $derived for computed values","No":4,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/4","stack":"svelte"},{"Category":"Reactivity","Description":"$effect replaces $: side effects","Do":"Use $effect for subscriptions","Don't":"$: for side effects in Svelte 5","Guideline":"Use $effect for side effects","No":5,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/5","stack":"svelte"},{"Category":"Props","Description":"Declare props with export let","Do":"export let propName","Don't":"Props without export","Guideline":"Export let for props","No":6,"Severity":"High","domain":"stack/svelte","record_id":"stack/svelte/6","stack":"svelte"},{"Category":"Props","Description":"$props rune for prop access","Do":"let { name } = $props()","Don't":"export let in Svelte 5","Guideline":"Use $props in Svelte 5","No":7,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/7","stack":"svelte"},{"Category":"Props","Description":"Default props with assignment","Do":"export let count = 0","Don't":"Required props without defaults","Guideline":"Provide default values","No":8,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/8","stack":"svelte"},{"Category":"Props","Description":"Pass through unknown props","Do":"{...$$restProps} on elements","Don't":"Manual prop forwarding","Guideline":"Use spread props","No":9,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/9","stack":"svelte"},{"Category":"Bindings","Description":"Simplified input handling","Do":"bind:value for inputs","Don't":"on:input with manual update","Guideline":"Use bind: for two-way binding","No":10,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/10","stack":"svelte"},{"Category":"Bindings","Description":"Reference DOM nodes","Do":"bind:this for element reference","Don't":"querySelector in onMount","Guideline":"Bind to DOM elements","No":11,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/11","stack":"svelte"},{"Category":"Bindings","Description":"Simplified group handling","Do":"bind:group for radio/checkbox groups","Don't":"Manual checked handling","Guideline":"Use bind:group for radios/checkboxes","No":12,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/12","stack":"svelte"},{"Category":"Events","Description":"Event directive syntax","Do":"on:click={handler}","Don't":"addEventListener in onMount","Guideline":"Use on: for event handlers","No":13,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/13","stack":"svelte"},{"Category":"Events","Description":"Pass events to parent","Do":"on:click without handler","Don't":"createEventDispatcher for DOM events","Guideline":"Forward events with on:event","No":14,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/14","stack":"svelte"},{"Category":"Events","Description":"Custom component events","Do":"dispatch for custom events","Don't":"on:event for custom events","Guideline":"Use createEventDispatcher","No":15,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/15","stack":"svelte"},{"Category":"Lifecycle","Description":"Run code after component mounts","Do":"onMount for setup and data fetching","Don't":"Code in script body for side effects","Guideline":"Use onMount for initialization","No":16,"Severity":"High","domain":"stack/svelte","record_id":"stack/svelte/16","stack":"svelte"},{"Category":"Lifecycle","Description":"Automatic cleanup on destroy","Do":"Return function from onMount","Don't":"Separate onDestroy for paired cleanup","Guideline":"Return cleanup from onMount","No":17,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/17","stack":"svelte"},{"Category":"Lifecycle","Description":"Only when onMount cleanup not possible","Do":"onDestroy for non-mount cleanup","Don't":"onDestroy for mount-related cleanup","Guideline":"Use onDestroy sparingly","No":18,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/18","stack":"svelte"},{"Category":"Lifecycle","Description":"Usually not needed","Do":"Reactive statements instead","Don't":"beforeUpdate for derived state","Guideline":"Avoid beforeUpdate/afterUpdate","No":19,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/19","stack":"svelte"},{"Category":"Stores","Description":"Basic reactive store","Do":"writable for shared mutable state","Don't":"Local variables for shared state","Guideline":"Use writable for mutable state","No":20,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/20","stack":"svelte"},{"Category":"Stores","Description":"External data sources","Do":"readable for derived/external data","Don't":"writable for read-only data","Guideline":"Use readable for read-only state","No":21,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/21","stack":"svelte"},{"Category":"Stores","Description":"Combine or transform stores","Do":"derived for computed values","Don't":"Manual subscription for derived","Guideline":"Use derived for computed stores","No":22,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/22","stack":"svelte"},{"Category":"Stores","Description":"Automatic subscribe/unsubscribe","Do":"$storeName in components","Don't":"Manual subscription","Guideline":"Use $ prefix for auto-subscription","No":23,"Severity":"High","domain":"stack/svelte","record_id":"stack/svelte/23","stack":"svelte"},{"Category":"Stores","Description":"Unsubscribe when component destroys","Do":"Return unsubscribe from onMount","Don't":"Leave subscriptions open","Guideline":"Clean up custom subscriptions","No":24,"Severity":"High","domain":"stack/svelte","record_id":"stack/svelte/24","stack":"svelte"},{"Category":"Slots","Description":"Content projection","Do":"<slot> for flexible content","Don't":"Props for all content","Guideline":"Use slots for composition","No":25,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/25","stack":"svelte"},{"Category":"Slots","Description":"Multiple content areas","Do":"<slot name=\"header\">","Don't":"Single slot for complex layouts","Guideline":"Name slots for multiple areas","No":26,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/26","stack":"svelte"},{"Category":"Slots","Description":"Conditional slot rendering","Do":"$$slots.name for conditional rendering","Don't":"Always render slot wrapper","Guideline":"Check slot content with $$slots","No":27,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/27","stack":"svelte"},{"Category":"Styling","Description":"Styles scoped to component","Do":"<style> for component styles","Don't":"Global styles for component","Guideline":"Use scoped styles by default","No":28,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/28","stack":"svelte"},{"Category":"Styling","Description":"Escape scoping when needed","Do":":global for third-party styling","Don't":"Global for all styles","Guideline":"Use :global() sparingly","No":29,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/29","stack":"svelte"},{"Category":"Styling","Description":"Dynamic styling","Do":"CSS custom properties","Don't":"Inline styles for themes","Guideline":"Use CSS variables for theming","No":30,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/30","stack":"svelte"},{"Category":"Transitions","Description":"Svelte transition directives","Do":"transition:fade for simple effects","Don't":"Manual CSS transitions","Guideline":"Use built-in transitions","No":31,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/31","stack":"svelte"},{"Category":"Transitions","Description":"Different enter/exit animations","Do":"in:fly out:fade for asymmetric","Don't":"Same transition for both","Guideline":"Use in: and out: separately","No":32,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/32","stack":"svelte"},{"Category":"Transitions","Description":"Prevent ancestor trigger","Do":"transition:fade|local","Don't":"Global transitions for lists","Guideline":"Add local modifier","No":33,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/33","stack":"svelte"},{"Category":"Actions","Description":"Reusable DOM logic","Do":"use:action for DOM enhancements","Don't":"onMount for each usage","Guideline":"Use actions for DOM behavior","No":34,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/34","stack":"svelte"},{"Category":"Actions","Description":"Lifecycle methods for actions","Do":"Return { update, destroy }","Don't":"Only initial setup","Guideline":"Return update and destroy","No":35,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/35","stack":"svelte"},{"Category":"Actions","Description":"Configure action behavior","Do":"use:action={params}","Don't":"Hardcoded action behavior","Guideline":"Pass parameters to actions","No":36,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/36","stack":"svelte"},{"Category":"Logic","Description":"Template conditionals","Do":"{#if} {:else if} {:else}","Don't":"Ternary in expressions","Guideline":"Use {#if} for conditionals","No":37,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/37","stack":"svelte"},{"Category":"Logic","Description":"List rendering","Do":"{#each} with key","Don't":"Map in expression","Guideline":"Use {#each} for lists","No":38,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/38","stack":"svelte"},{"Category":"Logic","Description":"Proper list reconciliation","Do":"(item.id) for unique key","Don't":"Index as key or no key","Guideline":"Always use keys in {#each}","No":39,"Severity":"High","domain":"stack/svelte","record_id":"stack/svelte/39","stack":"svelte"},{"Category":"Logic","Description":"Handle async states","Do":"{#await} for loading/error states","Don't":"Manual promise handling","Guideline":"Use {#await} for promises","No":40,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/40","stack":"svelte"},{"Category":"SvelteKit","Description":"File-based routing","Do":"+page.svelte for route components","Don't":"Custom routing setup","Guideline":"Use +page.svelte for routes","No":41,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/41","stack":"svelte"},{"Category":"SvelteKit","Description":"Load data before render","Do":"load function in +page.js","Don't":"onMount for data fetching","Guideline":"Use +page.js for data loading","No":42,"Severity":"High","domain":"stack/svelte","record_id":"stack/svelte/42","stack":"svelte"},{"Category":"SvelteKit","Description":"Server-side data loading","Do":"+page.server.js for sensitive data","Don't":"+page.js for API keys","Guideline":"Use +page.server.js for server-only","No":43,"Severity":"High","domain":"stack/svelte","record_id":"stack/svelte/43","stack":"svelte"},{"Category":"SvelteKit","Description":"Server-side form handling","Do":"+page.server.js actions","Don't":"API routes for forms","Guideline":"Use form actions","No":44,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/44","stack":"svelte"},{"Category":"SvelteKit","Description":"$page $navigating $updated","Do":"$page for current page data","Don't":"Manual URL parsing","Guideline":"Use $app/stores for app state","No":45,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/45","stack":"svelte"},{"Category":"Performance","Description":"Reset component state","Do":"{#key id} for fresh instance","Don't":"Manual destroy/create","Guideline":"Use {#key} for forced re-render","No":46,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/46","stack":"svelte"},{"Category":"Performance","Description":"Not everything needs $:","Do":"$: only for side effects","Don't":"$: for simple assignments","Guideline":"Avoid unnecessary reactivity","No":47,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/47","stack":"svelte"},{"Category":"Performance","Description":"Skip equality checks","Do":"immutable: true for large lists","Don't":"Default for all components","Guideline":"Use immutable compiler option","No":48,"Severity":"Low","domain":"stack/svelte","record_id":"stack/svelte/48","stack":"svelte"},{"Category":"TypeScript","Description":"TypeScript support","Do":"<script lang=\"ts\">","Don't":"JavaScript for typed projects","Guideline":"Use lang=\"ts\" in script","No":49,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/49","stack":"svelte"},{"Category":"TypeScript","Description":"Explicit prop types","Do":"interface $$Props for types","Don't":"Untyped props","Guideline":"Type props with interface","No":50,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/50","stack":"svelte"},{"Category":"TypeScript","Description":"Type-safe events","Do":"createEventDispatcher<Events>()","Don't":"Untyped dispatch","Guideline":"Type events with createEventDispatcher","No":51,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/51","stack":"svelte"},{"Category":"Accessibility","Description":"Proper HTML in templates","Do":"button nav main appropriately","Don't":"div for everything","Guideline":"Use semantic elements","No":52,"Severity":"High","domain":"stack/svelte","record_id":"stack/svelte/52","stack":"svelte"},{"Category":"Accessibility","Description":"Accessible state changes","Do":"aria-live for updates","Don't":"Silent dynamic updates","Guideline":"Add aria to dynamic content","No":53,"Severity":"Medium","domain":"stack/svelte","record_id":"stack/svelte/53","stack":"svelte"},{"Category":"Views","Description":"SwiftUI views are value types","Do":"struct MyView: View","Don't":"class MyView: View","Guideline":"Use struct for views","No":1,"Severity":"High","domain":"stack/swiftui","record_id":"stack/swiftui/1","stack":"swiftui"},{"Category":"Views","Description":"Single responsibility for each view","Do":"Extract subviews for complex layouts","Don't":"Large monolithic views","Guideline":"Keep views small and focused","No":2,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/2","stack":"swiftui"},{"Category":"Views","Description":"body returns the view hierarchy","Do":"var body: some View { }","Don't":"func body() -> some View","Guideline":"Use body computed property","No":3,"Severity":"High","domain":"stack/swiftui","record_id":"stack/swiftui/3","stack":"swiftui"},{"Category":"Views","Description":"Compose views using ViewBuilder","Do":"Combine smaller views","Don't":"Inheritance hierarchies","Guideline":"Prefer composition over inheritance","No":4,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/4","stack":"swiftui"},{"Category":"State","Description":"Simple value types owned by view","Do":"@State for view-local primitives","Don't":"@State for shared data","Guideline":"Use @State for local state","No":5,"Severity":"High","domain":"stack/swiftui","record_id":"stack/swiftui/5","stack":"swiftui"},{"Category":"State","Description":"Pass mutable state to child views","Do":"@Binding for child input","Don't":"@State in child for parent data","Guideline":"Use @Binding for two-way data","No":6,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/6","stack":"swiftui"},{"Category":"State","Description":"ObservableObject owned by view","Do":"@StateObject for view-created objects","Don't":"@ObservedObject for owned objects","Guideline":"Use @StateObject for reference types","No":7,"Severity":"High","domain":"stack/swiftui","record_id":"stack/swiftui/7","stack":"swiftui"},{"Category":"State","Description":"Reference types passed from parent","Do":"@ObservedObject for injected dependencies","Don't":"@StateObject for injected objects","Guideline":"Use @ObservedObject for injected objects","No":8,"Severity":"High","domain":"stack/swiftui","record_id":"stack/swiftui/8","stack":"swiftui"},{"Category":"State","Description":"App-wide state injection","Do":"@EnvironmentObject for global state","Don't":"Prop drilling through views","Guideline":"Use @EnvironmentObject for shared state","No":9,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/9","stack":"swiftui"},{"Category":"State","Description":"Automatically publish property changes","Do":"@Published for observed properties","Don't":"Manual objectWillChange calls","Guideline":"Use @Published in ObservableObject","No":10,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/10","stack":"swiftui"},{"Category":"Observable","Description":"Modern observation without Combine","Do":"@Observable class for view models","Don't":"ObservableObject for new projects","Guideline":"Use @Observable macro (iOS 17+)","No":11,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/11","stack":"swiftui"},{"Category":"Observable","Description":"Create bindings from @Observable","Do":"@Bindable var vm for bindings","Don't":"@Binding with @Observable","Guideline":"Use @Bindable for @Observable","No":12,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/12","stack":"swiftui"},{"Category":"Layout","Description":"Standard stack-based layouts","Do":"Stacks for linear arrangements","Don't":"GeometryReader for simple layouts","Guideline":"Use VStack HStack ZStack","No":13,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/13","stack":"swiftui"},{"Category":"Layout","Description":"Lazy loading for performance","Do":"Lazy stacks for long lists","Don't":"Regular stacks for 100+ items","Guideline":"Use LazyVStack LazyHStack for lists","No":14,"Severity":"High","domain":"stack/swiftui","record_id":"stack/swiftui/14","stack":"swiftui"},{"Category":"Layout","Description":"Only when needed for sizing","Do":"GeometryReader for responsive layouts","Don't":"GeometryReader everywhere","Guideline":"Use GeometryReader sparingly","No":15,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/15","stack":"swiftui"},{"Category":"Layout","Description":"Consistent spacing throughout app","Do":"Design system spacing values","Don't":"Magic numbers for spacing","Guideline":"Use spacing and padding consistently","No":16,"Severity":"Low","domain":"stack/swiftui","record_id":"stack/swiftui/16","stack":"swiftui"},{"Category":"Layout","Description":"Set explicit sizes when needed","Do":".frame(maxWidth: .infinity)","Don't":"Fixed sizes for responsive content","Guideline":"Use frame modifiers correctly","No":17,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/17","stack":"swiftui"},{"Category":"Modifiers","Description":"Modifier order affects rendering","Do":"Background before padding for full coverage","Don't":"Wrong modifier order","Guideline":"Order modifiers correctly","No":18,"Severity":"High","domain":"stack/swiftui","record_id":"stack/swiftui/18","stack":"swiftui"},{"Category":"Modifiers","Description":"Reusable modifier combinations","Do":"ViewModifier for repeated styling","Don't":"Duplicate modifier chains","Guideline":"Create custom ViewModifiers","No":19,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/19","stack":"swiftui"},{"Category":"Modifiers","Description":"Avoid changing view identity","Do":"if-else with same view type","Don't":"Conditional that changes view identity","Guideline":"Use conditional modifiers carefully","No":20,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/20","stack":"swiftui"},{"Category":"Navigation","Description":"Modern navigation with type-safe paths","Do":"NavigationStack with navigationDestination","Don't":"NavigationView for new projects","Guideline":"Use NavigationStack (iOS 16+)","No":21,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/21","stack":"swiftui"},{"Category":"Navigation","Description":"Type-safe navigation destinations","Do":".navigationDestination(for:)","Don't":"NavigationLink(destination:)","Guideline":"Use navigationDestination","No":22,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/22","stack":"swiftui"},{"Category":"Navigation","Description":"Programmatic navigation dismissal","Do":"@Environment(\\.dismiss) var dismiss","Don't":"presentationMode (deprecated)","Guideline":"Use @Environment for dismiss","No":23,"Severity":"Low","domain":"stack/swiftui","record_id":"stack/swiftui/23","stack":"swiftui"},{"Category":"Lists","Description":"Built-in scrolling and styling","Do":"List for standard scrollable content","Don't":"ScrollView + VStack for simple lists","Guideline":"Use List for scrollable content","No":24,"Severity":"Low","domain":"stack/swiftui","record_id":"stack/swiftui/24","stack":"swiftui"},{"Category":"Lists","Description":"Use Identifiable or explicit id","Do":"Identifiable protocol or id parameter","Don't":"Index as identifier","Guideline":"Provide stable identifiers","No":25,"Severity":"High","domain":"stack/swiftui","record_id":"stack/swiftui/25","stack":"swiftui"},{"Category":"Lists","Description":"Standard list editing","Do":"onDelete for swipe to delete","Don't":"Custom delete implementation","Guideline":"Use onDelete and onMove","No":26,"Severity":"Low","domain":"stack/swiftui","record_id":"stack/swiftui/26","stack":"swiftui"},{"Category":"Forms","Description":"Grouped input controls","Do":"Form for settings screens","Don't":"Manual grouping for forms","Guideline":"Use Form for settings","No":27,"Severity":"Low","domain":"stack/swiftui","record_id":"stack/swiftui/27","stack":"swiftui"},{"Category":"Forms","Description":"Manage keyboard focus","Do":"@FocusState for text field focus","Don't":"Manual first responder handling","Guideline":"Use @FocusState for keyboard","No":28,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/28","stack":"swiftui"},{"Category":"Forms","Description":"Show validation feedback","Do":"Real-time validation feedback","Don't":"Submit without validation","Guideline":"Validate input properly","No":29,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/29","stack":"swiftui"},{"Category":"Async","Description":"Automatic cancellation on view disappear","Do":".task for view lifecycle async","Don't":"onAppear with Task","Guideline":"Use .task for async work","No":30,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/30","stack":"swiftui"},{"Category":"Async","Description":"Show progress during async operations","Do":"ProgressView during loading","Don't":"Empty view during load","Guideline":"Handle loading states","No":31,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/31","stack":"swiftui"},{"Category":"Async","Description":"Ensure UI updates on main thread","Do":"@MainActor on view models","Don't":"Manual DispatchQueue.main","Guideline":"Use @MainActor for UI updates","No":32,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/32","stack":"swiftui"},{"Category":"Animation","Description":"Animate state changes","Do":"withAnimation for state transitions","Don't":"No animation for state changes","Guideline":"Use withAnimation","No":33,"Severity":"Low","domain":"stack/swiftui","record_id":"stack/swiftui/33","stack":"swiftui"},{"Category":"Animation","Description":"Apply animations to views","Do":".animation(.spring()) on view","Don't":"Manual animation timing","Guideline":"Use .animation modifier","No":34,"Severity":"Low","domain":"stack/swiftui","record_id":"stack/swiftui/34","stack":"swiftui"},{"Category":"Animation","Description":"Check accessibility settings","Do":"Check accessibilityReduceMotion","Don't":"Ignore motion preferences","Guideline":"Respect reduced motion","No":35,"Severity":"High","domain":"stack/swiftui","record_id":"stack/swiftui/35","stack":"swiftui"},{"Category":"Preview","Description":"Modern preview syntax","Do":"#Preview for view previews","Don't":"PreviewProvider protocol","Guideline":"Use #Preview macro (Xcode 15+)","No":36,"Severity":"Low","domain":"stack/swiftui","record_id":"stack/swiftui/36","stack":"swiftui"},{"Category":"Preview","Description":"Test different states and devices","Do":"Multiple previews for states","Don't":"Single preview only","Guideline":"Create multiple previews","No":37,"Severity":"Low","domain":"stack/swiftui","record_id":"stack/swiftui/37","stack":"swiftui"},{"Category":"Preview","Description":"Dedicated preview mock data","Do":"Static preview data","Don't":"Production data in previews","Guideline":"Use preview data","No":38,"Severity":"Low","domain":"stack/swiftui","record_id":"stack/swiftui/38","stack":"swiftui"},{"Category":"Performance","Description":"Body should be fast to compute","Do":"Precompute in view model","Don't":"Heavy computation in body","Guideline":"Avoid expensive body computations","No":39,"Severity":"High","domain":"stack/swiftui","record_id":"stack/swiftui/39","stack":"swiftui"},{"Category":"Performance","Description":"Skip unnecessary view updates","Do":"Equatable for complex views","Don't":"Default equality for all views","Guideline":"Use Equatable views","No":40,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/40","stack":"swiftui"},{"Category":"Performance","Description":"Measure before optimizing","Do":"Use SwiftUI Instruments","Don't":"Guess at performance issues","Guideline":"Profile with Instruments","No":41,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/41","stack":"swiftui"},{"Category":"Accessibility","Description":"Describe UI elements","Do":".accessibilityLabel for context","Don't":"Missing labels","Guideline":"Add accessibility labels","No":42,"Severity":"High","domain":"stack/swiftui","record_id":"stack/swiftui/42","stack":"swiftui"},{"Category":"Accessibility","Description":"Respect text size preferences","Do":"Scalable fonts and layouts","Don't":"Fixed font sizes","Guideline":"Support Dynamic Type","No":43,"Severity":"High","domain":"stack/swiftui","record_id":"stack/swiftui/43","stack":"swiftui"},{"Category":"Accessibility","Description":"Proper accessibility traits","Do":"Correct accessibilityTraits","Don't":"Wrong semantic meaning","Guideline":"Use semantic views","No":44,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/44","stack":"swiftui"},{"Category":"Testing","Description":"Third-party view testing","Do":"ViewInspector for unit tests","Don't":"UI tests only","Guideline":"Use ViewInspector for testing","No":45,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/45","stack":"swiftui"},{"Category":"Testing","Description":"Unit test business logic","Do":"XCTest for view model","Don't":"Skip view model testing","Guideline":"Test view models","No":46,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/46","stack":"swiftui"},{"Category":"Testing","Description":"Previews catch visual regressions","Do":"Multiple preview configurations","Don't":"No visual verification","Guideline":"Use preview as visual test","No":47,"Severity":"Low","domain":"stack/swiftui","record_id":"stack/swiftui/47","stack":"swiftui"},{"Category":"Architecture","Description":"Separate view and logic","Do":"ViewModel for business logic","Don't":"Logic in View","Guideline":"Use MVVM pattern","No":48,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/48","stack":"swiftui"},{"Category":"Architecture","Description":"Views display view model state","Do":"View reads from ViewModel","Don't":"Business logic in View","Guideline":"Keep views dumb","No":49,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/49","stack":"swiftui"},{"Category":"Architecture","Description":"Inject dependencies for testing","Do":"Initialize with dependencies","Don't":"Hard-coded dependencies","Guideline":"Use dependency injection","No":50,"Severity":"Medium","domain":"stack/swiftui","record_id":"stack/swiftui/50","stack":"swiftui"},{"Category":"Setup","Description":"Always use Three.js r128 from cdnjs. It is the stable CDN baseline. Never use a floating 'latest' URL — it silently breaks when the CDN updates without warning.","Do":"Pin to the exact r128 cdnjs URL in every HTML file","Don't":"Use unpkg@latest or any unversioned CDN URL that can silently update","Guideline":"CDN Version Lock","No":1,"Severity":"Critical","domain":"stack/threejs","record_id":"stack/threejs/1","stack":"threejs"},{"Category":"Setup","Description":"THREE.CapsuleGeometry was introduced in r142. Using it on the r128 CDN throws 'CapsuleGeometry is not a constructor' and crashes the entire scene. Build a capsule from primitives instead.","Do":"Build a capsule from CylinderGeometry plus two SphereGeometry end caps","Don't":"Call THREE.CapsuleGeometry on r128 — it is undefined and throws immediately","Guideline":"CapsuleGeometry Does Not Exist in r128","No":2,"Severity":"Critical","domain":"stack/threejs","record_id":"stack/threejs/2","stack":"threejs"},{"Category":"Setup","Description":"OrbitControls is NOT bundled in the core Three.js r128 CDN file. It lives in examples/js and must be loaded from a separate cdnjs script tag. THREE.OrbitControls is undefined without it.","Do":"Load the OrbitControls script from cdnjs examples path before your scene script","Don't":"Expect THREE.OrbitControls to exist after loading only the core Three.js CDN script","Guideline":"OrbitControls Must Be Loaded Separately","No":3,"Severity":"Critical","domain":"stack/threejs","record_id":"stack/threejs/3","stack":"threejs"},{"Category":"Setup","Description":"When OrbitControls cannot be loaded implement spherical orbit using mousedown/mousemove/mouseup. The key is rotating in spherical coordinates so both horizontal AND vertical drag work correctly.","Do":"Rotate camera in spherical coordinates so both axes respond correctly to drag","Don't":"Move camera.position.x directly — vertical drag is silently ignored and the orbit is incorrect","Guideline":"Custom Drag Orbit Fallback","No":4,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/4","stack":"threejs"},{"Category":"Setup","Description":"When using a bundler import Three.js as an ES module. When using CDN the THREE global is already available — do not import it again. Mixing both loads Three.js twice and causes subtle runtime errors.","Do":"Match import style to build environment: ESM import for bundlers; rely on the window.THREE global for CDN pages","Don't":"Mix a CDN script tag with an ES module import in the same file","Guideline":"ESM vs CDN Import","No":5,"Severity":"Critical","domain":"stack/threejs","record_id":"stack/threejs/5","stack":"threejs"},{"Category":"Setup","Description":"Create one WebGLRenderer instance for the lifetime of the page. Multiple renderers compete for the browser GPU context limit (8–16 contexts) and cause context-lost errors especially on mobile.","Do":"Reuse a single renderer and swap scene content instead of recreating the renderer","Don't":"Create a new renderer on each component mount or scene transition","Guideline":"Single Renderer Per Page","No":6,"Severity":"Critical","domain":"stack/threejs","record_id":"stack/threejs/6","stack":"threejs"},{"Category":"Setup","Description":"Cap devicePixelRatio at 2. Retina displays report 3x or higher. Going from 2x to 3x multiplies pixel count by 2.25x with no visible quality improvement at normal viewing distance.","Do":"Apply Math.min(window.devicePixelRatio, 2) — cap is at 2 not at 3","Don't":"Pass window.devicePixelRatio directly without any cap","Guideline":"Pixel Ratio Cap at 2","No":7,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/7","stack":"threejs"},{"Category":"Setup","Description":"Set alpha:true on the renderer and control the background color through CSS rather than a renderer clear color. This composites the canvas correctly over any HTML content behind it.","Do":"Set alpha:true on renderer and let body or a parent div provide the background color","Don't":"Set a solid renderer clear color when the canvas must composite over HTML behind it","Guideline":"Alpha Canvas Plus CSS Background","No":8,"Severity":"Medium","domain":"stack/threejs","record_id":"stack/threejs/8","stack":"threejs"},{"Category":"Camera","Description":"Always update camera.aspect and call camera.updateProjectionMatrix() inside every resize handler. A stale aspect ratio causes the entire scene to appear stretched or squashed horizontally.","Do":"Update camera.aspect then call updateProjectionMatrix() on every resize","Don't":"Let aspect ratio become stale after the browser window changes size","Guideline":"Aspect Ratio on Resize","No":9,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/9","stack":"threejs"},{"Category":"Camera","Description":"Use a field of view between 45 and 75 degrees. Below 45 creates compressed telephoto distortion. Above 90 creates visible fisheye distortion at frame edges.","Do":"Start at 75 for general interactive scenes; use 45–55 for product close-ups","Don't":"Use FOV above 90 or below 30 without a deliberate artistic reason","Guideline":"FOV Range 45 to 75","No":10,"Severity":"Medium","domain":"stack/threejs","record_id":"stack/threejs/10","stack":"threejs"},{"Category":"Camera","Description":"Always set an explicit camera position and call camera.lookAt() before the first render. The default camera at the origin pointing down -Z makes subjects at arbitrary coordinates invisible or tiny.","Do":"Set camera.position.set() and camera.lookAt() to frame the subject before the first render","Don't":"Leave the camera at default position (0 0 0) with no lookAt — subject may be behind the camera or microscopic","Guideline":"Explicit Position and lookAt","No":11,"Severity":"Medium","domain":"stack/threejs","record_id":"stack/threejs/11","stack":"threejs"},{"Category":"Camera","Description":"Use OrbitControls for model viewers and exploratory scenes where the user needs free-look. Use a GSAP scroll-driven camera rig for product reveals or storytelling where the camera path must stay fixed.","Do":"Match camera control approach to the UX intent of the scene","Don't":"Use OrbitControls for a scripted reveal — users can orbit away from the reveal before it completes","Guideline":"OrbitControls vs GSAP Camera Rig","No":12,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/12","stack":"threejs"},{"Category":"Geometry","Description":"Creating a new geometry inside animate() allocates a fresh GPU buffer every frame and exhausts VRAM within seconds. Create all geometry exactly once before the loop starts. Use attribute mutation if positions must change per frame.","Do":"Create all geometry before the animation loop; mutate BufferAttribute arrays in-place if needed","Don't":"Call any new XxxGeometry() constructor inside the animation loop","Guideline":"Never Create Geometry Per Frame","No":13,"Severity":"Critical","domain":"stack/threejs","record_id":"stack/threejs/13","stack":"threejs"},{"Category":"Geometry","Description":"When multiple objects share the same shape create one geometry instance and pass it to every Mesh. Each Mesh gets its own transform and material while all share a single GPU buffer.","Do":"Create one geometry and pass the same reference to every Mesh constructor","Don't":"Create a separate identical geometry inside a loop for each object","Guideline":"Share Geometry Across Meshes","No":14,"Severity":"Critical","domain":"stack/threejs","record_id":"stack/threejs/14","stack":"threejs"},{"Category":"Geometry","Description":"Call geometry.dispose() and material.dispose() and texture.dispose() for every texture map when removing objects from the scene. Three.js never releases GPU resources automatically — they stay in VRAM until explicitly freed.","Do":"Dispose of geometry + material + every texture map before calling scene.remove()","Don't":"Call scene.remove() alone without any dispose calls","Guideline":"dispose on Scene Removal","No":15,"Severity":"Critical","domain":"stack/threejs","record_id":"stack/threejs/15","stack":"threejs"},{"Category":"Geometry","Description":"Use the minimum segment count that achieves the desired silhouette quality. Hero objects: 32–64 segments. Background objects: 8–16. Particle stand-ins: 6–8. High counts on background geometry waste GPU draw calls with zero visible benefit.","Do":"Apply a tiered segment budget based on the visual priority of each object in the scene","Don't":"Default every sphere and cylinder to 64+ segments regardless of its role","Guideline":"Segment Count Budget","No":16,"Severity":"Medium","domain":"stack/threejs","record_id":"stack/threejs/16","stack":"threejs"},{"Category":"Geometry","Description":"For any custom shape use BufferGeometry with setAttribute('position' ...) and a Float32Array. The legacy THREE.Geometry class was removed in r125 and throws ReferenceError in r128.","Do":"Use THREE.BufferGeometry with a Float32Array position attribute for custom vertex data","Don't":"Reference or instantiate the removed THREE.Geometry class","Guideline":"BufferGeometry for Custom Vertex Data","No":17,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/17","stack":"threejs"},{"Category":"Materials","Description":"MeshBasicMaterial ignores all lights and is significantly cheaper — use it for UI overlays HUDs and flat-colored decorative elements. MeshStandardMaterial is PBR-accurate and requires lights. Never use StandardMaterial where BasicMaterial suffices.","Do":"Use MeshBasicMaterial for any object that does not need lighting; use MeshStandardMaterial for physical objects","Don't":"Apply MeshStandardMaterial to flat UI elements that never receive light — lights still run for them","Guideline":"MeshBasicMaterial vs MeshStandardMaterial","No":18,"Severity":"Medium","domain":"stack/threejs","record_id":"stack/threejs/18","stack":"threejs"},{"Category":"Materials","Description":"Share one material instance across all meshes that have identical properties. Call mat.clone() only when individual meshes genuinely need different property values. Duplicate materials waste GPU VRAM.","Do":"Assign the same material reference to all meshes with identical visual properties","Don't":"Create a new material inside a loop for objects that look identical","Guideline":"Share Material Instances","No":19,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/19","stack":"threejs"},{"Category":"Materials","Description":"Textures are the single largest consumer of GPU VRAM in most Three.js scenes. Call texture.dispose() when switching scenes or removing objects — Three.js does not garbage-collect GPU resources automatically.","Do":"Track all loaded textures and call dispose() on each one during scene teardown or on object removal","Don't":"Load textures without any cleanup path — they persist in VRAM for the entire page lifetime","Guideline":"Dispose Textures Explicitly","No":20,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/20","stack":"threejs"},{"Category":"Lighting","Description":"Any scene using MeshStandardMaterial or MeshPhongMaterial requires at minimum one AmbientLight (fill) and one DirectionalLight (shading direction). Without both the objects render as solid black — the material is there but no light reaches it.","Do":"Add AmbientLight for fill and DirectionalLight for shading whenever PBR or Phong materials are used","Don't":"Use MeshStandardMaterial without adding any lights to the scene","Guideline":"Ambient Plus Directional Minimum","No":21,"Severity":"Critical","domain":"stack/threejs","record_id":"stack/threejs/21","stack":"threejs"},{"Category":"Lighting","Description":"renderer.shadowMap.enabled = true must be set before any castShadow or receiveShadow flags. Without it the shadow map is never allocated and all shadow flags are silently ignored.","Do":"Set renderer.shadowMap.enabled = true first then set castShadow and receiveShadow on lights and meshes","Don't":"Set castShadow on a light or mesh without enabling renderer.shadowMap.enabled — shadows never render","Guideline":"Enable shadowMap Before castShadow","No":22,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/22","stack":"threejs"},{"Category":"Lighting","Description":"Shadow map rendering redraws the entire scene from the light's perspective every frame. Enable castShadow only on the primary directional light and receiveShadow only on hero meshes and the ground plane.","Do":"Enable shadows only on the key light and the most important meshes","Don't":"Enable castShadow and receiveShadow on every object in the scene including particles","Guideline":"Selective Shadow Casting","No":23,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/23","stack":"threejs"},{"Category":"Lighting","Description":"MeshBasicMaterial completely ignores all scene lights. Adding lights solely to illuminate BasicMaterial objects wastes a light pass on every frame with zero visible effect.","Do":"Omit lights entirely when every material in the scene is MeshBasicMaterial","Don't":"Add AmbientLight and DirectionalLight to a scene that uses only MeshBasicMaterial","Guideline":"Skip Lights for MeshBasicMaterial","No":24,"Severity":"Low","domain":"stack/threejs","record_id":"stack/threejs/24","stack":"threejs"},{"Category":"Raycasting","Description":"Create exactly one Raycaster instance outside all event handlers. Store mouse coordinates in pointermove (cheap). Call setFromCamera and intersectObjects together inside the animate() loop — once per frame instead of once per mouse event.","Do":"Create one Raycaster; store mouse in pointermove; call setFromCamera + intersectObjects inside animate()","Don't":"Create a new THREE.Raycaster() inside a mousemove handler or call setFromCamera inside the event listener","Guideline":"Single Shared Raycaster","No":25,"Severity":"Critical","domain":"stack/threejs","record_id":"stack/threejs/25","stack":"threejs"},{"Category":"Raycasting","Description":"Raycasting requires mouse in Normalized Device Coordinates: X from -1 (left) to +1 (right) and Y from +1 (top) to -1 (bottom). The Y axis is inverted relative to screen space. A missing negation on Y causes all raycasts to miss or hit the wrong objects.","Do":"Apply the full NDC formula — including the negation on the Y axis","Don't":"Forget to negate Y — raycasting appears to work but hits objects mirrored vertically","Guideline":"NDC Mouse Coordinates","No":26,"Severity":"Critical","domain":"stack/threejs","record_id":"stack/threejs/26","stack":"threejs"},{"Category":"Raycasting","Description":"Call raycaster.setFromCamera(mouse camera) and then raycaster.intersectObjects(targets true) inside the animate() loop. setFromCamera must come before intersectObjects every frame — without it the raycaster uses a stale ray direction.","Do":"Call setFromCamera then intersectObjects in order inside every animate() frame","Don't":"Call intersectObjects without calling setFromCamera first — the raycaster uses a stale or zero ray","Guideline":"setFromCamera and intersectObjects in animate","No":27,"Severity":"Critical","domain":"stack/threejs","record_id":"stack/threejs/27","stack":"threejs"},{"Category":"Raycasting","Description":"Pass true as the second argument to intersectObjects when testing Groups or GLTF loaded models. Geometry lives on child Mesh objects — without recursive:true the parent group is tested but has no geometry and hits is always empty.","Do":"Use intersectObjects(targets true) for Groups or any loaded model","Don't":"Raycast against a parent Group without the recursive flag","Guideline":"Recursive Flag for Groups and GLTF","No":28,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/28","stack":"threejs"},{"Category":"Raycasting","Description":"Set document.body.style.cursor = 'pointer' when intersections are found and reset to 'auto' when none are found. Without cursor feedback users cannot discover that 3D objects are interactive.","Do":"Update cursor to pointer on hit; reset to auto on miss in the same animate loop block","Don't":"Run raycasting and read hits without ever updating the cursor style","Guideline":"Cursor Feedback on Hover","No":29,"Severity":"Medium","domain":"stack/threejs","record_id":"stack/threejs/29","stack":"threejs"},{"Category":"Animation","Description":"Drive the render loop exclusively with requestAnimationFrame or renderer.setAnimationLoop(). Never use setInterval or setTimeout — they are not synchronized to the display refresh rate and keep running when the tab is hidden draining battery.","Do":"Use requestAnimationFrame or renderer.setAnimationLoop() as the sole render loop driver","Don't":"Use setInterval or setTimeout for render timing","Guideline":"requestAnimationFrame Loop Only","No":30,"Severity":"Critical","domain":"stack/threejs","record_id":"stack/threejs/30","stack":"threejs"},{"Category":"Animation","Description":"Use THREE.Clock and clock.getDelta() for all time-based motion. A hardcoded increment like += 0.01 runs at 2x speed on 120Hz displays and at unpredictable speed when frames drop under load. CRITICAL: call getDelta() exactly ONCE per animate() frame and store the result in a local dt variable. getDelta() resets the internal clock on every call — a second call in the same frame always returns ~0, silently breaking any animation block that uses it.","Do":"Call clock.getDelta() once at the top of animate(); store result in dt; reuse dt everywhere in that frame","Don't":"Call clock.getDelta() more than once per frame or inside a helper called from animate()","Guideline":"THREE.Clock for Delta Time","No":31,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/31","stack":"threejs"},{"Category":"Animation","Description":"Use value += (target - value) * alpha each frame to smoothly interpolate toward a moving target. An alpha of 0.03–0.1 produces organic easing for camera follow pointer-tracking and hover scale effects without requiring GSAP.","Do":"Apply the lerp formula each frame with a small alpha for smooth organic motion","Don't":"Snap a value directly to the target producing an instant jarring jump","Guideline":"Lerp for Smooth Pointer Follow","No":32,"Severity":"Medium","domain":"stack/threejs","record_id":"stack/threejs/32","stack":"threejs"},{"Category":"Animation","Description":"Use GSAP timelines for any animation with more than two sequential steps or for scroll-linked camera paths. GSAP timelines can be paused reversed and scrubbed — far more maintainable than boolean state machines.","Do":"Use GSAP timelines for sequences with more than two steps and for scroll-driven animations","Don't":"Implement multi-step sequences with boolean flags and manual frame counters","Guideline":"GSAP for Multi-Step Sequences","No":33,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/33","stack":"threejs"},{"Category":"Animation","Description":"Use renderer.setAnimationLoop() as the loop driver so you can pass null to pause and a function to resume. Continuous rendering in a hidden tab wastes CPU GPU and battery with no user benefit.","Do":"Use renderer.setAnimationLoop(animate) to drive the loop; pass null to pause on visibilitychange","Don't":"Drive with internal requestAnimationFrame and never stop the loop when the tab is hidden","Guideline":"Pause Render Loop on Tab Hidden","No":34,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/34","stack":"threejs"},{"Category":"GSAP","Description":"Load GSAP from its own CDN script tag before your scene script. In bundler projects install via npm and import. GSAP is a completely separate library from Three.js — never try to import it from the Three.js package.","Do":"Load GSAP CDN before the scene script; or npm install gsap and import separately","Don't":"Import gsap from three or expect it to be defined without a separate load","Guideline":"Load GSAP Before Scene Script","No":35,"Severity":"Critical","domain":"stack/threejs","record_id":"stack/threejs/35","stack":"threejs"},{"Category":"GSAP","Description":"Call gsap.registerPlugin(ScrollTrigger) once at the top of your script before any scrollTrigger config object. Without registration the ScrollTrigger name is undefined and the tween throws immediately.","Do":"Call gsap.registerPlugin(ScrollTrigger) as the first line before any gsap.to/from/timeline with scrollTrigger","Don't":"Include scrollTrigger config in gsap.to() calls without first registering the plugin","Guideline":"Register ScrollTrigger Before Use","No":36,"Severity":"Critical","domain":"stack/threejs","record_id":"stack/threejs/36","stack":"threejs"},{"Category":"GSAP","Description":"GSAP can tween any numeric JavaScript property including mesh.position.x mesh.rotation.y and material.opacity. No wrapper or adaptor is needed. Note: to tween material.opacity the material must have transparent:true set before the tween starts.","Do":"Pass Three.js object properties directly to gsap.to(); set transparent:true before tweening opacity","Don't":"Use a plain proxy object then manually copy values to Three.js properties every frame","Guideline":"Tween Three.js Properties Directly","No":37,"Severity":"Medium","domain":"stack/threejs","record_id":"stack/threejs/37","stack":"threejs"},{"Category":"GSAP","Description":"Use scrub:true or scrub:1 to link camera movement continuously to scroll position as a 0–1 ratio. scrub:1 adds a 1-second lag for cinematic smoothness. onEnter/onLeave fire only once and create jarring snaps — not the right tool for a camera path.","Do":"Use scrub:1 for any scroll-controlled camera movement","Don't":"Use onEnter or onLeave callbacks for camera motion — they snap instead of scrubbing","Guideline":"scrub for Scroll-Driven Camera Path","No":38,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/38","stack":"threejs"},{"Category":"Performance","Description":"Use THREE.InstancedMesh when rendering 50 or more identical objects. It submits all N transforms in one draw call instead of N draw calls and reduces CPU-GPU communication overhead dramatically.","Do":"Use InstancedMesh for any group of 50+ meshes sharing the same geometry and material","Don't":"Create 50+ separate Mesh objects with the same geometry and material","Guideline":"InstancedMesh for Repeated Objects","No":39,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/39","stack":"threejs"},{"Category":"Performance","Description":"Enable ACESFilmicToneMapping and sRGBEncoding on the renderer for accurate perceptual color. Without tone mapping colors appear washed out or over-saturated. These are renderer properties set after construction and take effect immediately.","Do":"Set renderer.toneMapping and renderer.outputEncoding after construction for all production scenes","Don't":"Leave tone mapping and output encoding at defaults when the scene targets realistic visuals","Guideline":"Tone Mapping and sRGB Encoding","No":40,"Severity":"Medium","domain":"stack/threejs","record_id":"stack/threejs/40","stack":"threejs"},{"Category":"Performance","Description":"The antialias option can only be set at WebGLRenderer construction time. Setting renderer.antialias after construction has absolutely no effect — the WebGL context is already created without it. Decide before instantiating.","Do":"Set antialias:true inside the WebGLRenderer constructor options object","Don't":"Construct the renderer without antialias then try to enable it by assigning the property","Guideline":"antialias Set at Construction Only","No":41,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/41","stack":"threejs"},{"Category":"Performance","Description":"Use scene.fog to create atmospheric depth. As a secondary benefit objects that disappear into fog before the far plane stop contributing to draw calls — useful in scenes with large view distances.","Do":"Add FogExp2 to scenes with view distances above 100 units for both visual atmosphere and implicit far culling","Don't":"Ignore fog in scenes with far:1000+ and many distant objects that contribute tiny pixels per draw call","Guideline":"FogExp2 for Depth and Far Culling","No":42,"Severity":"Low","domain":"stack/threejs","record_id":"stack/threejs/42","stack":"threejs"},{"Category":"Particles","Description":"Build all particle systems with BufferGeometry plus a Float32Array position attribute rendered as Points. Never use individual Mesh objects as particles — they cannot scale past a few hundred with good performance.","Do":"Use Points plus BufferGeometry for all particle effects","Don't":"Create hundreds of individual Mesh objects to simulate a particle system","Guideline":"BufferGeometry Plus Points for Particle Systems","No":43,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/43","stack":"threejs"},{"Category":"Particles","Description":"Start particle systems at 1000–3000 particles. Beyond 50000 causes sustained frame drops on mid-range mobile. Always test on a real device before increasing the count — desktop and mobile GPU performance ratios can be 10:1.","Do":"Start at 3000 particles and profile on actual mobile hardware before raising the limit","Don't":"Set particle count at 100000 or higher without any mobile profiling","Guideline":"Particle Count Ceiling","No":44,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/44","stack":"threejs"},{"Category":"Particles","Description":"After mutating any BufferAttribute array values per frame you must set geometry.attributes.position.needsUpdate = true so Three.js re-uploads the changed buffer to the GPU. Without it the GPU still uses the old data and particles appear completely frozen.","Do":"Set needsUpdate = true on the position attribute after every per-frame mutation of the array","Don't":"Mutate the Float32Array values without flagging needsUpdate — positions update in JS but not on the GPU","Guideline":"needsUpdate After Buffer Mutation","No":45,"Severity":"Critical","domain":"stack/threejs","record_id":"stack/threejs/45","stack":"threejs"},{"Category":"Responsive","Description":"Size the renderer and camera to the canvas element's clientWidth and clientHeight — not window.innerWidth and innerHeight. This is correct when the canvas is inside a flex or grid container that does not fill the full viewport.","Do":"Use canvas.clientWidth and canvas.clientHeight for all renderer and camera sizing","Don't":"Hardcode renderer size to window.innerWidth/innerHeight when the canvas may be inside a container","Guideline":"Canvas Dimensions Not Window","No":46,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/46","stack":"threejs"},{"Category":"Responsive","Description":"Use ResizeObserver on the canvas container instead of the window resize event. ResizeObserver fires when the container element changes size independently of the browser window — common in split-pane layouts and sidebar collapsing.","Do":"Attach ResizeObserver to the canvas parent element for accurate container-aware resize detection","Don't":"Use only window.addEventListener('resize') for canvas sizing when the canvas is not fullscreen","Guideline":"ResizeObserver Over window resize Event","No":47,"Severity":"Medium","domain":"stack/threejs","record_id":"stack/threejs/47","stack":"threejs"},{"Category":"Responsive","Description":"Add touchstart and touchmove listeners alongside mouse events so the scene remains interactive on mobile. Normalize touch coordinates to the same NDC range as mouse events and pass passive:false on touchmove if you call preventDefault.","Do":"Handle both mouse and touch input for any interactive 3D scene","Don't":"Add only mouse event listeners and leave touch users with no interaction","Guideline":"Touch Events for Mobile Interaction","No":48,"Severity":"Medium","domain":"stack/threejs","record_id":"stack/threejs/48","stack":"threejs"},{"Category":"Accessibility","Description":"Check window.matchMedia('(prefers-reduced-motion: reduce)') before starting any auto-rotation, particle animation, or camera movement. Users who enable this OS preference have motion sickness or vestibular disorders. IMPORTANT: reading .matches once at page load is a one-time snapshot — if the user changes their OS accessibility setting mid-session the scene will not react. Attach a 'change' listener to the MediaQueryList so noMotion stays in sync at runtime.","Do":"Use matchMedia.addEventListener('change') to keep noMotion reactive; gate all auto-animation on the live value","Don't":"Read .matches once at startup and never update it — the scene ignores mid-session OS setting changes","Guideline":"prefers-reduced-motion","No":49,"Severity":"High","domain":"stack/threejs","record_id":"stack/threejs/49","stack":"threejs"},{"Category":"Accessibility","Description":"Add role='img' and a descriptive aria-label to renderer.domElement after appending it to the DOM. Screen readers receive no information from a WebGL canvas — the aria-label is the only description they can announce to users.","Do":"Set role='img' and a meaningful aria-label on renderer.domElement before or after appending it","Don't":"Append the canvas to the DOM with no accessibility attributes — invisible to screen readers","Guideline":"Canvas aria-label","No":50,"Severity":"Medium","domain":"stack/threejs","record_id":"stack/threejs/50","stack":"threejs"},{"Category":"Production","Description":"For production use Three.js via npm plus Vite. You get full tree-shaking reduced bundle size access to the complete examples/jsm library including OrbitControls GLTFLoader and EffectComposer and TypeScript support.","Do":"Use npm install three plus Vite or Webpack for any production client-facing project","Don't":"Serve raw CDN script tags in a production application that needs tree-shaking or TypeScript","Guideline":"Bundler Stack for Production","No":51,"Severity":"Medium","domain":"stack/threejs","record_id":"stack/threejs/51","stack":"threejs"},{"Category":"Production","Description":"Load 3D models using GLTFLoader and traverse gltf.scene to configure castShadow receiveShadow and material overrides on all child Mesh nodes. Calling scene.add(gltf.scene) alone silently skips all shadow and material configuration.","Do":"Use GLTFLoader and traverse the entire gltf.scene graph to set up shadows and materials on every Mesh child","Don't":"Load a GLTF model and pass gltf.scene directly to scene.add without traversing child meshes","Guideline":"GLTFLoader with scene traverse","No":52,"Severity":"Medium","domain":"stack/threejs","record_id":"stack/threejs/52","stack":"threejs"},{"Category":"Production","Description":"Use THREE.LOD to automatically swap high-detail and low-detail geometry as objects move closer or farther from the camera. This maintains frame rate in scenes with many objects spread across a large depth range.","Do":"Use THREE.LOD to reduce triangle count on distant objects automatically","Don't":"Render the same high-polygon geometry for every object regardless of its distance from the camera","Guideline":"LOD for Distance-Based Detail","No":53,"Severity":"Medium","domain":"stack/threejs","record_id":"stack/threejs/53","stack":"threejs"},{"Category":"XAML","Description":"Uno implements the WinUI API across platforms","Do":"Microsoft.UI.Xaml namespace for all UI code","Don't":"WPF or Xamarin.Forms namespaces","Guideline":"Use WinUI XAML API surface","No":1,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/1","stack":"uno"},{"Category":"XAML","Description":"Not all WinUI APIs are implemented on every platform","Do":"Uno API compatibility docs before using new APIs","Don't":"Assuming all WinUI APIs work everywhere","Guideline":"Check API implementation status","No":2,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/2","stack":"uno"},{"Category":"XAML","Description":"Uno.WinUI uses WinUI 3 APIs","Do":"Uno.WinUI NuGet packages for new projects","Don't":"Uno.UI (UWP API surface) for new projects","Guideline":"Use Uno.WinUI not Uno.UI for new projects","No":3,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/3","stack":"uno"},{"Category":"XAML","Description":"Speed up development with live XAML editing","Do":"Hot Reload for iterating on layouts","Don't":"Restarting app for every XAML change","Guideline":"Use XAML Hot Reload","No":4,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/4","stack":"uno"},{"Category":"Conditional","Description":"Conditional namespaces for platform-specific UI","Do":"xmlns:android xmlns:ios xmlns:wasm for platform XAML","Don't":"Shared XAML when platforms need different controls","Guideline":"Use platform-specific XAML","No":5,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/5","stack":"uno"},{"Category":"Conditional","Description":"Separate platform implementations in partial files","Do":"Partial class files with platform-specific logic","Don't":"#if directives in shared code for large blocks","Guideline":"Use partial classes for platform code","No":6,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/6","stack":"uno"},{"Category":"Conditional","Description":"Target correct platforms with defines","Do":"__IOS__ __ANDROID__ __WASM__ __DESKTOP__ for platform checks","Don't":"Inventing custom symbols or checking OS at runtime","Guideline":"Use preprocessor symbols correctly","No":7,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/7","stack":"uno"},{"Category":"Conditional","Description":"Keep shared code maximized","Do":"Abstract platform differences behind interfaces","Don't":"Duplicating logic across platform files","Guideline":"Minimize platform-specific code","No":8,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/8","stack":"uno"},{"Category":"Navigation","Description":"Standard WinUI navigation pattern","Do":"Frame.Navigate with page types","Don't":"Manual content swapping","Guideline":"Use Frame-based navigation","No":9,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/9","stack":"uno"},{"Category":"Navigation","Description":"Type-safe navigation with DI integration","Do":"Uno.Extensions navigation for complex apps","Don't":"Manual Frame management in large apps","Guideline":"Use Uno.Extensions.Navigation","No":10,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/10","stack":"uno"},{"Category":"Navigation","Description":"SystemNavigationManager.BackRequested works on Android iOS and WASM but is unimplemented on WinAppSDK desktop where calling GetForCurrentView() throws at runtime","Do":"Subscribe to BackRequested only on platforms that support it or use Uno.Toolkit NavigationBar for cross-platform back UX","Don't":"Calling SystemNavigationManager.GetForCurrentView() on WinUI 3 desktop without a guard","Guideline":"Handle platform back navigation","No":11,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/11","stack":"uno"},{"Category":"Navigation","Description":"Support URI activation across platforms","Do":"Handle protocol activation and URI routing","Don't":"Single entry point ignoring activation","Guideline":"Use deep linking","No":12,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/12","stack":"uno"},{"Category":"Renderers","Description":"Uno offers both rendering approaches","Do":"Skia for pixel-perfect cross-platform consistency","Don't":"Assuming native rendering on all platforms","Guideline":"Understand Skia vs native rendering","No":13,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/13","stack":"uno"},{"Category":"Renderers","Description":"Uno 5.2+ ships a single Skia Desktop shell that auto-selects X11 Win32 or AppKit per OS — Skia.Gtk Skia.Linux.Framebuffer and Skia.WPF heads are deprecated","Do":"net10.0-desktop TFM with UnoPlatformHostBuilder for cross-platform desktop","Don't":"Targeting the legacy Skia.Gtk or Skia.Linux.Framebuffer heads in new projects","Guideline":"Use unified net10.0-desktop target","No":14,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/14","stack":"uno"},{"Category":"Renderers","Description":"Visual differences exist between renderers","Do":"Visual testing on each active target platform","Don't":"Testing only on Windows assuming others match","Guideline":"Test rendering on each target","No":15,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/15","stack":"uno"},{"Category":"Renderers","Description":"Access native APIs through Uno abstractions","Do":"Native platform APIs via platform-specific code","Don't":"Avoiding native features for purity","Guideline":"Use platform-native features when needed","No":16,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/16","stack":"uno"},{"Category":"Performance","Description":"WebAssembly downloads can be large","Do":"IL linker and AOT for smaller WASM bundles","Don't":"Default settings for production WASM","Guideline":"Optimize WASM bundle size","No":17,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/17","stack":"uno"},{"Category":"Performance","Description":"Defer element creation until needed","Do":"x:Load=False for hidden panels and tabs","Don't":"Loading all UI elements upfront","Guideline":"Use x:Load for deferred XAML","No":18,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/18","stack":"uno"},{"Category":"Data Binding","Description":"Compiled bindings eliminate runtime reflection — Uno supports x:Bind across iOS Android WASM Skia and Windows targets that compile XAML so prefer it over {Binding} for static well-typed bindings","Do":"x:Bind for property and event bindings; reserve {Binding} for runtime-typed DataContext scenarios","Don't":"{Binding} everywhere when x:Bind would compile","Guideline":"Use x:Bind for compiled bindings","No":19,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/19","stack":"uno"},{"Category":"Performance","Description":"Performance characteristics vary by target","Do":"Platform-specific profiling tools","Don't":"Assuming desktop perf equals mobile","Guideline":"Profile per platform","No":20,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/20","stack":"uno"},{"Category":"Styling","Description":"Consistent theming across platforms","Do":"ThemeResource for adaptive colors","Don't":"Hardcoded colors per platform","Guideline":"Use WinUI theme resources","No":21,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/21","stack":"uno"},{"Category":"Styling","Description":"Application.RequestedTheme accepts only ApplicationTheme.Light/Dark — to follow the system theme leave it unset entirely. ElementTheme.Default exists only on FrameworkElement.RequestedTheme not on Application","Do":"Omit Application.RequestedTheme so the OS theme wins; use RequestedTheme=Default on FrameworkElement to inherit from parent","Don't":"Setting Application.RequestedTheme=\"\"Default\"\" — not a valid ApplicationTheme value and throws at parse time","Guideline":"Support light and dark themes","No":22,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/22","stack":"uno"},{"Category":"Styling","Description":"Override control sub-properties via resources","Do":"Lightweight styling keys for minor tweaks","Don't":"Full ControlTemplate for small changes","Guideline":"Use Lightweight Styling","No":23,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/23","stack":"uno"},{"Category":"Styling","Description":"Theme rendering differs across platforms","Do":"Visual theme testing on all targets","Don't":"Assuming themes look identical everywhere","Guideline":"Test themes on each platform","No":24,"Severity":"Low","domain":"stack/uno","record_id":"stack/uno/24","stack":"uno"},{"Category":"Architecture","Description":"Separate view and logic","Do":"CommunityToolkit.Mvvm or Prism for MVVM","Don't":"Code-behind for business logic","Guideline":"Use MVVM pattern","No":25,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/25","stack":"uno"},{"Category":"Architecture","Description":"Official extension libraries for common patterns","Do":"Uno.Extensions for DI navigation configuration","Don't":"Building infrastructure from scratch","Guideline":"Use Uno.Extensions","No":26,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/26","stack":"uno"},{"Category":"Architecture","Description":"Register services for testability","Do":"Microsoft.Extensions.DI through Uno.Extensions","Don't":"Static service locators and singletons","Guideline":"Use dependency injection","No":27,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/27","stack":"uno"},{"Category":"Architecture","Description":"Maximize code reuse across targets","Do":"Business logic in .NET Standard or shared library","Don't":"Business logic in platform head projects","Guideline":"Share code via class libraries","No":28,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/28","stack":"uno"},{"Category":"Architecture","Description":"Single source SVG to multi-platform assets","Do":"UnoImage for automatic asset generation from SVG","Don't":"Manual asset export per resolution and platform","Guideline":"Use Uno.Resizetizer for assets","No":29,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/29","stack":"uno"},{"Category":"Accessibility","Description":"Enable screen readers across platforms","Do":"AutomationProperties.Name on interactive controls","Don't":"Controls without accessible names","Guideline":"Set AutomationProperties","No":30,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/30","stack":"uno"},{"Category":"Accessibility","Description":"Each platform has different assistive tech","Do":"Test with VoiceOver TalkBack and Narrator","Don't":"Testing accessibility on one platform only","Guideline":"Test accessibility per platform","No":31,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/31","stack":"uno"},{"Category":"Accessibility","Description":"Respect user font size preferences","Do":"Dynamic font scaling for all text","Don't":"Fixed font sizes ignoring accessibility","Guideline":"Support platform text scaling","No":32,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/32","stack":"uno"},{"Category":"Testing","Description":"Test business logic independently","Do":"xUnit or MSTest on shared ViewModel code","Don't":"UI testing only","Guideline":"Unit test ViewModels","No":33,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/33","stack":"uno"},{"Category":"Testing","Description":"Cross-platform UI testing framework","Do":"Uno.UITest for automated UI tests across platforms","Don't":"Manual regression testing","Guideline":"Use Uno.UITest for integration","No":34,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/34","stack":"uno"},{"Category":"WASM","Description":"WASM bundle download and runtime startup take several seconds on first load — render branded UI immediately so users do not see a blank page (AOT and trimming are covered separately)","Do":"Render a splash overlay in wwwroot/index.html that hides on first XAML navigation","Don't":"Letting the user wait on a blank white page while the runtime boots","Guideline":"Show an extended splash screen on WASM","No":35,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/35","stack":"uno"},{"Category":"WASM","Description":"Ahead-of-time compilation improves runtime speed","Do":"AOT for production WASM builds","Don't":"Interpreter mode in production","Guideline":"Use AOT compilation for performance","No":36,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/36","stack":"uno"},{"Category":"WASM","Description":"WASM runs in browser sandbox","Do":"Feature detection for browser APIs","Don't":"Assuming desktop capabilities in browser","Guideline":"Handle browser limitations","No":37,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/37","stack":"uno"},{"Category":"Controls","Description":"WinUI NavigationView for consistent navigation across platforms","Do":"NavigationView with MenuItems for app navigation","Don't":"Custom hamburger menu implementation","Guideline":"Use NavigationView for app shell","No":38,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/38","stack":"uno"},{"Category":"Controls","Description":"Cross-platform modal dialogs using WinUI API","Do":"ContentDialog for confirmations and input","Don't":"Custom overlay Panel as dialog","Guideline":"Use ContentDialog for modal interactions","No":39,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/39","stack":"uno"},{"Category":"Controls","Description":"Standard command bar with primary and secondary commands","Do":"CommandBar with AppBarButtons for toolbar actions","Don't":"Custom StackPanel toolbar","Guideline":"Use CommandBar for app actions","No":40,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/40","stack":"uno"},{"Category":"Controls","Description":"Platform-native toggle control for on/off preferences","Do":"ToggleSwitch for settings and feature flags","Don't":"CheckBox for toggle settings","Guideline":"Use ToggleSwitch for boolean settings","No":41,"Severity":"Low","domain":"stack/uno","record_id":"stack/uno/41","stack":"uno"},{"Category":"Data Binding","Description":"Enable UI updates when ViewModel properties change","Do":"CommunityToolkit.Mvvm [ObservableProperty] for auto-notification","Don't":"Properties without change notification","Guideline":"Implement INotifyPropertyChanged","No":42,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/42","stack":"uno"},{"Category":"Data Binding","Description":"Collection change notifications for ItemsSources across platforms","Do":"ObservableCollection<T> for data-bound lists","Don't":"List<T> for bound ItemsSources","Guideline":"Use ObservableCollection for bound lists","No":43,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/43","stack":"uno"},{"Category":"Lifecycle","Description":"iOS and Android may suspend or terminate the app — WinAppSDK desktop does not raise Suspending so use window Closed for desktop save-state","Do":"Save state in OnSuspending and restore on activation","Don't":"Ignoring lifecycle losing user state on mobile","Guideline":"Handle app suspension on mobile","No":44,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/44","stack":"uno"},{"Category":"Lifecycle","Description":"Structured app initialization with DI and configuration","Do":"IHost builder pattern for app startup and service registration","Don't":"Manual initialization in App constructor","Guideline":"Use Uno.Extensions.Hosting for startup","No":45,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/45","stack":"uno"},{"Category":"Performance","Description":"Only renders visible items to reduce memory and layout cost","Do":"ListView with default ItemsStackPanel virtualization","Don't":"ItemsControl or StackPanel for large data sets","Guideline":"Use ListView virtualization for large lists","No":46,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/46","stack":"uno"},{"Category":"Accessibility","Description":"Skia and WinAppSDK targets need full keyboard operability — note TabIndex routing is not fully implemented on every Uno target","Do":"AccessKey and KeyboardAccelerator on Skia and WinAppSDK targets","Don't":"Mouse-only interactions on desktop","Guideline":"Support keyboard navigation on desktop","No":47,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/47","stack":"uno"},{"Category":"WASM","Description":"Enable PWA capabilities for WASM deployments","Do":"Service worker registration for caching and offline mode","Don't":"Online-only WASM app with no offline fallback","Guideline":"Use service workers for offline support","No":48,"Severity":"Low","domain":"stack/uno","record_id":"stack/uno/48","stack":"uno"},{"Category":"Performance","Description":"Cross-thread access to UI elements throws — capture the UI DispatcherQueue once and use TryEnqueue to update from background work","Do":"DispatcherQueue.GetForCurrentThread().TryEnqueue from background work","Don't":"Touching UI controls directly from a Task","Guideline":"Marshal to UI thread with DispatcherQueue","No":49,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/49","stack":"uno"},{"Category":"Styling","Description":"Required for Fluent control styles to load — without it controls render with no template","Do":"Add XamlControlsResources at the top of Application.Resources MergedDictionaries","Don't":"Skipping the merged dictionary and wondering why Buttons look unstyled","Guideline":"Merge XamlControlsResources in App.xaml","No":50,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/50","stack":"uno"},{"Category":"Architecture","Description":"AsyncRelayCommand reports CanExecute=false (raising CanExecuteChanged) and exposes IsRunning while the Task is in flight — the bound control is disabled and re-entrancy is prevented by default (AllowConcurrentExecutions=false)","Do":"[RelayCommand] on a Task-returning method for awaitable work","Don't":"async void event handlers calling .Wait() or .Result","Guideline":"Use async [RelayCommand] for I/O","No":51,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/51","stack":"uno"},{"Category":"Architecture","Description":"WinUI x:Uid resolves UI text from .resw resources at runtime — use it instead of hardcoded strings to support localization across iOS Android WASM and desktop from a single project","Do":"x:Uid on every user-facing string with matching .resw entries per language under Strings/{lang}/Resources.resw","Don't":"Hardcoding language-specific strings into XAML or code-behind","Guideline":"Use x:Uid for localized strings","No":52,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/52","stack":"uno"},{"Category":"Architecture","Description":"Cross-platform logging routes to platform-native sinks (OSLog on iOS Console on WASM Debug elsewhere) when configured through the IHost builder","Do":"Inject ILogger<T> into ViewModels and services and call UseLogging() on the host builder","Don't":"Console.WriteLine or platform-specific log APIs scattered across shared code","Guideline":"Wire up ILogger via Uno.Extensions.Logging","No":53,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/53","stack":"uno"},{"Category":"Performance","Description":"Skia Desktop on .NET 10 supports Native AOT for faster cold start and smaller deployments — opt in per-target so debug builds remain fast","Do":"<PublishAot>true</PublishAot> in a TFM-conditional PropertyGroup for net10.0-desktop release builds","Don't":"Enabling PublishAot globally and breaking debug iteration on every TFM","Guideline":"Enable PublishAot on net10.0-desktop","No":54,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/54","stack":"uno"},{"Category":"Performance","Description":"Blocking on a Task from the UI thread deadlocks because the awaiter cannot resume on the captured SynchronizationContext — always await async APIs through to the event handler","Do":"Await async methods all the way up; in libraries call ConfigureAwait(false) to avoid context capture","Don't":"Calling .Result .Wait() or GetAwaiter().GetResult() on a Task from the UI thread","Guideline":"Never block on async with .Result or .Wait()","No":55,"Severity":"High","domain":"stack/uno","record_id":"stack/uno/55","stack":"uno"},{"Category":"Styling","Description":"Resources placed inside ResourceDictionary.ThemeDictionaries entries are automatically swapped when the system theme changes — required for theme-aware brushes","Do":"Wrap brushes in a ThemeDictionaries dictionary keyed by Light Dark and HighContrast in App.xaml or page resources","Don't":"Defining a single brush at the root and missing dark/high-contrast variants","Guideline":"Define ThemeDictionaries for Light Dark and HighContrast","No":56,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/56","stack":"uno"},{"Category":"Architecture","Description":"Uno.Sdk is the modern single-project SDK that auto-resolves Uno.WinUI Uno.Toolkit Material and other packages from a UnoFeatures property — declare features by name instead of hand-managing dozens of PackageReferences","Do":"Declare features in the csproj via <UnoFeatures>...</UnoFeatures> and let the SDK resolve transitive packages","Don't":"Hand-adding every Uno.* PackageReference and matching version numbers across packages","Guideline":"Use Uno.Sdk with UnoFeatures","No":57,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/57","stack":"uno"},{"Category":"Lifecycle","Description":"WinAppSDK and Skia desktop heads do not raise Application.Suspending — handle the Window.Closed event (and AppWindow size/position changes) to save user state when desktop apps shut down","Do":"Subscribe to MainWindow.Closed and persist any unsaved state before the window is destroyed","Don't":"Relying on Application.Suspending to fire on desktop targets","Guideline":"Persist desktop window state via Window.Closed","No":58,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/58","stack":"uno"},{"Category":"Architecture","Description":"Calling Win32 APIs from a WinUI Window (file pickers icon embedding etc.) requires the HWND — retrieve it via WinRT.Interop.WindowNative.GetWindowHandle and guard the call so non-Windows targets stay unaffected","Do":"GetWindowHandle inside a #if WINDOWS block when you need the HWND","Don't":"Calling WinRT.Interop in shared code without a platform guard","Guideline":"Use WinRT.Interop for native window handle on Windows","No":59,"Severity":"Medium","domain":"stack/uno","record_id":"stack/uno/59","stack":"uno"},{"Category":"XAML","Description":"Compile-time validated bindings with better performance","Do":"x:Bind for type-safe performant bindings","Don't":"{Binding} when x:Bind is available","Guideline":"Use x:Bind for compiled bindings","No":1,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/1","stack":"uwp"},{"Category":"XAML","Description":"Delay creation of elements until needed","Do":"x:Load=False for hidden or conditional panels","Don't":"Loading all UI elements at page load","Guideline":"Use x:Load for deferred elements","No":2,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/2","stack":"uwp"},{"Category":"XAML","Description":"Render list items in priority phases","Do":"x:Phase on secondary content in item DataTemplates","Don't":"All template content loaded in one pass","Guideline":"Use x:Phase for incremental item rendering","No":3,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/3","stack":"uwp"},{"Category":"XAML","Description":"Reduce repetitive Mode= declarations","Do":"x:DefaultBindMode=OneWay on containers","Don't":"Mode=OneWay on every individual x:Bind","Guideline":"Use x:DefaultBindMode","No":4,"Severity":"Low","domain":"stack/uwp","record_id":"stack/uwp/4","stack":"uwp"},{"Category":"XAML","Description":"Deferred loading before x:Load was available","Do":"x:Load (preferred) or x:DeferLoadStrategy=Lazy","Don't":"Eagerly loading rarely shown UI","Guideline":"Use x:DeferLoadStrategy for legacy support","No":5,"Severity":"Low","domain":"stack/uwp","record_id":"stack/uwp/5","stack":"uwp"},{"Category":"Controls","Description":"Standard UWP navigation pattern with hamburger menu","Do":"NavigationView for top-level navigation","Don't":"Custom SplitView hamburger menu","Guideline":"Use NavigationView for app shell","No":6,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/6","stack":"uwp"},{"Category":"Controls","Description":"Standard app bar for primary commands","Do":"CommandBar with AppBarButtons","Don't":"Custom StackPanel toolbar","Guideline":"Use CommandBar for app actions","No":7,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/7","stack":"uwp"},{"Category":"Controls","Description":"System-styled modal dialogs","Do":"ContentDialog for confirmations and input","Don't":"Custom popup overlays","Guideline":"Use ContentDialog for modals","No":8,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/8","stack":"uwp"},{"Category":"Controls","Description":"Built-in search box with suggestions","Do":"AutoSuggestBox with QuerySubmitted and SuggestionChosen","Don't":"TextBox with manual suggestion popup","Guideline":"Use AutoSuggestBox for search","No":9,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/9","stack":"uwp"},{"Category":"Controls","Description":"Platform-consistent date and time selection","Do":"Built-in date and time pickers","Don't":"Custom date selection controls","Guideline":"Use CalendarDatePicker and TimePicker","No":10,"Severity":"Low","domain":"stack/uwp","record_id":"stack/uwp/10","stack":"uwp"},{"Category":"Controls","Description":"Consistent avatar display with fallback initials","Do":"PersonPicture with DisplayName and ProfilePicture","Don't":"Custom Ellipse with ImageBrush for avatars","Guideline":"Use PersonPicture for user avatars","No":11,"Severity":"Low","domain":"stack/uwp","record_id":"stack/uwp/11","stack":"uwp"},{"Category":"Styling","Description":"Colors that switch with light and dark theme","Do":"ThemeResource for all color references","Don't":"Hardcoded hex values that break in dark mode","Guideline":"Use ThemeResource for adaptive colors","No":12,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/12","stack":"uwp"},{"Category":"Styling","Description":"Acrylic translucent material for depth","Do":"Built-in Fluent materials for depth and motion","Don't":"Custom shader effects for blur and reveal","Guideline":"Use Fluent Design materials","No":13,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/13","stack":"uwp"},{"Category":"Styling","Description":"Override control resource keys for subtle changes","Do":"Lightweight styling resource overrides","Don't":"Full ControlTemplate copy for small tweaks","Guideline":"Use Lightweight Styling","No":14,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/14","stack":"uwp"},{"Category":"Styling","Description":"TargetType without x:Key applies to all instances","Do":"Implicit Style for default control appearance","Don't":"Repeating Setters on every control instance","Guideline":"Use implicit styles for consistency","No":15,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/15","stack":"uwp"},{"Category":"Styling","Description":"Define visual states with Setters that change properties when triggered","Do":"VisualStateGroup containing VisualStates with Setter targets","Don't":"Toggling Visibility from code-behind on SizeChanged","Guideline":"Use VisualStateManager for visual states","No":16,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/16","stack":"uwp"},{"Category":"Navigation","Description":"Windows.UI.Xaml.Controls.Frame for UWP page navigation","Do":"Frame.Navigate with typed parameters","Don't":"Swapping UserControls manually","Guideline":"Use Frame for page navigation","No":17,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/17","stack":"uwp"},{"Category":"Navigation","Description":"Provide an in-app Back button styled with NavigationBackButtonNormalStyle and handle SystemNavigationManager.BackRequested for hardware back gamepad B and Tablet-Mode back; also handle CoreDispatcher.AcceleratorKeyActivated for Alt+Left","Do":"In-app NavigationBackButtonNormalStyle button plus SystemNavigationManager.BackRequested handler","Don't":"Relying on the deprecated title-bar back button (AppViewBackButtonVisibility) or ignoring system back signals","Guideline":"Handle back button correctly","No":18,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/18","stack":"uwp"},{"Category":"Navigation","Description":"Respond to URI activation and toast taps","Do":"OnActivated handler with proper page routing","Don't":"Ignoring activation arguments","Guideline":"Support deep linking with protocol activation","No":19,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/19","stack":"uwp"},{"Category":"Navigation","Description":"Smooth transitions between pages","Do":"ConnectedAnimationService for shared element transitions","Don't":"Abrupt page transitions with no visual continuity","Guideline":"Use ConnectedAnimations for continuity","No":20,"Severity":"Low","domain":"stack/uwp","record_id":"stack/uwp/20","stack":"uwp"},{"Category":"Data Binding","Description":"Enable UI updates on property changes","Do":"INotifyPropertyChanged on all ViewModels","Don't":"Auto-properties without notification","Guideline":"Implement INotifyPropertyChanged","No":21,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/21","stack":"uwp"},{"Category":"Data Binding","Description":"Collection change notifications for ItemsSources","Do":"ObservableCollection<T> for bound lists","Don't":"List<T> for data-bound collections","Guideline":"Use ObservableCollection for lists","No":22,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/22","stack":"uwp"},{"Category":"Data Binding","Description":"Call static methods directly in markup","Do":"x:Bind to static converter methods","Don't":"IValueConverter for trivial transforms","Guideline":"Use function bindings with x:Bind","No":23,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/23","stack":"uwp"},{"Category":"Data Binding","Description":"x:Bind defaults to OneTime not OneWay","Do":"Mode=OneWay or TwoWay when live updates needed","Don't":"Omitting Mode and getting stale UI","Guideline":"Specify Mode on x:Bind","No":24,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/24","stack":"uwp"},{"Category":"Data Binding","Description":"Group and sort collections declaratively","Do":"CollectionViewSource for grouped ListView and GridView","Don't":"Manual grouping logic in code-behind","Guideline":"Use CollectionViewSource for grouping","No":25,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/25","stack":"uwp"},{"Category":"Performance","Description":"Only creates containers for visible items","Do":"Default virtualization in ListView and GridView","Don't":"Setting ItemsPanel to non-virtualizing panel","Guideline":"Use ListView and GridView virtualization","No":26,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/26","stack":"uwp"},{"Category":"Performance","Description":"Load data on demand as user scrolls","Do":"ISupportIncrementalLoading for large datasets","Don't":"Loading entire collection upfront","Guideline":"Use ISupportIncrementalLoading","No":27,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/27","stack":"uwp"},{"Category":"Performance","Description":"Simpler trees layout and render faster","Do":"Flat templates with minimal nesting","Don't":"Deeply nested panels in DataTemplates","Guideline":"Reduce XAML visual tree depth","No":28,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/28","stack":"uwp"},{"Category":"Performance","Description":"x:Bind in templates requires x:DataType","Do":"x:DataType on DataTemplate for compiled bindings","Don't":"{Binding} in item templates for large lists","Guideline":"Use compiled bindings in DataTemplates","No":29,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/29","stack":"uwp"},{"Category":"Performance","Description":"Measure before optimizing","Do":"Application Timeline and Memory Usage tools","Don't":"Guessing at performance problems","Guideline":"Profile with Visual Studio diagnostics","No":30,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/30","stack":"uwp"},{"Category":"Threading","Description":"Keep UI thread responsive","Do":"async/await for file network and database operations","Don't":"Synchronous IO blocking the UI thread","Guideline":"Use async/await for all IO","No":31,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/31","stack":"uwp"},{"Category":"Threading","Description":"Post work back to the UI thread from background","Do":"Dispatcher.RunAsync from background threads","Don't":"Touching UI elements from background threads","Guideline":"Use CoreDispatcher for UI thread access","No":32,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/32","stack":"uwp"},{"Category":"Threading","Description":"Keep compute-heavy work off UI thread","Do":"Task.Run for CPU-bound operations","Don't":"Heavy computation blocking UI","Guideline":"Offload CPU work with Task.Run","No":33,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/33","stack":"uwp"},{"Category":"Threading","Description":"Report progress from background operations","Do":"IProgress<T> for progress reporting to UI","Don't":"Polling shared variables for progress","Guideline":"Use IProgress for status updates","No":34,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/34","stack":"uwp"},{"Category":"Adaptive","Description":"MinWindowWidth and MinWindowHeight triggers fire at standard breakpoints (640 small / 1008 medium)","Do":"AdaptiveTrigger inside VisualState.StateTriggers with the 640 and 1008 breakpoints","Don't":"Fixed layouts for a single screen size","Guideline":"Use AdaptiveTrigger for responsive layouts","No":35,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/35","stack":"uwp"},{"Category":"Adaptive","Description":"Phone tablet desktop Xbox and HoloLens","Do":"DeviceFamily-specific views and resources","Don't":"Desktop-only design ignoring other form factors","Guideline":"Design for multiple device families","No":36,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/36","stack":"uwp"},{"Category":"Adaptive","Description":"Controls position relative to each other","Do":"RelativePanel for layouts that reflow at breakpoints","Don't":"Absolute positioning or fixed margins","Guideline":"Use RelativePanel for adaptive positioning","No":37,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/37","stack":"uwp"},{"Category":"Adaptive","Description":"Open detached views with CoreApplication.CreateNewView and ApplicationViewSwitcher","Do":"CreateNewView and TryShowAsStandaloneAsync for multi-document scenarios","Don't":"Single-window assumptions when scenarios benefit from secondary views","Guideline":"Support multi-window with secondary views","No":38,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/38","stack":"uwp"},{"Category":"Accessibility","Description":"Enable Narrator and screen reader support","Do":"AutomationProperties.Name on all interactive controls","Don't":"Controls without accessible names","Guideline":"Set AutomationProperties","No":39,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/39","stack":"uwp"},{"Category":"Accessibility","Description":"All functions reachable without touch","Do":"Tab navigation XYFocus and access keys","Don't":"Touch-only interactions","Guideline":"Support keyboard and gamepad","No":40,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/40","stack":"uwp"},{"Category":"Accessibility","Description":"Respect system contrast themes (renamed from high contrast in Windows 11)","Do":"ThemeResource brushes that adapt to contrast themes","Don't":"Hardcoded colors that vanish under contrast themes","Guideline":"Support contrast themes","No":41,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/41","stack":"uwp"},{"Category":"Accessibility","Description":"Validate screen reader and automation compliance","Do":"Regular Narrator walkthrough and Accessibility Insights scan","Don't":"Shipping without accessibility testing","Guideline":"Test with Narrator and Accessibility Insights","No":42,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/42","stack":"uwp"},{"Category":"Architecture","Description":"Separate View ViewModel and Model","Do":"ViewModel with INotifyPropertyChanged and ICommand","Don't":"Business logic in code-behind","Guideline":"Use MVVM pattern","No":43,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/43","stack":"uwp"},{"Category":"Architecture","Description":"Proven project templates with navigation and services","Do":"Windows Template Studio for new UWP projects","Don't":"Blank project with manual boilerplate","Guideline":"Use Template Studio for scaffolding","No":44,"Severity":"Low","domain":"stack/uwp","record_id":"stack/uwp/44","stack":"uwp"},{"Category":"Architecture","Description":"Register services for testability","Do":"Microsoft.Extensions.DI for service resolution","Don't":"Static singletons and manual construction","Guideline":"Use dependency injection","No":45,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/45","stack":"uwp"},{"Category":"Architecture","Description":"Isolate WinRT APIs from business logic","Do":"Interfaces wrapping StorageFile FilePicker etc","Don't":"Direct WinRT calls in ViewModels","Guideline":"Keep platform APIs behind abstractions","No":46,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/46","stack":"uwp"},{"Category":"Lifecycle","Description":"UWP apps are suspended when not in foreground","Do":"Save state in OnSuspending and restore in OnLaunched","Don't":"Ignoring app lifecycle losing user state","Guideline":"Handle suspend and resume","No":47,"Severity":"High","domain":"stack/uwp","record_id":"stack/uwp/47","stack":"uwp"},{"Category":"Lifecycle","Description":"Request extended time for unfinished operations","Do":"ExtendedExecutionSession for saving or uploads","Don't":"Assuming background work completes after suspend","Guideline":"Use ExtendedExecutionSession for background work","No":48,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/48","stack":"uwp"},{"Category":"Lifecycle","Description":"Apps must opt in to prelaunch via CoreApplication.EnablePrelaunch(true) starting in Windows 10 1607; check LaunchActivatedEventArgs.PrelaunchActivated to skip user-visible work","Do":"Opt in with EnablePrelaunch and skip heavy init when PrelaunchActivated is true","Don't":"Performing full initialization or navigating during prelaunch","Guideline":"Handle prelaunch","No":49,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/49","stack":"uwp"},{"Category":"Testing","Description":"Test logic without UI framework dependencies","Do":"xUnit or MSTest on ViewModel methods","Don't":"Testing only through the running app","Guideline":"Unit test ViewModels","No":50,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/50","stack":"uwp"},{"Category":"Testing","Description":"Automated UI testing for UWP (Coded UI Test was deprecated in Visual Studio 2019); WinAppDriver v1 is in low-maintenance mode and Appium 2 is the modern direction","Do":"WinAppDriver with Appium for end-to-end tests","Don't":"Manual regression testing","Guideline":"Use WinAppDriver with Appium for UI tests","No":51,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/51","stack":"uwp"},{"Category":"Testing","Description":"Behavior varies across phone desktop and Xbox","Do":"Test on device emulators and real hardware","Don't":"Desktop-only testing","Guideline":"Test on multiple device families","No":52,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/52","stack":"uwp"},{"Category":"Architecture","Description":"UWP is in maintenance mode and Microsoft recommends WinUI 3 and Windows App SDK for new development","Do":"WinUI 3 with Windows App SDK for new desktop apps","Don't":"Starting new projects on UWP when WinUI 3 is available","Guideline":"Prefer WinUI 3 for new projects","No":53,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/53","stack":"uwp"},{"Category":"Architecture","Description":"Microsoft provides migration guides from UWP to WinUI 3","Do":"Incremental migration using XAML Islands or full port to WinUI 3","Don't":"Ignoring migration path and accumulating UWP technical debt","Guideline":"Plan migration to Windows App SDK","No":54,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/54","stack":"uwp"},{"Category":"Lifecycle","Description":"Suspending grants only ~5 seconds before the OS may terminate; await work needs SuspendingOperation.GetDeferral and Complete or save returns before it finishes","Do":"GetDeferral around async save calls and Complete in finally","Don't":"Async work that returns the suspending handler before completion","Guideline":"Use a deferral when saving async state on suspend","No":55,"Severity":"Medium","domain":"stack/uwp","record_id":"stack/uwp/55","stack":"uwp"},{"Category":"Composition","Description":"Composition API offers better TypeScript support and logic reuse","Do":"<script setup> for components","Don't":"Options API for new projects","Guideline":"Use Composition API for new projects","No":1,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/1","stack":"vue"},{"Category":"Composition","Description":"Cleaner syntax with automatic exports","Do":"<script setup> with defineProps","Don't":"setup() function manually","Guideline":"Use script setup syntax","No":2,"Severity":"Low","domain":"stack/vue","record_id":"stack/vue/2","stack":"vue"},{"Category":"Reactivity","Description":"ref() for primitive values that need reactivity","Do":"ref() for strings numbers booleans","Don't":"reactive() for primitives","Guideline":"Use ref for primitives","No":3,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/3","stack":"vue"},{"Category":"Reactivity","Description":"reactive() for complex objects and arrays","Do":"reactive() for objects with multiple properties","Don't":"ref() for complex objects","Guideline":"Use reactive for objects","No":4,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/4","stack":"vue"},{"Category":"Reactivity","Description":"Remember .value in script unwrap in template","Do":"Use .value in script","Don't":"Forget .value in script","Guideline":"Access ref values with .value","No":5,"Severity":"High","domain":"stack/vue","record_id":"stack/vue/5","stack":"vue"},{"Category":"Reactivity","Description":"Computed properties cache and update automatically","Do":"computed() for derived values","Don't":"Methods for derived values","Guideline":"Use computed for derived state","No":6,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/6","stack":"vue"},{"Category":"Reactivity","Description":"Avoid deep reactivity for performance","Do":"shallowRef for large data structures","Don't":"ref for large nested objects","Guideline":"Use shallowRef for large objects","No":7,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/7","stack":"vue"},{"Category":"Watchers","Description":"Auto-tracks dependencies","Do":"watchEffect for simple reactive effects","Don't":"watch with explicit deps when not needed","Guideline":"Use watchEffect for simple cases","No":8,"Severity":"Low","domain":"stack/vue","record_id":"stack/vue/8","stack":"vue"},{"Category":"Watchers","Description":"Explicit control over what to watch","Do":"watch with specific refs","Don't":"watchEffect for complex conditional logic","Guideline":"Use watch for specific sources","No":9,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/9","stack":"vue"},{"Category":"Watchers","Description":"Return cleanup function in watchers","Do":"Return cleanup in watchEffect","Don't":"Leave subscriptions open","Guideline":"Clean up side effects","No":10,"Severity":"High","domain":"stack/vue","record_id":"stack/vue/10","stack":"vue"},{"Category":"Props","Description":"Type-safe prop definitions","Do":"defineProps with TypeScript","Don't":"Props without types","Guideline":"Define props with defineProps","No":11,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/11","stack":"vue"},{"Category":"Props","Description":"Provide defaults for optional props","Do":"withDefaults with defineProps","Don't":"Defaults in destructuring","Guideline":"Use withDefaults for default values","No":12,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/12","stack":"vue"},{"Category":"Props","Description":"Props should be read-only","Do":"Emit events to parent for changes","Don't":"Direct prop mutation","Guideline":"Avoid mutating props","No":13,"Severity":"High","domain":"stack/vue","record_id":"stack/vue/13","stack":"vue"},{"Category":"Emits","Description":"Type-safe event emissions","Do":"defineEmits with types","Don't":"Emit without definition","Guideline":"Define emits with defineEmits","No":14,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/14","stack":"vue"},{"Category":"Emits","Description":"Simplified parent-child data flow","Do":"v-model with modelValue prop","Don't":":value + @input manually","Guideline":"Use v-model for two-way binding","No":15,"Severity":"Low","domain":"stack/vue","record_id":"stack/vue/15","stack":"vue"},{"Category":"Lifecycle","Description":"DOM is ready in onMounted","Do":"onMounted for DOM operations","Don't":"Access DOM in setup directly","Guideline":"Use onMounted for DOM access","No":16,"Severity":"High","domain":"stack/vue","record_id":"stack/vue/16","stack":"vue"},{"Category":"Lifecycle","Description":"Remove listeners and subscriptions","Do":"onUnmounted for cleanup","Don't":"Leave listeners attached","Guideline":"Clean up in onUnmounted","No":17,"Severity":"High","domain":"stack/vue","record_id":"stack/vue/17","stack":"vue"},{"Category":"Lifecycle","Description":"Use onMounted or setup for data fetching","Do":"Fetch in onMounted or setup","Don't":"Fetch in onBeforeMount","Guideline":"Avoid onBeforeMount for data","No":18,"Severity":"Low","domain":"stack/vue","record_id":"stack/vue/18","stack":"vue"},{"Category":"Components","Description":"Keep template script style together","Do":".vue files for components","Don't":"Separate template/script files","Guideline":"Use single-file components","No":19,"Severity":"Low","domain":"stack/vue","record_id":"stack/vue/19","stack":"vue"},{"Category":"Components","Description":"Consistent component naming","Do":"PascalCase in imports and templates","Don't":"kebab-case in script","Guideline":"Use PascalCase for components","No":20,"Severity":"Low","domain":"stack/vue","record_id":"stack/vue/20","stack":"vue"},{"Category":"Components","Description":"Composables replace mixins","Do":"Composables for shared logic","Don't":"Mixins for code reuse","Guideline":"Prefer composition over mixins","No":21,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/21","stack":"vue"},{"Category":"Composables","Description":"Convention for composable functions","Do":"useFetch useAuth useForm","Don't":"getData or fetchApi","Guideline":"Name composables with use prefix","No":22,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/22","stack":"vue"},{"Category":"Composables","Description":"Maintain reactivity when destructuring","Do":"Return ref values","Don't":"Return reactive objects that lose reactivity","Guideline":"Return refs from composables","No":23,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/23","stack":"vue"},{"Category":"Composables","Description":"Use toValue for flexible inputs","Do":"toValue() or unref() for params","Don't":"Only accept ref or only value","Guideline":"Accept ref or value params","No":24,"Severity":"Low","domain":"stack/vue","record_id":"stack/vue/24","stack":"vue"},{"Category":"Templates","Description":"Cleaner template syntax","Do":":prop instead of v-bind:prop","Don't":"Full v-bind syntax","Guideline":"Use v-bind shorthand","No":25,"Severity":"Low","domain":"stack/vue","record_id":"stack/vue/25","stack":"vue"},{"Category":"Templates","Description":"Cleaner event binding","Do":"@event instead of v-on:event","Don't":"Full v-on syntax","Guideline":"Use v-on shorthand","No":26,"Severity":"Low","domain":"stack/vue","record_id":"stack/vue/26","stack":"vue"},{"Category":"Templates","Description":"v-if has higher priority causes issues","Do":"Wrap in template or computed filter","Don't":"v-if on same element as v-for","Guideline":"Avoid v-if with v-for","No":27,"Severity":"High","domain":"stack/vue","record_id":"stack/vue/27","stack":"vue"},{"Category":"Templates","Description":"Proper list rendering and updates","Do":"Unique key for each item","Don't":"Index as key for dynamic lists","Guideline":"Use key with v-for","No":28,"Severity":"High","domain":"stack/vue","record_id":"stack/vue/28","stack":"vue"},{"Category":"State","Description":"Official state management for Vue 3","Do":"Pinia stores for shared state","Don't":"Vuex for new projects","Guideline":"Use Pinia for global state","No":29,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/29","stack":"vue"},{"Category":"State","Description":"Composition API style stores","Do":"Setup stores with defineStore","Don't":"Options stores for complex state","Guideline":"Define stores with defineStore","No":30,"Severity":"Low","domain":"stack/vue","record_id":"stack/vue/30","stack":"vue"},{"Category":"State","Description":"Maintain reactivity when destructuring","Do":"storeToRefs(store)","Don't":"Direct destructuring","Guideline":"Use storeToRefs for destructuring","No":31,"Severity":"High","domain":"stack/vue","record_id":"stack/vue/31","stack":"vue"},{"Category":"Routing","Description":"Composition API router access","Do":"useRouter() useRoute() in setup","Don't":"this.$router this.$route","Guideline":"Use useRouter and useRoute","No":32,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/32","stack":"vue"},{"Category":"Routing","Description":"Code splitting for routes","Do":"() => import() for components","Don't":"Static imports for all routes","Guideline":"Lazy load route components","No":33,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/33","stack":"vue"},{"Category":"Routing","Description":"Protect routes and handle redirects","Do":"beforeEach for auth checks","Don't":"Check auth in each component","Guideline":"Use navigation guards","No":34,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/34","stack":"vue"},{"Category":"Performance","Description":"Skip re-renders for static elements","Do":"v-once on never-changing content","Don't":"v-once on dynamic content","Guideline":"Use v-once for static content","No":35,"Severity":"Low","domain":"stack/vue","record_id":"stack/vue/35","stack":"vue"},{"Category":"Performance","Description":"Memoize list items","Do":"v-memo with dependency array","Don't":"Re-render entire list always","Guideline":"Use v-memo for expensive lists","No":36,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/36","stack":"vue"},{"Category":"Performance","Description":"Avoid deep reactivity overhead","Do":"shallowReactive for flat state","Don't":"reactive for simple objects","Guideline":"Use shallowReactive for flat objects","No":37,"Severity":"Low","domain":"stack/vue","record_id":"stack/vue/37","stack":"vue"},{"Category":"Performance","Description":"Lazy load heavy components","Do":"defineAsyncComponent for modals dialogs","Don't":"Import all components eagerly","Guideline":"Use defineAsyncComponent","No":38,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/38","stack":"vue"},{"Category":"TypeScript","Description":"Type-safe reusable components","Do":"Generic with defineComponent","Don't":"Any types in components","Guideline":"Use generic components","No":39,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/39","stack":"vue"},{"Category":"TypeScript","Description":"Proper typing for DOM refs","Do":"ref<HTMLInputElement>(null)","Don't":"ref(null) without type","Guideline":"Type template refs","No":40,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/40","stack":"vue"},{"Category":"TypeScript","Description":"Type complex prop types","Do":"PropType<User> for object props","Don't":"Object without type","Guideline":"Use PropType for complex props","No":41,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/41","stack":"vue"},{"Category":"Testing","Description":"Official testing library","Do":"mount shallowMount for components","Don't":"Manual DOM testing","Guideline":"Use Vue Test Utils","No":42,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/42","stack":"vue"},{"Category":"Testing","Description":"Focus on inputs and outputs","Do":"Test props emit and rendered output","Don't":"Test internal implementation","Guideline":"Test component behavior","No":43,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/43","stack":"vue"},{"Category":"Forms","Description":"Built-in input handling","Do":".lazy .number .trim modifiers","Don't":"Manual input parsing","Guideline":"Use v-model modifiers","No":44,"Severity":"Low","domain":"stack/vue","record_id":"stack/vue/44","stack":"vue"},{"Category":"Forms","Description":"Form validation libraries","Do":"VeeValidate for complex forms","Don't":"Manual validation logic","Guideline":"Use VeeValidate or FormKit","No":45,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/45","stack":"vue"},{"Category":"Accessibility","Description":"Proper HTML elements in templates","Do":"button nav main for purpose","Don't":"div for everything","Guideline":"Use semantic elements","No":46,"Severity":"High","domain":"stack/vue","record_id":"stack/vue/46","stack":"vue"},{"Category":"Accessibility","Description":"Keep ARIA in sync with state","Do":":aria-expanded=\"isOpen\"","Don't":"Static ARIA values","Guideline":"Bind aria attributes dynamically","No":47,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/47","stack":"vue"},{"Category":"SSR","Description":"Full-featured SSR framework","Do":"Nuxt 3 for SSR apps","Don't":"Manual SSR setup","Guideline":"Use Nuxt for SSR","No":48,"Severity":"Medium","domain":"stack/vue","record_id":"stack/vue/48","stack":"vue"},{"Category":"SSR","Description":"Client/server content must match","Do":"ClientOnly for browser-only content","Don't":"Different content server/client","Guideline":"Handle hydration mismatches","No":49,"Severity":"High","domain":"stack/vue","record_id":"stack/vue/49","stack":"vue"},{"Category":"XAML","Description":"Compile-time checked bindings with better performance","Do":"x:Bind for type-safe bindings","Don't":"{Binding} when x:Bind works","Guideline":"Use x:Bind for compiled bindings","No":1,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/1","stack":"winui"},{"Category":"XAML","Description":"Only instantiate UI elements when needed","Do":"x:Load=False for hidden panels and dialogs","Don't":"Loading all UI upfront","Guideline":"Use x:Load for deferred loading","No":2,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/2","stack":"winui"},{"Category":"XAML","Description":"Load list items in phases for smooth scrolling","Do":"x:Phase on secondary content in DataTemplates","Don't":"Loading all template content in phase 0","Guideline":"Use x:Phase for incremental rendering","No":3,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/3","stack":"winui"},{"Category":"XAML","Description":"Set default binding mode for a scope","Do":"x:DefaultBindMode=OneWay on containers with many bindings","Don't":"Mode=OneWay on every individual x:Bind","Guideline":"Use x:DefaultBindMode","No":4,"Severity":"Low","domain":"stack/winui","record_id":"stack/winui/4","stack":"winui"},{"Category":"Controls","Description":"WinUI 3 NavigationView with Left Top and LeftCompact display modes plus footer items","Do":"NavigationView with PaneDisplayMode for main app shell","Don't":"Custom hamburger menu implementation","Guideline":"Use NavigationView for app navigation","No":5,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/5","stack":"winui"},{"Category":"Controls","Description":"Non-intrusive informational messages","Do":"InfoBar for success warning and error messages","Don't":"Custom styled StackPanel for status","Guideline":"Use InfoBar for status messages","No":6,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/6","stack":"winui"},{"Category":"Controls","Description":"Contextual tips attached to UI elements","Do":"TeachingTip for feature discovery","Don't":"Custom popup for teaching","Guideline":"Use TeachingTip for onboarding","No":7,"Severity":"Low","domain":"stack/winui","record_id":"stack/winui/7","stack":"winui"},{"Category":"Controls","Description":"Standard modal dialog pattern","Do":"ContentDialog for confirmations and input","Don't":"Custom overlay Panel as dialog","Guideline":"Use ContentDialog for modal interactions","No":8,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/8","stack":"winui"},{"Category":"Controls","Description":"Show navigation path in hierarchical apps","Do":"BreadcrumbBar for folder or category navigation","Don't":"Manual TextBlock breadcrumb chain","Guideline":"Use BreadcrumbBar for hierarchy","No":9,"Severity":"Low","domain":"stack/winui","record_id":"stack/winui/9","stack":"winui"},{"Category":"Styling","Description":"Override control sub-properties via resources","Do":"Lightweight styling resource keys to tweak controls","Don't":"Full ControlTemplate override for small changes","Guideline":"Use Lightweight Styling","No":10,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/10","stack":"winui"},{"Category":"Styling","Description":"Consistent Fluent Design colors and brushes","Do":"WinUI theme resource keys for colors","Don't":"Hardcoded hex color values","Guideline":"Use WinUI theme resources","No":11,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/11","stack":"winui"},{"Category":"Styling","Description":"Respect user and system theme preference","Do":"ThemeResource for theme-adaptive values","Don't":"Hardcoded colors that break in dark mode","Guideline":"Support light and dark themes","No":12,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/12","stack":"winui"},{"Category":"Styling","Description":"Acrylic Mica Reveal and rounded corners","Do":"Built-in Fluent materials and effects","Don't":"Custom blur and shadow implementations","Guideline":"Use Fluent Design system","No":13,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/13","stack":"winui"},{"Category":"Navigation","Description":"Microsoft.UI.Xaml.Controls.Frame for WinUI 3 page navigation","Do":"Frame.Navigate with page types and parameters","Don't":"Swapping UserControls in a ContentControl","Guideline":"Use Frame for page navigation","No":14,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/14","stack":"winui"},{"Category":"Navigation","Description":"Type-safe data passing between pages","Do":"Typed parameter in OnNavigatedTo","Don't":"Dictionary or string parsing for parameters","Guideline":"Pass typed navigation parameters","No":15,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/15","stack":"winui"},{"Category":"Navigation","Description":"WinUI 3 uses NavigationView.BackRequested instead of UWP SystemNavigationManager","Do":"Register NavigationView.BackRequested handler and manage back stack","Don't":"Ignoring back navigation","Guideline":"Handle back navigation","No":16,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/16","stack":"winui"},{"Category":"Navigation","Description":"Handle protocol activation so URIs route to the right page","Do":"Register protocol then check ExtendedActivationKind.Protocol on activation","Don't":"Single entry point ignoring activation context","Guideline":"Use deep linking","No":17,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/17","stack":"winui"},{"Category":"Data Binding","Description":"Notifies UI of collection changes","Do":"ObservableCollection<T> for bound ItemsSources","Don't":"List<T> for bound collections","Guideline":"Use ObservableCollection for lists","No":18,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/18","stack":"winui"},{"Category":"Data Binding","Description":"Enable property change notification for UI updates","Do":"INotifyPropertyChanged on ViewModels","Don't":"Properties without notification","Guideline":"Use INotifyPropertyChanged","No":19,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/19","stack":"winui"},{"Category":"Data Binding","Description":"Call methods directly in bindings","Do":"x:Bind with method references for transforms","Don't":"IValueConverter for simple logic","Guideline":"Use function binding with x:Bind","No":20,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/20","stack":"winui"},{"Category":"Data Binding","Description":"x:Bind defaults to OneTime not OneWay","Do":"Mode=OneWay or Mode=TwoWay when updates needed","Don't":"Forgetting Mode and getting stale UI","Guideline":"Specify Mode explicitly on x:Bind","No":21,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/21","stack":"winui"},{"Category":"Performance","Description":"Virtualizing layout with full control","Do":"ItemsRepeater for custom list layouts","Don't":"ListView for highly customized item layouts","Guideline":"Use ItemsRepeater for custom lists","No":22,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/22","stack":"winui"},{"Category":"Performance","Description":"Load data on demand as user scrolls","Do":"ISupportIncrementalLoading for large data sets","Don't":"Loading entire dataset upfront","Guideline":"Use incremental loading","No":23,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/23","stack":"winui"},{"Category":"Performance","Description":"Simpler trees render faster","Do":"Minimal nesting in DataTemplates","Don't":"Deeply nested panels in item templates","Guideline":"Reduce visual tree complexity","No":24,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/24","stack":"winui"},{"Category":"Performance","Description":"x:Bind generates code at compile time","Do":"x:Bind for hot paths and list items","Don't":"{Binding} in DataTemplates and frequently updated UI","Guideline":"Use compiled bindings over reflection","No":25,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/25","stack":"winui"},{"Category":"Threading","Description":"WinUI 3 uses Microsoft.UI.Dispatching.DispatcherQueue instead of UWP CoreDispatcher","Do":"DispatcherQueue.TryEnqueue for UI thread access","Don't":"Dispatcher.RunAsync (UWP pattern)","Guideline":"Use DispatcherQueue not Dispatcher","No":26,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/26","stack":"winui"},{"Category":"Threading","Description":"Keep UI responsive during file and network access","Do":"async/await for IO so the UI thread keeps rendering","Don't":"Synchronous IO on UI thread","Guideline":"Use async/await for IO operations","No":27,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/27","stack":"winui"},{"Category":"Threading","Description":"Offload compute to thread pool","Do":"Task.Run for heavy computation","Don't":"Long-running CPU work on UI thread","Guideline":"Use Task.Run for CPU-bound work","No":28,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/28","stack":"winui"},{"Category":"Packaging","Description":"Windows App SDK provides the runtime","Do":"WinAppSDK NuGet package and WindowsAppSDK bootstrapper","Don't":"Mixing UWP and WinUI 3 APIs","Guideline":"Use WinAppSDK correctly","No":29,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/29","stack":"winui"},{"Category":"Packaging","Description":"Choose deployment model for your scenario","Do":"Packaged (MSIX) for Store distribution","Don't":"Unpackaged without considering API limitations","Guideline":"Use unpackaged or packaged appropriately","No":30,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/30","stack":"winui"},{"Category":"Packaging","Description":"Simplified packaging for single app","Do":"Single-project MSIX packaging","Don't":"Separate WAP project when not needed","Guideline":"Use single-project MSIX","No":31,"Severity":"Low","domain":"stack/winui","record_id":"stack/winui/31","stack":"winui"},{"Category":"Accessibility","Description":"Enable Narrator and screen reader support","Do":"AutomationProperties.Name on all interactive controls","Don't":"Controls without accessible names","Guideline":"Set AutomationProperties","No":32,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/32","stack":"winui"},{"Category":"Accessibility","Description":"Full keyboard accessibility","Do":"Tab navigation and access keys for all controls","Don't":"Mouse-only interactions","Guideline":"Support keyboard navigation","No":33,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/33","stack":"winui"},{"Category":"Accessibility","Description":"Screen readers use headings for navigation","Do":"AutomationProperties.HeadingLevel on section headers","Don't":"All text at same heading level","Guideline":"Use proper heading levels","No":34,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/34","stack":"winui"},{"Category":"Accessibility","Description":"Respect system high contrast settings","Do":"ThemeResource brushes that adapt to high contrast","Don't":"Hardcoded colors ignoring high contrast","Guideline":"Support high contrast","No":35,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/35","stack":"winui"},{"Category":"Accessibility","Description":"Validate accessibility compliance","Do":"Accessibility Insights for Windows scanning","Don't":"Manual accessibility checking only","Guideline":"Test with Accessibility Insights","No":36,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/36","stack":"winui"},{"Category":"Architecture","Description":"Source generators reduce boilerplate","Do":"[ObservableProperty] and [RelayCommand] attributes","Don't":"Manual INotifyPropertyChanged and ICommand","Guideline":"Use MVVM with CommunityToolkit","No":37,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/37","stack":"winui"},{"Category":"Architecture","Description":"Register services with Microsoft.Extensions.DI","Do":"IServiceProvider for ViewModel and service resolution","Don't":"new ViewModel() and new Service() everywhere","Guideline":"Use dependency injection","No":38,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/38","stack":"winui"},{"Category":"Architecture","Description":"Start with proven architectural templates","Do":"Template Studio for WinUI 3 project scaffolding","Don't":"Blank project with manual setup for complex apps","Guideline":"Use Template Studio patterns","No":39,"Severity":"Low","domain":"stack/winui","record_id":"stack/winui/39","stack":"winui"},{"Category":"Architecture","Description":"Keep business logic in .NET Standard or shared libraries","Do":"Business logic in separate class library","Don't":"Business logic mixed with WinUI types","Guideline":"Separate platform from business logic","No":40,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/40","stack":"winui"},{"Category":"Architecture","Description":"Proper window lifecycle management","Do":"AppWindow API for multi-window scenarios","Don't":"Single Window assumption in complex apps","Guideline":"Use WinUI 3 Window management","No":41,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/41","stack":"winui"},{"Category":"Testing","Description":"Test logic independent of UI framework","Do":"xUnit or MSTest on ViewModel properties and commands","Don't":"Testing through UI only","Guideline":"Unit test ViewModels","No":42,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/42","stack":"winui"},{"Category":"Testing","Description":"Automated UI testing for WinUI 3","Do":"WinAppDriver or Appium for end-to-end tests","Don't":"Manual regression testing","Guideline":"Use WinAppDriver for UI tests","No":43,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/43","stack":"winui"},{"Category":"Testing","Description":"Isolate tests from platform dependencies","Do":"Interface wrappers around WinRT APIs","Don't":"Direct WinRT API calls in testable code","Guideline":"Mock WinRT APIs in tests","No":44,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/44","stack":"winui"},{"Category":"Controls","Description":"Built-in numeric entry with validation formatting and spin buttons","Do":"NumberBox with Minimum Maximum and SpinButtonPlacementMode","Don't":"TextBox with manual numeric parsing and validation","Guideline":"Use NumberBox for numeric input","No":45,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/45","stack":"winui"},{"Category":"Controls","Description":"Expandable content area with header for progressive disclosure","Do":"Expander for settings groups and optional content","Don't":"Manual visibility toggling with buttons","Guideline":"Use Expander for collapsible sections","No":46,"Severity":"Low","domain":"stack/winui","record_id":"stack/winui/46","stack":"winui"},{"Category":"Controls","Description":"Built-in loading indicators for determinate and indeterminate states","Do":"ProgressRing for indeterminate and ProgressBar for determinate progress","Don't":"Custom spinning animation or text-based loading indicators","Guideline":"Use ProgressRing and ProgressBar for loading","No":47,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/47","stack":"winui"},{"Category":"Layout","Description":"Adapt UI layout to window size using adaptive triggers","Do":"AdaptiveTrigger with MinWindowWidth for responsive breakpoints","Don't":"Fixed layouts that break at different window sizes","Guideline":"Use VisualStateManager for responsive layouts","No":48,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/48","stack":"winui"},{"Category":"Lifecycle","Description":"WinUI 3 apps receive activation events for URI and notification launches","Do":"Check LaunchActivatedEventArgs in OnLaunched for activation context","Don't":"Ignoring activation arguments losing deep link context","Guideline":"Handle app activation and launch","No":49,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/49","stack":"winui"},{"Category":"Lifecycle","Description":"Prevent multiple app windows competing for resources","Do":"AppInstance.FindOrRegisterForKey for single-instance enforcement","Don't":"Multiple instances with conflicting state","Guideline":"Use single instancing with AppInstance","No":50,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/50","stack":"winui"},{"Category":"Lifecycle","Description":"Persist UI state across app restarts for continuity (ApplicationData APIs require packaged apps; unpackaged apps must use file IO or registry)","Do":"Save state to local settings on window close or navigation","Don't":"Losing user context on every restart","Guideline":"Save and restore app state","No":51,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/51","stack":"winui"},{"Category":"Styling","Description":"Mica is for long-lived primary surfaces like main windows; Acrylic is for transient light-dismiss surfaces like flyouts and context menus","Do":"Mica on root window backgrounds and Acrylic on flyouts and overlays","Don't":"Acrylic on the main window or Mica on transient flyouts","Guideline":"Choose Mica vs Acrylic by surface lifetime","No":52,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/52","stack":"winui"},{"Category":"Styling","Description":"WinUI 3 1.3+ exposes Window.SystemBackdrop with MicaBackdrop and DesktopAcrylicBackdrop classes replacing manual MicaController plumbing","Do":"Window.SystemBackdrop in XAML or code","Don't":"Hand-rolled MicaController wiring when SystemBackdrop API is available","Guideline":"Set SystemBackdrop on Window directly","No":53,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/53","stack":"winui"},{"Category":"Architecture","Description":"WinUI 3 supports multiple top-level windows; each Window owns an AppWindow accessible via Window.AppWindow for size and position control","Do":"new Window().Activate() for secondary windows tracking them in App state","Don't":"Faking multi-window via main-window content swaps or ContentDialog","Guideline":"Open secondary windows with new Window","No":54,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/54","stack":"winui"},{"Category":"Architecture","Description":"Use Window.ExtendsContentIntoTitleBar with SetTitleBar to host custom XAML in the chrome while preserving caption buttons","Do":"ExtendsContentIntoTitleBar=true plus SetTitleBar(element) for custom drag region","Don't":"Hardcoded chrome height or custom caption buttons that break with theme and size changes","Guideline":"Extend client area into the title bar","No":55,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/55","stack":"winui"},{"Category":"Accessibility","Description":"Map Ctrl/Alt/Shift combinations to commands using KeyboardAccelerator on UIElement","Do":"KeyboardAccelerator with Modifiers and Key on relevant controls","Don't":"Manual KeyDown handlers swallowing shortcuts","Guideline":"Use KeyboardAccelerator for shortcuts","No":56,"Severity":"High","domain":"stack/winui","record_id":"stack/winui/56","stack":"winui"},{"Category":"Styling","Description":"Share styles and brushes via App.xaml MergedDictionaries instead of duplicating per page","Do":"MergedDictionaries in App.xaml for shared styles brushes and colors","Don't":"Duplicating SolidColorBrush definitions on every page","Guideline":"Organize resources with merged dictionaries","No":57,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/57","stack":"winui"},{"Category":"Architecture","Description":"AsyncRelayCommand exposes IsRunning and supports cancellation for IO bound work","Do":"[RelayCommand] on async Task method or AsyncRelayCommand for IO work","Don't":"async void event handlers or fire-and-forget Task.Run from button click","Guideline":"Use AsyncRelayCommand for async commands","No":58,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/58","stack":"winui"},{"Category":"Architecture","Description":"Microsoft.Extensions.Logging ILogger<T> with DI for structured leveled logs","Do":"ILogger<T> injected via constructor for diagnostic logging","Don't":"Debug.WriteLine or Console.WriteLine for app diagnostics","Guideline":"Use ILogger for structured logging","No":59,"Severity":"Medium","domain":"stack/winui","record_id":"stack/winui/59","stack":"winui"},{"Category":"XAML","Description":"Define layout and visuals in XAML not code-behind","Do":"XAML for structure and styling","Don't":"Build UI trees in C# code-behind","Guideline":"Use XAML for declarative UI","No":1,"Severity":"Low","domain":"stack/wpf","record_id":"stack/wpf/1","stack":"wpf"},{"Category":"XAML","Description":"Connects XAML to its code-behind partial class","Do":"x:Class on Window UserControl and Page","Don't":"Missing x:Class or mismatched namespace","Guideline":"Set x:Class on root element","No":2,"Severity":"High","domain":"stack/wpf","record_id":"stack/wpf/2","stack":"wpf"},{"Category":"XAML","Description":"Only name elements accessed from code-behind","Do":"x:Name when code-behind reference is needed","Don't":"Naming every element","Guideline":"Use x:Name sparingly","No":3,"Severity":"Low","domain":"stack/wpf","record_id":"stack/wpf/3","stack":"wpf"},{"Category":"XAML","Description":"Grid.Row Grid.Column DockPanel.Dock etc","Do":"Attached properties for panel positioning","Don't":"Margin hacks for alignment","Guideline":"Prefer attached properties for layout","No":4,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/4","stack":"wpf"},{"Category":"XAML","Description":"Events bubble up or tunnel down the element tree letting parents handle child events with one handler","Do":"Handler at parent using TypeName.EventName syntax with e.Handled=true when consumed","Don't":"Wiring identical handlers on every child when one parent handler suffices","Guideline":"Use routed events for tree-wide handling","No":5,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/5","stack":"wpf"},{"Category":"Data Binding","Description":"Enable UI updates when properties change","Do":"INotifyPropertyChanged on ViewModels","Don't":"Public properties without notification","Guideline":"Implement INotifyPropertyChanged","No":6,"Severity":"High","domain":"stack/wpf","record_id":"stack/wpf/6","stack":"wpf"},{"Category":"Data Binding","Description":"Notifies UI of add remove and reset","Do":"ObservableCollection<T> for bound collections","Don't":"List<T> or Array for bound ItemsSources","Guideline":"Use ObservableCollection for lists","No":7,"Severity":"High","domain":"stack/wpf","record_id":"stack/wpf/7","stack":"wpf"},{"Category":"Data Binding","Description":"Enables binding for the visual subtree","Do":"DataContext on Window or root container","Don't":"DataContext on every child control","Guideline":"Set DataContext at the right level","No":8,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/8","stack":"wpf"},{"Category":"Data Binding","Description":"Declarative binding keeps UI and logic separate","Do":"{Binding Path=Name} in XAML","Don't":"textBlock.Text = viewModel.Name in code-behind","Guideline":"Prefer Binding over code-behind assignments","No":9,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/9","stack":"wpf"},{"Category":"Data Binding","Description":"Controls when source updates","Do":"PropertyChanged for instant feedback","Don't":"Default LostFocus when search-as-you-type is needed","Guideline":"Use UpdateSourceTrigger appropriately","No":10,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/10","stack":"wpf"},{"Category":"Data Binding","Description":"Convert data for presentation without changing the model","Do":"IValueConverter for bool-to-visibility etc","Don't":"Visibility properties on ViewModel","Guideline":"Use IValueConverter for display transforms","No":11,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/11","stack":"wpf"},{"Category":"Data Binding","Description":"Surface validation errors to the binding system instead of ad-hoc error UI","Do":"ObservableValidator with DataAnnotations attributes","Don't":"Throwing in setters or maintaining separate error properties","Guideline":"Use INotifyDataErrorInfo for validation","No":12,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/12","stack":"wpf"},{"Category":"Layout","Description":"Rows and columns with proportional or fixed sizing","Do":"Grid with RowDefinitions and ColumnDefinitions","Don't":"Canvas with absolute positions for forms","Guideline":"Use Grid for complex layouts","No":13,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/13","stack":"wpf"},{"Category":"Layout","Description":"Simple vertical or horizontal stacking","Do":"StackPanel for toolbars and simple lists","Don't":"Grid with single column for linear content","Guideline":"Use StackPanel for linear content","No":14,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/14","stack":"wpf"},{"Category":"Layout","Description":"Dock children to edges with last child filling","Do":"DockPanel for shell layouts (menu top sidebar left)","Don't":"Nested StackPanels to simulate docking","Guideline":"Use DockPanel for docked regions","No":15,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/15","stack":"wpf"},{"Category":"Layout","Description":"Use Auto Star and MinWidth/MaxWidth","Do":"Proportional sizing with * and Auto","Don't":"Fixed pixel widths on resizable content","Guideline":"Avoid hardcoded sizes","No":16,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/16","stack":"wpf"},{"Category":"Layout","Description":"Wrap content that may exceed available space","Do":"ScrollViewer around long forms or lists","Don't":"Clipping content without scroll","Guideline":"Use ScrollViewer for overflow","No":17,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/17","stack":"wpf"},{"Category":"Styling","Description":"Centralize colors brushes and styles","Do":"ResourceDictionary in App.xaml for theme values","Don't":"Inline colors and font sizes on every element","Guideline":"Use Resource Dictionaries","No":18,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/18","stack":"wpf"},{"Category":"Styling","Description":"Reference embedded images fonts and resource dictionaries via the pack scheme","Do":"pack://application:,,, syntax for cross-assembly assets","Don't":"File-system paths for resources compiled into the assembly","Guideline":"Use pack URIs for embedded resources","No":19,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/19","stack":"wpf"},{"Category":"Styling","Description":"Apply a Style to all instances of a TargetType","Do":"Style with TargetType and no x:Key for defaults","Don't":"Manually styling every Button instance","Guideline":"Use implicit styles","No":20,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/20","stack":"wpf"},{"Category":"Styling","Description":"Named variant styles that inherit from a base via BasedOn","Do":"x:Key styles that BasedOn an implicit or named style","Don't":"Duplicating setters across variants","Guideline":"Use explicit styles with x:Key and BasedOn","No":21,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/21","stack":"wpf"},{"Category":"Styling","Description":"StaticResource is resolved once and faster","Do":"StaticResource for values that do not change at runtime","Don't":"DynamicResource for static theme values","Guideline":"Prefer StaticResource over DynamicResource","No":22,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/22","stack":"wpf"},{"Category":"Styling","Description":"Override default rendering of a control","Do":"ControlTemplate when built-in styles are insufficient","Don't":"Nesting extra panels to hide the default template","Guideline":"Use ControlTemplate for full control","No":23,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/23","stack":"wpf"},{"Category":"Styling","Description":"Define how data objects render in ItemsControls","Do":"DataTemplate for ListBox ComboBox and ItemsControl items","Don't":"ToString overrides for display","Guideline":"Use DataTemplate for data presentation","No":24,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/24","stack":"wpf"},{"Category":"Styling","Description":"ThemeMode applies the Windows 11 Fluent style; values are Light Dark System and None (default Aero2)","Do":"ThemeMode on Application or Window","Don't":"Legacy Aero2 styling for new Windows 11 apps","Guideline":"Use Fluent theme on .NET 9+","No":25,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/25","stack":"wpf"},{"Category":"Commands","Description":"Decouple UI actions from logic","Do":"ICommand implementations (RelayCommand DelegateCommand)","Don't":"Click event handlers in code-behind","Guideline":"Use ICommand for user actions","No":26,"Severity":"High","domain":"stack/wpf","record_id":"stack/wpf/26","stack":"wpf"},{"Category":"Commands","Description":"Automatically disable controls when action unavailable; call NotifyCanExecuteChanged when state changes","Do":"CanExecute returning false to disable buttons","Don't":"IsEnabled binding to a separate bool","Guideline":"Use CanExecute for enable/disable","No":27,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/27","stack":"wpf"},{"Category":"Commands","Description":"Avoid implementing ICommand from scratch every time","Do":"RelayCommand (CommunityToolkit.Mvvm) or DelegateCommand (Prism)","Don't":"New ICommand class per command","Guideline":"Use RelayCommand or DelegateCommand","No":28,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/28","stack":"wpf"},{"Category":"Commands","Description":"Tracks IsRunning and disables the command while it executes preventing re-entry","Do":"AsyncRelayCommand or [RelayCommand] on async Task method","Don't":"async void event handlers in code-behind","Guideline":"Use AsyncRelayCommand for async operations","No":29,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/29","stack":"wpf"},{"Category":"Commands","Description":"Pass data from the UI element to the command handler","Do":"CommandParameter for item-specific actions","Don't":"Relying on SelectedItem in every command","Guideline":"Use CommandParameter for context","No":30,"Severity":"Low","domain":"stack/wpf","record_id":"stack/wpf/30","stack":"wpf"},{"Category":"Commands","Description":"Bind keyboard gestures to commands without manual key handling","Do":"KeyBinding inside Window.InputBindings","Don't":"Custom key handling in PreviewKeyDown","Guideline":"Use InputBindings for keyboard shortcuts","No":31,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/31","stack":"wpf"},{"Category":"Performance","Description":"Only creates UI elements for visible items. ListBox/ListView virtualize by default; TreeView requires opt-in","Do":"VirtualizingStackPanel.IsVirtualizing=True (set on TreeView; default for ListBox)","Don't":"Disabling virtualization on long lists","Guideline":"Use VirtualizingStackPanel for large lists","No":32,"Severity":"High","domain":"stack/wpf","record_id":"stack/wpf/32","stack":"wpf"},{"Category":"Performance","Description":"Frozen brushes and geometries skip change tracking","Do":"Freeze brushes and pens that do not change","Don't":"Mutable brushes used as static resources","Guideline":"Freeze Freezable objects","No":33,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/33","stack":"wpf"},{"Category":"Performance","Description":"Binding target properties on custom controls must be DependencyProperties (sources can be plain CLR properties with INPC)","Do":"Define DependencyProperty for properties bound TO on a custom control","Don't":"Plain CLR properties as binding targets on custom controls","Guideline":"Use DependencyProperty for custom-control binding targets","No":34,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/34","stack":"wpf"},{"Category":"Performance","Description":"Keep UI thread responsive","Do":"async/await with Task.Run for CPU work","Don't":"Synchronous operations that freeze the UI","Guideline":"Use async for long operations","No":35,"Severity":"High","domain":"stack/wpf","record_id":"stack/wpf/35","stack":"wpf"},{"Category":"Performance","Description":"Measure before optimizing","Do":"Visual Studio diagnostic tools and PerfView","Don't":"Guessing at performance bottlenecks","Guideline":"Profile with PerfView and Visual Studio","No":36,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/36","stack":"wpf"},{"Category":"Threading","Description":"UI elements can only be accessed from the UI thread","Do":"Dispatcher.Invoke or BeginInvoke from background threads","Don't":"Accessing UI elements from background threads","Guideline":"Use Dispatcher for UI updates","No":37,"Severity":"High","domain":"stack/wpf","record_id":"stack/wpf/37","stack":"wpf"},{"Category":"Threading","Description":"Modern async code returns to UI context automatically","Do":"async/await which resumes on captured SynchronizationContext","Don't":"Manual Dispatcher.BeginInvoke for every callback","Guideline":"Prefer async/await over Dispatcher","No":38,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/38","stack":"wpf"},{"Category":"Threading","Description":"Offload intensive work from UI thread","Do":"Task.Run for compute-bound work","Don't":"Long-running computations on UI thread","Guideline":"Use Task.Run for CPU-bound work","No":39,"Severity":"High","domain":"stack/wpf","record_id":"stack/wpf/39","stack":"wpf"},{"Category":"Threading","Description":"Update UI with progress during long operations","Do":"IProgress<T> with Task.Run","Don't":"Polling a shared variable for progress","Guideline":"Report progress from background tasks","No":40,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/40","stack":"wpf"},{"Category":"Threading","Description":"Catch unhandled UI-thread exceptions to log them and prevent the default WPF crash dialog","Do":"Subscribe in App.xaml or App.OnStartup and set e.Handled=true after logging","Don't":"Letting WPF show its default crash dialog and silently shut down","Guideline":"Handle DispatcherUnhandledException","No":41,"Severity":"High","domain":"stack/wpf","record_id":"stack/wpf/41","stack":"wpf"},{"Category":"Accessibility","Description":"Enable screen reader support","Do":"AutomationProperties.Name on interactive controls","Don't":"Controls without automation names","Guideline":"Set AutomationProperties","No":42,"Severity":"High","domain":"stack/wpf","record_id":"stack/wpf/42","stack":"wpf"},{"Category":"Accessibility","Description":"All functionality reachable via keyboard","Do":"Tab order and KeyboardNavigation properties","Don't":"Mouse-only interactions","Guideline":"Support keyboard navigation","No":43,"Severity":"High","domain":"stack/wpf","record_id":"stack/wpf/43","stack":"wpf"},{"Category":"Accessibility","Description":"Respect Windows high contrast settings","Do":"SystemColors and SystemFonts resources","Don't":"Hardcoded colors that disappear in high contrast","Guideline":"Support high contrast themes","No":44,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/44","stack":"wpf"},{"Category":"Accessibility","Description":"Semantic controls convey role to assistive tech","Do":"Button for actions CheckBox for toggles","Don't":"Styled TextBlock with click handler as fake button","Guideline":"Use appropriate control types","No":45,"Severity":"High","domain":"stack/wpf","record_id":"stack/wpf/45","stack":"wpf"},{"Category":"Accessibility","Description":"Ensure UI is crisp at all display scale factors","Do":"Device-independent units and vector graphics","Don't":"Pixel-based bitmaps that blur at high DPI","Guideline":"Support DPI scaling","No":46,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/46","stack":"wpf"},{"Category":"Accessibility","Description":"WPF defaults to System-DPI-aware unless you opt into PerMonitorV2 via app.manifest","Do":"app.manifest with dpiAwareness PerMonitorV2","Don't":"Default System DPI awareness for Windows 10/11 apps","Guideline":"Declare PerMonitorV2 DPI awareness","No":47,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/47","stack":"wpf"},{"Category":"Architecture","Description":"Separate View ViewModel and Model concerns","Do":"MVVM with data binding and commands","Don't":"Logic in code-behind","Guideline":"Use MVVM pattern","No":48,"Severity":"High","domain":"stack/wpf","record_id":"stack/wpf/48","stack":"wpf"},{"Category":"Architecture","Description":"Wire DI build the host resolve MainWindow and parse command-line args in OnStartup","Do":"Override OnStartup when DI or argument parsing is needed","Don't":"Relying on StartupUri when MainWindow needs constructor injection","Guideline":"Override App.OnStartup for app initialization","No":49,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/49","stack":"wpf"},{"Category":"Architecture","Description":"Wire Microsoft.Extensions.Hosting Generic Host in App.OnStartup and resolve ViewModels from the container","Do":"Generic Host with Microsoft.Extensions.DependencyInjection","Don't":"new Service() in ViewModel constructors","Guideline":"Use dependency injection","No":50,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/50","stack":"wpf"},{"Category":"Architecture","Description":"Source generators reduce MVVM boilerplate","Do":"[ObservableProperty] and [RelayCommand] attributes","Don't":"Hand-written INotifyPropertyChanged for every property","Guideline":"Use CommunityToolkit.Mvvm","No":51,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/51","stack":"wpf"},{"Category":"Architecture","Description":"Code-behind should only contain view-specific logic","Do":"View logic like focus management and animations in code-behind","Don't":"Business logic and data access in code-behind","Guideline":"Keep code-behind minimal","No":52,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/52","stack":"wpf"},{"Category":"Architecture","Description":"Communicate between ViewModels without references","Do":"WeakReferenceMessenger from CommunityToolkit.Mvvm","Don't":"Direct ViewModel-to-ViewModel references","Guideline":"Use messaging for loose coupling","No":53,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/53","stack":"wpf"},{"Category":"Testing","Description":"Test business logic independent of UI","Do":"xUnit or NUnit tests on ViewModel methods and properties","Don't":"Manual testing through the UI only","Guideline":"Unit test ViewModels","No":54,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/54","stack":"wpf"},{"Category":"Testing","Description":"Isolate ViewModel from external dependencies","Do":"Moq or NSubstitute for service interfaces","Don't":"Real database calls in unit tests","Guideline":"Mock services in tests","No":55,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/55","stack":"wpf"},{"Category":"Testing","Description":"Automated UI testing with Microsoft UI Automation","Do":"FlaUI or Appium 2 (appium-windows-driver) for end-to-end tests","Don't":"Manual regression testing only","Guideline":"Use UI Automation for integration tests","No":56,"Severity":"Medium","domain":"stack/wpf","record_id":"stack/wpf/56","stack":"wpf"}],"schema_version":"litfamily.design-intelligence/v1","source_commit":"1307d97a72e6c1cda572cb65471ae5ce82995218"}