diff --git a/.qoder/rules/charts.md b/.qoder/rules/charts.md new file mode 100644 index 0000000..bc2716e --- /dev/null +++ b/.qoder/rules/charts.md @@ -0,0 +1,31 @@ +--- +trigger: always_on +--- + +| No | Data Type | Keywords | Best Chart Type | Secondary Options | Color Guidance | Performance Impact | Accessibility Notes | Library Recommendation | Interactive Level | +|----|-----------|----------|-----------------|-------------------|---------------|-------------------|---------------------|------------------------|------------------| +| 1 | Trend Over Time | trend, time-series, line, growth, timeline, progress | Line Chart | Area Chart, Smooth Area | Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity | ⚡ Excellent (optimized) | ✓ Clear line patterns for colorblind users. Add pattern overlays. | Chart.js, Recharts, ApexCharts | Hover + Zoom | +| 2 | Compare Categories | compare, categories, bar, comparison, ranking | Bar Chart (Horizontal or Vertical) | Column Chart, Grouped Bar | Each bar: distinct color. Category: grouped same color. Sorted: descending order | ⚡ Excellent | ✓ Easy to compare. Add value labels on bars for clarity. | Chart.js, Recharts, D3.js | Hover + Sort | +| 3 | Part-to-Whole | part-to-whole, pie, donut, percentage, proportion, share | Pie Chart or Donut | Stacked Bar, Treemap | Colors: 5-6 max. Contrasting palette. Large slices first. Use labels. | ⚡ Good (limit 6 slices) | ⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items. | Chart.js, Recharts, D3.js | Hover + Drill | +| 4 | Correlation/Distribution | correlation, distribution, scatter, relationship, pattern | Scatter Plot or Bubble Chart | Heat Map, Matrix | Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density | ⚠ Moderate (many points) | ⚠ Provide data table alternative. Use pattern + color distinction. | D3.js, Plotly, Recharts | Hover + Brush | +| 5 | Heatmap/Intensity | heatmap, heat-map, intensity, density, matrix | Heat Map or Choropleth | Grid Heat Map, Bubble Heat | Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data | ⚡ Excellent (color CSS) | ⚠ Colorblind: Use pattern overlay. Provide numerical legend. | D3.js, Plotly, ApexCharts | Hover + Zoom | +| 6 | Geographic Data | geographic, map, location, region, geo, spatial | Choropleth Map, Bubble Map | Geographic Heat Map | Regional: single color gradient or categorized colors. Legend: clear scale | ⚠ Moderate (rendering) | ⚠ Include text labels for regions. Provide data table alternative. | D3.js, Mapbox, Leaflet | Pan + Zoom + Drill | +| 7 | Funnel/Flow | funnel/flow | Funnel Chart, Sankey | Waterfall (for flows) | Stages: gradient (starting color → ending color). Show conversion % | ⚡ Good | ✓ Clear stage labels + percentages. Good for accessibility if labeled. | D3.js, Recharts, Custom SVG | Hover + Drill | +| 8 | Performance vs Target | performance-vs-target | Gauge Chart or Bullet Chart | Dial, Thermometer | Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors | ⚡ Good | ✓ Add numerical value + percentage label beside gauge. | D3.js, ApexCharts, Custom SVG | Hover | +| 9 | Time-Series Forecast | time-series-forecast | Line with Confidence Band | Ribbon Chart | Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading | ⚡ Good | ✓ Clearly distinguish actual vs forecast. Add legend. | Chart.js, ApexCharts, Plotly | Hover + Toggle | +| 10 | Anomaly Detection | anomaly-detection | Line Chart with Highlights | Scatter with Alert | Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert | ⚡ Good | ✓ Circle/marker for anomalies. Add text alert annotation. | D3.js, Plotly, ApexCharts | Hover + Alert | +| 11 | Hierarchical/Nested Data | hierarchical/nested-data | Treemap | Sunburst, Nested Donut, Icicle | Parent: distinct hues. Children: lighter shades. White borders 2-3px. | ⚠ Moderate | ⚠ Poor - provide table alternative. Label large areas. | D3.js, Recharts, ApexCharts | Hover + Drilldown | +| 12 | Flow/Process Data | flow/process-data | Sankey Diagram | Alluvial, Chord Diagram | Gradient from source to target. Opacity 0.4-0.6 for flows. | ⚠ Moderate | ⚠ Poor - provide flow table alternative. | D3.js (d3-sankey), Plotly | Hover + Drilldown | +| 13 | Cumulative Changes | cumulative-changes | Waterfall Chart | Stacked Bar, Cascade | Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1. | ⚡ Good | ✓ Good - clear directional colors with labels. | ApexCharts, Highcharts, Plotly | Hover | +| 14 | Multi-Variable Comparison | multi-variable-comparison | Radar/Spider Chart | Parallel Coordinates, Grouped Bar | Single: #0080FF 20% fill. Multiple: distinct colors per dataset. | ⚡ Good | ⚠ Moderate - limit 5-8 axes. Add data table. | Chart.js, Recharts, ApexCharts | Hover + Toggle | +| 15 | Stock/Trading OHLC | stock/trading-ohlc | Candlestick Chart | OHLC Bar, Heikin-Ashi | Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below. | ⚡ Good | ⚠ Moderate - provide OHLC data table. | Lightweight Charts (TradingView), ApexCharts | Real-time + Hover + Zoom | +| 16 | Relationship/Connection Data | relationship/connection-data | Network Graph | Hierarchical Tree, Adjacency Matrix | Node types: categorical colors. Edges: #90A4AE 60% opacity. | ❌ Poor (500+ nodes struggles) | ❌ Very Poor - provide adjacency list alternative. | D3.js (d3-force), Vis.js, Cytoscape.js | Drilldown + Hover + Drag | +| 17 | Distribution/Statistical | distribution/statistical | Box Plot | Violin Plot, Beeswarm | Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336. | ⚡ Excellent | ✓ Good - include stats table (min, Q1, median, Q3, max). | Plotly, D3.js, Chart.js (plugin) | Hover | +| 18 | Performance vs Target (Compact) | performance-vs-target-(compact) | Bullet Chart | Gauge, Progress Bar | Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px. | ⚡ Excellent | ✓ Excellent - compact with clear values. | D3.js, Plotly, Custom SVG | Hover | +| 19 | Proportional/Percentage | proportional/percentage | Waffle Chart | Pictogram, Stacked Bar 100% | 10x10 grid. 3-5 categories max. 2-3px spacing between squares. | ⚡ Good | ✓ Good - better than pie for accessibility. | D3.js, React-Waffle, Custom CSS Grid | Hover | +| 20 | Hierarchical Proportional | hierarchical-proportional | Sunburst Chart | Treemap, Icicle, Circle Packing | Center to outer: darker to lighter. 15-20% lighter per level. | ⚠ Moderate | ⚠ Poor - provide hierarchy table alternative. | D3.js (d3-hierarchy), Recharts, ApexCharts | Drilldown + Hover | +| 21 | Root Cause Analysis | root cause, decomposition, tree, hierarchy, drill-down, ai-split | Decomposition Tree | Decision Tree, Flow Chart | Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey. | ⚠ Moderate (calculation heavy) | ✓ clear hierarchy. Allow keyboard navigation for nodes. | Power BI (native), React-Flow, Custom D3.js | Drill + Expand | +| 22 | 3D Spatial Data | 3d, spatial, immersive, terrain, molecular, volumetric | 3D Scatter/Surface Plot | Volumetric Rendering, Point Cloud | Depth cues: lighting/shading. Z-axis: color gradient (cool to warm). | ❌ Heavy (WebGL required) | ❌ Poor - requires alternative 2D view or data table. | Three.js, Deck.gl, Plotly 3D | Rotate + Zoom + VR | +| 23 | Real-Time Streaming | streaming, real-time, ticker, live, velocity, pulse | Streaming Area Chart | Ticker Tape, Moving Gauge | Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark. | ⚡ Optimized (canvas/webgl) | ⚠ Flashing elements - provide pause button. High contrast. | Smoothed D3.js, CanvasJS, SciChart | Real-time + Pause | +| 24 | Sentiment/Emotion | sentiment, emotion, nlp, opinion, feeling | Word Cloud with Sentiment | Sentiment Arc, Radar Chart | Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency. | ⚡ Good | ⚠ Word clouds poor for screen readers. Use list view. | D3-cloud, Highcharts, Nivo | Hover + Filter | +| 25 | Process Mining | process, mining, variants, path, bottleneck, log | Process Map / Graph | Directed Acyclic Graph (DAG), Petri Net | Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444. | ⚠ Moderate to Heavy | ⚠ Complex graphs hard to navigate. Provide path summary. | React-Flow, Cytoscape.js, Recharts | Drag + Node-Click | \ No newline at end of file diff --git a/.qoder/rules/color.md b/.qoder/rules/color.md new file mode 100644 index 0000000..43bb62a --- /dev/null +++ b/.qoder/rules/color.md @@ -0,0 +1,102 @@ +--- +trigger: always_on +--- + +| No | Product Type | Keywords | Primary (Hex) | Secondary (Hex) | CTA (Hex) | Background (Hex) | Text (Hex) | Border (Hex) | Notes | +|-----|--------------|----------|---------------|-----------------|-----------|------------------|------------|--------------|-------| +| 1 | SaaS (General) | saas, general | #2563EB | #3B82F6 | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Trust blue + accent contrast | +| 2 | Micro SaaS | micro, saas | #2563EB | #3B82F6 | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Vibrant primary + white space | +| 3 | E-commerce | commerce | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Brand primary + success green | +| 4 | E-commerce Luxury | commerce, luxury | #1C1917 | #44403C | #CA8A04 | #FAFAF9 | #0C0A09 | #D6D3D1 | Premium colors + minimal accent | +| 5 | Service Landing Page | service, landing, page | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Brand primary + trust colors | +| 6 | B2B Service | b2b, service | #0F172A | #334155 | #0369A1 | #F8FAFC | #020617 | #E2E8F0 | Professional blue + neutral grey | +| 7 | Financial Dashboard | financial, dashboard | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Dark bg + red/green alerts + trust blue | +| 8 | Analytics Dashboard | analytics, dashboard | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Cool→Hot gradients + neutral grey | +| 9 | Healthcare App | healthcare, app | #0891B2 | #22D3EE | #059669 | #ECFEFF | #164E63 | #A5F3FC | Calm blue + health green + trust | +| 10 | Educational App | educational, app | #4F46E5 | #818CF8 | #F97316 | #EEF2FF | #1E1B4B | #C7D2FE | Playful colors + clear hierarchy | +| 11 | Creative Agency | creative, agency | #EC4899 | #F472B6 | #06B6D4 | #FDF2F8 | #831843 | #FBCFE8 | Bold primaries + artistic freedom | +| 12 | Portfolio/Personal | portfolio, personal | #18181B | #3F3F46 | #2563EB | #FAFAFA | #09090B | #E4E4E7 | Brand primary + artistic interpretation | +| 13 | Gaming | gaming | #7C3AED | #A78BFA | #F43F5E | #0F0F23 | #E2E8F0 | #4C1D95 | Vibrant + neon + immersive colors | +| 14 | Government/Public Service | government, public, service | #0F172A | #334155 | #0369A1 | #F8FAFC | #020617 | #E2E8F0 | Professional blue + high contrast | +| 15 | Fintech/Crypto | fintech, crypto | #F59E0B | #FBBF24 | #8B5CF6 | #0F172A | #F8FAFC | #334155 | Dark tech colors + trust + vibrant accents | +| 16 | Social Media App | social, media, app | #2563EB | #60A5FA | #F43F5E | #F8FAFC | #1E293B | #DBEAFE | Vibrant + engagement colors | +| 17 | Productivity Tool | productivity, tool | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Clear hierarchy + functional colors | +| 18 | Design System/Component Library | design, system, component, library | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Clear hierarchy + code-like structure | +| 19 | AI/Chatbot Platform | chatbot, platform | #7C3AED | #A78BFA | #06B6D4 | #FAF5FF | #1E1B4B | #DDD6FE | Neutral + AI Purple (#6366F1) | +| 20 | NFT/Web3 Platform | nft, web3, platform | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Dark + Neon + Gold (#FFD700) | +| 21 | Creator Economy Platform | creator, economy, platform | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Vibrant + Brand colors | +| 22 | Sustainability/ESG Platform | sustainability, esg, platform | #7C3AED | #A78BFA | #06B6D4 | #FAF5FF | #1E1B4B | #DDD6FE | Green (#228B22) + Earth tones | +| 23 | Remote Work/Collaboration Tool | remote, work, collaboration, tool | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Calm Blue + Neutral grey | +| 24 | Mental Health App | mental, health, app | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Calm Pastels + Trust colors | +| 25 | Pet Tech App | pet, tech, app | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Playful + Warm colors | +| 26 | Smart Home/IoT Dashboard | smart, home, iot, dashboard | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Dark + Status indicator colors | +| 27 | EV/Charging Ecosystem | charging, ecosystem | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Electric Blue (#009CD1) + Green | +| 28 | Subscription Box Service | subscription, box, service | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Brand + Excitement colors | +| 29 | Podcast Platform | podcast, platform | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Dark + Audio waveform accents | +| 30 | Dating App | dating, app | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Warm + Romantic (Pink/Red gradients) | +| 31 | Micro-Credentials/Badges Platform | micro, credentials, badges, platform | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Trust Blue + Gold (#FFD700) | +| 32 | Knowledge Base/Documentation | knowledge, base, documentation | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Clean hierarchy + minimal color | +| 33 | Hyperlocal Services | hyperlocal, services | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Location markers + Trust colors | +| 34 | Beauty/Spa/Wellness Service | beauty, spa, wellness, service | #10B981 | #34D399 | #8B5CF6 | #ECFDF5 | #064E3B | #A7F3D0 | Soft pastels (Pink #FFB6C1 Sage #90EE90) + Cream + Gold accents | +| 35 | Luxury/Premium Brand | luxury, premium, brand | #1C1917 | #44403C | #CA8A04 | #FAFAF9 | #0C0A09 | #D6D3D1 | Black + Gold (#FFD700) + White + Minimal accent | +| 36 | Restaurant/Food Service | restaurant, food, service | #DC2626 | #F87171 | #CA8A04 | #FEF2F2 | #450A0A | #FECACA | Warm colors (Orange Red Brown) + appetizing imagery | +| 37 | Fitness/Gym App | fitness, gym, app | #DC2626 | #F87171 | #16A34A | #FEF2F2 | #1F2937 | #FECACA | Energetic (Orange #FF6B35 Electric Blue) + Dark bg | +| 38 | Real Estate/Property | real, estate, property | #0F766E | #14B8A6 | #0369A1 | #F0FDFA | #134E4A | #99F6E4 | Trust Blue (#0077B6) + Gold accents + White | +| 39 | Travel/Tourism Agency | travel, tourism, agency | #EC4899 | #F472B6 | #06B6D4 | #FDF2F8 | #831843 | #FBCFE8 | Vibrant destination colors + Sky Blue + Warm accents | +| 40 | Hotel/Hospitality | hotel, hospitality | #1E3A8A | #3B82F6 | #CA8A04 | #F8FAFC | #1E40AF | #BFDBFE | Warm neutrals + Gold (#D4AF37) + Brand accent | +| 41 | Wedding/Event Planning | wedding, event, planning | #7C3AED | #A78BFA | #F97316 | #FAF5FF | #4C1D95 | #DDD6FE | Soft Pink (#FFD6E0) + Gold + Cream + Sage | +| 42 | Legal Services | legal, services | #1E3A8A | #1E40AF | #B45309 | #F8FAFC | #0F172A | #CBD5E1 | Navy Blue (#1E3A5F) + Gold + White | +| 43 | Insurance Platform | insurance, platform | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Trust Blue (#0066CC) + Green (security) + Neutral | +| 44 | Banking/Traditional Finance | banking, traditional, finance | #0F766E | #14B8A6 | #0369A1 | #F0FDFA | #134E4A | #99F6E4 | Navy (#0A1628) + Trust Blue + Gold accents | +| 45 | Online Course/E-learning | online, course, learning | #0D9488 | #2DD4BF | #EA580C | #F0FDFA | #134E4A | #5EEAD4 | Vibrant learning colors + Progress green | +| 46 | Non-profit/Charity | non, profit, charity | #0891B2 | #22D3EE | #F97316 | #ECFEFF | #164E63 | #A5F3FC | Cause-related colors + Trust + Warm | +| 47 | Music Streaming | music, streaming | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Dark (#121212) + Vibrant accents + Album art colors | +| 48 | Video Streaming/OTT | video, streaming, ott | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Dark bg + Content poster colors + Brand accent | +| 49 | Job Board/Recruitment | job, board, recruitment | #0F172A | #334155 | #0369A1 | #F8FAFC | #020617 | #E2E8F0 | Professional Blue + Success Green + Neutral | +| 50 | Marketplace (P2P) | marketplace, p2p | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Trust colors + Category colors + Success green | +| 51 | Logistics/Delivery | logistics, delivery | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Blue (#2563EB) + Orange (tracking) + Green (delivered) | +| 52 | Agriculture/Farm Tech | agriculture, farm, tech | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Earth Green (#4A7C23) + Brown + Sky Blue | +| 53 | Construction/Architecture | construction, architecture | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Grey (#4A4A4A) + Orange (safety) + Blueprint Blue | +| 54 | Automotive/Car Dealership | automotive, car, dealership | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Brand colors + Metallic accents + Dark/Light | +| 55 | Photography Studio | photography, studio | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Black + White + Minimal accent | +| 56 | Coworking Space | coworking, space | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Energetic colors + Wood tones + Brand accent | +| 57 | Cleaning Service | cleaning, service | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Fresh Blue (#00B4D8) + Clean White + Green | +| 58 | Home Services (Plumber/Electrician) | home, services, plumber, electrician | #0F172A | #334155 | #0369A1 | #F8FAFC | #020617 | #E2E8F0 | Trust Blue + Safety Orange + Professional grey | +| 59 | Childcare/Daycare | childcare, daycare | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Playful pastels + Safe colors + Warm accents | +| 60 | Senior Care/Elderly | senior, care, elderly | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Calm Blue + Warm neutrals + Large text | +| 61 | Medical Clinic | medical, clinic | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Medical Blue (#0077B6) + Trust White + Calm Green | +| 62 | Pharmacy/Drug Store | pharmacy, drug, store | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Pharmacy Green + Trust Blue + Clean White | +| 63 | Dental Practice | dental, practice | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Fresh Blue + White + Smile Yellow accent | +| 64 | Veterinary Clinic | veterinary, clinic | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Caring Blue + Pet-friendly colors + Warm accents | +| 65 | Florist/Plant Shop | florist, plant, shop | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Natural Green + Floral pinks/purples + Earth tones | +| 66 | Bakery/Cafe | bakery, cafe | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Warm Brown + Cream + Appetizing accents | +| 67 | Coffee Shop | coffee, shop | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Coffee Brown (#6F4E37) + Cream + Warm accents | +| 68 | Brewery/Winery | brewery, winery | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Deep amber/burgundy + Gold + Craft aesthetic | +| 69 | Airline | airline | #7C3AED | #A78BFA | #06B6D4 | #FAF5FF | #1E1B4B | #DDD6FE | Sky Blue + Brand colors + Trust accents | +| 70 | News/Media Platform | news, media, platform | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Brand colors + High contrast + Category colors | +| 71 | Magazine/Blog | magazine, blog | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Editorial colors + Brand primary + Clean white | +| 72 | Freelancer Platform | freelancer, platform | #0F172A | #334155 | #0369A1 | #F8FAFC | #020617 | #E2E8F0 | Professional Blue + Success Green + Neutral | +| 73 | Consulting Firm | consulting, firm | #0F172A | #334155 | #0369A1 | #F8FAFC | #020617 | #E2E8F0 | Navy + Gold + Professional grey | +| 74 | Marketing Agency | marketing, agency | #EC4899 | #F472B6 | #06B6D4 | #FDF2F8 | #831843 | #FBCFE8 | Bold brand colors + Creative freedom | +| 75 | Event Management | event, management | #7C3AED | #A78BFA | #F97316 | #FAF5FF | #4C1D95 | #DDD6FE | Event theme colors + Excitement accents | +| 76 | Conference/Webinar Platform | conference, webinar, platform | #0F172A | #334155 | #0369A1 | #F8FAFC | #020617 | #E2E8F0 | Professional Blue + Video accent + Brand | +| 77 | Membership/Community | membership, community | #7C3AED | #A78BFA | #F97316 | #FAF5FF | #4C1D95 | #DDD6FE | Community brand colors + Engagement accents | +| 78 | Newsletter Platform | newsletter, platform | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Brand primary + Clean white + CTA accent | +| 79 | Digital Products/Downloads | digital, products, downloads | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Product category colors + Brand + Success green | +| 80 | Church/Religious Organization | church, religious, organization | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Warm Gold + Deep Purple/Blue + White | +| 81 | Sports Team/Club | sports, team, club | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Team colors + Energetic accents | +| 82 | Museum/Gallery | museum, gallery | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Art-appropriate neutrals + Exhibition accents | +| 83 | Theater/Cinema | theater, cinema | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Dark + Spotlight accents + Gold | +| 84 | Language Learning App | language, learning, app | #0D9488 | #2DD4BF | #EA580C | #F0FDFA | #134E4A | #5EEAD4 | Playful colors + Progress indicators + Country flags | +| 85 | Coding Bootcamp | coding, bootcamp | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 | Code editor colors + Brand + Success green | +| 86 | Cybersecurity Platform | cybersecurity, security, cyber, hacker | #00FF41 | #0D0D0D | #00FF41 | #000000 | #E0E0E0 | #1F1F1F | Matrix Green + Deep Black + Terminal feel | +| 87 | Developer Tool / IDE | developer, tool, ide, code, dev | #3B82F6 | #1E293B | #2563EB | #0F172A | #F1F5F9 | #334155 | Dark syntax theme colors + Blue focus | +| 88 | Biotech / Life Sciences | biotech, science, biology, medical | #0EA5E9 | #0284C7 | #10B981 | #F8FAFC | #0F172A | #E2E8F0 | Sterile White + DNA Blue + Life Green | +| 89 | Space Tech / Aerospace | space, aerospace, tech, futuristic | #FFFFFF | #94A3B8 | #3B82F6 | #0B0B10 | #F8FAFC | #1E293B | Deep Space Black + Star White + Metallic | +| 90 | Architecture / Interior | architecture, interior, design, luxury | #171717 | #404040 | #D4AF37 | #FFFFFF | #171717 | #E5E5E5 | Monochrome + Gold Accent + High Imagery | +| 91 | Quantum Computing | quantum, qubit, tech | #00FFFF | #7B61FF | #FF00FF | #050510 | #E0E0FF | #333344 | Interference patterns + Neon + Deep Dark | +| 92 | Biohacking / Longevity | bio, health, science | #FF4D4D | #4D94FF | #00E676 | #F5F5F7 | #1C1C1E | #E5E5EA | Biological red/blue + Clinical white | +| 93 | Autonomous Systems | drone, robot, fleet | #00FF41 | #008F11 | #FF3333 | #0D1117 | #E6EDF3 | #30363D | Terminal Green + Tactical Dark | +| 94 | Generative AI Art | art, gen-ai, creative | #111111 | #333333 | #FFFFFF | #FAFAFA | #000000 | #E5E5E5 | Canvas Neutral + High Contrast | +| 95 | Spatial / Vision OS | spatial, glass, vision | #FFFFFF | #E5E5E5 | #007AFF | #888888 | #000000 | #FFFFFF | Glass opacity 20% + System Blue | +| 96 | Climate Tech | climate, green, energy | #2E8B57 | #87CEEB | #FFD700 | #F0FFF4 | #1A3320 | #C6E6C6 | Nature Green + Solar Yellow + Air Blue | \ No newline at end of file diff --git a/.qoder/rules/flutter.md b/.qoder/rules/flutter.md new file mode 100644 index 0000000..5103764 --- /dev/null +++ b/.qoder/rules/flutter.md @@ -0,0 +1,58 @@ +--- +trigger: glob +glob: *.dart +--- +| No | Category | Guideline | Description | Do | Don't | Code Good | Code Bad | Severity | Docs URL | +|----|----------|-----------|-------------|----|-------|-----------|----------|----------|----------| +| 1 | Widgets | Use StatelessWidget when possible | Immutable widgets are simpler | StatelessWidget for static UI | StatefulWidget for everything | class MyWidget extends StatelessWidget | class MyWidget extends StatefulWidget (static) | Medium | https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html | +| 2 | Widgets | Keep widgets small | Single responsibility principle | Extract widgets into smaller pieces | Large build methods | Column(children: [Header() Content()]) | 500+ line build method | Medium | | +| 3 | Widgets | Use const constructors | Compile-time constants for performance | const MyWidget() when possible | Non-const for static widgets | const Text('Hello') | Text('Hello') for literals | High | https://dart.dev/guides/language/language-tour#constant-constructors | +| 4 | Widgets | Prefer composition over inheritance | Combine widgets using children | Compose widgets | Extend widget classes | Container(child: MyContent()) | class MyContainer extends Container | Medium | | +| 5 | State | Use setState correctly | Minimal state in StatefulWidget | setState for UI state changes | setState for business logic | setState(() { _counter++; }) | Complex logic in setState | Medium | https://api.flutter.dev/flutter/widgets/State/setState.html | +| 6 | State | Avoid setState in build | Never call setState during build | setState in callbacks only | setState in build method | onPressed: () => setState(() {}) | build() { setState(); } | High | | +| 7 | State | Use state management for complex apps | Provider Riverpod BLoC | State management for shared state | setState for global state | Provider.of(context) | Global setState calls | Medium | | +| 8 | State | Prefer Riverpod or Provider | Recommended state solutions | Riverpod for new projects | InheritedWidget manually | ref.watch(myProvider) | Custom InheritedWidget | Medium | https://riverpod.dev/ | +| 9 | State | Dispose resources | Clean up controllers and subscriptions | dispose() for cleanup | Memory leaks from subscriptions | @override void dispose() { controller.dispose(); } | No dispose implementation | High | | +| 10 | Layout | Use Column and Row | Basic layout widgets | Column Row for linear layouts | Stack for simple layouts | Column(children: [Text(), Button()]) | Stack for vertical list | Medium | https://api.flutter.dev/flutter/widgets/Column-class.html | +| 11 | Layout | Use Expanded and Flexible | Control flex behavior | Expanded to fill space | Fixed sizes in flex containers | Expanded(child: Container()) | Container(width: 200) in Row | Medium | | +| 12 | Layout | Use SizedBox for spacing | Consistent spacing | SizedBox for gaps | Container for spacing only | SizedBox(height: 16) | Container(height: 16) | Low | | +| 13 | Layout | Use LayoutBuilder for responsive | Respond to constraints | LayoutBuilder for adaptive layouts | Fixed sizes for responsive | LayoutBuilder(builder: (context constraints) {}) | Container(width: 375) | Medium | https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html | +| 14 | Layout | Avoid deep nesting | Keep widget tree shallow | Extract deeply nested widgets | 10+ levels of nesting | Extract widget to method or class | Column(Row(Column(Row(...)))) | Medium | | +| 15 | Lists | Use ListView.builder | Lazy list building | ListView.builder for long lists | ListView with children for large lists | ListView.builder(itemCount: 100, itemBuilder: ...) | ListView(children: items.map(...).toList()) | High | https://api.flutter.dev/flutter/widgets/ListView-class.html | +| 16 | Lists | Provide itemExtent when known | Skip measurement | itemExtent for fixed height items | No itemExtent for uniform lists | ListView.builder(itemExtent: 50) | ListView.builder without itemExtent | Medium | | +| 17 | Lists | Use keys for stateful items | Preserve widget state | Key for stateful list items | No key for dynamic lists | ListTile(key: ValueKey(item.id)) | ListTile without key | High | | +| 18 | Lists | Use SliverList for custom scroll | Custom scroll effects | CustomScrollView with Slivers | Nested ListViews | CustomScrollView(slivers: [SliverList()]) | ListView inside ListView | Medium | https://api.flutter.dev/flutter/widgets/SliverList-class.html | +| 19 | Navigation | Use Navigator 2.0 or GoRouter | Declarative routing | go_router for navigation | Navigator.push for complex apps | GoRouter(routes: [...]) | Navigator.push everywhere | Medium | https://pub.dev/packages/go_router | +| 20 | Navigation | Use named routes | Organized navigation | Named routes for clarity | Anonymous routes | Navigator.pushNamed(context '/home') | Navigator.push(context MaterialPageRoute()) | Low | | +| 21 | Navigation | Handle back button (PopScope) | Android back behavior and predictive back (Android 14+) | Use PopScope widget (WillPopScope is deprecated) | Use WillPopScope | PopScope(canPop: false, onPopInvoked: (didPop) => ...) | WillPopScope(onWillPop: ...) | High | https://api.flutter.dev/flutter/widgets/PopScope-class.html | +| 22 | Navigation | Pass typed arguments | Type-safe route arguments | Typed route arguments | Dynamic arguments | MyRoute(id: '123') | arguments: {'id': '123'} | Medium | | +| 23 | Async | Use FutureBuilder | Async UI building | FutureBuilder for async data | setState for async | FutureBuilder(future: fetchData()) | fetchData().then((d) => setState()) | Medium | https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html | +| 24 | Async | Use StreamBuilder | Stream UI building | StreamBuilder for streams | Manual stream subscription | StreamBuilder(stream: myStream) | stream.listen in initState | Medium | https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html | +| 25 | Async | Handle loading and error states | Complete async UI states | ConnectionState checks | Only success state | if (snapshot.connectionState == ConnectionState.waiting) | No loading indicator | High | | +| 26 | Async | Cancel subscriptions | Clean up stream subscriptions | Cancel in dispose | Memory leaks | subscription.cancel() in dispose | No subscription cleanup | High | | +| 27 | Theming | Use ThemeData | Consistent theming | ThemeData for app theme | Hardcoded colors | Theme.of(context).primaryColor | Color(0xFF123456) everywhere | Medium | https://api.flutter.dev/flutter/material/ThemeData-class.html | +| 28 | Theming | Use ColorScheme | Material 3 color system | ColorScheme for colors | Individual color properties | colorScheme: ColorScheme.fromSeed() | primaryColor: Colors.blue | Medium | | +| 29 | Theming | Access theme via context | Dynamic theme access | Theme.of(context) | Static theme reference | Theme.of(context).textTheme.bodyLarge | TextStyle(fontSize: 16) | Medium | | +| 30 | Theming | Support dark mode | Respect system theme | darkTheme in MaterialApp | Light theme only | MaterialApp(theme: light, darkTheme: dark) | MaterialApp(theme: light) | Medium | | +| 31 | Animation | Use implicit animations | Simple animations | AnimatedContainer AnimatedOpacity | Explicit for simple transitions | AnimatedContainer(duration: Duration()) | AnimationController for fade | Low | https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html | +| 32 | Animation | Use AnimationController for complex | Fine-grained control | AnimationController with Ticker | Implicit for complex sequences | AnimationController(vsync: this) | AnimatedContainer for staggered | Medium | | +| 33 | Animation | Dispose AnimationControllers | Clean up animation resources | dispose() for controllers | Memory leaks | controller.dispose() in dispose | No controller disposal | High | | +| 34 | Animation | Use Hero for transitions | Shared element transitions | Hero for navigation animations | Manual shared element | Hero(tag: 'image' child: Image()) | Custom shared element animation | Low | https://api.flutter.dev/flutter/widgets/Hero-class.html | +| 35 | Forms | Use Form widget | Form validation | Form with GlobalKey | Individual validation | Form(key: _formKey child: ...) | TextField without Form | Medium | https://api.flutter.dev/flutter/widgets/Form-class.html | +| 36 | Forms | Use TextEditingController | Control text input | Controller for text fields | onChanged for all text | final controller = TextEditingController() | onChanged: (v) => setState() | Medium | | +| 37 | Forms | Validate on submit | Form validation flow | _formKey.currentState!.validate() | Skip validation | if (_formKey.currentState!.validate()) | Submit without validation | High | | +| 38 | Forms | Dispose controllers | Clean up text controllers | dispose() for controllers | Memory leaks | controller.dispose() in dispose | No controller disposal | High | | +| 39 | Performance | Use const widgets | Reduce rebuilds | const for static widgets | No const for literals | const Icon(Icons.add) | Icon(Icons.add) | High | | +| 40 | Performance | Avoid rebuilding entire tree | Minimal rebuild scope | Isolate changing widgets | setState on parent | Consumer only around changing widget | setState on root widget | High | | +| 41 | Performance | Use RepaintBoundary | Isolate repaints | RepaintBoundary for animations | Full screen repaints | RepaintBoundary(child: AnimatedWidget()) | Animation without boundary | Medium | https://api.flutter.dev/flutter/widgets/RepaintBoundary-class.html | +| 42 | Performance | Profile with DevTools | Measure before optimizing | Flutter DevTools profiling | Guess at performance | DevTools performance tab | Optimize without measuring | Medium | https://docs.flutter.dev/tools/devtools | +| 43 | Accessibility | Use Semantics widget | Screen reader support | Semantics for accessibility | Missing accessibility info | Semantics(label: 'Submit button') | GestureDetector without semantics | High | https://api.flutter.dev/flutter/widgets/Semantics-class.html | +| 44 | Accessibility | Support large fonts | MediaQuery text scaling | MediaQuery.textScaleFactor | Fixed font sizes | style: Theme.of(context).textTheme | TextStyle(fontSize: 14) | High | | +| 45 | Accessibility | Test with screen readers | TalkBack and VoiceOver | Test accessibility regularly | Skip accessibility testing | Regular TalkBack testing | No screen reader testing | High | | +| 46 | Testing | Use widget tests | Test widget behavior | WidgetTester for UI tests | Unit tests only | testWidgets('...' (tester) async {}) | Only test() for UI | Medium | https://docs.flutter.dev/testing | +| 47 | Testing | Use integration tests | Full app testing | integration_test package | Manual testing only | IntegrationTestWidgetsFlutterBinding | Manual E2E testing | Medium | | +| 48 | Testing | Mock dependencies | Isolate tests | Mockito or mocktail | Real dependencies in tests | when(mock.method()).thenReturn() | Real API calls in tests | Medium | | +| 49 | Platform | Use Platform checks | Platform-specific code | Platform.isIOS Platform.isAndroid | Same code for all platforms | if (Platform.isIOS) {} | Hardcoded iOS behavior | Medium | | +| 50 | Platform | Use kIsWeb for web | Web platform detection | kIsWeb for web checks | Platform for web | if (kIsWeb) {} | Platform.isWeb (doesn't exist) | Medium | | +| 51 | Packages | Use pub.dev packages | Community packages | Popular maintained packages | Custom implementations | cached_network_image | Custom image cache | Medium | https://pub.dev/ | +| 52 | Packages | Check package quality | Quality before adding | Pub points and popularity | Any package without review | 100+ pub points | Unmaintained packages | Medium | | \ No newline at end of file diff --git a/.qoder/rules/html-tailwind.md b/.qoder/rules/html-tailwind.md new file mode 100644 index 0000000..f8dd585 --- /dev/null +++ b/.qoder/rules/html-tailwind.md @@ -0,0 +1,62 @@ +--- +trigger: glob +glob: *.html +--- + +| No | Category | Guideline | Description | Do | Don't | Code Good | Code Bad | Severity | Docs URL | +|----|----------|-----------|-------------|----|-------|-----------|----------|----------|----------| +| 1 | Animation | Use Tailwind animate utilities | Built-in animations are optimized and respect reduced-motion | Use animate-pulse animate-spin animate-ping | Custom @keyframes for simple effects | animate-pulse | @keyframes pulse {...} | Medium | https://tailwindcss.com/docs/animation | +| 2 | Animation | Limit bounce animations | Continuous bounce is distracting and causes motion sickness | Use animate-bounce sparingly on CTAs only | Multiple bounce animations on page | Single CTA with animate-bounce | 5+ elements with animate-bounce | High | | +| 3 | Animation | Transition duration | Use appropriate transition speeds for UI feedback | duration-150 to duration-300 for UI | duration-1000 or longer for UI elements | transition-all duration-200 | transition-all duration-1000 | Medium | https://tailwindcss.com/docs/transition-duration | +| 4 | Animation | Hover transitions | Add smooth transitions on hover state changes | Add transition class with hover states | Instant hover changes without transition | hover:bg-gray-100 transition-colors | hover:bg-gray-100 (no transition) | Low | | +| 5 | Z-Index | Use Tailwind z-* scale | Consistent stacking context with predefined scale | z-0 z-10 z-20 z-30 z-40 z-50 | Arbitrary z-index values | z-50 for modals | z-[9999] | Medium | https://tailwindcss.com/docs/z-index | +| 6 | Z-Index | Fixed elements z-index | Fixed navigation and modals need explicit z-index | z-50 for nav z-40 for dropdowns | Relying on DOM order for stacking | fixed top-0 z-50 | fixed top-0 (no z-index) | High | | +| 7 | Z-Index | Negative z-index for backgrounds | Use negative z-index for decorative backgrounds | z-[-1] for background elements | Positive z-index for backgrounds | -z-10 for decorative | z-10 for background | Low | | +| 8 | Layout | Container max-width | Limit content width for readability | max-w-7xl mx-auto for main content | Full-width content on large screens | max-w-7xl mx-auto px-4 | w-full (no max-width) | Medium | https://tailwindcss.com/docs/container | +| 9 | Layout | Responsive padding | Adjust padding for different screen sizes | px-4 md:px-6 lg:px-8 | Same padding all sizes | px-4 sm:px-6 lg:px-8 | px-8 (same all sizes) | Medium | | +| 10 | Layout | Grid gaps | Use consistent gap utilities for spacing | gap-4 gap-6 gap-8 | Margins on individual items | grid gap-6 | grid with mb-4 on each item | Medium | https://tailwindcss.com/docs/gap | +| 11 | Layout | Flexbox alignment | Use flex utilities for alignment | items-center justify-between | Multiple nested wrappers | flex items-center justify-between | Nested divs for alignment | Low | | +| 12 | Images | Aspect ratio | Maintain consistent image aspect ratios | aspect-video aspect-square | No aspect ratio on containers | aspect-video rounded-lg | No aspect control | Medium | https://tailwindcss.com/docs/aspect-ratio | +| 13 | Images | Object fit | Control image scaling within containers | object-cover object-contain | Stretched distorted images | object-cover w-full h-full | No object-fit | Medium | https://tailwindcss.com/docs/object-fit | +| 14 | Images | Lazy loading | Defer loading of off-screen images | loading='lazy' on images | All images eager load | | without lazy | High | | +| 15 | Images | Responsive images | Serve appropriate image sizes | srcset and sizes attributes | Same large image all devices | srcset with multiple sizes | 4000px image everywhere | High | | +| 16 | Typography | Prose plugin | Use @tailwindcss/typography for rich text | prose prose-lg for article content | Custom styles for markdown | prose prose-lg max-w-none | Custom text styling | Medium | https://tailwindcss.com/docs/typography-plugin | +| 17 | Typography | Line height | Use appropriate line height for readability | leading-relaxed for body text | Default tight line height | leading-relaxed (1.625) | leading-none or leading-tight | Medium | https://tailwindcss.com/docs/line-height | +| 18 | Typography | Font size scale | Use consistent text size scale | text-sm text-base text-lg text-xl | Arbitrary font sizes | text-lg | text-[17px] | Low | https://tailwindcss.com/docs/font-size | +| 19 | Typography | Text truncation | Handle long text gracefully | truncate or line-clamp-* | Overflow breaking layout | line-clamp-2 | No overflow handling | Medium | https://tailwindcss.com/docs/text-overflow | +| 20 | Colors | Opacity utilities | Use color opacity utilities | bg-black/50 text-white/80 | Separate opacity class | bg-black/50 | bg-black opacity-50 | Low | https://tailwindcss.com/docs/background-color | +| 21 | Colors | Dark mode | Support dark mode with dark: prefix | dark:bg-gray-900 dark:text-white | No dark mode support | dark:bg-gray-900 | Only light theme | Medium | https://tailwindcss.com/docs/dark-mode | +| 22 | Colors | Semantic colors | Use semantic color naming in config | primary secondary danger success | Generic color names in components | bg-primary | bg-blue-500 everywhere | Medium | | +| 23 | Spacing | Consistent spacing scale | Use Tailwind spacing scale consistently | p-4 m-6 gap-8 | Arbitrary pixel values | p-4 (1rem) | p-[15px] | Low | https://tailwindcss.com/docs/customizing-spacing | +| 24 | Spacing | Negative margins | Use sparingly for overlapping effects | -mt-4 for overlapping elements | Negative margins for layout fixing | -mt-8 for card overlap | -m-2 to fix spacing issues | Medium | | +| 25 | Spacing | Space between | Use space-y-* for vertical lists | space-y-4 on flex/grid column | Margin on each child | space-y-4 | Each child has mb-4 | Low | https://tailwindcss.com/docs/space | +| 26 | Forms | Focus states | Always show focus indicators | focus:ring-2 focus:ring-blue-500 | Remove focus outline | focus:ring-2 focus:ring-offset-2 | focus:outline-none (no replacement) | High | | +| 27 | Forms | Input sizing | Consistent input dimensions | h-10 px-3 for inputs | Inconsistent input heights | h-10 w-full px-3 | Various heights per input | Medium | | +| 28 | Forms | Disabled states | Clear disabled styling | disabled:opacity-50 disabled:cursor-not-allowed | No disabled indication | disabled:opacity-50 | Same style as enabled | Medium | | +| 29 | Forms | Placeholder styling | Style placeholder text appropriately | placeholder:text-gray-400 | Dark placeholder text | placeholder:text-gray-400 | Default dark placeholder | Low | | +| 30 | Responsive | Mobile-first approach | Start with mobile styles and add breakpoints | Default mobile + md: lg: xl: | Desktop-first approach | text-sm md:text-base | text-base max-md:text-sm | Medium | https://tailwindcss.com/docs/responsive-design | +| 31 | Responsive | Breakpoint testing | Test at standard breakpoints | 320 375 768 1024 1280 1536 | Only test on development device | Test all breakpoints | Single device testing | High | | +| 32 | Responsive | Hidden/shown utilities | Control visibility per breakpoint | hidden md:block | Different content per breakpoint | hidden md:flex | Separate mobile/desktop components | Low | https://tailwindcss.com/docs/display | +| 33 | Buttons | Button sizing | Consistent button dimensions | px-4 py-2 or px-6 py-3 | Inconsistent button sizes | px-4 py-2 text-sm | Various padding per button | Medium | | +| 34 | Buttons | Touch targets | Minimum 44px touch target on mobile | min-h-[44px] on mobile | Small buttons on mobile | min-h-[44px] min-w-[44px] | h-8 w-8 on mobile | High | | +| 35 | Buttons | Loading states | Show loading feedback | disabled + spinner icon | Clickable during loading | | Button without loading state | High | | +| 36 | Buttons | Icon buttons | Accessible icon-only buttons | aria-label on icon buttons | Icon button without label | | | High | | +| 37 | Cards | Card structure | Consistent card styling | rounded-lg shadow-md p-6 | Inconsistent card styles | rounded-2xl shadow-lg p-6 | Mixed card styling | Low | | +| 38 | Cards | Card hover states | Interactive cards should have hover feedback | hover:shadow-lg transition-shadow | No hover on clickable cards | hover:shadow-xl transition-shadow | Static cards that are clickable | Medium | | +| 39 | Cards | Card spacing | Consistent internal card spacing | space-y-4 for card content | Inconsistent internal spacing | space-y-4 or p-6 | Mixed mb-2 mb-4 mb-6 | Low | | +| 40 | Accessibility | Screen reader text | Provide context for screen readers | sr-only for hidden labels | Missing context for icons | Close menu | No label for icon button | High | https://tailwindcss.com/docs/screen-readers | +| 41 | Accessibility | Focus visible | Show focus only for keyboard users | focus-visible:ring-2 | Focus on all interactions | focus-visible:ring-2 | focus:ring-2 (shows on click too) | Medium | | +| 42 | Accessibility | Reduced motion | Respect user motion preferences | motion-reduce:animate-none | Ignore motion preferences | motion-reduce:transition-none | No reduced motion support | High | https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion | +| 43 | Performance | Configure content paths | Tailwind needs to know where classes are used | Use 'content' array in config | Use deprecated 'purge' option (v2) | content: ['./src/**/*.{js,ts,jsx,tsx}'] | purge: [...] | High | https://tailwindcss.com/docs/content-configuration | +| 44 | Performance | JIT mode | Use JIT for faster builds and smaller bundles | JIT enabled (default in v3) | Full CSS in development | Tailwind v3 defaults | Tailwind v2 without JIT | Medium | | +| 45 | Performance | Avoid @apply bloat | Use @apply sparingly | Direct utilities in HTML | Heavy @apply usage | class='px-4 py-2 rounded' | @apply px-4 py-2 rounded; | Low | https://tailwindcss.com/docs/reusing-styles | +| 46 | Plugins | Official plugins | Use official Tailwind plugins | @tailwindcss/forms typography aspect-ratio | Custom implementations | @tailwindcss/forms | Custom form reset CSS | Medium | https://tailwindcss.com/docs/plugins | +| 47 | Plugins | Custom utilities | Create utilities for repeated patterns | Custom utility in config | Repeated arbitrary values | Custom shadow utility | shadow-[0_4px_20px_rgba(0,0,0,0.1)] everywhere | Medium | | +| 48 | Layout | Container Queries | Use @container for component-based responsiveness | Use @container and @lg: etc. | Media queries for component internals | @container @lg:grid-cols-2 | @media (min-width: ...) inside component | Medium | https://github.com/tailwindlabs/tailwindcss-container-queries | +| 49 | Interactivity | Group and Peer | Style based on parent/sibling state | group-hover peer-checked | JS for simple state interactions | group-hover:text-blue-500 | onMouseEnter={() => setHover(true)} | Low | https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state | +| 50 | Customization | Arbitrary Values | Use [] for one-off values | w-[350px] for specific needs | Creating config for single use | top-[117px] (if strictly needed) | style={{ top: '117px' }} | Low | https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values | +| 51 | Colors | Theme color variables | Define colors in Tailwind theme and use directly | bg-primary text-success border-cta | bg-[var(--color-primary)] text-[var(--color-success)] | bg-primary | bg-[var(--color-primary)] | Medium | https://tailwindcss.com/docs/customizing-colors | +| 52 | Colors | Use bg-linear-to-* for gradients | Tailwind v4 uses bg-linear-to-* syntax for gradients | bg-linear-to-r bg-linear-to-b | bg-gradient-to-* (deprecated in v4) | bg-linear-to-r from-blue-500 to-purple-500 | bg-gradient-to-r from-blue-500 to-purple-500 | Medium | https://tailwindcss.com/docs/background-image | +| 53 | Layout | Use shrink-0 shorthand | Shorter class name for flex-shrink-0 | shrink-0 shrink | flex-shrink-0 flex-shrink | shrink-0 | flex-shrink-0 | Low | https://tailwindcss.com/docs/flex-shrink | +| 54 | Layout | Use size-* for square dimensions | Single utility for equal width and height | size-4 size-8 size-12 | Separate h-* w-* for squares | size-6 | h-6 w-6 | Low | https://tailwindcss.com/docs/size | +| 55 | Images | SVG explicit dimensions | Add width/height attributes to SVGs to prevent layout shift | | SVG without explicit dimensions | | | High | | \ No newline at end of file diff --git a/.qoder/rules/icons.md b/.qoder/rules/icons.md new file mode 100644 index 0000000..df1e6be --- /dev/null +++ b/.qoder/rules/icons.md @@ -0,0 +1,106 @@ +--- +trigger: always_on +--- + +| STT | Category | Icon Name | Keywords | Library | Import Code | Usage | Best For | Style | +|-----|------------|-------------|------------------------------------|-----------|--------------------------------------------------|---------------------|------------------------------------|---------| +| 1 | Navigation | menu | hamburger menu navigation toggle bars | Lucide | import { Menu } from 'lucide-react' | | Mobile navigation drawer toggle sidebar | Outline | +| 2 | Navigation | arrow-left | back previous return navigate | Lucide | import { ArrowLeft } from 'lucide-react' | | Back button breadcrumb navigation | Outline | +| 3 | Navigation | arrow-right | next forward continue navigate | Lucide | import { ArrowRight } from 'lucide-react' | | Forward button next step CTA | Outline | +| 4 | Navigation | chevron-down| dropdown expand accordion select | Lucide | import { ChevronDown } from 'lucide-react' | | Dropdown toggle accordion header | Outline | +| 5 | Navigation | chevron-up | collapse close accordion minimize | Lucide | import { ChevronUp } from 'lucide-react' | | Accordion collapse minimize | Outline | +| 6 | Navigation | home | homepage main dashboard start | Lucide | import { Home } from 'lucide-react' | | Home navigation main page | Outline | +| 7 | Navigation | x | close cancel dismiss remove exit | Lucide | import { X } from 'lucide-react' | | Modal close dismiss button | Outline | +| 8 | Navigation | external-link | open new tab external link | Lucide | import { ExternalLink } from 'lucide-react' | | External link indicator | Outline | +| 9 | Action | plus | add create new insert | Lucide | import { Plus } from 'lucide-react' | | Add button create new item | Outline | +| 10 | Action | minus | remove subtract decrease delete | Lucide | import { Minus } from 'lucide-react' | | Remove item quantity decrease | Outline | +| 11 | Action | trash-2 | delete remove discard bin | Lucide | import { Trash2 } from 'lucide-react' | | Delete action destructive | Outline | +| 12 | Action | edit | pencil modify change update | Lucide | import { Edit } from 'lucide-react' | | Edit button modify content | Outline | +| 13 | Action | save | disk store persist save | Lucide | import { Save } from 'lucide-react' | | Save button persist changes | Outline | +| 14 | Action | download | export save file download | Lucide | import { Download } from 'lucide-react' | | Download file export | Outline | +| 15 | Action | upload | import file attach upload | Lucide | import { Upload } from 'lucide-react' | | Upload file import | Outline | +| 16 | Action | copy | duplicate clipboard paste | Lucide | import { Copy } from 'lucide-react' | | Copy to clipboard | Outline | +| 17 | Action | share | social distribute send | Lucide | import { Share } from 'lucide-react' | | Share button social | Outline | +| 18 | Action | search | find lookup filter query | Lucide | import { Search } from 'lucide-react' | | Search input bar | Outline | +| 19 | Action | filter | sort refine narrow options | Lucide | import { Filter } from 'lucide-react' | | Filter dropdown sort | Outline | +| 20 | Action | settings | gear cog preferences config | Lucide | import { Settings } from 'lucide-react' | | Settings page configuration | Outline | +| 21 | Status | check | success done complete verified | Lucide | import { Check } from 'lucide-react' | | Success state checkmark | Outline | +| 22 | Status | check-circle| success verified approved complete | Lucide | import { CheckCircle } from 'lucide-react' | | Success badge verified | Outline | +| 23 | Status | x-circle | error failed cancel rejected | Lucide | import { XCircle } from 'lucide-react' | | Error state failed | Outline | +| 24 | Status | alert-triangle | warning caution attention danger | Lucide | import { AlertTriangle } from 'lucide-react' | | Warning message caution | Outline | +| 25 | Status | alert-circle| info notice information help | Lucide | import { AlertCircle } from 'lucide-react' | | Info notice alert | Outline | +| 26 | Status | info | information help tooltip details | Lucide | import { Info } from 'lucide-react' | | Information tooltip help | Outline | +| 27 | Status | loader | loading spinner processing wait | Lucide | import { Loader } from 'lucide-react' | | Loading state spinner | Outline | +| 28 | Status | clock | time schedule pending wait | Lucide | import { Clock } from 'lucide-react' | | Pending time schedule | Outline | +| 29 | Communication | mail | email message inbox letter | Lucide | import { Mail } from 'lucide-react' | | Email contact inbox | Outline | +| 30 | Communication | message-circle | chat comment bubble conversation | Lucide | import { MessageCircle } from 'lucide-react' | | Chat comment message | Outline | +| 31 | Communication | phone | call mobile telephone contact | Lucide | import { Phone } from 'lucide-react' | | Phone contact call | Outline | +| 32 | Communication | send | submit dispatch message airplane | Lucide | import { Send } from 'lucide-react' | | Send message submit | Outline | +| 33 | Communication | bell | notification alert ring reminder | Lucide | import { Bell } from 'lucide-react' | | Notification bell alert | Outline | +| 34 | User | user | profile account person avatar | Lucide | import { User } from 'lucide-react' | | User profile account | Outline | +| 35 | User | users | team group people members | Lucide | import { Users } from 'lucide-react' | | Team group members | Outline | +| 36 | User | user-plus | add invite new member | Lucide | import { UserPlus } from 'lucide-react' | | Add user invite | Outline | +| 37 | User | log-in | signin authenticate enter | Lucide | import { LogIn } from 'lucide-react' | | Login signin | Outline | +| 38 | User | log-out | signout exit leave logout | Lucide | import { LogOut } from 'lucide-react' | | Logout signout | Outline | +| 39 | Media | image | photo picture gallery thumbnail | Lucide | import { Image } from 'lucide-react' | | Image photo gallery | Outline | +| 40 | Media | video | movie film play record | Lucide | import { Video } from 'lucide-react' |