@stephen-lord/docs 1.0.0

package/dist/ui-ux-pro-max-skill/.qoder/rules/ui-ux-pro-max.md

@@ -0,0 +1,231 @@
+---
+trigger: always_on
+---
+
+# 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.
+
+## 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 This Workflow
+
+When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
+
+### 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 `search.py` multiple times to gather comprehensive information. Search until you have enough context.
+
+```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 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
+7. **Split Into Multiple Files** - For better maintainability:
+   - Separate components into individual files (e.g., `Header.tsx`, `Footer.tsx`)
+   - Extract reusable styles into dedicated files
+   - Keep each file focused and under 200-300 lines
+
+---
+
+## 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 :art: :rocket: :gear: 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
+
+### 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/ux-guideline.md

@@ -0,0 +1,106 @@
+---
+trigger: always_on
+---
+
+
+| No | Category | Issue | Platform | Description | Do | Don't | Code Example Good | Code Example Bad | Severity |
+|----|----------|-------|----------|-------------|----|-------|-------------------|------------------|----------|
+| 1 | Navigation | Smooth Scroll | Web | Anchor links should scroll smoothly to target section | Use scroll-behavior: smooth on html element | Jump directly without transition | html { scroll-behavior: smooth; } | <a href='#section'> without CSS | High |
+| 2 | Navigation | Sticky Navigation | Web | Fixed nav should not obscure content | Add padding-top to body equal to nav height | Let nav overlap first section content | pt-20 (if nav is h-20) | No padding compensation | Medium |
+| 3 | Navigation | Active State | All | Current page/section should be visually indicated | Highlight active nav item with color/underline | No visual feedback on current location | text-primary border-b-2 | All links same style | Medium |
+| 4 | Navigation | Back Button | Mobile | Users expect back to work predictably | Preserve navigation history properly | Break browser/app back button behavior | history.pushState() | location.replace() | High |
+| 5 | Navigation | Deep Linking | All | URLs should reflect current state for sharing | Update URL on state/view changes | Static URLs for dynamic content | Use query params or hash | Single URL for all states | Medium |
+| 6 | Navigation | Breadcrumbs | Web | Show user location in site hierarchy | Use for sites with 3+ levels of depth | Use for flat single-level sites | Home > Category > Product | Only on deep nested pages | Low |
+| 7 | Animation | Excessive Motion | All | Too many animations cause distraction and motion sickness | Animate 1-2 key elements per view maximum | Animate everything that moves | Single hero animation | animate-bounce on 5+ elements | High |
+| 8 | Animation | Duration Timing | All | Animations should feel responsive not sluggish | Use 150-300ms for micro-interactions | Use animations longer than 500ms for UI | transition-all duration-200 | duration-1000 | Medium |
+| 9 | Animation | Reduced Motion | All | Respect user's motion preferences | Check prefers-reduced-motion media query | Ignore accessibility motion settings | @media (prefers-reduced-motion: reduce) | No motion query check | High |
+| 10 | Animation | Loading States | All | Show feedback during async operations | Use skeleton screens or spinners | Leave UI frozen with no feedback | animate-pulse skeleton | Blank screen while loading | High |
+| 11 | Animation | Hover vs Tap | All | Hover effects don't work on touch devices | Use click/tap for primary interactions | Rely only on hover for important actions | onClick handler | onMouseEnter only | High |
+| 12 | Animation | Continuous Animation | All | Infinite animations are distracting | Use for loading indicators only | Use for decorative elements | animate-spin on loader | animate-bounce on icons | Medium |
+| 13 | Animation | Transform Performance | Web | Some CSS properties trigger expensive repaints | Use transform and opacity for animations | Animate width/height/top/left properties | transform: translateY() | top: 10px animation | Medium |
+| 14 | Animation | Easing Functions | All | Linear motion feels robotic | Use ease-out for entering ease-in for exiting | Use linear for UI transitions | ease-out | linear | Low |
+| 15 | Layout | Z-Index Management | Web | Stacking context conflicts cause hidden elements | Define z-index scale system (10 20 30 50) | Use arbitrary large z-index values | z-10 z-20 z-50 | z-[9999] | High |
+| 16 | Layout | Overflow Hidden | Web | Hidden overflow can clip important content | Test all content fits within containers | Blindly apply overflow-hidden | overflow-auto with scroll | overflow-hidden truncating content | Medium |
+| 17 | Layout | Fixed Positioning | Web | Fixed elements can overlap or be inaccessible | Account for safe areas and other fixed elements | Stack multiple fixed elements carelessly | Fixed nav + fixed bottom with gap | Multiple overlapping fixed elements | Medium |
+| 18 | Layout | Stacking Context | Web | New stacking contexts reset z-index | Understand what creates new stacking context | Expect z-index to work across contexts | Parent with z-index isolates children | z-index: 9999 not working | Medium |
+| 19 | Layout | Content Jumping | Web | Layout shift when content loads is jarring | Reserve space for async content | Let images/content push layout around | aspect-ratio or fixed height | No dimensions on images | High |
+| 20 | Layout | Viewport Units | Web | 100vh can be problematic on mobile browsers | Use dvh or account for mobile browser chrome | Use 100vh for full-screen mobile layouts | min-h-dvh or min-h-screen | h-screen on mobile | Medium |
+| 21 | Layout | Container Width | Web | Content too wide is hard to read | Limit max-width for text content (65-75ch) | Let text span full viewport width | max-w-prose or max-w-3xl | Full width paragraphs | Medium |
+| 22 | Touch | Touch Target Size | Mobile | Small buttons are hard to tap accurately | Minimum 44x44px touch targets | Tiny clickable areas | min-h-[44px] min-w-[44px] | w-6 h-6 buttons | High |
+| 23 | Touch | Touch Spacing | Mobile | Adjacent touch targets need adequate spacing | Minimum 8px gap between touch targets | Tightly packed clickable elements | gap-2 between buttons | gap-0 or gap-1 | Medium |
+| 24 | Touch | Gesture Conflicts | Mobile | Custom gestures can conflict with system | Avoid horizontal swipe on main content | Override system gestures | Vertical scroll primary | Horizontal swipe carousel only | Medium |
+| 25 | Touch | Tap Delay | Mobile | 300ms tap delay feels laggy | Use touch-action CSS or fastclick | Default mobile tap handling | touch-action: manipulation | No touch optimization | Medium |
+| 26 | Touch | Pull to Refresh | Mobile | Accidental refresh is frustrating | Disable where not needed | Enable by default everywhere | overscroll-behavior: contain | Default overscroll | Low |
+| 27 | Touch | Haptic Feedback | Mobile | Tactile feedback improves interaction feel | Use for confirmations and important actions | Overuse vibration feedback | navigator.vibrate(10) | Vibrate on every tap | Low |
+| 28 | Interaction | Focus States | All | Keyboard users need visible focus indicators | Use visible focus rings on interactive elements | Remove focus outline without replacement | focus:ring-2 focus:ring-blue-500 | outline-none without alternative | High |
+| 29 | Interaction | Hover States | Web | Visual feedback on interactive elements | Change cursor and add subtle visual change | No hover feedback on clickable elements | hover:bg-gray-100 cursor-pointer | No hover style | Medium |
+| 30 | Interaction | Active States | All | Show immediate feedback on press/click | Add pressed/active state visual change | No feedback during interaction | active:scale-95 | No active state | Medium |
+| 31 | Interaction | Disabled States | All | Clearly indicate non-interactive elements | Reduce opacity and change cursor | Confuse disabled with normal state | opacity-50 cursor-not-allowed | Same style as enabled | Medium |
+| 32 | Interaction | Loading Buttons | All | Prevent double submission during async actions | Disable button and show loading state | Allow multiple clicks during processing | disabled={loading} spinner | Button clickable while loading | High |
+| 33 | Interaction | Error Feedback | All | Users need to know when something fails | Show clear error messages near problem | Silent failures with no feedback | Red border + error message | No indication of error | High |
+| 34 | Interaction | Success Feedback | All | Confirm successful actions to users | Show success message or visual change | No confirmation of completed action | Toast notification or checkmark | Action completes silently | Medium |
+| 35 | Interaction | Confirmation Dialogs | All | Prevent accidental destructive actions | Confirm before delete/irreversible actions | Delete without confirmation | Are you sure modal | Direct delete on click | High |
+| 36 | Accessibility | Color Contrast | All | Text must be readable against background | Minimum 4.5:1 ratio for normal text | Low contrast text | #333 on white (7:1) | #999 on white (2.8:1) | High |
+| 37 | Accessibility | Color Only | All | Don't convey information by color alone | Use icons/text in addition to color | Red/green only for error/success | Red text + error icon | Red border only for error | High |
+| 38 | Accessibility | Alt Text | All | Images need text alternatives | Descriptive alt text for meaningful images | Empty or missing alt attributes | alt='Dog playing in park' | alt='' for content images | High |
+| 39 | Accessibility | Heading Hierarchy | Web | Screen readers use headings for navigation | Use sequential heading levels h1-h6 | Skip heading levels or misuse for styling | h1 then h2 then h3 | h1 then h4 | Medium |
+| 40 | Accessibility | ARIA Labels | All | Interactive elements need accessible names | Add aria-label for icon-only buttons | Icon buttons without labels | aria-label='Close menu' | <button><Icon/></button> | High |
+| 41 | Accessibility | Keyboard Navigation | Web | All functionality accessible via keyboard | Tab order matches visual order | Keyboard traps or illogical tab order | tabIndex for custom order | Unreachable elements | High |
+| 42 | Accessibility | Screen Reader | All | Content should make sense when read aloud | Use semantic HTML and ARIA properly | Div soup with no semantics | <nav> <main> <article> | <div> for everything | Medium |
+| 43 | Accessibility | Form Labels | All | Inputs must have associated labels | Use label with for attribute or wrap input | Placeholder-only inputs | <label for='email'> | placeholder='Email' only | High |
+| 44 | Accessibility | Error Messages | All | Error messages must be announced | Use aria-live or role=alert for errors | Visual-only error indication | role='alert' | Red border only | High |
+| 45 | Accessibility | Skip Links | Web | Allow keyboard users to skip navigation | Provide skip to main content link | No skip link on nav-heavy pages | Skip to main content link | 100 tabs to reach content | Medium |
+| 46 | Performance | Image Optimization | All | Large images slow page load | Use appropriate size and format (WebP) | Unoptimized full-size images | srcset with multiple sizes | 4000px image for 400px display | High |
+| 47 | Performance | Lazy Loading | All | Load content as needed | Lazy load below-fold images and content | Load everything upfront | loading='lazy' | All images eager load | Medium |
+| 48 | Performance | Code Splitting | Web | Large bundles slow initial load | Split code by route/feature | Single large bundle | dynamic import() | All code in main bundle | Medium |
+| 49 | Performance | Caching | Web | Repeat visits should be fast | Set appropriate cache headers | No caching strategy | Cache-Control headers | Every request hits server | Medium |
+| 50 | Performance | Font Loading | Web | Web fonts can block rendering | Use font-display swap or optional | Invisible text during font load | font-display: swap | FOIT (Flash of Invisible Text) | Medium |
+| 51 | Performance | Third Party Scripts | Web | External scripts can block rendering | Load non-critical scripts async/defer | Synchronous third-party scripts | async or defer attribute | <script src='...'> in head | Medium |
+| 52 | Performance | Bundle Size | Web | Large JavaScript slows interaction | Monitor and minimize bundle size | Ignore bundle size growth | Bundle analyzer | No size monitoring | Medium |
+| 53 | Performance | Render Blocking | Web | CSS/JS can block first paint | Inline critical CSS defer non-critical | Large blocking CSS files | Critical CSS inline | All CSS in head | Medium |
+| 54 | Forms | Input Labels | All | Every input needs a visible label | Always show label above or beside input | Placeholder as only label | <label>Email</label><input> | placeholder='Email' only | High |
+| 55 | Forms | Error Placement | All | Errors should appear near the problem | Show error below related input | Single error message at top of form | Error under each field | All errors at form top | Medium |
+| 56 | Forms | Inline Validation | All | Validate as user types or on blur | Validate on blur for most fields | Validate only on submit | onBlur validation | Submit-only validation | Medium |
+| 57 | Forms | Input Types | All | Use appropriate input types | Use email tel number url etc | Text input for everything | type='email' | type='text' for email | Medium |
+| 58 | Forms | Autofill Support | Web | Help browsers autofill correctly | Use autocomplete attribute properly | Block or ignore autofill | autocomplete='email' | autocomplete='off' everywhere | Medium |
+| 59 | Forms | Required Indicators | All | Mark required fields clearly | Use asterisk or (required) text | No indication of required fields | * required indicator | Guess which are required | Medium |
+| 60 | Forms | Password Visibility | All | Let users see password while typing | Toggle to show/hide password | No visibility toggle | Show/hide password button | Password always hidden | Medium |
+| 61 | Forms | Submit Feedback | All | Confirm form submission status | Show loading then success/error state | No feedback after submit | Loading -> Success message | Button click with no response | High |
+| 62 | Forms | Input Affordance | All | Inputs should look interactive | Use distinct input styling | Inputs that look like plain text | Border/background on inputs | Borderless inputs | Medium |
+| 63 | Forms | Mobile Keyboards | Mobile | Show appropriate keyboard for input type | Use inputmode attribute | Default keyboard for all inputs | inputmode='numeric' | Text keyboard for numbers | Medium |
+| 64 | Responsive | Mobile First | Web | Design for mobile then enhance for larger | Start with mobile styles then add breakpoints | Desktop-first causing mobile issues | Default mobile + md: lg: xl: | Desktop default + max-width queries | Medium |
+| 65 | Responsive | Breakpoint Testing | Web | Test at all common screen sizes | Test at 320 375 414 768 1024 1440 | Only test on your device | Multiple device testing | Single device development | Medium |
+| 66 | Responsive | Touch Friendly | Web | Mobile layouts need touch-sized targets | Increase touch targets on mobile | Same tiny buttons on mobile | Larger buttons on mobile | Desktop-sized targets on mobile | High |
+| 67 | Responsive | Readable Font Size | All | Text must be readable on all devices | Minimum 16px body text on mobile | Tiny text on mobile | text-base or larger | text-xs for body text | High |
+| 68 | Responsive | Viewport Meta | Web | Set viewport for mobile devices | Use width=device-width initial-scale=1 | Missing or incorrect viewport | <meta name='viewport'...> | No viewport meta tag | High |
+| 69 | Responsive | Horizontal Scroll | Web | Avoid horizontal scrolling | Ensure content fits viewport width | Content wider than viewport | max-w-full overflow-x-hidden | Horizontal scrollbar on mobile | High |
+| 70 | Responsive | Image Scaling | Web | Images should scale with container | Use max-width: 100% on images | Fixed width images overflow | max-w-full h-auto | width='800' fixed | Medium |
+| 71 | Responsive | Table Handling | Web | Tables can overflow on mobile | Use horizontal scroll or card layout | Wide tables breaking layout | overflow-x-auto wrapper | Table overflows viewport | Medium |
+| 72 | Typography | Line Height | All | Adequate line height improves readability | Use 1.5-1.75 for body text | Cramped or excessive line height | leading-relaxed (1.625) | leading-none (1) | Medium |
+| 73 | Typography | Line Length | Web | Long lines are hard to read | Limit to 65-75 characters per line | Full-width text on large screens | max-w-prose | Full viewport width text | Medium |
+| 74 | Typography | Font Size Scale | All | Consistent type hierarchy aids scanning | Use consistent modular scale | Random font sizes | Type scale (12 14 16 18 24 32) | Arbitrary sizes | Medium |
+| 75 | Typography | Font Loading | Web | Fonts should load without layout shift | Reserve space with fallback font | Layout shift when fonts load | font-display: swap + similar fallback | No fallback font | Medium |
+| 76 | Typography | Contrast Readability | All | Body text needs good contrast | Use darker text on light backgrounds | Gray text on gray background | text-gray-900 on white | text-gray-400 on gray-100 | High |
+| 77 | Typography | Heading Clarity | All | Headings should stand out from body | Clear size/weight difference | Headings similar to body text | Bold + larger size | Same size as body | Medium |
+| 78 | Feedback | Loading Indicators | All | Show system status during waits | Show spinner/skeleton for operations > 300ms | No feedback during loading | Skeleton or spinner | Frozen UI | High |
+| 79 | Feedback | Empty States | All | Guide users when no content exists | Show helpful message and action | Blank empty screens | No items yet. Create one! | Empty white space | Medium |
+| 80 | Feedback | Error Recovery | All | Help users recover from errors | Provide clear next steps | Error without recovery path | Try again button + help link | Error message only | Medium |
+| 81 | Feedback | Progress Indicators | All | Show progress for multi-step processes | Step indicators or progress bar | No indication of progress | Step 2 of 4 indicator | No step information | Medium |
+| 82 | Feedback | Toast Notifications | All | Transient messages for non-critical info | Auto-dismiss after 3-5 seconds | Toasts that never disappear | Auto-dismiss toast | Persistent toast | Medium |
+| 83 | Feedback | Confirmation Messages | All | Confirm successful actions | Brief success message | Silent success | Saved successfully toast | No confirmation | Medium |
+| 84 | Content | Truncation | All | Handle long content gracefully | Truncate with ellipsis and expand option | Overflow or broken layout | line-clamp-2 with expand | Overflow or cut off | Medium |
+| 85 | Content | Date Formatting | All | Use locale-appropriate date formats | Use relative or locale-aware dates | Ambiguous date formats | 2 hours ago or locale format | 01/02/03 | Low |
+| 86 | Content | Number Formatting | All | Format large numbers for readability | Use thousand separators or abbreviations | Long unformatted numbers | "1.2K or 1,234" | 1234567 | Low |
+| 87 | Content | Placeholder Content | All | Show realistic placeholders during dev | Use realistic sample data | Lorem ipsum everywhere | Real sample content | Lorem ipsum | Low |
+| 88 | Onboarding | User Freedom | All | Users should be able to skip tutorials | Provide Skip and Back buttons | Force linear unskippable tour | Skip Tutorial button | Locked overlay until finished | Medium |
+| 89 | Search | Autocomplete | Web | Help users find results faster | Show predictions as user types | Require full type and enter | Debounced fetch + dropdown | No suggestions | Medium |
+| 90 | Search | No Results | Web | Dead ends frustrate users | Show 'No results' with suggestions | Blank screen or '0 results' | Try searching for X instead | No results found. | Medium |
+| 91 | Data Entry | Bulk Actions | Web | Editing one by one is tedious | Allow multi-select and bulk edit | Single row actions only | Checkbox column + Action bar | Repeated actions per row | Low |
+| 92 | AI Interaction | Disclaimer | All | Users need to know they talk to AI | Clearly label AI generated content | Present AI as human | AI Assistant label | Fake human name without label | High |
+| 93 | AI Interaction | Streaming | All | Waiting for full text is slow | Stream text response token by token | Show loading spinner for 10s+ | Typewriter effect | Spinner until 100% complete | Medium |
+| 94 | Spatial UI | Gaze Hover | VisionOS | Elements should respond to eye tracking before pinch | Scale/highlight element on look | Static element until pinch | hoverEffect() | onTap only | High |
+| 95 | Spatial UI | Depth Layering | VisionOS | UI needs Z-depth to separate content from environment | Use glass material and z-offset | Flat opaque panels blocking view | .glassBackgroundEffect() | bg-white | Medium |
+| 96 | Sustainability | Auto-Play Video | Web | Video consumes massive data and energy | Click-to-play or pause when off-screen | Auto-play high-res video loops | playsInline muted preload='none' | autoplay loop | Medium |
+| 97 | Sustainability | Asset Weight | Web | Heavy 3D/Image assets increase carbon footprint | Compress and lazy load 3D models | Load 50MB textures | Draco compression | Raw .obj files | Medium |
+| 98 | AI Interaction | Feedback Loop | All | AI needs user feedback to improve | Thumps up/down or 'Regenerate' | Static output only | Feedback component | Read-only text | Low |
+| 99 | Accessibility | Motion Sensitivity | All | Parallax/Scroll-jacking causes nausea | Respect prefers-reduced-motion | Force scroll effects | @media (prefers-reduced-motion) | ScrollTrigger.create() | High |

package/dist/ui-ux-pro-max-skill/.qoder/rules/vue.md

@@ -0,0 +1,57 @@
+---
+trigger: glob
+glob: src/*.vue
+---
+
+
+| No  | Category      | Guideline                            | Description                                                      | Do                                                | Don't                                        | Code Good                                          | Code Bad                                          | Severity | Docs URL                                                                                                 |
+| --- | ------------- | ------------------------------------ | ---------------------------------------------------------------- | ------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | ------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------- |
+| 1   | Composition   | Use Composition API for new projects | Composition API offers better TypeScript support and logic reuse | `<script setup>` for components                   | Options API for new projects                 | `<script setup>`                                   | `export default { data() }`                       | Medium   | [Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html)                           |
+| 2   | Composition   | Use script setup syntax              | Cleaner syntax with automatic exports                            | `<script setup>` with `defineProps`               | `setup()` function manually                  | `<script setup>`                                   | `<script> setup() { return {} }`                  | Low      | [SFC Script Setup](https://vuejs.org/api/sfc-script-setup.html)                                          |
+| 3   | Reactivity    | Use ref for primitives               | ref() for primitive values that need reactivity                  | `ref()` for strings numbers booleans              | `reactive()` for primitives                  | `const count = ref(0)`                             | `const count = reactive(0)`                       | Medium   | [Reactivity Fundamentals](https://vuejs.org/guide/essentials/reactivity-fundamentals.html)               |
+| 4   | Reactivity    | Use reactive for objects             | reactive() for complex objects and arrays                        | `reactive()` for objects with multiple properties | `ref()` for complex objects                  | `const state = reactive({ user: null })`           | `const state = ref({ user: null })`               | Medium   | -                                                                                                        |
+| 5   | Reactivity    | Access ref values with .value        | Remember .value in script unwrap in template                     | Use `.value` in script                            | Forget .value in script                      | `count.value++`                                    | `count++ (in script)`                             | High     | -                                                                                                        |
+| 6   | Reactivity    | Use computed for derived state       | Computed properties cache and update automatically               | `computed()` for derived values                   | Methods for derived values                   | `const doubled = computed(() => count.value * 2)`  | `const doubled = () => count.value * 2`           | Medium   | [Computed Properties](https://vuejs.org/guide/essentials/computed.html)                                  |
+| 7   | Reactivity    | Use shallowRef for large objects     | Avoid deep reactivity for performance                            | `shallowRef` for large data structures            | `ref` for large nested objects               | `const bigData = shallowRef(largeObject)`          | `const bigData = ref(largeObject)`                | Medium   | [shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref)                                  |
+| 8   | Watchers      | Use watchEffect for simple cases     | Auto-tracks dependencies                                         | `watchEffect` for simple reactive effects         | `watch` with explicit deps when not needed   | `watchEffect(() => console.log(count.value))`      | `watch(count, (val) => console.log(val))`         | Low      | [Watchers](https://vuejs.org/guide/essentials/watchers.html)                                             |
+| 9   | Watchers      | Use watch for specific sources       | Explicit control over what to watch                              | `watch` with specific refs                        | `watchEffect` for complex conditional logic  | `watch(userId, fetchUser)`                         | `watchEffect with conditionals`                   | Medium   | -                                                                                                        |
+| 10  | Watchers      | Clean up side effects                | Return cleanup function in watchers                              | Return cleanup in `watchEffect`                   | Leave subscriptions open                     | `watchEffect((onCleanup) => { onCleanup(unsub) })` | `watchEffect without cleanup`                     | High     | -                                                                                                        |
+| 11  | Props         | Define props with defineProps        | Type-safe prop definitions                                       | `defineProps` with TypeScript                     | Props without types                          | `defineProps<{ msg: string }>()`                   | `defineProps(['msg'])`                            | Medium   | [Typing Component Props](https://vuejs.org/guide/typescript/composition-api.html#typing-component-props) |
+| 12  | Props         | Use withDefaults for default values  | Provide defaults for optional props                              | `withDefaults` with `defineProps`                 | Defaults in destructuring                    | `withDefaults(defineProps<Props>(), { count: 0 })` | `const { count = 0 } = defineProps()`             | Medium   | -                                                                                                        |
+| 13  | Props         | Avoid mutating props                 | Props should be read-only                                        | Emit events to parent for changes                 | Direct prop mutation                         | `emit('update:modelValue', newVal)`                | `props.modelValue = newVal`                       | High     | -                                                                                                        |
+| 14  | Emits         | Define emits with defineEmits        | Type-safe event emissions                                        | `defineEmits` with types                          | Emit without definition                      | `defineEmits<{ change: [id: number] }>()`          | `emit('change', id) without define`               | Medium   | [Typing Component Emits](https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits) |
+| 15  | Emits         | Use v-model for two-way binding      | Simplified parent-child data flow                                | v-model with modelValue prop                      | :value + @input manually                     | `<Child v-model="value"/>`                         | `<Child :value="value" @input="value = $event"/>` | Low      | [v-model](https://vuejs.org/guide/components/v-model.html)                                               |
+| 16  | Lifecycle     | Use onMounted for DOM access         | DOM is ready in onMounted                                        | onMounted for DOM operations                      | Access DOM in setup directly                 | `onMounted(() => el.value.focus())`                | `el.value.focus() in setup`                       | High     | [Lifecycle Hooks](https://vuejs.org/api/composition-api-lifecycle.html)                                  |
+| 17  | Lifecycle     | Clean up in onUnmounted              | Remove listeners and subscriptions                               | onUnmounted for cleanup                           | Leave listeners attached                     | `onUnmounted(() => window.removeEventListener())`  | No cleanup on unmount                             | High     | -                                                                                                        |
+| 18  | Lifecycle     | Avoid onBeforeMount for data         | Use onMounted or setup for data fetching                         | Fetch in onMounted or setup                       | Fetch in onBeforeMount                       | `onMounted(async () => await fetchData())`         | `onBeforeMount(async () => await fetchData())`    | Low      | -                                                                                                        |
+| 19  | Components    | Use single-file components           | Keep template script style together                              | .vue files for components                         | Separate template/script files               | Component.vue with all parts                       | Component.js + Component.html                     | Low      | -                                                                                                        |
+| 20  | Components    | Use PascalCase for components        | Consistent component naming                                      | PascalCase in imports and templates               | kebab-case in script                         | `<MyComponent/>`                                   | `<my-component/>`                                 | Low      | [Component Naming](https://vuejs.org/style-guide/rules-strongly-recommended.html)                        |
+| 21  | Components    | Prefer composition over mixins       | Composables replace mixins                                       | Composables for shared logic                      | Mixins for code reuse                        | `const { data } = useApi()`                        | `mixins: [apiMixin]`                              | Medium   | -                                                                                                        |
+| 22  | Composables   | Name composables with use prefix     | Convention for composable functions                              | useFetch useAuth useForm                          | getData or fetchApi                          | `export function useFetch()`                       | `export function fetchData()`                     | Medium   | [Composables](https://vuejs.org/guide/reusability/composables.html)                                      |
+| 23  | Composables   | Return refs from composables         | Maintain reactivity when destructuring                           | Return ref values                                 | Return reactive objects that lose reactivity | `return { data: ref(null) }`                       | `return reactive({ data: null })`                 | Medium   | -                                                                                                        |
+| 24  | Composables   | Accept ref or value params           | Use toValue for flexible inputs                                  | toValue() or unref() for params                   | Only accept ref or only value                | `const val = toValue(maybeRef)`                    | `const val = maybeRef.value`                      | Low      | [toValue](https://vuejs.org/api/reactivity-utilities.html#tovalue)                                       |
+| 25  | Templates     | Use v-bind shorthand                 | Cleaner template syntax                                          | :prop instead of v-bind:prop                      | Full v-bind syntax                           | `<div :class="cls">`                               | `<div v-bind:class="cls">`                        | Low      | -                                                                                                        |
+| 26  | Templates     | Use v-on shorthand                   | Cleaner event binding                                            | @event instead of v-on:event                      | Full v-on syntax                             | `<button @click="handler">`                        | `<button v-on:click="handler">`                   | Low      | -                                                                                                        |
+| 27  | Templates     | Avoid v-if with v-for                | v-if has higher priority causes issues                           | Wrap in template or computed filter               | v-if on same element as v-for                | `<template v-for><div v-if>`                       | `<div v-for v-if>`                                | High     | [Avoid v-if with v-for](https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for)        |
+| 28  | Templates     | Use key with v-for                   | Proper list rendering and updates                                | Unique key for each item                          | Index as key for dynamic lists               | `v-for="item in items" :key="item.id"`             | `v-for="(item, i) in items" :key="i"`             | High     | -                                                                                                        |
+| 29  | State         | Use Pinia for global state           | Official state management for Vue 3                              | Pinia stores for shared state                     | Vuex for new projects                        | `const store = useCounterStore()`                  | Vuex with mutations                               | Medium   | [Pinia](https://pinia.vuejs.org/)                                                                        |
+| 30  | State         | Define stores with defineStore       | Composition API style stores                                     | Setup stores with defineStore                     | Options stores for complex state             | `defineStore('counter', () => {})`                 | `defineStore('counter', { state })`               | Low      | -                                                                                                        |
+| 31  | State         | Use storeToRefs for destructuring    | Maintain reactivity when destructuring                           | storeToRefs(store)                                | Direct destructuring                         | `const { count } = storeToRefs(store)`             | `const { count } = store`                         | High     | [Destructuring from a Store](https://pinia.vuejs.org/core-concepts/#destructuring-from-a-store)          |
+| 32  | Routing       | Use useRouter and useRoute           | Composition API router access                                    | useRouter() useRoute() in setup                   | this.$router this.$route                     | `const router = useRouter()`                       | `this.$router.push()`                             | Medium   | [Composition API Router](https://router.vuejs.org/guide/advanced/composition-api.html)                   |
+| 33  | Routing       | Lazy load route components           | Code splitting for routes                                        | () => import() for components                     | Static imports for all routes                | `component: () => import('./Page.vue')`            | `component: Page`                                 | Medium   | [Lazy Loading](https://router.vuejs.org/guide/advanced/lazy-loading.html)                                |
+| 34  | Routing       | Use navigation guards                | Protect routes and handle redirects                              | beforeEach for auth checks                        | Check auth in each component                 | `router.beforeEach((to) => {})`                    | Check auth in onMounted                           | Medium   | -                                                                                                        |
+| 35  | Performance   | Use v-once for static content        | Skip re-renders for static elements                              | v-once on never-changing content                  | v-once on dynamic content                    | `<div v-once>{{ staticText }}</div>`               | `<div v-once>{{ dynamicText }}</div>`             | Low      | [v-once](https://vuejs.org/api/built-in-directives.html#v-once)                                          |
+| 36  | Performance   | Use v-memo for expensive lists       | Memoize list items                                               | v-memo with dependency array                      | Re-render entire list always                 | `<div v-for v-memo="[item.id]">`                   | `<div v-for>` without memo                        | Medium   | [v-memo](https://vuejs.org/api/built-in-directives.html#v-memo)                                          |
+| 37  | Performance   | Use shallowReactive for flat objects | Avoid deep reactivity overhead                                   | shallowReactive for flat state                    | reactive for simple objects                  | `shallowReactive({ count: 0 })`                    | `reactive({ count: 0 })`                          | Low      | -                                                                                                        |
+| 38  | Performance   | Use defineAsyncComponent             | Lazy load heavy components                                       | defineAsyncComponent for modals dialogs           | Import all components eagerly                | `defineAsyncComponent(() => import())`             | `import HeavyComponent from`                      | Medium   | [defineAsyncComponent](https://vuejs.org/guide/components/async.html)                                    |
+| 39  | TypeScript    | Use generic components               | Type-safe reusable components                                    | Generic with defineComponent                      | Any types in components                      | `<script setup lang="ts" generic="T">`             | `<script setup>` without types                    | Medium   | [TypeScript Composition API](https://vuejs.org/guide/typescript/composition-api.html)                    |
+| 40  | TypeScript    | Type template refs                   | Proper typing for DOM refs                                       | ref<HTMLInputElement>(null)                       | ref(null) without type                       | `const input = ref<HTMLInputElement>(null)`        | `const input = ref(null)`                         | Medium   | -                                                                                                        |
+| 41  | TypeScript    | Use PropType for complex props       | Type complex prop types                                          | PropType<User> for object props                   | Object without type                          | `type: Object as PropType<User>`                   | `type: Object`                                    | Medium   | -                                                                                                        |
+| 42  | Testing       | Use Vue Test Utils                   | Official testing library                                         | mount shallowMount for components                 | Manual DOM testing                           | `import { mount } from '@vue/test-utils'`          | `document.createElement`                          | Medium   | [Vue Test Utils](https://test-utils.vuejs.org/)                                                          |
+| 43  | Testing       | Test component behavior              | Focus on inputs and outputs                                      | Test props emit and rendered output               | Test internal implementation                 | `expect(wrapper.text()).toContain()`               | `expect(wrapper.vm.internalState)`                | Medium   | -                                                                                                        |
+| 44  | Forms         | Use v-model modifiers                | Built-in input handling                                          | .lazy .number .trim modifiers                     | Manual input parsing                         | `<input v-model.number="age">`                     | `<input v-model="age"> then parse`                | Low      | [v-model Modifiers](https://vuejs.org/guide/essentials/forms.html#modifiers)                             |
+| 45  | Forms         | Use VeeValidate or FormKit           | Form validation libraries                                        | VeeValidate for complex forms                     | Manual validation logic                      | `useField useForm from vee-validate`               | Custom validation in each input                   | Medium   | -                                                                                                        |
+| 46  | Accessibility | Use semantic elements                | Proper HTML elements in templates                                | button nav main for purpose                       | div for everything                           | `<button @click>`                                  | `<div @click>`                                    | High     | -                                                                                                        |
+| 47  | Accessibility | Bind aria attributes dynamically     | Keep ARIA in sync with state                                     | ":aria-expanded="isOpen""                         | Static ARIA values                           | ":aria-expanded="menuOpen""                        | `aria-expanded="true""`                           | Medium   | -                                                                                                        |
+| 48  | SSR           | Use Nuxt for SSR                     | Full-featured SSR framework                                      | Nuxt 3 for SSR apps                               | Manual SSR setup                             | `npx nuxi init my-app`                             | Custom SSR configuration                          | Medium   | [Nuxt](https://nuxt.com/)                                                                                |
+| 49  | SSR           | Handle hydration mismatches          | Client/server content must match                                 | ClientOnly for browser-only content               | Different content server/client              | `<ClientOnly><BrowserWidget/></ClientOnly>`        | `<div>{{ Date.now() }}</div>`                     | High     | -                                                                                                        |