@stephen-lord/docs 1.0.0

package/dist/ui-ux-pro-max-skill/.opencode/skills/ui-ux-pro-max/SKILL.md

@@ -0,0 +1,253 @@
+---
+name: ui-ux-pro-max
+description: "UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples."
+compatibility: "OpenCode with Python 3.x"
+---
+
+# UI/UX Pro Max - Design Intelligence
+
+Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.
+
+## OpenCode Tool Mapping
+
+| Claude Code Tool    | OpenCode Equivalent    |
+|---------------------|------------------------|
+| `TodoWrite`         | `update_plan`          |
+| `Task` subagents    | `@mention` system      |
+| `Skill` tool        | `use_skill` tool       |
+| File operations     | Native OpenCode tools  |
+
+## When to Use
+
+Use this skill when:
+- User requests UI/UX work (design, build, create, implement, review, fix, improve)
+- User wants to build frontend pages (landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app)
+- User asks about design patterns, color palettes, typography, or UI components
+
+## Prerequisites
+
+Check if Python is installed:
+
+```bash
+python3 --version || python --version
+```
+
+If Python is not installed, install it based on user's OS:
+
+**macOS:**
+
+```bash
+brew install python3
+```
+
+**Ubuntu/Debian:**
+
+```bash
+sudo apt update && sudo apt install python3
+```
+
+**Windows:**
+
+```powershell
+winget install Python.Python.3.12
+```
+
+---
+
+## How to Use
+
+### Step 1: Analyze User Requirements
+
+Extract key information from user request:
+
+- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
+- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
+- **Industry**: healthcare, fintech, gaming, education, etc.
+- **Stack**: React, Vue, Next.js, or default to `html-tailwind`
+
+### Step 2: Search Relevant Domains
+
+Use `update_plan` to track your search tasks, then execute multiple searches to gather comprehensive information.
+
+```bash
+python3 ../../.shared/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
+```
+
+**Recommended search order:**
+
+1. **Product** - Get style recommendations for product type
+2. **Style** - Get detailed style guide (colors, effects, frameworks)
+3. **Typography** - Get font pairings with Google Fonts imports
+4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
+5. **Landing** - Get page structure (if landing page)
+6. **Chart** - Get chart recommendations (if dashboard/analytics)
+7. **UX** - Get best practices and anti-patterns
+8. **Stack** - Get stack-specific guidelines (default: html-tailwind)
+
+### Step 3: Stack Guidelines (Default: html-tailwind)
+
+If user doesn't specify a stack, **default to `html-tailwind`**.
+
+```bash
+python3 ../../.shared/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
+```
+
+Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`
+
+---
+
+## Search Reference
+
+### Available Domains
+
+| Domain       | Use For                              | Example Keywords                                         |
+| ------------ | ------------------------------------ | -------------------------------------------------------- |
+| `product`    | Product type recommendations         | SaaS, e-commerce, portfolio, healthcare, beauty, service |
+| `style`      | UI styles, colors, effects           | glassmorphism, minimalism, dark mode, brutalism          |
+| `typography` | Font pairings, Google Fonts          | elegant, playful, professional, modern                   |
+| `color`      | Color palettes by product type       | saas, ecommerce, healthcare, beauty, fintech, service    |
+| `landing`    | Page structure, CTA strategies       | hero, hero-centric, testimonial, pricing, social-proof   |
+| `chart`      | Chart types, library recommendations | trend, comparison, timeline, funnel, pie                 |
+| `ux`         | Best practices, anti-patterns        | animation, accessibility, z-index, loading               |
+| `prompt`     | AI prompts, CSS keywords             | (style name)                                             |
+
+### Available Stacks
+
+| Stack           | Focus                                          |
+| --------------- | ---------------------------------------------- |
+| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
+| `react`         | State, hooks, performance, patterns            |
+| `nextjs`        | SSR, routing, images, API routes               |
+| `vue`           | Composition API, Pinia, Vue Router             |
+| `svelte`        | Runes, stores, SvelteKit                       |
+| `swiftui`       | Views, State, Navigation, Animation            |
+| `react-native`  | Components, Navigation, Lists                  |
+| `flutter`       | Widgets, State, Layout, Theming                |
+| `shadcn`        | shadcn/ui components, theming, forms, patterns |
+
+---
+
+## Example Workflow
+
+**User request:** "Build a landing page for a professional skincare service."
+
+**AI should:**
+
+```bash
+# 1. Search product type
+python3 ../../.shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
+
+# 2. Search style (based on industry: beauty, elegant)
+python3 ../../.shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
+
+# 3. Search typography
+python3 ../../.shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
+
+# 4. Search color palette
+python3 ../../.shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
+
+# 5. Search landing page structure
+python3 ../../.shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
+
+# 6. Search UX guidelines
+python3 ../../.shared/ui-ux-pro-max/scripts/search.py "animation" --domain ux
+python3 ../../.shared/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
+
+# 7. Search stack guidelines (default: html-tailwind)
+python3 ../../.shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind
+```
+
+**Then:** Synthesize all search results and implement the design.
+
+---
+
+## Tips for Better Results
+
+1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app"
+2. **Search multiple times** - Different keywords reveal different insights
+3. **Combine domains** - Style + Typography + Color = Complete design system
+4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
+5. **Use stack flag** - Get implementation-specific best practices
+6. **Iterate** - If first search doesn't match, try different keywords
+
+---
+
+## Common Rules for Professional UI
+
+These are frequently overlooked issues that make UI look unprofessional:
+
+### Icons & Visual Elements
+
+| Rule                       | Do                                              | Don't                                  |
+| -------------------------- | ----------------------------------------------- | -------------------------------------- |
+| **No emoji icons**         | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons   |
+| **Stable hover states**    | Use color/opacity transitions on hover          | Use scale transforms that shift layout |
+| **Correct brand logos**    | Research official SVG from Simple Icons         | Guess or use incorrect logo paths      |
+| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6          | Mix different icon sizes randomly      |
+
+### Interaction & Cursor
+
+| Rule                   | Do                                                    | Don't                                        |
+| ---------------------- | ----------------------------------------------------- | -------------------------------------------- |
+| **Cursor pointer**     | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
+| **Hover feedback**     | Provide visual feedback (color, shadow, border)       | No indication element is interactive         |
+| **Smooth transitions** | Use `transition-colors duration-200`                  | Instant state changes or too slow (>500ms)   |
+
+### Light/Dark Mode Contrast
+
+| Rule                      | Do                                  | Don't                                   |
+| ------------------------- | ----------------------------------- | --------------------------------------- |
+| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent)     |
+| **Text contrast light**   | Use `#0F172A` (slate-900) for text  | Use `#94A3B8` (slate-400) for body text |
+| **Muted text light**      | Use `#475569` (slate-600) minimum   | Use gray-400 or lighter                 |
+| **Border visibility**     | Use `border-gray-200` in light mode | Use `border-white/10` (invisible)       |
+
+### Layout & Spacing
+
+| Rule                     | Do                                  | Don't                                  |
+| ------------------------ | ----------------------------------- | -------------------------------------- |
+| **Floating navbar**      | Add `top-4 left-4 right-4` spacing  | Stick navbar to `top-0 left-0 right-0` |
+| **Content padding**      | Account for fixed navbar height     | Let content hide behind fixed elements |
+| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths         |
+
+---
+
+## Pre-Delivery Checklist
+
+Before delivering UI code, verify these items:
+
+### Visual Quality
+
+- [ ] No emojis used as icons (use SVG instead)
+- [ ] All icons from consistent icon set (Heroicons/Lucide)
+- [ ] Brand logos are correct (verified from Simple Icons)
+- [ ] Hover states don't cause layout shift
+- [ ] Use theme colors directly (bg-primary) not var() wrapper
+
+### Interaction
+
+- [ ] All clickable elements have `cursor-pointer`
+- [ ] Hover states provide clear visual feedback
+- [ ] Transitions are smooth (150-300ms)
+- [ ] Focus states visible for keyboard navigation
+
+### Light/Dark Mode
+
+- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
+- [ ] Glass/transparent elements visible in light mode
+- [ ] Borders visible in both modes
+- [ ] Test both modes before delivery
+
+### Layout
+
+- [ ] Floating elements have proper spacing from edges
+- [ ] No content hidden behind fixed navbars
+- [ ] Responsive at 320px, 768px, 1024px, 1440px
+- [ ] No horizontal scroll on mobile
+
+### Accessibility
+
+- [ ] All images have alt text
+- [ ] Form inputs have labels
+- [ ] Color is not the only indicator
+- [ ] `prefers-reduced-motion` respected

package/dist/ui-ux-pro-max-skill/.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 |

package/dist/ui-ux-pro-max-skill/.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 |

package/dist/ui-ux-pro-max-skill/.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<MyState>(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 |  |

package/dist/ui-ux-pro-max-skill/.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 | <img loading='lazy'> | <img> 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 disabled><Spinner/></Button> | Button without loading state | High |  |
+| 36 | Buttons | Icon buttons | Accessible icon-only buttons | aria-label on icon buttons | Icon button without label | <button aria-label='Close'><XIcon/></button> | <button><XIcon/></button> | 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 | <span class='sr-only'>Close menu</span> | 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 class='size-6' width='24' height='24'> | SVG without explicit dimensions | <svg class='size-6' width='24' height='24'> | <svg class='size-6'> | High |  |