@stephen-lord/docs 1.0.0

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

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

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

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

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

@@ -0,0 +1,59 @@
+---
+trigger: glob
+glob: app/*.tsx,app/*jsx
+---
+
+| No | Category | Guideline | Description | Do | Don't | Code Good | Code Bad | Severity | Docs URL |
+|----|----------|-----------|-------------|----|-------|-----------|----------|----------|----------|
+| 1 | Routing | Use App Router for new projects | App Router is the recommended approach in Next.js 14+ | app/ directory with page.tsx | pages/ for new projects | app/dashboard/page.tsx | pages/dashboard.tsx | Medium | https://nextjs.org/docs/app |
+| 2 | Routing | Use file-based routing | Create routes by adding files in app directory | page.tsx for routes layout.tsx for layouts | Manual route configuration | app/blog/[slug]/page.tsx | Custom router setup | Medium | https://nextjs.org/docs/app/building-your-application/routing |
+| 3 | Routing | Colocate related files | Keep components styles tests with their routes | Component files alongside page.tsx | Separate components folder | app/dashboard/_components/ | components/dashboard/ | Low |  |
+| 4 | Routing | Use route groups for organization | Group routes without affecting URL | Parentheses for route groups | Nested folders affecting URL | (marketing)/about/page.tsx | marketing/about/page.tsx | Low | https://nextjs.org/docs/app/building-your-application/routing/route-groups |
+| 5 | Routing | Handle loading states | Use loading.tsx for route loading UI | loading.tsx alongside page.tsx | Manual loading state management | app/dashboard/loading.tsx | useState for loading in page | Medium | https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming |
+| 6 | Routing | Handle errors with error.tsx | Catch errors at route level | error.tsx with reset function | try/catch in every component | app/dashboard/error.tsx | try/catch in page component | High | https://nextjs.org/docs/app/building-your-application/routing/error-handling |
+| 7 | Rendering | Use Server Components by default | Server Components reduce client JS bundle | Keep components server by default | Add 'use client' unnecessarily | export default function Page() | ('use client') for static content | High | https://nextjs.org/docs/app/building-your-application/rendering/server-components |
+| 8 | Rendering | Mark Client Components explicitly | 'use client' for interactive components | Add 'use client' only when needed | Server Component with hooks/events | ('use client') for onClick useState | No directive with useState | High | https://nextjs.org/docs/app/building-your-application/rendering/client-components |
+| 9 | Rendering | Push Client Components down | Keep Client Components as leaf nodes | Client wrapper for interactive parts only | Mark page as Client Component | <InteractiveButton/> in Server Page | ('use client') on page.tsx | High |  |
+| 10 | Rendering | Use streaming for better UX | Stream content with Suspense boundaries | Suspense for slow data fetches | Wait for all data before render | <Suspense><SlowComponent/></Suspense> | await allData then render | Medium | https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming |
+| 11 | Rendering | Choose correct rendering strategy | SSG for static SSR for dynamic ISR for semi-static | generateStaticParams for known paths | SSR for static content | export const revalidate = 3600 | fetch without cache config | Medium |  |
+| 12 | DataFetching | Fetch data in Server Components | Fetch directly in async Server Components | async function Page() { const data = await fetch() } | useEffect for initial data | const data = await fetch(url) | useEffect(() => fetch(url)) | High | https://nextjs.org/docs/app/building-your-application/data-fetching |
+| 13 | DataFetching | Configure caching explicitly (Next.js 15+) | Next.js 15 changed defaults to uncached for fetch | Explicitly set cache: 'force-cache' for static data | Assume default is cached (it's not in Next.js 15) | fetch(url, { cache: 'force-cache' }) | fetch(url) // Uncached in v15 | High | https://nextjs.org/docs/app/building-your-application/upgrading/version-15 |
+| 14 | DataFetching | Deduplicate fetch requests | React and Next.js dedupe same requests | Same fetch call in multiple components | Manual request deduplication | Multiple components fetch same URL | Custom cache layer | Low |  |
+| 15 | DataFetching | Use Server Actions for mutations | Server Actions for form submissions | action={serverAction} in forms | API route for every mutation | <form action={createPost}> | <form onSubmit={callApiRoute}> | Medium | https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations |
+| 16 | DataFetching | Revalidate data appropriately | Use revalidatePath/revalidateTag after mutations | Revalidate after Server Action | 'use client' with manual refetch | revalidatePath('/posts') | router.refresh() everywhere | Medium | https://nextjs.org/docs/app/building-your-application/caching#revalidating |
+| 17 | Images | Use next/image for optimization | Automatic image optimization and lazy loading | <Image> component for all images | <img> tags directly | <Image src={} alt={} width={} height={} /> | <img src={} /> | High | https://nextjs.org/docs/app/building-your-application/optimizing/images |
+| 18 | Images | Provide width and height | Prevent layout shift with dimensions | width and height props or fill | Missing dimensions | <Image width={400} height={300} /> | <Image src={url} /> | High |  |
+| 19 | Images | Use fill for responsive images | Fill container with object-fit | fill prop with relative parent | Fixed dimensions for responsive | <Image fill className="object-cover" /> | <Image width={window.width} /> | Medium |  |
+| 20 | Images | Configure remote image domains | Whitelist external image sources | remotePatterns in next.config.js | Allow all domains | remotePatterns: [{ hostname: 'cdn.example.com' }] | domains: ['*'] | High | https://nextjs.org/docs/app/api-reference/components/image#remotepatterns |
+| 21 | Images | Use priority for LCP images | Mark above-fold images as priority | priority prop on hero images | All images with priority | <Image priority src={hero} /> | <Image priority /> on every image | Medium |  |
+| 22 | Fonts | Use next/font for fonts | Self-hosted fonts with zero layout shift | next/font/google or next/font/local | External font links | import { Inter } from 'next/font/google' | <link href="fonts.googleapis.com" /> | Medium | https://nextjs.org/docs/app/building-your-application/optimizing/fonts |
+| 23 | Fonts | Apply font to layout | Set font in root layout for consistency | className on body in layout.tsx | Font in individual pages | <body className={inter.className}> | Each page imports font | Low |  |
+| 24 | Fonts | Use variable fonts | Variable fonts reduce bundle size | Single variable font file | Multiple font weights as files | Inter({ subsets: ['latin'] }) | Inter_400 Inter_500 Inter_700 | Low |  |
+| 25 | Metadata | Use generateMetadata for dynamic | Generate metadata based on params | export async function generateMetadata() | Hardcoded metadata everywhere | generateMetadata({ params }) | export const metadata = {} | Medium | https://nextjs.org/docs/app/building-your-application/optimizing/metadata |
+| 26 | Metadata | Include OpenGraph images | Add OG images for social sharing | opengraph-image.tsx or og property | Missing social preview images | opengraph: { images: ['/og.png'] } | No OG configuration | Medium |  |
+| 27 | Metadata | Use metadata API | Export metadata object for static metadata | export const metadata = {} | Manual head tags | export const metadata = { title: 'Page' } | <head><title>Page</title></head> | Medium |  |
+| 28 | API | Use Route Handlers for APIs | app/api routes for API endpoints | app/api/users/route.ts | pages/api for new projects | export async function GET(request) | export default function handler | Medium | https://nextjs.org/docs/app/building-your-application/routing/route-handlers |
+| 29 | API | Return proper Response objects | Use NextResponse for API responses | NextResponse.json() for JSON | Plain objects or res.json() | return NextResponse.json({ data }) | return { data } | Medium |  |
+| 30 | API | Handle HTTP methods explicitly | Export named functions for methods | Export GET POST PUT DELETE | Single handler for all methods | export async function POST() | switch(req.method) | Low |  |
+| 31 | API | Validate request body | Validate input before processing | Zod or similar for validation | Trust client input | const body = schema.parse(await req.json()) | const body = await req.json() | High |  |
+| 32 | Middleware | Use middleware for auth | Protect routes with middleware.ts | middleware.ts at root | Auth check in every page | export function middleware(request) | if (!session) redirect in page | Medium | https://nextjs.org/docs/app/building-your-application/routing/middleware |
+| 33 | Middleware | Match specific paths | Configure middleware matcher | config.matcher for specific routes | Run middleware on all routes | matcher: ['/dashboard/:path*'] | No matcher config | Medium |  |
+| 34 | Middleware | Keep middleware edge-compatible | Middleware runs on Edge runtime | Edge-compatible code only | Node.js APIs in middleware | Edge-compatible auth check | fs.readFile in middleware | High |  |
+| 35 | Environment | Use NEXT_PUBLIC prefix | Client-accessible env vars need prefix | NEXT_PUBLIC_ for client vars | Server vars exposed to client | NEXT_PUBLIC_API_URL | API_SECRET in client code | High | https://nextjs.org/docs/app/building-your-application/configuring/environment-variables |
+| 36 | Environment | Validate env vars | Check required env vars exist | Validate on startup | Undefined env at runtime | if (!process.env.DATABASE_URL) throw | process.env.DATABASE_URL (might be undefined) | High |  |
+| 37 | Environment | Use .env.local for secrets | Local env file for development secrets | .env.local gitignored | Secrets in .env committed | .env.local with secrets | .env with DATABASE_PASSWORD | High |  |
+| 38 | Performance | Analyze bundle size | Use @next/bundle-analyzer | Bundle analyzer in dev | Ship large bundles blindly | ANALYZE=true npm run build | No bundle analysis | Medium | https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer |
+| 39 | Performance | Use dynamic imports | Code split with next/dynamic | dynamic() for heavy components | Import everything statically | const Chart = dynamic(() => import('./Chart')) | import Chart from './Chart' | Medium | https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading |
+| 40 | Performance | Avoid layout shifts | Reserve space for dynamic content | Skeleton loaders aspect ratios | Content popping in | <Skeleton className="h-48" /> | No placeholder for async content | High |  |
+| 41 | Performance | Use Partial Prerendering | Combine static and dynamic in one route | Static shell with Suspense holes | Full dynamic or static pages | Static header + dynamic content | Entire page SSR | Low | https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering |
+| 42 | Link | Use next/link for navigation | Client-side navigation with prefetching | <Link href=""> for internal links | <a> for internal navigation | <Link href="/about">About</Link> | <a href="/about">About</a> | High | https://nextjs.org/docs/app/api-reference/components/link |
+| 43 | Link | Prefetch strategically | Control prefetching behavior | prefetch={false} for low-priority | Prefetch all links | <Link prefetch={false}> | Default prefetch on every link | Low |  |
+| 44 | Link | Use scroll option appropriately | Control scroll behavior on navigation | scroll={false} for tabs pagination | Always scroll to top | <Link scroll={false}> | Manual scroll management | Low |  |
+| 45 | Config | Use next.config.js correctly | Configure Next.js behavior | Proper config options | Deprecated or wrong options | images: { remotePatterns: [] } | images: { domains: [] } | Medium | https://nextjs.org/docs/app/api-reference/next-config-js |
+| 46 | Config | Enable strict mode | Catch potential issues early | reactStrictMode: true | Strict mode disabled | reactStrictMode: true | reactStrictMode: false | Medium |  |
+| 47 | Config | Configure redirects and rewrites | Use config for URL management | redirects() rewrites() in config | Manual redirect handling | redirects: async () => [...] | res.redirect in pages | Medium | https://nextjs.org/docs/app/api-reference/next-config-js/redirects |
+| 48 | Deployment | Use Vercel for easiest deploy | Vercel optimized for Next.js | Deploy to Vercel | Self-host without knowledge | vercel deploy | Complex Docker setup for simple app | Low | https://nextjs.org/docs/app/building-your-application/deploying |
+| 49 | Deployment | Configure output for self-hosting | Set output option for deployment target | output: 'standalone' for Docker | Default output for containers | output: 'standalone' | No output config for Docker | Medium | https://nextjs.org/docs/app/building-your-application/deploying#self-hosting |
+| 50 | Security | Sanitize user input | Never trust user input | Escape sanitize validate all input | Direct interpolation of user data | DOMPurify.sanitize(userInput) | dangerouslySetInnerHTML={{ __html: userInput }} | High |  |
+| 51 | Security | Use CSP headers | Content Security Policy for XSS protection | Configure CSP in next.config.js | No security headers | headers() with CSP | No CSP configuration | High | https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy |
+| 52 | Security | Validate Server Action input | Server Actions are public endpoints | Validate and authorize in Server Action | Trust Server Action input | Auth check + validation in action | Direct database call without check | High |  |

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

@@ -0,0 +1,57 @@
+---
+trigger: glob
+glob: app/*.vue
+---
+
+| No | Category | Guideline | Description | Do | Don't | Code Good | Code Bad | Severity | Docs URL |
+|----|----------|-----------|-------------|----|-------|-----------|----------|----------|----------|
+| 1 | Installation | Add Nuxt UI module | Install and configure Nuxt UI in your Nuxt project | pnpm add @nuxt/ui and add to modules | Manual component imports | modules: ['@nuxt/ui'] | import { UButton } from '@nuxt/ui' | High | https://ui.nuxt.com/docs/getting-started/installation/nuxt |
+| 2 | Installation | Import Tailwind and Nuxt UI CSS | Required CSS imports in main.css file | @import tailwindcss and @import @nuxt/ui | Skip CSS imports | @import "tailwindcss"; @import "@nuxt/ui"; | No CSS imports | High | https://ui.nuxt.com/docs/getting-started/installation/nuxt |
+| 3 | Installation | Wrap app with UApp component | UApp provides global configs for Toast Tooltip and overlays | <UApp> wrapper in app.vue | Skip UApp wrapper | <UApp><NuxtPage/></UApp> | <NuxtPage/> without wrapper | High | https://ui.nuxt.com/docs/components/app |
+| 4 | Components | Use U prefix for components | All Nuxt UI components use U prefix by default | UButton UInput UModal | Button Input Modal | <UButton>Click</UButton> | <Button>Click</Button> | Medium | https://ui.nuxt.com/docs/getting-started/installation/nuxt |
+| 5 | Components | Use semantic color props | Use semantic colors like primary secondary error | color="primary" color="error" | Hardcoded colors | <UButton color="primary"> | <UButton class="bg-green-500"> | Medium | https://ui.nuxt.com/docs/getting-started/theme/design-system |
+| 6 | Components | Use variant prop for styling | Nuxt UI provides solid outline soft subtle ghost link variants | variant="soft" variant="outline" | Custom button classes | <UButton variant="soft"> | <UButton class="border bg-transparent"> | Medium | https://ui.nuxt.com/docs/components/button |
+| 7 | Components | Use size prop consistently | Components support xs sm md lg xl sizes | size="sm" size="lg" | Arbitrary sizing classes | <UButton size="lg"> | <UButton class="text-xl px-6"> | Low | https://ui.nuxt.com/docs/components/button |
+| 8 | Icons | Use icon prop with Iconify format | Nuxt UI supports Iconify icons via icon prop | icon="lucide:home" icon="heroicons:user" | i-lucide-home format | <UButton icon="lucide:home"> | <UButton icon="i-lucide-home"> | Medium | https://ui.nuxt.com/docs/getting-started/integrations/icons/nuxt |
+| 9 | Icons | Use leadingIcon and trailingIcon | Position icons with dedicated props for clarity | leadingIcon="lucide:plus" trailingIcon="lucide:arrow-right" | Manual icon positioning | <UButton leadingIcon="lucide:plus"> | <UButton><Icon name="lucide:plus"/>Add</UButton> | Low | https://ui.nuxt.com/docs/components/button |
+| 10 | Theming | Configure colors in app.config.ts | Runtime color configuration without restart | ui.colors.primary in app.config.ts | Hardcoded colors in components | defineAppConfig({ ui: { colors: { primary: 'blue' } } }) | <UButton class="bg-blue-500"> | High | https://ui.nuxt.com/docs/getting-started/theme/design-system |
+| 11 | Theming | Use @theme directive for custom colors | Define design tokens in CSS with Tailwind @theme | @theme { --color-brand-500: #xxx } | Inline color definitions | @theme { --color-brand-500: #ef4444; } | :style="{ color: '#ef4444' }" | Medium | https://ui.nuxt.com/docs/getting-started/theme/design-system |
+| 12 | Theming | Extend semantic colors in nuxt.config | Register new colors like tertiary in theme.colors | theme.colors array in ui config | Use undefined colors | ui: { theme: { colors: ['primary', 'tertiary'] } } | <UButton color="tertiary"> without config | Medium | https://ui.nuxt.com/docs/getting-started/theme/design-system |
+| 13 | Forms | Use UForm with schema validation | UForm supports Zod Yup Joi Valibot schemas | :schema prop with validation schema | Manual form validation | <UForm :schema="schema" :state="state"> | Manual @blur validation | High | https://ui.nuxt.com/docs/components/form |
+| 14 | Forms | Use UFormField for field wrapper | Provides label error message and validation display | UFormField with name prop | Manual error handling | <UFormField name="email" label="Email"> | <div><label>Email</label><UInput/><span>error</span></div> | Medium | https://ui.nuxt.com/docs/components/form-field |
+| 15 | Forms | Handle form submit with @submit | UForm emits submit event with validated data | @submit handler on UForm | @click on submit button | <UForm @submit="onSubmit"> | <UButton @click="onSubmit"> | Medium | https://ui.nuxt.com/docs/components/form |
+| 16 | Forms | Use validateOn prop for validation timing | Control when validation triggers (blur change input) | validateOn="['blur']" for performance | Always validate on input | <UForm :validateOn="['blur', 'change']"> | <UForm> (validates on every keystroke) | Low | https://ui.nuxt.com/docs/components/form |
+| 17 | Overlays | Use v-model:open for overlay control | Modal Slideover Drawer use v-model:open | v-model:open for controlled state | Manual show/hide logic | <UModal v-model:open="isOpen"> | <UModal v-if="isOpen"> | Medium | https://ui.nuxt.com/docs/components/modal |
+| 18 | Overlays | Use useOverlay composable for programmatic overlays | Open overlays programmatically without template refs | useOverlay().open(MyModal) | Template ref and manual control | const overlay = useOverlay(); overlay.open(MyModal, { props }) | const modal = ref(); modal.value.open() | Medium | https://ui.nuxt.com/docs/components/modal |
+| 19 | Overlays | Use title and description props | Built-in header support for overlays | title="Confirm" description="Are you sure?" | Manual header content | <UModal title="Confirm" description="Are you sure?"> | <UModal><template #header><h2>Confirm</h2></template> | Low | https://ui.nuxt.com/docs/components/modal |
+| 20 | Dashboard | Use UDashboardSidebar for navigation | Provides collapsible resizable sidebar with mobile support | UDashboardSidebar with header default footer slots | Custom sidebar implementation | <UDashboardSidebar><template #header>...</template></UDashboardSidebar> | <aside class="w-64 border-r"> | Medium | https://ui.nuxt.com/docs/components/dashboard-sidebar |
+| 21 | Dashboard | Use UDashboardGroup for layout | Wraps dashboard components with sidebar state management | UDashboardGroup > UDashboardSidebar + UDashboardPanel | Manual layout flex containers | <UDashboardGroup><UDashboardSidebar/><UDashboardPanel/></UDashboardGroup> | <div class="flex"><aside/><main/></div> | Medium | https://ui.nuxt.com/docs/components/dashboard-group |
+| 22 | Dashboard | Use UDashboardNavbar for top navigation | Responsive navbar with mobile menu support | UDashboardNavbar in dashboard layout | Custom navbar implementation | <UDashboardNavbar :links="navLinks"/> | <nav class="border-b"> | Low | https://ui.nuxt.com/docs/components/dashboard-navbar |
+| 23 | Tables | Use UTable with data and columns props | Powered by TanStack Table with built-in features | :data and :columns props | Manual table markup | <UTable :data="users" :columns="columns"/> | <table><tr v-for="user in users"> | High | https://ui.nuxt.com/docs/components/table |
+| 24 | Tables | Define columns with accessorKey | Column definitions use accessorKey for data binding | accessorKey: 'email' in column def | String column names only | { accessorKey: 'email', header: 'Email' } | ['name', 'email'] | Medium | https://ui.nuxt.com/docs/components/table |
+| 25 | Tables | Use cell slot for custom rendering | Customize cell content with scoped slots | #cell-columnName slot | Override entire table | <template #cell-status="{ row }"> | Manual column render function | Medium | https://ui.nuxt.com/docs/components/table |
+| 26 | Tables | Enable sorting with sortable column option | Add sortable: true to column definition | sortable: true in column | Manual sort implementation | { accessorKey: 'name', sortable: true } | @click="sortBy('name')" | Low | https://ui.nuxt.com/docs/components/table |
+| 27 | Navigation | Use UNavigationMenu for nav links | Horizontal or vertical navigation with dropdown support | UNavigationMenu with items array | Manual nav with v-for | <UNavigationMenu :items="navItems"/> | <nav><a v-for="item in items"> | Medium | https://ui.nuxt.com/docs/components/navigation-menu |
+| 28 | Navigation | Use UBreadcrumb for page hierarchy | Automatic breadcrumb with NuxtLink support | :items array with label and to | Manual breadcrumb links | <UBreadcrumb :items="breadcrumbs"/> | <nav><span v-for="crumb in crumbs"> | Low | https://ui.nuxt.com/docs/components/breadcrumb |
+| 29 | Navigation | Use UTabs for tabbed content | Tab navigation with content panels | UTabs with items containing slot content | Manual tab state | <UTabs :items="tabs"/> | <div><button @click="tab=1"> | Medium | https://ui.nuxt.com/docs/components/tabs |
+| 30 | Feedback | Use useToast for notifications | Composable for toast notifications | useToast().add({ title description }) | Alert components for toasts | const toast = useToast(); toast.add({ title: 'Saved' }) | <UAlert v-if="showSuccess"> | High | https://ui.nuxt.com/docs/components/toast |
+| 31 | Feedback | Use UAlert for inline messages | Static alert messages with icon and actions | UAlert with title description color | Toast for static messages | <UAlert title="Warning" color="warning"/> | useToast for inline alerts | Medium | https://ui.nuxt.com/docs/components/alert |
+| 32 | Feedback | Use USkeleton for loading states | Placeholder content during data loading | USkeleton with appropriate size | Spinner for content loading | <USkeleton class="h-4 w-32"/> | <UIcon name="lucide:loader" class="animate-spin"/> | Low | https://ui.nuxt.com/docs/components/skeleton |
+| 33 | Color Mode | Use UColorModeButton for theme toggle | Built-in light/dark mode toggle button | UColorModeButton component | Manual color mode logic | <UColorModeButton/> | <button @click="toggleColorMode"> | Low | https://ui.nuxt.com/docs/components/color-mode-button |
+| 34 | Color Mode | Use UColorModeSelect for theme picker | Dropdown to select system light or dark mode | UColorModeSelect component | Custom select for theme | <UColorModeSelect/> | <USelect v-model="colorMode" :items="modes"/> | Low | https://ui.nuxt.com/docs/components/color-mode-select |
+| 35 | Customization | Use ui prop for component styling | Override component styles via ui prop | ui prop with slot class overrides | Global CSS overrides | <UButton :ui="{ base: 'rounded-full' }"/> | <UButton class="!rounded-full"/> | Medium | https://ui.nuxt.com/docs/getting-started/theme/components |
+| 36 | Customization | Configure default variants in nuxt.config | Set default color and size for all components | theme.defaultVariants in ui config | Repeat props on every component | ui: { theme: { defaultVariants: { color: 'neutral' } } } | <UButton color="neutral"> everywhere | Medium | https://ui.nuxt.com/docs/getting-started/installation/nuxt |
+| 37 | Customization | Use app.config.ts for theme overrides | Runtime theme customization | defineAppConfig with ui key | nuxt.config for runtime values | defineAppConfig({ ui: { button: { defaultVariants: { size: 'sm' } } } }) | nuxt.config ui.button.size: 'sm' | Medium | https://ui.nuxt.com/docs/getting-started/theme/components |
+| 38 | Performance | Enable component detection | Tree-shake unused component CSS | experimental.componentDetection: true | Include all component CSS | ui: { experimental: { componentDetection: true } } | ui: {} (includes all CSS) | Low | https://ui.nuxt.com/docs/getting-started/installation/nuxt |
+| 39 | Performance | Use UTable virtualize for large data | Enable virtualization for 1000+ rows | :virtualize prop on UTable | Render all rows | <UTable :data="largeData" virtualize/> | <UTable :data="largeData"/> | Medium | https://ui.nuxt.com/docs/components/table |
+| 40 | Accessibility | Use semantic component props | Components have built-in ARIA support | Use title description label props | Skip accessibility props | <UModal title="Settings"> | <UModal><h2>Settings</h2> | Medium | https://ui.nuxt.com/docs/components/modal |
+| 41 | Accessibility | Use UFormField for form accessibility | Automatic label-input association | UFormField wraps inputs | Manual id and for attributes | <UFormField label="Email"><UInput/></UFormField> | <label for="email">Email</label><UInput id="email"/> | High | https://ui.nuxt.com/docs/components/form-field |
+| 42 | Content | Use UContentToc for table of contents | Automatic TOC with active heading highlight | UContentToc with :links | Manual TOC implementation | <UContentToc :links="toc"/> | <nav><a v-for="heading in headings"> | Low | https://ui.nuxt.com/docs/components/content-toc |
+| 43 | Content | Use UContentSearch for docs search | Command palette for documentation search | UContentSearch with Nuxt Content | Custom search implementation | <UContentSearch/> | <UCommandPalette :groups="searchResults"/> | Low | https://ui.nuxt.com/docs/components/content-search |
+| 44 | AI/Chat | Use UChatMessages for chat UI | Designed for Vercel AI SDK integration | UChatMessages with messages array | Custom chat message list | <UChatMessages :messages="messages"/> | <div v-for="msg in messages"> | Medium | https://ui.nuxt.com/docs/components/chat-messages |
+| 45 | AI/Chat | Use UChatPrompt for input | Enhanced textarea for AI prompts | UChatPrompt with v-model | Basic textarea | <UChatPrompt v-model="prompt"/> | <UTextarea v-model="prompt"/> | Medium | https://ui.nuxt.com/docs/components/chat-prompt |
+| 46 | Editor | Use UEditor for rich text | TipTap-based editor with toolbar support | UEditor with v-model:content | Custom TipTap setup | <UEditor v-model:content="content"/> | Manual TipTap initialization | Medium | https://ui.nuxt.com/docs/components/editor |
+| 47 | Links | Use to prop for navigation | UButton and ULink support NuxtLink to prop | to="/dashboard" for internal links | href for internal navigation | <UButton to="/dashboard"> | <UButton href="/dashboard"> | Medium | https://ui.nuxt.com/docs/components/button |
+| 48 | Links | Use external prop for outside links | Explicitly mark external links | target="_blank" with external URLs | Forget rel="noopener" | <UButton to="https://example.com" target="_blank"> | <UButton href="https://..."> | Low | https://ui.nuxt.com/docs/components/link |
+| 49 | Loading | Use loadingAuto on buttons | Automatic loading state from @click promise | loadingAuto prop on UButton | Manual loading state | <UButton loadingAuto @click="async () => await save()"> | <UButton :loading="isLoading" @click="save"> | Low | https://ui.nuxt.com/docs/components/button |
+| 50 | Loading | Use UForm loadingAuto | Auto-disable form during submit | loadingAuto on UForm (default true) | Manual form disabled state | <UForm @submit="handleSubmit"> | <UForm :disabled="isSubmitting"> | Low | https://ui.nuxt.com/docs/components/form |

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

@@ -0,0 +1,65 @@
+---
+trigger: glob
+glob: app/*.vue
+---
+
+| No | Category | Guideline | Description | Do | Don't | Code Good | Code Bad | Severity | Docs URL |
+|----|----------|-----------|-------------|----|-------|-----------|----------|----------|----------|
+| 1 | Routing | Use file-based routing | Create routes by adding files in pages directory | pages/ directory with index.vue | Manual route configuration | pages/dashboard/index.vue | Custom router setup | Medium | https://nuxt.com/docs/getting-started/routing |
+| 2 | Routing | Use dynamic route parameters | Create dynamic routes with bracket syntax | [id].vue for dynamic params | Hardcoded routes for dynamic content | pages/posts/[id].vue | pages/posts/post1.vue | Medium | https://nuxt.com/docs/getting-started/routing |
+| 3 | Routing | Use catch-all routes | Handle multiple path segments with [...slug] | [...slug].vue for catch-all | Multiple nested dynamic routes | pages/[...slug].vue | pages/[a]/[b]/[c].vue | Low | https://nuxt.com/docs/getting-started/routing |
+| 4 | Routing | Define page metadata with definePageMeta | Set page-level configuration and middleware | definePageMeta for layout middleware title | Manual route meta configuration | definePageMeta({ layout: 'admin', middleware: 'auth' }) | router.beforeEach for page config | High | https://nuxt.com/docs/api/utils/define-page-meta |
+| 5 | Routing | Use validate for route params | Validate dynamic route parameters before rendering | validate function in definePageMeta | Manual validation in setup | definePageMeta({ validate: (route) => /^\d+$/.test(route.params.id) }) | if (!valid) navigateTo('/404') | Medium | https://nuxt.com/docs/api/utils/define-page-meta |
+| 6 | Rendering | Use SSR by default | Server-side rendering is enabled by default | Keep ssr: true (default) | Disable SSR unnecessarily | ssr: true (default) | ssr: false for all pages | High | https://nuxt.com/docs/guide/concepts/rendering |
+| 7 | Rendering | Use .client suffix for client-only components | Mark components to render only on client | ComponentName.client.vue suffix | v-if with process.client check | Comments.client.vue | <div v-if="process.client"><Comments/></div> | Medium | https://nuxt.com/docs/guide/directory-structure/components |
+| 8 | Rendering | Use .server suffix for server-only components | Mark components to render only on server | ComponentName.server.vue suffix | Manual server check | HeavyMarkdown.server.vue | v-if="process.server" | Low | https://nuxt.com/docs/guide/directory-structure/components |
+| 9 | DataFetching | Use useFetch for simple data fetching | Wrapper around useAsyncData for URL fetching | useFetch for API calls | $fetch in onMounted | const { data } = await useFetch('/api/posts') | onMounted(async () => { data.value = await $fetch('/api/posts') }) | High | https://nuxt.com/docs/api/composables/use-fetch |
+| 10 | DataFetching | Use useAsyncData for complex fetching | Fine-grained control over async data | useAsyncData for CMS or custom fetching | useFetch for non-URL data sources | const { data } = await useAsyncData('posts', () => cms.getPosts()) | const { data } = await useFetch(() => cms.getPosts()) | Medium | https://nuxt.com/docs/api/composables/use-async-data |
+| 11 | DataFetching | Use $fetch for non-reactive requests | $fetch for event handlers and non-component code | $fetch in event handlers or server routes | useFetch in click handlers | async function submit() { await $fetch('/api/submit', { method: 'POST' }) } | async function submit() { await useFetch('/api/submit') } | High | https://nuxt.com/docs/api/utils/dollarfetch |
+| 12 | DataFetching | Use lazy option for non-blocking fetch | Defer data fetching for better initial load | lazy: true for below-fold content | Blocking fetch for non-critical data | useFetch('/api/comments', { lazy: true }) | await useFetch('/api/comments') for footer | Medium | https://nuxt.com/docs/api/composables/use-fetch |
+| 13 | DataFetching | Use server option to control fetch location | Choose where data is fetched | server: false for client-only data | Server fetch for user-specific client data | useFetch('/api/user-preferences', { server: false }) | useFetch for localStorage-dependent data | Medium | https://nuxt.com/docs/api/composables/use-fetch |
+| 14 | DataFetching | Use pick to reduce payload size | Select only needed fields from response | pick option for large responses | Fetching entire objects when few fields needed | useFetch('/api/user', { pick: ['id', 'name'] }) | useFetch('/api/user') then destructure | Low | https://nuxt.com/docs/api/composables/use-fetch |
+| 15 | DataFetching | Use transform for data manipulation | Transform data before storing in state | transform option for data shaping | Manual transformation after fetch | useFetch('/api/posts', { transform: (posts) => posts.map(p => p.title) }) | const titles = data.value.map(p => p.title) | Low | https://nuxt.com/docs/api/composables/use-fetch |
+| 16 | DataFetching | Handle loading and error states | Always handle pending and error states | Check status pending error refs | Ignoring loading states | <div v-if="status === 'pending'">Loading...</div> | No loading indicator | High | https://nuxt.com/docs/getting-started/data-fetching |
+| 17 | Lifecycle | Avoid side effects in script setup root | Move side effects to lifecycle hooks | Side effects in onMounted | setInterval in root script setup | onMounted(() => { interval = setInterval(...) }) | <script setup>setInterval(...)</script> | High | https://nuxt.com/docs/guide/concepts/nuxt-lifecycle |
+| 18 | Lifecycle | Use onMounted for DOM access | Access DOM only after component is mounted | onMounted for DOM manipulation | Direct DOM access in setup | onMounted(() => { document.getElementById('el') }) | <script setup>document.getElementById('el')</script> | High | https://nuxt.com/docs/api/composables/on-mounted |
+| 19 | Lifecycle | Use nextTick for post-render access | Wait for DOM updates before accessing elements | await nextTick() after state changes | Immediate DOM access after state change | count.value++; await nextTick(); el.value.focus() | count.value++; el.value.focus() | Medium | https://nuxt.com/docs/api/utils/next-tick |
+| 20 | Lifecycle | Use onPrehydrate for pre-hydration logic | Run code before Nuxt hydrates the page | onPrehydrate for client setup | onMounted for hydration-critical code | onPrehydrate(() => { console.log(window) }) | onMounted for pre-hydration needs | Low | https://nuxt.com/docs/api/composables/on-prehydrate |
+| 21 | Server | Use server/api for API routes | Create API endpoints in server/api directory | server/api/users.ts for /api/users | Manual Express setup | server/api/hello.ts -> /api/hello | app.get('/api/hello') | High | https://nuxt.com/docs/guide/directory-structure/server |
+| 22 | Server | Use defineEventHandler for handlers | Define server route handlers | defineEventHandler for all handlers | export default function | export default defineEventHandler((event) => { return { hello: 'world' } }) | export default function(req, res) {} | High | https://nuxt.com/docs/guide/directory-structure/server |
+| 23 | Server | Use server/routes for non-api routes | Routes without /api prefix | server/routes for custom paths | server/api for non-api routes | server/routes/sitemap.xml.ts | server/api/sitemap.xml.ts | Medium | https://nuxt.com/docs/guide/directory-structure/server |
+| 24 | Server | Use getQuery and readBody for input | Access query params and request body | getQuery(event) readBody(event) | Direct event access | const { id } = getQuery(event) | event.node.req.query | Medium | https://nuxt.com/docs/guide/directory-structure/server |
+| 25 | Server | Validate server input | Always validate input in server handlers | Zod or similar for validation | Trust client input | const body = await readBody(event); schema.parse(body) | const body = await readBody(event) | High | https://nuxt.com/docs/guide/directory-structure/server |
+| 26 | State | Use useState for shared reactive state | SSR-friendly shared state across components | useState for cross-component state | ref for shared state | const count = useState('count', () => 0) | const count = ref(0) in composable | High | https://nuxt.com/docs/api/composables/use-state |
+| 27 | State | Use unique keys for useState | Prevent state conflicts with unique keys | Descriptive unique keys for each state | Generic or duplicate keys | useState('user-preferences', () => ({})) | useState('data') in multiple places | Medium | https://nuxt.com/docs/api/composables/use-state |
+| 28 | State | Use Pinia for complex state | Pinia for advanced state management | @pinia/nuxt for complex apps | Custom state management | useMainStore() with Pinia | Custom reactive store implementation | Medium | https://nuxt.com/docs/getting-started/state-management |
+| 29 | State | Use callOnce for one-time async operations | Ensure async operations run only once | callOnce for store initialization | Direct await in component | await callOnce(store.fetch) | await store.fetch() on every render | Medium | https://nuxt.com/docs/api/utils/call-once |
+| 30 | SEO | Use useSeoMeta for SEO tags | Type-safe SEO meta tag management | useSeoMeta for meta tags | useHead for simple meta | useSeoMeta({ title: 'Home', ogTitle: 'Home', description: '...' }) | useHead({ meta: [{ name: 'description', content: '...' }] }) | High | https://nuxt.com/docs/api/composables/use-seo-meta |
+| 31 | SEO | Use reactive values in useSeoMeta | Dynamic SEO tags with refs or getters | Computed getters for dynamic values | Static values for dynamic content | useSeoMeta({ title: () => post.value.title }) | useSeoMeta({ title: post.value.title }) | Medium | https://nuxt.com/docs/api/composables/use-seo-meta |
+| 32 | SEO | Use useHead for non-meta head elements | Scripts styles links in head | useHead for scripts and links | useSeoMeta for scripts | useHead({ script: [{ src: '/analytics.js' }] }) | useSeoMeta({ script: '...' }) | Medium | https://nuxt.com/docs/api/composables/use-head |
+| 33 | SEO | Include OpenGraph tags | Add OG tags for social sharing | ogTitle ogDescription ogImage | Missing social preview | useSeoMeta({ ogImage: '/og.png', twitterCard: 'summary_large_image' }) | No OG configuration | Medium | https://nuxt.com/docs/api/composables/use-seo-meta |
+| 34 | Middleware | Use defineNuxtRouteMiddleware | Define route middleware properly | defineNuxtRouteMiddleware wrapper | export default function | export default defineNuxtRouteMiddleware((to, from) => {}) | export default function(to, from) {} | High | https://nuxt.com/docs/guide/directory-structure/middleware |
+| 35 | Middleware | Use navigateTo for redirects | Redirect in middleware with navigateTo | return navigateTo('/login') | router.push in middleware | if (!auth) return navigateTo('/login') | if (!auth) router.push('/login') | High | https://nuxt.com/docs/api/utils/navigate-to |
+| 36 | Middleware | Reference middleware in definePageMeta | Apply middleware to specific pages | middleware array in definePageMeta | Global middleware for page-specific | definePageMeta({ middleware: ['auth'] }) | Global auth check for one page | Medium | https://nuxt.com/docs/guide/directory-structure/middleware |
+| 37 | Middleware | Use .global suffix for global middleware | Apply middleware to all routes | auth.global.ts for app-wide auth | Manual middleware on every page | middleware/auth.global.ts | middleware: ['auth'] on every page | Medium | https://nuxt.com/docs/guide/directory-structure/middleware |
+| 38 | ErrorHandling | Use createError for errors | Create errors with proper status codes | createError with statusCode | throw new Error | throw createError({ statusCode: 404, statusMessage: 'Not Found' }) | throw new Error('Not Found') | High | https://nuxt.com/docs/api/utils/create-error |
+| 39 | ErrorHandling | Use NuxtErrorBoundary for local errors | Handle errors within component subtree | NuxtErrorBoundary for component errors | Global error page for local errors | <NuxtErrorBoundary @error="log"><template #error="{ error }"> | error.vue for component errors | Medium | https://nuxt.com/docs/getting-started/error-handling |
+| 40 | ErrorHandling | Use clearError to recover from errors | Clear error state and optionally redirect | clearError({ redirect: '/' }) | Manual error state reset | clearError({ redirect: '/home' }) | error.value = null | Medium | https://nuxt.com/docs/api/utils/clear-error |
+| 41 | ErrorHandling | Use short statusMessage | Keep statusMessage brief for security | Short generic messages | Detailed error info in statusMessage | createError({ statusCode: 400, statusMessage: 'Bad Request' }) | createError({ statusMessage: 'Invalid user ID: 123' }) | High | https://nuxt.com/docs/getting-started/error-handling |
+| 42 | Link | Use NuxtLink for internal navigation | Client-side navigation with prefetching | <NuxtLink to> for internal links | <a href> for internal links | <NuxtLink to="/about">About</NuxtLink> | <a href="/about">About</a> | High | https://nuxt.com/docs/api/components/nuxt-link |
+| 43 | Link | Configure prefetch behavior | Control when prefetching occurs | prefetchOn for interaction-based | Default prefetch for low-priority | <NuxtLink prefetch-on="interaction"> | Always default prefetch | Low | https://nuxt.com/docs/api/components/nuxt-link |
+| 44 | Link | Use useRouter for programmatic navigation | Navigate programmatically | useRouter().push() for navigation | Direct window.location | const router = useRouter(); router.push('/dashboard') | window.location.href = '/dashboard' | Medium | https://nuxt.com/docs/api/composables/use-router |
+| 45 | Link | Use navigateTo in composables | Navigate outside components | navigateTo() in middleware or plugins | useRouter in non-component code | return navigateTo('/login') | router.push in middleware | Medium | https://nuxt.com/docs/api/utils/navigate-to |
+| 46 | AutoImports | Leverage auto-imports | Use auto-imported composables directly | Direct use of ref computed useFetch | Manual imports for Nuxt composables | const count = ref(0) | import { ref } from 'vue'; const count = ref(0) | Medium | https://nuxt.com/docs/guide/concepts/auto-imports |
+| 47 | AutoImports | Use #imports for explicit imports | Explicit imports when needed | #imports for clarity or disabled auto-imports | import from 'vue' when auto-import enabled | import { ref } from '#imports' | import { ref } from 'vue' | Low | https://nuxt.com/docs/guide/concepts/auto-imports |
+| 48 | AutoImports | Configure third-party auto-imports | Add external package auto-imports | imports.presets in nuxt.config | Manual imports everywhere | imports: { presets: [{ from: 'vue-i18n', imports: ['useI18n'] }] } | import { useI18n } everywhere | Low | https://nuxt.com/docs/guide/concepts/auto-imports |
+| 49 | Plugins | Use defineNuxtPlugin | Define plugins properly | defineNuxtPlugin wrapper | export default function | export default defineNuxtPlugin((nuxtApp) => {}) | export default function(ctx) {} | High | https://nuxt.com/docs/guide/directory-structure/plugins |
+| 50 | Plugins | Use provide for injection | Provide helpers across app | return { provide: {} } for type safety | nuxtApp.provide without types | return { provide: { hello: (name) => `Hello ${name}!` } } | nuxtApp.provide('hello', fn) | Medium | https://nuxt.com/docs/guide/directory-structure/plugins |
+| 51 | Plugins | Use .client or .server suffix | Control plugin execution environment | plugin.client.ts for client-only | if (process.client) checks | analytics.client.ts | if (process.client) { // analytics } | Medium | https://nuxt.com/docs/guide/directory-structure/plugins |
+| 52 | Environment | Use runtimeConfig for env vars | Access environment variables safely | runtimeConfig in nuxt.config | process.env directly | runtimeConfig: { apiSecret: '', public: { apiBase: '' } } | process.env.API_SECRET in components | High | https://nuxt.com/docs/guide/going-further/runtime-config |
+| 53 | Environment | Use NUXT_ prefix for env override | Override config with environment variables | NUXT_API_SECRET NUXT_PUBLIC_API_BASE | Custom env var names | NUXT_PUBLIC_API_BASE=https://api.example.com | API_BASE=https://api.example.com | High | https://nuxt.com/docs/guide/going-further/runtime-config |
+| 54 | Environment | Access public config with useRuntimeConfig | Get public config in components | useRuntimeConfig().public | Direct process.env access | const config = useRuntimeConfig(); config.public.apiBase | process.env.NUXT_PUBLIC_API_BASE | High | https://nuxt.com/docs/api/composables/use-runtime-config |
+| 55 | Environment | Keep secrets in private config | Server-only secrets in runtimeConfig root | runtimeConfig.apiSecret (server only) | Secrets in public config | runtimeConfig: { dbPassword: '' } | runtimeConfig: { public: { dbPassword: '' } } | High | https://nuxt.com/docs/guide/going-further/runtime-config |
+| 56 | Performance | Use Lazy prefix for code splitting | Lazy load components with Lazy prefix | <LazyComponent> for below-fold | Eager load all components | <LazyMountainsList v-if="show"/> | <MountainsList/> for hidden content | Medium | https://nuxt.com/docs/guide/directory-structure/components |
+| 57 | Performance | Use useLazyFetch for non-blocking data | Alias for useFetch with lazy: true | useLazyFetch for secondary data | useFetch for all requests | const { data } = useLazyFetch('/api/comments') | await useFetch for comments section | Medium | https://nuxt.com/docs/api/composables/use-lazy-fetch |
+| 58 | Performance | Use lazy hydration for interactivity | Delay component hydration until needed | LazyComponent with hydration strategy | Immediate hydration for all | <LazyModal hydrate-on-visible/> | <Modal/> in footer | Low | https://nuxt.com/docs/guide/going-further/experimental-features |