@stephen-lord/docs 1.0.0

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

@@ -0,0 +1,102 @@
+---
+trigger: always_on
+---
+
+| No | Product Type | Keywords | Primary Style Recommendation | Secondary Styles | Landing Page Pattern | Dashboard Style (if applicable) | Color Palette Focus | Key Considerations |
+|----|--------------|----------|------------------------------|------------------|---------------------|---------------------------------|---------------------|--------------------|
+| 1 | SaaS (General) | app, b2b, cloud, general, saas, software, subscription | Glassmorphism + Flat Design | Soft UI Evolution, Minimalism | Hero + Features + CTA | Data-Dense + Real-Time Monitoring | Trust blue + accent contrast | Balance modern feel with clarity. Focus on CTAs. |
+| 2 | Micro SaaS | app, b2b, cloud, indie, micro, micro-saas, niche, saas, small, software, solo, subscription | Flat Design + Vibrant & Block | Motion-Driven, Micro-interactions | Minimal & Direct + Demo | Executive Dashboard | Vibrant primary + white space | Keep simple, show product quickly. Speed is key. |
+| 3 | E-commerce | buy, commerce, e, ecommerce, products, retail, sell, shop, store | Vibrant & Block-based | Aurora UI, Motion-Driven | Feature-Rich Showcase | Sales Intelligence Dashboard | Brand primary + success green | Engagement & conversions. High visual hierarchy. |
+| 4 | E-commerce Luxury | buy, commerce, e, ecommerce, elegant, exclusive, high-end, luxury, premium, products, retail, sell, shop, store | Liquid Glass + Glassmorphism | 3D & Hyperrealism, Aurora UI | Feature-Rich Showcase | Sales Intelligence Dashboard | Premium colors + minimal accent | Elegance & sophistication. Premium materials. |
+| 5 | Service Landing Page | appointment, booking, consultation, conversion, landing, marketing, page, service | Hero-Centric + Trust & Authority | Social Proof-Focused, Storytelling | Hero-Centric Design | N/A - Analytics for conversions | Brand primary + trust colors | Social proof essential. Show expertise. |
+| 6 | B2B Service | appointment, b, b2b, booking, business, consultation, corporate, enterprise, service | Trust & Authority + Minimal | Feature-Rich, Conversion-Optimized | Feature-Rich Showcase | Sales Intelligence Dashboard | Professional blue + neutral grey | Credibility essential. Clear ROI messaging. |
+| 7 | Financial Dashboard | admin, analytics, dashboard, data, financial, panel | Dark Mode (OLED) + Data-Dense | Minimalism, Accessible & Ethical | N/A - Dashboard focused | Financial Dashboard | Dark bg + red/green alerts + trust blue | High contrast, real-time updates, accuracy paramount. |
+| 8 | Analytics Dashboard | admin, analytics, dashboard, data, panel | Data-Dense + Heat Map & Heatmap | Minimalism, Dark Mode (OLED) | N/A - Analytics focused | Drill-Down Analytics + Comparative | Cool→Hot gradients + neutral grey | Clarity > aesthetics. Color-coded data priority. |
+| 9 | Healthcare App | app, clinic, health, healthcare, medical, patient | Neumorphism + Accessible & Ethical | Soft UI Evolution, Claymorphism (for patients) | Social Proof-Focused | User Behavior Analytics | Calm blue + health green + trust | Accessibility mandatory. Calming aesthetic. |
+| 10 | Educational App | app, course, education, educational, learning, school, training | Claymorphism + Micro-interactions | Vibrant & Block-based, Flat Design | Storytelling-Driven | User Behavior Analytics | Playful colors + clear hierarchy | Engagement & ease of use. Age-appropriate design. |
+| 11 | Creative Agency | agency, creative, design, marketing, studio | Brutalism + Motion-Driven | Retro-Futurism, Storytelling-Driven | Storytelling-Driven | N/A - Portfolio focused | Bold primaries + artistic freedom | Differentiation key. Wow-factor necessary. |
+| 12 | Portfolio/Personal | creative, personal, portfolio, projects, showcase, work | Motion-Driven + Minimalism | Brutalism, Aurora UI | Storytelling-Driven | N/A - Personal branding | Brand primary + artistic interpretation | Showcase work. Personality shine through. |
+| 13 | Gaming | entertainment, esports, game, gaming, play | 3D & Hyperrealism + Retro-Futurism | Motion-Driven, Vibrant & Block | Feature-Rich Showcase | N/A - Game focused | Vibrant + neon + immersive colors | Immersion priority. Performance critical. |
+| 14 | Government/Public Service | appointment, booking, consultation, government, public, service | Accessible & Ethical + Minimalism | Flat Design, Inclusive Design | Minimal & Direct | Executive Dashboard | Professional blue + high contrast | WCAG AAA mandatory. Trust paramount. |
+| 15 | Fintech/Crypto | banking, blockchain, crypto, defi, finance, fintech, money, nft, payment, web3 | Glassmorphism + Dark Mode (OLED) | Retro-Futurism, Motion-Driven | Conversion-Optimized | Real-Time Monitoring + Predictive | Dark tech colors + trust + vibrant accents | Security perception. Real-time data critical. |
+| 16 | Social Media App | app, community, content, entertainment, media, network, sharing, social, streaming, users, video | Vibrant & Block-based + Motion-Driven | Aurora UI, Micro-interactions | Feature-Rich Showcase | User Behavior Analytics | Vibrant + engagement colors | Engagement & retention. Addictive design ethics. |
+| 17 | Productivity Tool | collaboration, productivity, project, task, tool, workflow | Flat Design + Micro-interactions | Minimalism, Soft UI Evolution | Interactive Product Demo | Drill-Down Analytics | Clear hierarchy + functional colors | Ease of use. Speed & efficiency focus. |
+| 18 | Design System/Component Library | component, design, library, system | Minimalism + Accessible & Ethical | Flat Design, Zero Interface | Feature-Rich Showcase | N/A - Dev focused | Clear hierarchy + code-like structure | Consistency. Developer-first approach. |
+| 19 | AI/Chatbot Platform | ai, artificial-intelligence, automation, chatbot, machine-learning, ml, platform | AI-Native UI + Minimalism | Zero Interface, Glassmorphism | Interactive Product Demo | AI/ML Analytics Dashboard | Neutral + AI Purple (#6366F1) | Conversational UI. Streaming text. Context awareness. Minimal chrome. |
+| 20 | NFT/Web3 Platform | nft, platform, web | Cyberpunk UI + Glassmorphism | Aurora UI, 3D & Hyperrealism | Feature-Rich Showcase | Crypto/Blockchain Dashboard | Dark + Neon + Gold (#FFD700) | Wallet integration. Transaction feedback. Gas fees display. Dark mode essential. |
+| 21 | Creator Economy Platform | creator, economy, platform | Vibrant & Block-based + Bento Box Grid | Motion-Driven, Aurora UI | Social Proof-Focused | User Behavior Analytics | Vibrant + Brand colors | Creator profiles. Monetization display. Engagement metrics. Social proof. |
+| 22 | Sustainability/ESG Platform | ai, artificial-intelligence, automation, esg, machine-learning, ml, platform, sustainability | Organic Biophilic + Minimalism | Accessible & Ethical, Flat Design | Trust & Authority | Energy/Utilities Dashboard | Green (#228B22) + Earth tones | Carbon footprint visuals. Progress indicators. Certification badges. Eco-friendly imagery. |
+| 23 | Remote Work/Collaboration Tool | collaboration, remote, tool, work | Soft UI Evolution + Minimalism | Glassmorphism, Micro-interactions | Feature-Rich Showcase | Drill-Down Analytics | Calm Blue + Neutral grey | Real-time collaboration. Status indicators. Video integration. Notification management. |
+| 24 | Mental Health App | app, health, mental | Neumorphism + Accessible & Ethical | Claymorphism, Soft UI Evolution | Social Proof-Focused | Healthcare Analytics | Calm Pastels + Trust colors | Calming aesthetics. Privacy-first. Crisis resources. Progress tracking. Accessibility mandatory. |
+| 25 | Pet Tech App | app, pet, tech | Claymorphism + Vibrant & Block-based | Micro-interactions, Flat Design | Storytelling-Driven | User Behavior Analytics | Playful + Warm colors | Pet profiles. Health tracking. Playful UI. Photo galleries. Vet integration. |
+| 26 | Smart Home/IoT Dashboard | admin, analytics, dashboard, data, home, iot, panel, smart | Glassmorphism + Dark Mode (OLED) | Minimalism, AI-Native UI | Interactive Product Demo | Real-Time Monitoring | Dark + Status indicator colors | Device status. Real-time controls. Energy monitoring. Automation rules. Quick actions. |
+| 27 | EV/Charging Ecosystem | charging, ecosystem, ev | Minimalism + Aurora UI | Glassmorphism, Organic Biophilic | Hero-Centric Design | Energy/Utilities Dashboard | Electric Blue (#009CD1) + Green | Charging station maps. Range estimation. Cost calculation. Environmental impact. |
+| 28 | Subscription Box Service | appointment, booking, box, consultation, membership, plan, recurring, service, subscription | Vibrant & Block-based + Motion-Driven | Claymorphism, Aurora UI | Feature-Rich Showcase | E-commerce Analytics | Brand + Excitement colors | Unboxing experience. Personalization quiz. Subscription management. Product reveals. |
+| 29 | Podcast Platform | platform, podcast | Dark Mode (OLED) + Minimalism | Motion-Driven, Vibrant & Block-based | Storytelling-Driven | Media/Entertainment Dashboard | Dark + Audio waveform accents | Audio player UX. Episode discovery. Creator tools. Analytics for podcasters. |
+| 30 | Dating App | app, dating | Vibrant & Block-based + Motion-Driven | Aurora UI, Glassmorphism | Social Proof-Focused | User Behavior Analytics | Warm + Romantic (Pink/Red gradients) | Profile cards. Swipe interactions. Match animations. Safety features. Video chat. |
+| 31 | Micro-Credentials/Badges Platform | badges, credentials, micro, platform | Minimalism + Flat Design | Accessible & Ethical, Swiss Modernism 2.0 | Trust & Authority | Education Dashboard | Trust Blue + Gold (#FFD700) | Credential verification. Badge display. Progress tracking. Issuer trust. LinkedIn integration. |
+| 32 | Knowledge Base/Documentation | base, documentation, knowledge | Minimalism + Accessible & Ethical | Swiss Modernism 2.0, Flat Design | FAQ/Documentation | N/A - Documentation focused | Clean hierarchy + minimal color | Search-first. Clear navigation. Code highlighting. Version switching. Feedback system. |
+| 33 | Hyperlocal Services | appointment, booking, consultation, hyperlocal, service, services | Minimalism + Vibrant & Block-based | Micro-interactions, Flat Design | Conversion-Optimized | Drill-Down Analytics + Map | Location markers + Trust colors | Map integration. Service categories. Provider profiles. Booking system. Reviews. |
+| 34 | Beauty/Spa/Wellness Service | appointment, beauty, booking, consultation, service, spa, wellness | Soft UI Evolution + Neumorphism | Glassmorphism, Minimalism | Hero-Centric Design + Social Proof | User Behavior Analytics | Soft pastels (Pink #FFB6C1 Sage #90EE90) + Cream + Gold accents | Calming aesthetic. Booking system. Service menu. Before/after gallery. Testimonials. Relaxing imagery. |
+| 35 | Luxury/Premium Brand | brand, elegant, exclusive, high-end, luxury, premium | Liquid Glass + Glassmorphism | Minimalism, 3D & Hyperrealism | Storytelling-Driven + Feature-Rich | Sales Intelligence Dashboard | Black + Gold (#FFD700) + White + Minimal accent | Elegance paramount. Premium imagery. Storytelling. High-quality visuals. Exclusive feel. |
+| 36 | Restaurant/Food Service | appointment, booking, consultation, delivery, food, menu, order, restaurant, service | Vibrant & Block-based + Motion-Driven | Claymorphism, Flat Design | Hero-Centric Design + Conversion | N/A - Booking focused | Warm colors (Orange Red Brown) + appetizing imagery | Menu display. Online ordering. Reservation system. Food photography. Location/hours prominent. |
+| 37 | Fitness/Gym App | app, exercise, fitness, gym, health, workout | Vibrant & Block-based + Dark Mode (OLED) | Motion-Driven, Neumorphism | Feature-Rich Showcase | User Behavior Analytics | Energetic (Orange #FF6B35 Electric Blue) + Dark bg | Progress tracking. Workout plans. Community features. Achievements. Motivational design. |
+| 38 | Real Estate/Property | buy, estate, housing, property, real, real-estate, rent | Glassmorphism + Minimalism | Motion-Driven, 3D & Hyperrealism | Hero-Centric Design + Feature-Rich | Sales Intelligence Dashboard | Trust Blue (#0077B6) + Gold accents + White | Property listings. Virtual tours. Map integration. Agent profiles. Mortgage calculator. High-quality imagery. |
+| 39 | Travel/Tourism Agency | agency, booking, creative, design, flight, hotel, marketing, studio, tourism, travel, vacation | Aurora UI + Motion-Driven | Vibrant & Block-based, Glassmorphism | Storytelling-Driven + Hero-Centric | Booking Analytics | Vibrant destination colors + Sky Blue + Warm accents | Destination showcase. Booking system. Itinerary builder. Reviews. Inspiration galleries. Mobile-first. |
+| 40 | Hotel/Hospitality | hospitality, hotel | Liquid Glass + Minimalism | Glassmorphism, Soft UI Evolution | Hero-Centric Design + Social Proof | Revenue Management Dashboard | Warm neutrals + Gold (#D4AF37) + Brand accent | Room booking. Amenities showcase. Location maps. Guest reviews. Seasonal pricing. Luxury imagery. |
+| 41 | Wedding/Event Planning | conference, event, meetup, planning, registration, ticket, wedding | Soft UI Evolution + Aurora UI | Glassmorphism, Motion-Driven | Storytelling-Driven + Social Proof | N/A - Planning focused | Soft Pink (#FFD6E0) + Gold + Cream + Sage | Portfolio gallery. Vendor directory. Planning tools. Timeline. Budget tracker. Romantic aesthetic. |
+| 42 | Legal Services | appointment, attorney, booking, compliance, consultation, contract, law, legal, service, services | Trust & Authority + Minimalism | Accessible & Ethical, Swiss Modernism 2.0 | Trust & Authority + Minimal | Case Management Dashboard | Navy Blue (#1E3A5F) + Gold + White | Credibility paramount. Practice areas. Attorney profiles. Case results. Contact forms. Professional imagery. |
+| 43 | Insurance Platform | insurance, platform | Trust & Authority + Flat Design | Accessible & Ethical, Minimalism | Conversion-Optimized + Trust | Claims Analytics Dashboard | Trust Blue (#0066CC) + Green (security) + Neutral | Quote calculator. Policy comparison. Claims process. Trust signals. Clear pricing. Security badges. |
+| 44 | Banking/Traditional Finance | banking, finance, traditional | Minimalism + Accessible & Ethical | Trust & Authority, Dark Mode (OLED) | Trust & Authority + Feature-Rich | Financial Dashboard | Navy (#0A1628) + Trust Blue + Gold accents | Security-first. Account overview. Transaction history. Mobile banking. Accessibility critical. Trust paramount. |
+| 45 | Online Course/E-learning | course, e, learning, online | Claymorphism + Vibrant & Block-based | Motion-Driven, Flat Design | Feature-Rich Showcase + Social Proof | Education Dashboard | Vibrant learning colors + Progress green | Course catalog. Progress tracking. Video player. Quizzes. Certificates. Community forums. Gamification. |
+| 46 | Non-profit/Charity | charity, non, profit | Accessible & Ethical + Organic Biophilic | Minimalism, Storytelling-Driven | Storytelling-Driven + Trust | Donation Analytics Dashboard | Cause-related colors + Trust + Warm | Impact stories. Donation flow. Transparency reports. Volunteer signup. Event calendar. Emotional connection. |
+| 47 | Music Streaming | music, streaming | Dark Mode (OLED) + Vibrant & Block-based | Motion-Driven, Aurora UI | Feature-Rich Showcase | Media/Entertainment Dashboard | Dark (#121212) + Vibrant accents + Album art colors | Audio player. Playlist management. Artist pages. Personalization. Social features. Waveform visualizations. |
+| 48 | Video Streaming/OTT | ott, streaming, video | Dark Mode (OLED) + Motion-Driven | Glassmorphism, Vibrant & Block-based | Hero-Centric Design + Feature-Rich | Media/Entertainment Dashboard | Dark bg + Content poster colors + Brand accent | Video player. Content discovery. Watchlist. Continue watching. Personalized recommendations. Thumbnail-heavy. |
+| 49 | Job Board/Recruitment | board, job, recruitment | Flat Design + Minimalism | Vibrant & Block-based, Accessible & Ethical | Conversion-Optimized + Feature-Rich | HR Analytics Dashboard | Professional Blue + Success Green + Neutral | Job listings. Search/filter. Company profiles. Application tracking. Resume upload. Salary insights. |
+| 50 | Marketplace (P2P) | buyers, listings, marketplace, p, platform, sellers | Vibrant & Block-based + Flat Design | Micro-interactions, Trust & Authority | Feature-Rich Showcase + Social Proof | E-commerce Analytics | Trust colors + Category colors + Success green | Seller/buyer profiles. Listings. Reviews/ratings. Secure payment. Messaging. Search/filter. Trust badges. |
+| 51 | Logistics/Delivery | delivery, logistics | Minimalism + Flat Design | Dark Mode (OLED), Micro-interactions | Feature-Rich Showcase + Conversion | Real-Time Monitoring + Route Analytics | Blue (#2563EB) + Orange (tracking) + Green (delivered) | Real-time tracking. Delivery scheduling. Route optimization. Driver management. Status updates. Map integration. |
+| 52 | Agriculture/Farm Tech | agriculture, farm, tech | Organic Biophilic + Flat Design | Minimalism, Accessible & Ethical | Feature-Rich Showcase + Trust | IoT Sensor Dashboard | Earth Green (#4A7C23) + Brown + Sky Blue | Crop monitoring. Weather data. IoT sensors. Yield tracking. Market prices. Sustainable imagery. |
+| 53 | Construction/Architecture | architecture, construction | Minimalism + 3D & Hyperrealism | Brutalism, Swiss Modernism 2.0 | Hero-Centric Design + Feature-Rich | Project Management Dashboard | Grey (#4A4A4A) + Orange (safety) + Blueprint Blue | Project portfolio. 3D renders. Timeline. Material specs. Team collaboration. Blueprint aesthetic. |
+| 54 | Automotive/Car Dealership | automotive, car, dealership | Motion-Driven + 3D & Hyperrealism | Dark Mode (OLED), Glassmorphism | Hero-Centric Design + Feature-Rich | Sales Intelligence Dashboard | Brand colors + Metallic accents + Dark/Light | Vehicle showcase. 360° views. Comparison tools. Financing calculator. Test drive booking. High-quality imagery. |
+| 55 | Photography Studio | photography, studio | Motion-Driven + Minimalism | Aurora UI, Glassmorphism | Storytelling-Driven + Hero-Centric | N/A - Portfolio focused | Black + White + Minimal accent | Portfolio gallery. Before/after. Service packages. Booking system. Client galleries. Full-bleed imagery. |
+| 56 | Coworking Space | coworking, space | Vibrant & Block-based + Glassmorphism | Minimalism, Motion-Driven | Hero-Centric Design + Feature-Rich | Occupancy Dashboard | Energetic colors + Wood tones + Brand accent | Space tour. Membership plans. Booking system. Amenities. Community events. Virtual tour. |
+| 57 | Cleaning Service | appointment, booking, cleaning, consultation, service | Soft UI Evolution + Flat Design | Minimalism, Micro-interactions | Conversion-Optimized + Trust | Service Analytics | Fresh Blue (#00B4D8) + Clean White + Green | Service packages. Booking system. Price calculator. Before/after gallery. Reviews. Trust badges. |
+| 58 | Home Services (Plumber/Electrician) | appointment, booking, consultation, electrician, home, plumber, service, services | Flat Design + Trust & Authority | Minimalism, Accessible & Ethical | Conversion-Optimized + Trust | Service Analytics | Trust Blue + Safety Orange + Professional grey | Service list. Emergency contact. Booking. Price transparency. Certifications. Local trust signals. |
+| 59 | Childcare/Daycare | childcare, daycare | Claymorphism + Vibrant & Block-based | Soft UI Evolution, Accessible & Ethical | Social Proof-Focused + Trust | Parent Dashboard | Playful pastels + Safe colors + Warm accents | Programs. Staff profiles. Safety certifications. Parent portal. Activity updates. Cheerful imagery. |
+| 60 | Senior Care/Elderly | care, elderly, senior | Accessible & Ethical + Soft UI Evolution | Minimalism, Neumorphism | Trust & Authority + Social Proof | Healthcare Analytics | Calm Blue + Warm neutrals + Large text | Care services. Staff qualifications. Facility tour. Family portal. Large touch targets. High contrast. Accessibility-first. |
+| 61 | Medical Clinic | clinic, medical | Accessible & Ethical + Minimalism | Neumorphism, Trust & Authority | Trust & Authority + Conversion | Healthcare Analytics | Medical Blue (#0077B6) + Trust White + Calm Green | Services. Doctor profiles. Online booking. Patient portal. Insurance info. HIPAA compliant. Trust signals. |
+| 62 | Pharmacy/Drug Store | drug, pharmacy, store | Flat Design + Accessible & Ethical | Minimalism, Trust & Authority | Conversion-Optimized + Trust | Inventory Dashboard | Pharmacy Green + Trust Blue + Clean White | Product catalog. Prescription upload. Refill reminders. Health info. Store locator. Safety certifications. |
+| 63 | Dental Practice | dental, practice | Soft UI Evolution + Minimalism | Accessible & Ethical, Trust & Authority | Social Proof-Focused + Conversion | Patient Analytics | Fresh Blue + White + Smile Yellow accent | Services. Dentist profiles. Before/after. Online booking. Insurance. Patient testimonials. Friendly imagery. |
+| 64 | Veterinary Clinic | clinic, veterinary | Claymorphism + Accessible & Ethical | Soft UI Evolution, Flat Design | Social Proof-Focused + Trust | Pet Health Dashboard | Caring Blue + Pet-friendly colors + Warm accents | Pet services. Vet profiles. Online booking. Pet portal. Emergency info. Friendly animal imagery. |
+| 65 | Florist/Plant Shop | florist, plant, shop | Organic Biophilic + Vibrant & Block-based | Aurora UI, Motion-Driven | Hero-Centric Design + Conversion | E-commerce Analytics | Natural Green + Floral pinks/purples + Earth tones | Product catalog. Occasion categories. Delivery scheduling. Care guides. Seasonal collections. Beautiful imagery. |
+| 66 | Bakery/Cafe | bakery, cafe | Vibrant & Block-based + Soft UI Evolution | Claymorphism, Motion-Driven | Hero-Centric Design + Conversion | N/A - Order focused | Warm Brown + Cream + Appetizing accents | Menu display. Online ordering. Location/hours. Catering. Seasonal specials. Appetizing photography. |
+| 67 | Coffee Shop | coffee, shop | Minimalism + Organic Biophilic | Soft UI Evolution, Flat Design | Hero-Centric Design + Conversion | N/A - Order focused | Coffee Brown (#6F4E37) + Cream + Warm accents | Menu. Online ordering. Loyalty program. Location. Story/origin. Cozy aesthetic. |
+| 68 | Brewery/Winery | brewery, winery | Motion-Driven + Storytelling-Driven | Dark Mode (OLED), Organic Biophilic | Storytelling-Driven + Hero-Centric | N/A - E-commerce focused | Deep amber/burgundy + Gold + Craft aesthetic | Product showcase. Story/heritage. Tasting notes. Events. Club membership. Artisanal imagery. |
+| 69 | Airline | ai, airline, artificial-intelligence, automation, machine-learning, ml | Minimalism + Glassmorphism | Motion-Driven, Accessible & Ethical | Conversion-Optimized + Feature-Rich | Operations Dashboard | Sky Blue + Brand colors + Trust accents | Flight search. Booking. Check-in. Boarding pass. Loyalty program. Route maps. Mobile-first. |
+| 70 | News/Media Platform | content, entertainment, media, news, platform, streaming, video | Minimalism + Flat Design | Dark Mode (OLED), Accessible & Ethical | Hero-Centric Design + Feature-Rich | Media Analytics Dashboard | Brand colors + High contrast + Category colors | Article layout. Breaking news. Categories. Search. Subscription. Mobile reading. Fast loading. |
+| 71 | Magazine/Blog | articles, blog, content, magazine, posts, writing | Swiss Modernism 2.0 + Motion-Driven | Minimalism, Aurora UI | Storytelling-Driven + Hero-Centric | Content Analytics | Editorial colors + Brand primary + Clean white | Article showcase. Category navigation. Author profiles. Newsletter signup. Related content. Typography-focused. |
+| 72 | Freelancer Platform | freelancer, platform | Flat Design + Minimalism | Vibrant & Block-based, Micro-interactions | Feature-Rich Showcase + Conversion | Marketplace Analytics | Professional Blue + Success Green + Neutral | Profile creation. Portfolio. Skill matching. Messaging. Payment. Reviews. Project management. |
+| 73 | Consulting Firm | consulting, firm | Trust & Authority + Minimalism | Swiss Modernism 2.0, Accessible & Ethical | Trust & Authority + Feature-Rich | N/A - Lead generation | Navy + Gold + Professional grey | Service areas. Case studies. Team profiles. Thought leadership. Contact. Professional credibility. |
+| 74 | Marketing Agency | agency, creative, design, marketing, studio | Brutalism + Motion-Driven | Vibrant & Block-based, Aurora UI | Storytelling-Driven + Feature-Rich | Campaign Analytics | Bold brand colors + Creative freedom | Portfolio. Case studies. Services. Team. Creative showcase. Results-focused. Bold aesthetic. |
+| 75 | Event Management | conference, event, management, meetup, registration, ticket | Vibrant & Block-based + Motion-Driven | Glassmorphism, Aurora UI | Hero-Centric Design + Feature-Rich | Event Analytics | Event theme colors + Excitement accents | Event showcase. Registration. Agenda. Speakers. Sponsors. Ticket sales. Countdown timer. |
+| 76 | Conference/Webinar Platform | conference, platform, webinar | Glassmorphism + Minimalism | Motion-Driven, Flat Design | Feature-Rich Showcase + Conversion | Attendee Analytics | Professional Blue + Video accent + Brand | Registration. Agenda. Speaker profiles. Live stream. Networking. Recording access. Virtual event features. |
+| 77 | Membership/Community | community, membership | Vibrant & Block-based + Soft UI Evolution | Bento Box Grid, Micro-interactions | Social Proof-Focused + Conversion | Community Analytics | Community brand colors + Engagement accents | Member benefits. Pricing tiers. Community showcase. Events. Member directory. Exclusive content. |
+| 78 | Newsletter Platform | newsletter, platform | Minimalism + Flat Design | Swiss Modernism 2.0, Accessible & Ethical | Minimal & Direct + Conversion | Email Analytics | Brand primary + Clean white + CTA accent | Subscribe form. Archive. About. Social proof. Sample content. Simple conversion. |
+| 79 | Digital Products/Downloads | digital, downloads, products | Vibrant & Block-based + Motion-Driven | Glassmorphism, Bento Box Grid | Feature-Rich Showcase + Conversion | E-commerce Analytics | Product category colors + Brand + Success green | Product showcase. Preview. Pricing. Instant delivery. License management. Customer reviews. |
+| 80 | Church/Religious Organization | church, organization, religious | Accessible & Ethical + Soft UI Evolution | Minimalism, Trust & Authority | Hero-Centric Design + Social Proof | N/A - Community focused | Warm Gold + Deep Purple/Blue + White | Service times. Events. Sermons. Community. Giving. Location. Welcoming imagery. |
+| 81 | Sports Team/Club | club, sports, team | Vibrant & Block-based + Motion-Driven | Dark Mode (OLED), 3D & Hyperrealism | Hero-Centric Design + Feature-Rich | Performance Analytics | Team colors + Energetic accents | Schedule. Roster. News. Tickets. Merchandise. Fan engagement. Action imagery. |
+| 82 | Museum/Gallery | gallery, museum | Minimalism + Motion-Driven | Swiss Modernism 2.0, 3D & Hyperrealism | Storytelling-Driven + Feature-Rich | Visitor Analytics | Art-appropriate neutrals + Exhibition accents | Exhibitions. Collections. Tickets. Events. Virtual tours. Educational content. Art-focused design. |
+| 83 | Theater/Cinema | cinema, theater | Dark Mode (OLED) + Motion-Driven | Vibrant & Block-based, Glassmorphism | Hero-Centric Design + Conversion | Booking Analytics | Dark + Spotlight accents + Gold | Showtimes. Seat selection. Trailers. Coming soon. Membership. Dramatic imagery. |
+| 84 | Language Learning App | app, language, learning | Claymorphism + Vibrant & Block-based | Micro-interactions, Flat Design | Feature-Rich Showcase + Social Proof | Learning Analytics | Playful colors + Progress indicators + Country flags | Lesson structure. Progress tracking. Gamification. Speaking practice. Community. Achievement badges. |
+| 85 | Coding Bootcamp | bootcamp, coding | Dark Mode (OLED) + Minimalism | Cyberpunk UI, Flat Design | Feature-Rich Showcase + Social Proof | Student Analytics | Code editor colors + Brand + Success green | Curriculum. Projects. Career outcomes. Alumni. Pricing. Application. Terminal aesthetic. |
+| 86 | Cybersecurity Platform | cyber, security, platform | Cyberpunk UI + Dark Mode (OLED) | Neubrutalism, Minimal & Direct | Trust & Authority + Real-Time | Real-Time Monitoring + Heat Map | Matrix Green + Deep Black + Terminal feel | Data density. Threat visualization. Dark mode default. |
+| 87 | Developer Tool / IDE | dev, developer, tool, ide | Dark Mode (OLED) + Minimalism | Flat Design, Bento Box Grid | Minimal & Direct + Documentation | Real-Time Monitor + Terminal | Dark syntax theme colors + Blue focus | Keyboard shortcuts. Syntax highlighting. Fast performance. |
+| 88 | Biotech / Life Sciences | biotech, biology, science | Glassmorphism + Clean Science | Minimalism, Organic Biophilic | Storytelling-Driven + Research | Data-Dense + Predictive | Sterile White + DNA Blue + Life Green | Data accuracy. Cleanliness. Complex data viz. |
+| 89 | Space Tech / Aerospace | aerospace, space, tech | Holographic / HUD + Dark Mode | Glassmorphism, 3D & Hyperrealism | Immersive Experience + Hero | Real-Time Monitoring + 3D | Deep Space Black + Star White + Metallic | High-tech feel. Precision. Telemetry data. |
+| 90 | Architecture / Interior | architecture, design, interior | Exaggerated Minimalism + High Imagery | Swiss Modernism 2.0, Parallax | Portfolio Grid + Visuals | Project Management + Gallery | Monochrome + Gold Accent + High Imagery | High-res images. Typography. Space. |
+| 91 | Quantum Computing Interface | quantum, computing, physics, qubit, future, science | Holographic / HUD + Dark Mode | Glassmorphism, Spatial UI | Immersive/Interactive Experience | 3D Spatial Data + Real-Time Monitor | Quantum Blue #00FFFF + Deep Black + Interference patterns | Visualize complexity. Qubit states. Probability clouds. High-tech trust. |
+| 92 | Biohacking / Longevity App | biohacking, health, longevity, tracking, wellness, science | Biomimetic / Organic 2.0 | Minimalism, Dark Mode (OLED) | Data-Dense + Storytelling | Real-Time Monitor + Biological Data | Cellular Pink/Red + DNA Blue + Clean White | Personal data privacy. Scientific credibility. Biological visualizations. |
+| 93 | Autonomous Drone Fleet Manager | drone, autonomous, fleet, aerial, logistics, robotics | HUD / Sci-Fi FUI | Real-Time Monitor, Spatial UI | Real-Time Monitor | Geographic + Real-Time | Tactical Green #00FF00 + Alert Red + Map Dark | Real-time telemetry. 3D spatial awareness. Latency indicators. Safety alerts. |
+| 94 | Generative Art Platform | art, generative, ai, creative, platform, gallery | Minimalism (Frame) + Gen Z Chaos | Masonry Grid, Dark Mode | Bento Grid Showcase | Gallery / Portfolio | Neutral #F5F5F5 (Canvas) + User Content | Content is king. Fast loading. Creator attribution. Minting flow. |
+| 95 | Spatial Computing OS / App | spatial, vr, ar, vision, os, immersive, mixed-reality | Spatial UI (VisionOS) | Glassmorphism, 3D & Hyperrealism | Immersive/Interactive Experience | Spatial Dashboard | Frosted Glass + System Colors + Depth | Gaze/Pinch interaction. Depth hierarchy. Environment awareness. |
+| 96 | Sustainable Energy / Climate Tech | climate, energy, sustainable, green, tech, carbon | Organic Biophilic + E-Ink / Paper | Data-Dense, Swiss Modernism | Interactive Demo + Data | Energy/Utilities Dashboard | Earth Green + Sky Blue + Solar Yellow | Data transparency. Impact visualization. Low-carbon web design. |

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

@@ -0,0 +1,29 @@
+---
+trigger: always_on
+---
+
+| STT | Style Category | AI Prompt Keywords (Copy-Paste Ready) | CSS/Technical Keywords | Implementation Checklist | Design System Variables |
+|-----|----------------|--------------------------------------|------------------------|--------------------------|-------------------------|
+| 1 | Minimalism & Swiss Style | Design a minimalist landing page. Use: white space, geometric layouts, sans-serif fonts, high contrast, grid-based structure, essential elements only. Avoid shadows and gradients. Focus on clarity and functionality. | display: grid, gap: 2rem, font-family: sans-serif, color: #000 or #FFF, max-width: 1200px, clean borders, no box-shadow unless necessary | ☐ Grid-based layout 12-16 columns, ☐ Typography hierarchy clear, ☐ No unnecessary decorations, ☐ WCAG AAA contrast verified, ☐ Mobile responsive grid | --spacing: 2rem, --border-radius: 0px, --font-weight: 400-700, --shadow: none, --accent-color: single primary only |
+| 2 | Neumorphism | Create a neumorphic UI with soft 3D effects. Use light pastels, rounded corners (12-16px), subtle soft shadows (multiple layers), no hard lines, monochromatic color scheme with light/dark variations. Embossed/debossed effect on interactive elements. | border-radius: 12-16px, box-shadow: -5px -5px 15px rgba(0,0,0,0.1), 5px 5px 15px rgba(255,255,255,0.8), background: linear-gradient(145deg, color1, color2), transform: scale on press | ☐ Rounded corners 12-16px consistent, ☐ Multiple shadow layers (2-3), ☐ Pastel color verified, ☐ Monochromatic palette checked, ☐ Press animation smooth 150ms | --border-radius: 14px, --shadow-soft-1: -5px -5px 15px, --shadow-soft-2: 5px 5px 15px, --color-light: #F5F5F5, --color-primary: single pastel |
+| 3 | Glassmorphism | Design a glassmorphic interface with frosted glass effect. Use backdrop blur (10-20px), translucent overlays (rgba 10-30% opacity), vibrant background colors, subtle borders, light source reflection, layered depth. Perfect for modern overlays and cards. | backdrop-filter: blur(15px), background: rgba(255, 255, 255, 0.15), border: 1px solid rgba(255,255,255,0.2), -webkit-backdrop-filter: blur(15px), z-index layering for depth | ☐ Backdrop-filter blur 10-20px, ☐ Translucent white 15-30% opacity, ☐ Subtle border 1px light, ☐ Vibrant background verified, ☐ Text contrast 4.5:1 checked | --blur-amount: 15px, --glass-opacity: 0.15, --border-color: rgba(255,255,255,0.2), --background: vibrant color, --text-color: light/dark based on BG |
+| 4 | Brutalism | Create a brutalist design with raw, unpolished, stark aesthetic. Use pure primary colors (red, blue, yellow), black & white, no smooth transitions (instant), sharp corners, bold large typography, visible grid lines, default system fonts, intentional 'broken' design elements. | border-radius: 0px, transition: none or 0s, font-family: system-ui or monospace, font-weight: 700+, border: visible 2-4px, colors: #FF0000, #0000FF, #FFFF00, #000000, #FFFFFF | ☐ No border-radius (0px), ☐ No transitions (instant), ☐ Bold typography (700+), ☐ Pure primary colors used, ☐ Visible grid/borders, ☐ Asymmetric layout intentional | --border-radius: 0px, --transition-duration: 0s, --font-weight: 700-900, --colors: primary only, --border-style: visible, --grid-visible: true |
+| 5 | 3D & Hyperrealism | Build an immersive 3D interface using realistic textures, 3D models (Three.js/Babylon.js), complex shadows, realistic lighting, parallax scrolling (3-5 layers), physics-based motion. Include skeuomorphic elements with tactile detail. | transform: translate3d, perspective: 1000px, WebGL canvas, Three.js/Babylon.js library, box-shadow: complex multi-layer, background: complex gradients, filter: drop-shadow() | ☐ WebGL/Three.js integrated, ☐ 3D models loaded, ☐ Parallax 3-5 layers, ☐ Realistic lighting verified, ☐ Complex shadows rendered, ☐ Physics animation smooth 300-400ms | --perspective: 1000px, --parallax-layers: 5, --lighting-intensity: realistic, --shadow-depth: 20-40%, --animation-duration: 300-400ms |
+| 6 | Vibrant & Block-based | Design an energetic, vibrant interface with bold block layouts, geometric shapes, high color contrast, large typography (32px+), animated background patterns, duotone effects. Perfect for startups and youth-focused apps. Use 4-6 contrasting colors from complementary/triadic schemes. | display: flex/grid with large gaps (48px+), font-size: 32px+, background: animated patterns (CSS), color: neon/vibrant colors, animation: continuous pattern movement | ☐ Block layout with 48px+ gaps, ☐ Large typography 32px+, ☐ 4-6 vibrant colors max, ☐ Animated patterns active, ☐ Scroll-snap enabled, ☐ High contrast verified (7:1+) | --block-gap: 48px, --typography-size: 32px+, --color-palette: 4-6 vibrant colors, --animation: continuous pattern, --contrast-ratio: 7:1+ |
+| 7 | Dark Mode (OLED) | Create an OLED-optimized dark interface with deep black (#000000), dark grey (#121212), midnight blue accents. Use minimal glow effects, vibrant neon accents (green, blue, gold, purple), high contrast text. Optimize for eye comfort and OLED power saving. | background: #000000 or #121212, color: #FFFFFF or #E0E0E0, text-shadow: 0 0 10px neon-color (sparingly), filter: brightness(0.8) if needed, color-scheme: dark | ☐ Deep black #000000 or #121212, ☐ Vibrant neon accents used, ☐ Text contrast 7:1+, ☐ Minimal glow effects, ☐ OLED power optimization, ☐ No white (#FFFFFF) background | --bg-black: #000000, --bg-dark-grey: #121212, --text-primary: #FFFFFF, --accent-neon: neon colors, --glow-effect: minimal, --oled-optimized: true |
+| 8 | Accessible & Ethical | Design with WCAG AAA compliance. Include: high contrast (7:1+), large text (16px+), keyboard navigation, screen reader compatibility, focus states visible (3-4px ring), semantic HTML, ARIA labels, skip links, reduced motion support (prefers-reduced-motion), 44x44px touch targets. | color-contrast: 7:1+, font-size: 16px+, outline: 3-4px on :focus-visible, aria-label, role attributes, @media (prefers-reduced-motion), touch-target: 44x44px, cursor: pointer | ☐ WCAG AAA verified, ☐ 7:1+ contrast checked, ☐ Keyboard navigation tested, ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ Semantic HTML used, ☐ Touch targets 44x44px | --contrast-ratio: 7:1, --font-size-min: 16px, --focus-ring: 3-4px, --touch-target: 44x44px, --wcag-level: AAA, --keyboard-accessible: true, --sr-tested: true |
+| 9 | Claymorphism | Design a playful, toy-like interface with soft 3D, chunky elements, bubbly aesthetic, rounded edges (16-24px), thick borders (3-4px), double shadows (inner + outer), pastel colors, smooth animations. Perfect for children's apps and creative tools. | border-radius: 16-24px, border: 3-4px solid, box-shadow: inset -2px -2px 8px, 4px 4px 8px, background: pastel-gradient, animation: soft bounce (cubic-bezier 0.34, 1.56) | ☐ Border-radius 16-24px, ☐ Thick borders 3-4px, ☐ Double shadows (inner+outer), ☐ Pastel colors used, ☐ Soft bounce animations, ☐ Playful interactions | --border-radius: 20px, --border-width: 3-4px, --shadow-inner: inset -2px -2px 8px, --shadow-outer: 4px 4px 8px, --color-palette: pastels, --animation: bounce |
+| 10 | Aurora UI | Create a vibrant gradient interface inspired by Northern Lights with mesh gradients, smooth color blends, flowing animations. Use complementary color pairs (blue-orange, purple-yellow), flowing background gradients, subtle continuous animations (8-12s loops), iridescent effects. | background: conic-gradient or radial-gradient with multiple stops, animation: @keyframes gradient (8-12s), background-size: 200% 200%, filter: saturate(1.2), blend-mode: screen or multiply | ☐ Mesh/flowing gradients applied, ☐ 8-12s animation loop, ☐ Complementary colors used, ☐ Smooth color transitions, ☐ Iridescent effect subtle, ☐ Text contrast verified | --gradient-colors: complementary pairs, --animation-duration: 8-12s, --blend-mode: screen, --color-saturation: 1.2, --effect: iridescent, --loop-smooth: true |
+| 11 | Retro-Futurism | Build a retro-futuristic (cyberpunk/vaporwave) interface with neon colors (blue, pink, cyan), deep black background, 80s aesthetic, CRT scanlines, glitch effects, neon glow text/borders, monospace fonts, geometric patterns. Use neon text-shadow and animated glitch effects. | color: neon colors (#0080FF, #FF006E, #00FFFF), text-shadow: 0 0 10px neon, background: #000 or #1A1A2E, font-family: monospace, animation: glitch (skew+offset), filter: hue-rotate | ☐ Neon colors used, ☐ CRT scanlines effect, ☐ Glitch animations active, ☐ Monospace font, ☐ Deep black background, ☐ Glow effects applied, ☐ 80s patterns present | --neon-colors: #0080FF #FF006E #00FFFF, --background: #000000, --font-family: monospace, --effect: glitch+glow, --scanline-opacity: 0.3, --crt-effect: true |
+| 12 | Flat Design | Create a flat, 2D interface with bold colors, no shadows/gradients, clean lines, simple geometric shapes, icon-heavy, typography-focused, minimal ornamentation. Use 4-6 solid, bright colors in a limited palette with high saturation. | box-shadow: none, background: solid color, border-radius: 0-4px, color: solid (no gradients), fill: solid, stroke: 1-2px, font: bold sans-serif, icons: simplified SVG | ☐ No shadows/gradients, ☐ 4-6 solid colors max, ☐ Clean lines consistent, ☐ Simple shapes used, ☐ Icon-heavy layout, ☐ High saturation colors, ☐ Fast loading verified | --shadow: none, --color-palette: 4-6 solid, --border-radius: 2px, --gradient: none, --icons: simplified SVG, --animation: minimal 150-200ms |
+| 13 | Skeuomorphism | Design a realistic, textured interface with 3D depth, real-world metaphors (leather, wood, metal), complex gradients (8-12 stops), realistic shadows, grain/texture overlays, tactile press animations. Perfect for premium/luxury products. | background: complex gradient (8-12 stops), box-shadow: realistic multi-layer, background-image: texture overlay (noise, grain), filter: drop-shadow, transform: scale on press (300-500ms) | ☐ Realistic textures applied, ☐ Complex gradients 8-12 stops, ☐ Multi-layer shadows, ☐ Texture overlays present, ☐ Tactile animations smooth, ☐ Depth effect pronounced | --gradient-stops: 8-12, --texture-overlay: noise+grain, --shadow-layers: 3+, --animation-duration: 300-500ms, --depth-effect: pronounced, --tactile: true |
+| 14 | Liquid Glass | Create a premium liquid glass effect with morphing shapes, flowing animations, chromatic aberration, iridescent gradients, smooth 400-600ms transitions. Use SVG morphing for shape changes, dynamic blur, smooth color transitions creating a fluid, premium feel. | animation: morphing SVG paths (400-600ms), backdrop-filter: blur + saturate, filter: hue-rotate + brightness, blend-mode: screen, background: iridescent gradient | ☐ Morphing animations 400-600ms, ☐ Chromatic aberration applied, ☐ Dynamic blur active, ☐ Iridescent gradients, ☐ Smooth color transitions, ☐ Premium feel achieved | --morph-duration: 400-600ms, --blur-amount: 15px, --chromatic-aberration: true, --iridescent: true, --blend-mode: screen, --smooth-transitions: true |
+| 15 | Motion-Driven | Build an animation-heavy interface with scroll-triggered animations, microinteractions, parallax scrolling (3-5 layers), smooth transitions (300-400ms), entrance animations, page transitions. Use Intersection Observer for scroll effects, transform for performance, GPU acceleration. | animation: @keyframes scroll-reveal, transform: translateY/X, Intersection Observer API, will-change: transform, scroll-behavior: smooth, animation-duration: 300-400ms | ☐ Scroll animations active, ☐ Parallax 3-5 layers, ☐ Entrance animations smooth, ☐ Page transitions fluid, ☐ GPU accelerated, ☐ Prefers-reduced-motion respected | --animation-duration: 300-400ms, --parallax-layers: 5, --scroll-behavior: smooth, --gpu-accelerated: true, --entrance-animation: true, --page-transition: smooth |
+| 16 | Micro-interactions | Design with delightful micro-interactions: small 50-100ms animations, gesture-based responses, tactile feedback, loading spinners, success/error states, subtle hover effects, haptic feedback triggers for mobile. Focus on responsive, contextual interactions. | animation: short 50-100ms, transition: hover states, @media (hover: hover) for desktop, :active for press, haptic-feedback CSS/API, loading animation smooth loop | ☐ Micro-animations 50-100ms, ☐ Gesture-responsive, ☐ Tactile feedback visual/haptic, ☐ Loading spinners smooth, ☐ Success/error states clear, ☐ Hover effects subtle | --micro-animation-duration: 50-100ms, --gesture-responsive: true, --haptic-feedback: true, --loading-animation: smooth, --state-feedback: success+error |
+| 17 | Inclusive Design | Design for universal accessibility: high contrast (7:1+), large text (16px+), keyboard-only navigation, screen reader optimization, WCAG AAA compliance, symbol-based color indicators (not color-only), haptic feedback, voice interaction support, reduced motion options. | aria-* attributes complete, role attributes semantic, focus-visible: 3-4px ring, color-contrast: 7:1+, @media (prefers-reduced-motion), alt text on all images, form labels properly associated | ☐ WCAG AAA verified, ☐ 7:1+ contrast all text, ☐ Keyboard accessible (Tab/Enter), ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ No color-only indicators, ☐ Haptic fallback | --contrast-ratio: 7:1, --font-size: 16px+, --keyboard-accessible: true, --sr-compatible: true, --wcag-level: AAA, --color-symbols: true, --haptic: enabled |
+| 18 | Zero Interface | Create a voice-first, gesture-based, AI-driven interface with minimal visible UI, progressive disclosure, voice recognition UI, gesture detection, AI predictions, smart suggestions, context-aware actions. Hide controls until needed. | voice-commands: Web Speech API, gesture-detection: touch events, AI-predictions: hidden by default (reveal on hover), progressive-disclosure: show on demand, minimal UI visible | ☐ Voice commands responsive, ☐ Gesture detection active, ☐ AI predictions hidden/revealed, ☐ Progressive disclosure working, ☐ Minimal visible UI, ☐ Smart suggestions contextual | --voice-ui: enabled, --gesture-detection: active, --ai-predictions: smart, --progressive-disclosure: true, --visible-ui: minimal, --context-aware: true |
+| 19 | Soft UI Evolution | Design evolved neumorphism with improved contrast (WCAG AA+), modern aesthetics, subtle depth, accessibility focus. Use soft shadows (softer than flat but clearer than pure neumorphism), better color hierarchy, improved focus states, modern 200-300ms animations. | box-shadow: softer multi-layer (0 2px 4px), background: improved contrast pastels, border-radius: 8-12px, animation: 200-300ms smooth, outline: 2-3px on focus, contrast: 4.5:1+ | ☐ Improved contrast AA/AAA, ☐ Soft shadows modern, ☐ Border-radius 8-12px, ☐ Animations 200-300ms, ☐ Focus states visible, ☐ Color hierarchy clear | --shadow-soft: modern blend, --border-radius: 10px, --animation-duration: 200-300ms, --contrast-ratio: 4.5:1+, --color-hierarchy: improved, --wcag-level: AA+ |
+| 20 | Bento Grids | Design a Bento Grid layout. Use: modular grid system, rounded corners (16-24px), different card sizes (1x1, 2x1, 2x2), card-based hierarchy, soft backgrounds (#F5F5F7), subtle borders, content-first, Apple-style aesthetic. | display: grid, grid-template-columns: repeat(auto-fit, minmax(...)), gap: 1rem, border-radius: 20px, background: #FFF, box-shadow: subtle | ☐ Grid layout (CSS Grid), ☐ Rounded corners 16-24px, ☐ Varied card spans, ☐ Content fits card size, ☐ Responsive re-flow, ☐ Apple-like aesthetic | --grid-gap: 20px, --card-radius: 24px, --card-bg: #FFFFFF, --page-bg: #F5F5F7, --shadow: soft |
+| 21 | Neubrutalism | Design a neubrutalist interface. Use: high contrast, hard black borders (3px+), bright pop colors, no blur, sharp or slightly rounded corners, bold typography, hard shadows (offset 4px 4px), raw aesthetic but functional. | border: 3px solid black, box-shadow: 5px 5px 0px black, colors: #FFDB58 #FF6B6B #4ECDC4, font-weight: 700, no gradients | ☐ Hard borders (2-4px), ☐ Hard offset shadows, ☐ High saturation colors, ☐ Bold typography, ☐ No blurs/gradients, ☐ Distinctive 'ugly-cute' look | --border-width: 3px, --shadow-offset: 4px, --shadow-color: #000, --colors: high saturation, --font: bold sans |
+| 22 | HUD / Sci-Fi FUI | Design a futuristic HUD (Heads Up Display) or FUI. Use: thin lines (1px), neon cyan/blue on black, technical markers, decorative brackets, data visualization, monospaced tech fonts, glowing elements, transparency. | border: 1px solid rgba(0,255,255,0.5), color: #00FFFF, background: transparent or rgba(0,0,0,0.8), font-family: monospace, text-shadow: 0 0 5px cyan | ☐ Fine lines 1px, ☐ Neon glow text/borders, ☐ Monospaced font, ☐ Dark/Transparent BG, ☐ Decorative tech markers, ☐ Holographic feel | --hud-color: #00FFFF, --bg-color: rgba(0,10,20,0.9), --line-width: 1px, --glow: 0 0 5px, --font: monospace |
+| 23 | Pixel Art | Design a pixel art inspired interface. Use: pixelated fonts, 8-bit or 16-bit aesthetic, sharp edges (image-rendering: pixelated), limited color palette, blocky UI elements, retro gaming feel. | font-family: 'Press Start 2P', image-rendering: pixelated, box-shadow: 4px 0 0 #000 (pixel border), no anti-aliasing | ☐ Pixelated fonts loaded, ☐ Images sharp (no blur), ☐ CSS box-shadow for pixel borders, ☐ Retro palette, ☐ Blocky layout | --pixel-size: 4px, --font: pixel font, --border-style: pixel-shadow, --anti-alias: none |

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

@@ -0,0 +1,58 @@
+---
+trigger: glob
+glob: 
+---
+
+| No | Category   | Guideline                        | Description                                      | Do                                                                 | Don't                                                        | Code Good                                                                 | Code Bad                                                                 | Severity   | Docs URL                                                                 |
+|----|------------|----------------------------------|--------------------------------------------------|--------------------------------------------------------------------|--------------------------------------------------------------|--------------------------------------------------------------------------|--------------------------------------------------------------------------|------------|-------------------------------------------------------------------------|
+| 1  | Components | Use functional components        | Hooks-based components are standard              | Functional components with hooks                                   | Class components                                          | const App = () => { }                                                    | class App extends Component                                              | Medium     | [React Native Docs](https://reactnative.dev/docs/intro-react)           |
+| 2  | Components | Keep components small            | Single responsibility principle                   | Split into smaller components                                      | Large monolithic components                                 | <Header /><Content /><Footer />                                           | 500+ line component                                                      | Medium     | -                                                                      |
+| 3  | Components | Use TypeScript                   | Type safety for props and state                   | TypeScript for new projects                                        | JavaScript without types                                   | const Button: FC<Props> = () => { }                                       | const Button = (props) => { }                                            | Medium     | -                                                                      |
+| 4  | Components | Colocate component files         | Keep related files together                      | Component folder with styles                                      | Flat structure                                            | components/Button/index.tsx styles.ts                                     | components/Button.tsx styles/button.ts                                    | Low        | -                                                                      |
+| 5  | Styling    | Use StyleSheet.create            | Optimized style objects                          | StyleSheet for all styles                                          | Inline style objects                                       | StyleSheet.create({ container: {} })                                      | style={{ margin: 10 }}                                                   | High       | [React Native Docs](https://reactnative.dev/docs/stylesheet)            |
+| 6  | Styling    | Avoid inline styles              | Prevent object recreation                        | Styles in StyleSheet                                              | Inline style objects in render                             | style={styles.container}                                                  | "style={{ margin: 10, padding: 5 }}"                                      | Medium     | -                                                                      |
+| 7  | Styling    | Use flexbox for layout           | React Native uses flexbox                        | flexDirection alignItems justifyContent                            | Absolute positioning everywhere                            | flexDirection: 'row'                                                      | position: 'absolute' everywhere                                           | Medium     | [React Native Docs](https://reactnative.dev/docs/flexbox)               |
+| 8  | Styling    | Handle platform differences      | Platform-specific styles                         | Platform.select or .ios/.android files                             | Same styles for both platforms                             | "Platform.select({ ios: {}, android: {} })"                               | Hardcoded iOS values                                                     | Medium     | [React Native Docs](https://reactnative.dev/docs/platform-specific-code) |
+| 9  | Styling    | Use responsive dimensions        | Scale for different screens                      | Dimensions or useWindowDimensions                                  | Fixed pixel values                                        | useWindowDimensions()                                                     | width: 375                                                               | Medium     | -                                                                      |
+| 10 | Navigation | Use React Navigation             | Standard navigation library                      | React Navigation for routing                                       | Manual navigation management                               | createStackNavigator()                                                       | Custom navigation state                                                  | Medium     | [React Navigation](https://reactnavigation.org/)                        |
+| 11 | Navigation | Type navigation params           | Type-safe navigation                             | Typed navigation props                                             | Untyped navigation                                        | "navigation.navigate<RootStackParamList>('Home', { id })"                 | "navigation.navigate('Home', { id })"                                     | Medium     | -                                                                      |
+| 12 | Navigation | Use deep linking                 | Support URL-based navigation                     | Configure linking prop                                             | No deep link support                                       | linking: { prefixes: [] }                                                | No linking configuration                                                 | Medium     | [React Navigation Docs](https://reactnavigation.org/docs/deep-linking/) |
+| 13 | Navigation | Handle back button               | Android back button handling                     | useFocusEffect with BackHandler                                    | Ignore back button                                        | BackHandler.addEventListener                                              | No back handler                                                          | High       | -                                                                      |
+| 14 | State      | Use useState for local state     | Simple component state                           | useState for UI state                                              | Class component state                                      | "const [count, setCount] = useState(0)"                                   | this.state = { count: 0 }                                                | Medium     | -                                                                      |
+| 15 | State      | Use useReducer for complex state | Complex state logic                              | useReducer for related state                                       | Multiple useState for related values                       | useReducer(reducer initialState)                                          | 5+ useState calls                                                        | Medium     | -                                                                      |
+| 16 | State      | Use context sparingly            | Context for global state                         | Context for theme auth locale                                      | Context for frequently changing data                       | ThemeContext for app theme                                                | Context for list item data                                               | Medium     | -                                                                      |
+| 17 | State      | Consider Zustand or Redux        | External state management                        | Zustand for simple Redux for complex                               | useState for global state                                  | create((set) => ({ }))                                                   | Prop drilling global state                                               | Medium     | -                                                                      |
+| 18 | Lists      | Use FlatList for long lists      | Virtualized list rendering                       | FlatList for 50+ items                                             | ScrollView with map                                        | <FlatList data={items} />                                                 | <ScrollView>{items.map()}</ScrollView>                                    | High       | [React Native Docs](https://reactnative.dev/docs/flatlist)             |
+| 19 | Lists      | Provide keyExtractor             | Unique keys for list items                       | keyExtractor with stable ID                                        | Index as key                                               | keyExtractor={(item) => item.id}                                          | "keyExtractor={(_, index) => index}"                                      | High       | -                                                                      |
+| 20 | Lists      | Optimize renderItem              | Memoize list item components                     | React.memo for list items                                          | Inline render function                                     | renderItem={({ item }) => <MemoizedItem item={item} />}                  | renderItem={({ item }) => <View>...</View>}                               | High       | -                                                                      |
+| 21 | Lists      | Use getItemLayout for fixed height | Skip measurement for performance                 | getItemLayout when height known                                    | Dynamic measurement for fixed items                        | "getItemLayout={(_, index) => ({ length: 50, offset: 50 * index, index })}" | No getItemLayout for fixed height                                        | Medium     | -                                                                      |
+| 22 | Lists      | Implement windowSize             | Control render window                            | Smaller windowSize for memory                                      | Default windowSize for large lists                         | windowSize={5}                                                           | windowSize={21} for huge lists                                           | Medium     | -                                                                      |
+| 23 | Performance| Use React.memo                   | Prevent unnecessary re-renders                   | memo for pure components                                           | No memoization                                             | export default memo(MyComponent)                                          | export default MyComponent                                                | Medium     | -                                                                      |
+| 24 | Performance| Use useCallback for handlers     | Stable function references                       | useCallback for props                                              | New function on every render                               | "useCallback(() => {}, [deps])"                                           | () => handlePress()                                                      | Medium     | -                                                                      |
+| 25 | Performance| Use useMemo for expensive ops   | Cache expensive calculations                     | useMemo for heavy computations                                    | Recalculate every render                                   | "useMemo(() => expensive(), [deps])"                                      | const result = expensive()                                               | Medium     | -                                                                      |
+| 26 | Performance| Avoid anonymous functions in JSX | Prevent re-renders                               | Named handlers or useCallback                                      | Inline arrow functions                                     | onPress={handlePress}                                                     | onPress={() => doSomething()}                                             | Medium     | -                                                                      |
+| 27 | Performance| Use Hermes engine                | Improved startup and memory                      | Enable Hermes in build                                            | JavaScriptCore for new projects                            | hermes_enabled: true                                                      | hermes_enabled: false                                                    | Medium     | [React Native Docs](https://reactnative.dev/docs/hermes)               |
+| 28 | Images     | Use expo-image                   | Modern performant image component for React Native | "Use expo-image for caching, blurring, and performance"            | Use default Image for heavy lists or unmaintained libraries | <Image source={url} cachePolicy='memory-disk' /> (expo-image)             | <FastImage source={url} />                                               | Medium     | [Expo Image Docs](https://docs.expo.dev/versions/latest/sdk/image/)     |
+| 29 | Images     | Specify image dimensions         | Prevent layout shifts                            | width and height for remote images                                 | No dimensions for network images                           | <Image style={{ width: 100 height: 100 }} />                               | <Image source={{ uri }} /> no size                                        | High       | -                                                                      |
+| 30 | Images     | Use resizeMode                   | Control image scaling                            | resizeMode cover contain                                           | Stretch images                                             | "resizeMode=""cover"""                                                   | No resizeMode                                                            | Low        | -                                                                      |
+| 31 | Forms      | Use controlled inputs            | State-controlled form fields                     | value + onChangeText                                               | Uncontrolled inputs                                        | <TextInput value={text} onChangeText={setText} />                         | <TextInput defaultValue={text} />                                         | Medium     | -                                                                      |
+| 32 | Forms      | Handle keyboard                  | Manage keyboard visibility                       | KeyboardAvoidingView                                               | Content hidden by keyboard                                 | "<KeyboardAvoidingView behavior=""padding"">"                             | No keyboard handling                                                     | High       | [React Native Docs](https://reactnative.dev/docs/keyboardavoidingview)  |
+| 33 | Forms      | Use proper keyboard types        | Appropriate keyboard for input                   | keyboardType for input type                                        | Default keyboard for all                                   | "keyboardType=""email-address"""                                          | "keyboardType=""default"" for email"                                      | Low        | -                                                                      |
+| 34 | Touch      | Use Pressable                    | Modern touch handling                            | Pressable for touch interactions                                   | TouchableOpacity for new code                               | <Pressable onPress={} />                                                  | <TouchableOpacity onPress={} />                                           | Low        | [React Native Docs](https://reactnative.dev/docs/pressable)            |
+| 35 | Touch      | Provide touch feedback           | Visual feedback on press                         | Ripple or opacity change                                           | No feedback on press                                       | android_ripple={{ color: 'gray' }}                                        | No press feedback                                                        | Medium     | -                                                                      |
+| 36 | Touch      | Set hitSlop for small targets    | Increase touch area                              | hitSlop for icons and small buttons                                | Tiny touch targets                                         | hitSlop={{ top: 10 bottom: 10 }}                                         | 44x44 with no hitSlop                                                    | Medium     | -                                                                      |
+| 37 | Animation  | Use Reanimated                   | High-performance animations                      | react-native-reanimated                                            | Animated API for complex                                   | useSharedValue useAnimatedStyle                                           | Animated.timing for gesture                                              | Medium     | [Reanimated Docs](https://docs.swmansion.com/react-native-reanimated/)  |
+| 38 | Animation  | Run on UI thread                 | worklets for smooth animation                    | Run animations on UI thread                                        | JS thread animations                                       | runOnUI(() => {})                                                        | Animated on JS thread                                                    | High       | -                                                                      |
+| 39 | Animation  | Use gesture handler              | Native gesture recognition                       | react-native-gesture-handler                                       | JS-based gesture handling                                  | <GestureDetector>                                                        | <View onTouchMove={} />                                                  | Medium     | [Gesture Handler Docs](https://docs.swmansion.com/react-native-gesture-handler/) |
+| 40 | Async      | Handle loading states            | Show loading indicators                          | ActivityIndicator during load                                      | Empty screen during load                                   | {isLoading ? <ActivityIndicator /> : <Content />}                         | No loading state                                                         | Medium     | -                                                                      |
+| 41 | Async      | Handle errors gracefully         | Error boundaries and fallbacks                   | Error UI for failed requests                                       | Crash on error                                             | {error ? <ErrorView /> : <Content />}                                     | No error handling                                                        | High       | -                                                                      |
+| 42 | Async      | Cancel async operations          | Cleanup on unmount                                | AbortController or cleanup                                         | Memory leaks from async                                    | useEffect cleanup                                                        | No cleanup for subscriptions                                             | High       | -                                                                      |
+| 43 | Accessibility| Add accessibility labels       | Describe UI elements                             | accessibilityLabel for all interactive                             | Missing labels                                             | "accessibilityLabel=""Submit form"""                                      | <Pressable> without label                                                 | High       | [React Native Docs](https://reactnative.dev/docs/accessibility)        |
+| 44 | Accessibility| Use accessibility roles        | Semantic meaning                                 | accessibilityRole for elements                                     | Wrong roles                                                | "accessibilityRole=""button"""                                            | No role for button                                                       | Medium     | -                                                                      |
+| 45 | Accessibility| Support screen readers         | Test with TalkBack/VoiceOver                     | Test with screen readers                                           | Skip accessibility testing                                 | Regular TalkBack testing                                                  | No screen reader testing                                                 | High       | -                                                                      |
+| 46 | Testing    | Use React Native Testing Library | Component testing                                | render and fireEvent                                               | Enzyme or manual testing                                   | render(<Component />)                                                     | shallow(<Component />)                                                   | Medium     | [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) |
+| 47 | Testing    | Test on real devices             | Real device behavior                             | Test on iOS and Android devices                                    | Simulator only                                             | Device testing in CI                                                      | Simulator only testing                                                   | High       | -                                                                      |
+| 48 | Testing    | Use Detox for E2E                | End-to-end testing                               | Detox for critical flows                                           | Manual E2E testing                                         | detox test                                                                | Manual testing only                                                      | Medium     | [Detox Docs](https://wix.github.io/Detox/)                              |
+| 49 | Native     | Use native modules carefully     | Bridge has overhead                              | Batch native calls                                                 | Frequent bridge crossing                                   | Batch updates                                                            | Call native on every keystroke                                           | High       | -                                                                      |
+| 50 | Native     | Use Expo when possible           | Simplified development                           | Expo for standard features                                         | Bare RN for simple apps                                    | expo install package                                                      | react-native link package                                                | Low        | [Expo Docs](https://docs.expo.dev/)                                     |
+| 51 | Native     | Handle permissions               | Request permissions properly                     | Check and request permissions                                      | Assume permissions granted                                 | PermissionsAndroid.request()                                              | Access without permission check                                           | High       | [React Native Docs](https://reactnative.dev/docs/permissionsandroid)    |

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

@@ -0,0 +1,60 @@
+---
+trigger: glob
+glob: src/*tsx,src/*jsx
+---
+
+| No  | Category      | Guideline                                 | Description                                          | Do                                                   | Don't                                          | Code Good                                       | Code Bad                                          | Severity         | Docs URL                                                                                                                  |
+| --- | ------------- | ----------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------- | ----------------------------------------------- | ------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------- | --- |
+| 1   | State         | Use useState for local state              | Simple component state should use useState hook      | useState for form inputs, toggles, counters          | Class components this.state                    | `const [count, setCount] = useState(0)`         | `this.state = { count: 0 }`                       | Medium           | [useState](https://react.dev/reference/react/useState)                                                                    |
+| 2   | State         | Lift state up when needed                 | Share state between siblings by lifting to parent    | Lift shared state to common ancestor                 | Prop drilling through many levels              | Parent holds state, passes down                 | Deep prop chains                                  | Medium           | [Sharing State](https://react.dev/learn/sharing-state-between-components)                                                 |
+| 3   | State         | Use useReducer for complex state          | Complex state logic benefits from reducer pattern    | useReducer for state with multiple sub-values        | Multiple useState for related values           | useReducer with action types                    | 5+ useState calls that update together            | Medium           | [useReducer](https://react.dev/reference/react/useReducer)                                                                |
+| 4   | State         | Avoid unnecessary state                   | Derive values from existing state when possible      | Compute derived values in render                     | Store derivable values in state                | `const total = items.reduce(...)`               | `const [total, setTotal] = useState(0)`           | High             | [Choosing State Structure](https://react.dev/learn/choosing-the-state-structure)                                          |
+| 5   | State         | Initialize state lazily                   | Use function form for expensive initial state        | useState(() => computeExpensive())                   | useState(computeExpensive())                   | useState(() => JSON.parse(data))                | useState(JSON.parse(data))                        | Medium           | [Avoiding Recreating Initial State](https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state)     |
+| 6   | Effects       | Clean up effects                          | Return cleanup function for subscriptions, timers    | Return cleanup function in useEffect                 | No cleanup for subscriptions                   | `useEffect(() => { sub(); return unsub; })`     | `useEffect(() => { subscribe(); })`               | High             | [Connecting to External Systems](https://react.dev/reference/react/useEffect#connecting-to-an-external-system)            |
+| 7   | Effects       | Specify dependencies correctly            | Include all values used inside effect in deps array  | All referenced values in dependency array            | Empty deps with external references            | `[value] when using value in effect`            | `[] when using props/state in effect`             | High             | [Specifying Reactive Dependencies](https://react.dev/reference/react/useEffect#specifying-reactive-dependencies)          |
+| 8   | Effects       | Avoid unnecessary effects                 | Don't use effects for transforming data or events    | Transform data during render, handle events directly | useEffect for derived state or event handling  | `const filtered = items.filter(...)`            | `useEffect(() => setFiltered(items.filter(...)))` | High             | [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)                                      |
+| 9   | Effects       | Use refs for non-reactive values          | Store values that don't trigger re-renders in refs   | useRef for interval IDs, DOM elements                | useState for values that don't need render     | `const intervalRef = useRef(null)`              | `const [intervalId, setIntervalId] = useState()`  | Medium           | [useRef](https://react.dev/reference/react/useRef)                                                                        |
+| 10  | Rendering     | Use keys properly                         | Stable unique keys for list items                    | Use stable IDs as keys                               | Array index as key for dynamic lists           | `key={item.id}`                                 | `key={index}`                                     | High             | [Keeping List Items in Order](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key)               |
+| 11  | Rendering     | Memoize expensive calculations            | Use useMemo for costly computations                  | useMemo for expensive filtering/sorting              | Recalculate every render                       | `useMemo(() => expensive(), [deps])`            | `const result = expensiveCalc()`                  | Medium           | [useMemo](https://react.dev/reference/react/useMemo)                                                                      |
+| 12  | Rendering     | Memoize callbacks passed to children      | Use useCallback for functions passed as props        | useCallback for handlers passed to memoized children | New function reference every render            | `useCallback(() => {}, [deps])`                 | `const handler = () => {}`                        | Medium           | [useCallback](https://react.dev/reference/react/useCallback)                                                              |
+| 13  | Rendering     | Use React.memo wisely                     | Wrap components that render often with same props    | memo for pure components with stable props           | memo everything or nothing                     | `memo(ExpensiveList)`                           | `memo(SimpleButton)`                              | Low              | [React.memo](https://react.dev/reference/react/memo)                                                                      |
+| 14  | Rendering     | Avoid inline object/array creation in JSX | Create objects outside render or memoize             | Define style objects outside component               | Inline objects in props                        | `<div style={styles.container}>`                | `<div style={{ margin: 10 }}>`                    | Medium           |                                                                                                                           |
+| 15  | Components    | Keep components small and focused         | Single responsibility for each component             | One concern per component                            | Large multi-purpose components                 | `<UserAvatar /><UserName />`                    | `<UserCard />` with 500 lines                     | Medium           |                                                                                                                           |
+| 16  | Components    | Use composition over inheritance          | Compose components using children and props          | Use children prop for flexibility                    | Inheritance hierarchies                        | `<Card>{content}</Card>`                        | `class SpecialCard extends Card`                  | Medium           | [Thinking in React](https://react.dev/learn/thinking-in-react)                                                            |
+| 17  | Components    | Colocate related code                     | Keep related components and hooks together           | Related files in same directory                      | Flat structure with many files                 | `components/User/UserCard.tsx`                  | `components/UserCard.tsx` + `hooks/useUser.ts`    | Low              |                                                                                                                           |
+| 18  | Components    | Use fragments to avoid extra DOM          | Fragment or <> for multiple elements without wrapper | <> for grouping without DOM node                     | Extra div wrappers                             | `<>` for grouping without DOM node              | `<div>{items.map(...)}</div>`                     | Low              | [React.Fragment](https://react.dev/reference/react/Fragment)                                                              |
+| 19  | Props         | Destructure props                         | Destructure props for cleaner component code         | Destructure in function signature                    | props.name props.value throughout              | `function User({ name, age })`                  | `function User(props)`                            | Low              |                                                                                                                           |
+| 20  | Props         | Provide default props values              | Use default parameters or defaultProps               | Default values in destructuring                      | Undefined checks throughout                    | `function Button({ size = 'md' })`              | `if (size === undefined) size = 'md'`             | Low              |                                                                                                                           |
+| 21  | Props         | Avoid prop drilling                       | Use context or composition for deeply nested data    | Context for global data, composition for UI          | Passing props through 5+ levels                | `<UserContext.Provider>`                        | `<A user={u}><B user={u}><C user={u}>`            | Medium           | [Passing Data Deeply](https://react.dev/learn/passing-data-deeply-with-context)                                           |
+| 22  | Props         | Validate props with TypeScript            | Use TypeScript interfaces for prop types             | interface Props { name: string }                     | PropTypes or no validation                     | `interface ButtonProps { onClick: () => void }` | `Button.propTypes = {}`                           | Medium           |                                                                                                                           |
+| 23  | Events        | Use synthetic events correctly            | React normalizes events across browsers              | e.preventDefault() e.stopPropagation()               | Access native event unnecessarily              | `onClick={(e) => e.preventDefault()}`           | `onClick={(e) => e.nativeEvent.preventDefault()}` | Low              | [React Event Object](https://react.dev/reference/react-dom/components/common#react-event-object)                          |
+| 24  | Events        | Avoid binding in render                   | Use arrow functions in class or hooks                | Arrow functions in functional components             | bind in render or constructor                  | `const handleClick = () => {}`                  | `this.handleClick.bind(this)`                     | Medium           |                                                                                                                           |
+| 25  | Events        | Pass event handlers not call results      | Pass function reference not invocation               | onClick={handleClick}                                | onClick={handleClick()} causing immediate call | `onClick={handleClick}`                         | `onClick={handleClick()}`                         | High             |                                                                                                                           |
+| 26  | Forms         | Controlled components for forms           | Use state to control form inputs                     | value + onChange for inputs                          | Uncontrolled inputs with refs                  | `<input value={val} onChange={setVal}>`         | `<input ref={inputRef}>`                          | Medium           | [Controlling an Input](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable) |
+| 27  | Forms         | Handle form submission properly           | Prevent default and handle in submit handler         | onSubmit with preventDefault                         | onClick on submit button only                  | `<form onSubmit={handleSubmit}>`                | `<button onClick={handleSubmit}>`                 | Medium           |                                                                                                                           |
+| 28  | Forms         | Debounce rapid input changes              | Debounce search/filter inputs                        | useDeferredValue or debounce for search              | Filter on every keystroke                      | `useDeferredValue(searchTerm)`                  | `useEffect filtering on every change`             | Medium           | [useDeferredValue](https://react.dev/reference/react/useDeferredValue)                                                    |
+| 29  | Hooks         | Follow rules of hooks                     | Only call hooks at top level and in React functions  | Hooks at component top level                         | Hooks in conditions, loops, or callbacks       | `const [x, setX] = useState()`                  | `if (cond) { const [x, setX] = useState() }`      | High             | [Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks)                                                        |
+| 30  | Hooks         | Custom hooks for reusable logic           | Extract shared stateful logic to custom hooks        | useCustomHook for reusable patterns                  | Duplicate hook logic across components         | `const { data } = useFetch(url)`                | Duplicate useEffect/useState in components        | Medium           | [Reusing Logic with Custom Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks)                                |
+| 31  | Hooks         | Name custom hooks with use prefix         | Custom hooks must start with use                     | useFetch useForm useAuth                             | fetchData or getData for hook                  | `function useFetch(url)`                        | `function fetchData(url)`                         | High             |                                                                                                                           |
+| 32  | Context       | Use context for global data               | Context for theme, auth, locale                      | Context for app-wide state                           | Context for frequently changing data           | `<ThemeContext.Provider>`                       | Context for form field values                     | Medium           | [Passing Data Deeply](https://react.dev/learn/passing-data-deeply-with-context)                                           |
+| 33  | Context       | Split contexts by concern                 | Separate contexts for different domains              | ThemeContext + AuthContext                           | One giant AppContext                           | `<ThemeProvider><AuthProvider>`                 | `<AppProvider value={{theme, user...}}>`          | Medium           |                                                                                                                           |
+| 34  | Context       | Memoize context values                    | Prevent unnecessary re-renders with useMemo          | useMemo for context value object                     | New object reference every render              | `value={useMemo(() => ({...}), [])}`            | `value={{ user, theme }}`                         | High             |                                                                                                                           |
+| 35  | Performance   | Use React DevTools Profiler               | Profile to identify performance bottlenecks          | Profile before optimizing                            | Optimize without measuring                     | React DevTools Profiler                         | Guessing at bottlenecks                           | Medium           | [React Developer Tools](https://react.dev/learn/react-developer-tools)                                                    |
+| 36  | Performance   | Lazy load components                      | Use React.lazy for code splitting                    | lazy() for routes and heavy components               | Import everything upfront                      | `const Page = lazy(() => import('./Page'))`     | `import Page from './Page'`                       | Medium           | [React.lazy](https://react.dev/reference/react/lazy)                                                                      |
+| 37  | Performance   | Virtualize long lists                     | Use windowing for lists over 100 items               | react-window or react-virtual                        | Render thousands of DOM nodes                  | `<VirtualizedList items={items}/>`              | `{items.map(i => <Item />)`                       | High             |                                                                                                                           |
+| 38  | Performance   | Batch state updates                       | React 18 auto-batches but be aware                   | Let React batch related updates                      | Manual batching with flushSync                 | `setA(1); setB(2); // batched`                  | `flushSync(() => setA(1))`                        | Low              | [Queueing a Series of State Updates](https://react.dev/learn/queueing-a-series-of-state-updates)                          |
+| 39  | ErrorHandling | Use error boundaries                      | Catch JavaScript errors in component tree            | ErrorBoundary wrapping sections                      | Let errors crash entire app                    | `<ErrorBoundary><App/></ErrorBoundary>`         | No error handling                                 | High             | [Error Boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)          |
+| 40  | ErrorHandling | Handle async errors                       | Catch errors in async operations                     | try/catch in async handlers                          | Unhandled promise rejections                   | `try { await fetch() } catch(e) {}`             | `await fetch() // no catch`                       | High             |                                                                                                                           |
+| 41  | Testing       | Test behavior not implementation          | Test what user sees and does                         | Test renders and interactions                        | Test internal state or methods                 | `expect(screen.getByText('Hello'))`             | `expect(component.state.name)`                    | Medium           | [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)                                    |
+| 42  | Testing       | Use testing-library queries               | Use accessible queries                               | getByRole getByLabelText                             | getByTestId for everything                     | `getByRole('button')`                           | `getByTestId('submit-btn')`                       | Medium           | [Queries](https://testing-library.com/docs/queries/about#priority)                                                        |
+| 43  | Accessibility | Use semantic HTML                         | Proper HTML elements for their purpose               | button for clicks, nav for navigation                | div with onClick for buttons                   | `<button onClick={...}>`                        | `<div onClick={...}>`                             | High             | [React DOM Components](https://react.dev/reference/react-dom/components#all-html-components)                              |
+| 44  | Accessibility | Manage focus properly                     | Handle focus for modals, dialogs                     | Focus trap in modals, return focus on close          | No focus management                            | `useEffect to focus input`                      | Modal without focus trap                          | High             |                                                                                                                           |
+| 45  | Accessibility | Announce dynamic content                  | Use ARIA live regions for updates                    | aria-live for dynamic updates                        | Silent updates to screen readers               | `<div aria-live="polite">{msg}</div>`           | `<div>{msg}</div>`                                | Medium           |                                                                                                                           |
+| 46  | Accessibility | Label form controls                       | Associate labels with inputs                         | htmlFor matching input id                            | Placeholder as only label                      | `<label htmlFor="email">Email</label>`          | `<input placeholder="Email"/>`                    | High             |                                                                                                                           |
+| 47  | TypeScript    | Type component props                      | Define interfaces for all props                      | interface Props with all prop types                  | any or missing types                           | `interface Props { name: string }`              | `function Component(props: any)`                  | High             |                                                                                                                           |
+| 48  | TypeScript    | Type state properly                       | Provide types for useState                           | useState<Type>() for complex state                   | Inferred any types                             | `useState<User                                  | null>(null)`                                      | `useState(null)` | Medium                                                                                                                    |     |
+| 49  | TypeScript    | Type event handlers                       | Use React event types                                | React.ChangeEvent<HTMLInputElement>                  | Generic Event type                             | `onChange: React.ChangeEvent<HTMLInputElement>` | `onChange: Event`                                 | Medium           |                                                                                                                           |
+| 50  | TypeScript    | Use generics for reusable components      | Generic components for flexible typing               | Generic props for list components                    | Union types for flexibility                    | `<List<T> items={T[]}>`                         | `<List items={any[]}>`                            | Medium           |                                                                                                                           |
+| 51  | Patterns      | Container/Presentational split            | Separate data logic from UI                          | Container fetches, presentational renders            | Mixed data and UI in one                       | `<UserContainer><UserView/></UserContainer>`    | `<User />` with fetch and render                  | Low              |                                                                                                                           |
+| 52  | Patterns      | Render props for flexibility              | Share code via render prop pattern                   | Render prop for customizable rendering               | Duplicate logic across components              | `<DataFetcher render={data => ...}/> `          | Copy paste fetch logic                            | Low              | [Render Props](https://react.dev/reference/react/cloneElement#passing-data-with-a-render-prop)                            |
+| 53  | Patterns      | Compound components                       | Related components sharing state                     | Tab + TabPanel sharing context                       | Prop drilling between related                  | `<Tabs><Tab/><TabPanel/></Tabs>`                | `<Tabs tabs={[]} panels={[...]}/> `               | Low              |                                                                                                                           |

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

@@ -0,0 +1,66 @@
+---
+trigger: always_on
+---
+
+| No | Category   | Guideline                        | Description                                      | Do                                                                 | Don't                                                        | Code Good                                                                 | Code Bad                                                                 | Severity   | Docs URL                                                                 |
+|----|------------|----------------------------------|--------------------------------------------------|--------------------------------------------------------------------|--------------------------------------------------------------|--------------------------------------------------------------------------|--------------------------------------------------------------------------|------------|-------------------------------------------------------------------------|
+| 1  | Setup      | Use CLI for installation         | Install components via shadcn CLI for proper setup | npx shadcn@latest add component-name                              | Manual copy-paste from docs                                 | npx shadcn@latest add button                                              | Copy component code manually                                              | High       | [shadcn CLI](https://ui.shadcn.com/docs/cli)                            |
+| 2  | Setup      | Initialize project properly      | Run init command to set up components.json and globals.css | npx shadcn@latest init before adding components                   | Skip init and add components directly                         | npx shadcn@latest init                                                    | npx shadcn@latest add button (without init)                               | High       | [shadcn Installation](https://ui.shadcn.com/docs/installation)          |
+| 3  | Setup      | Configure path aliases           | Set up proper import aliases in tsconfig and components.json | Use @/components/ui path aliases                                  | Relative imports like ../../components                        | import { Button } from "@/components/ui/button"                           | import { Button } from "../../components/ui/button"                       | Medium     | [shadcn Installation](https://ui.shadcn.com/docs/installation)          |
+| 4  | Theming    | Use CSS variables for colors     | Define colors as CSS variables in globals.css for theming | CSS variables in :root and .dark                                  | Hardcoded color values in components                         | bg-primary text-primary-foreground                                        | bg-blue-500 text-white                                                   | High       | [shadcn Theming](https://ui.shadcn.com/docs/theming)                    |
+| 5  | Theming    | Follow naming convention         | Use semantic color names with foreground pattern | primary/primary-foreground secondary/secondary-foreground         | Generic color names                                         | --primary --primary-foreground                                            | --blue --light-blue                                                      | Medium     | [shadcn Theming](https://ui.shadcn.com/docs/theming)                    |
+| 6  | Theming    | Support dark mode                | Include .dark class styles for all custom CSS | Define both :root and .dark color schemes                         | Only light mode colors                                      | .dark { --background: 240 10% 3.9%; }                                     | No .dark class styles                                                     | High       | [shadcn Dark Mode](https://ui.shadcn.com/docs/dark-mode)                |
+| 7  | Components | Use component variants           | Leverage cva variants for consistent styling | Use variant prop for different styles                             | Inline conditional classes                                   | <Button variant="destructive">                                            | <Button className={isError ? "bg-red-500" : "bg-blue-500"}>                | Medium     | [shadcn Button](https://ui.shadcn.com/docs/components/button)           |
+| 8  | Components | Compose with className           | Add custom classes via className prop for overrides | Extend with className for one-off customizations                  | Modify component source directly                            | <Button className="w-full">                                               | Edit button.tsx to add w-full                                             | Medium     | [shadcn Button](https://ui.shadcn.com/docs/components/button)           |
+| 9  | Components | Use size variants consistently   | Apply size prop for consistent sizing across components | size="sm" size="lg" for sizing                                     | Mix size classes inconsistently                              | <Button size="lg">                                                       | <Button className="text-lg px-8 py-4">                                     | Medium     | [shadcn Button](https://ui.shadcn.com/docs/components/button)           |
+| 10 | Components | Prefer compound components       | Use provided sub-components for complex UI | Card + CardHeader + CardContent pattern                           | Single component with many props                             | <Card><CardHeader><CardTitle>                                             | <Card title="x" content="y" footer="z">                                   | Medium     | [shadcn Card](https://ui.shadcn.com/docs/components/card)               |
+| 11 | Dialog     | Use Dialog for modal content     | Dialog component for overlay modal windows | Dialog for confirmations forms details                            | Alert for modal content                                      | <Dialog><DialogContent>                                                   | <Alert> styled as modal                                                   | High       | [shadcn Dialog](https://ui.shadcn.com/docs/components/dialog)           |
+| 12 | Dialog     | Handle dialog state properly     | Use open and onOpenChange for controlled dialogs | Controlled state with useState                                    | Uncontrolled with default open only                          | <Dialog open={open} onOpenChange={setOpen}>                               | <Dialog defaultOpen={true}>                                               | Medium     | [shadcn Dialog](https://ui.shadcn.com/docs/components/dialog)           |
+| 13 | Dialog     | Include proper dialog structure  | Use DialogHeader DialogTitle DialogDescription | Complete semantic structure                                       | Missing title or description                                 | <DialogHeader><DialogTitle><DialogDescription>                            | <DialogContent><p>Content</p></DialogContent>                             | High       | [shadcn Dialog](https://ui.shadcn.com/docs/components/dialog)           |
+| 14 | Sheet      | Use Sheet for side panels        | Sheet component for slide-out panels and drawers | Sheet for navigation filters settings                             | Dialog for side content                                      | <Sheet side="right">                                                      | <Dialog> with slide animation                                              | Medium     | [shadcn Sheet](https://ui.shadcn.com/docs/components/sheet)             |
+| 15 | Sheet      | Specify sheet side               | Set side prop for sheet slide direction | Explicit side="left" or side="right"                               | Default side without consideration                           | <Sheet><SheetContent side="left">                                         | <Sheet><SheetContent>                                                     | Low        | [shadcn Sheet](https://ui.shadcn.com/docs/components/sheet)             |
+| 16 | Form       | Use Form with react-hook-form    | Integrate Form component with react-hook-form for validation | useForm + Form + FormField pattern                                 | Custom form handling without Form                            | <Form {...form}><FormField control={form.control}>                         | <form onSubmit={handleSubmit}>                                            | High       | [shadcn Form](https://ui.shadcn.com/docs/components/form)               |
+| 17 | Form       | Use FormField for inputs         | Wrap inputs in FormField for proper labeling and errors | FormField + FormItem + FormLabel + FormControl                    | Input without FormField wrapper                              | <FormField><FormItem><FormLabel><FormControl><Input>                      | <Input onChange={...}>                                                    | High       | [shadcn Form](https://ui.shadcn.com/docs/components/form)               |
+| 18 | Form       | Display form messages            | Use FormMessage for validation error display | FormMessage after FormControl                                      | Custom error text without FormMessage                        | <FormControl><Input/></FormControl><FormMessage/>                         | <Input/>{error && <span>{error}</span>}                                   | Medium     | [shadcn Form](https://ui.shadcn.com/docs/components/form)               |
+| 19 | Form       | Use Zod for validation           | Define form schema with Zod for type-safe validation | zodResolver with form schema                                       | Manual validation logic                                      | zodResolver(formSchema)                                                   | validate: (values) => { if (!values.email) }                              | Medium     | [shadcn Form](https://ui.shadcn.com/docs/components/form)               |
+| 20 | Select     | Use Select for dropdowns         | Select component for option selection | Select for choosing from list                                     | Native select element                                        | <Select><SelectTrigger><SelectContent>                                    | <select><option>                                                          | Medium     | [shadcn Select](https://ui.shadcn.com/docs/components/select)           |
+| 21 | Select     | Structure Select properly        | Include Trigger Value Content and Items | Complete Select structure                                         | Missing SelectValue or SelectContent                         | <SelectTrigger><SelectValue/></SelectTrigger><SelectContent><SelectItem>  | <Select><option>                                                          | High       | [shadcn Select](https://ui.shadcn.com/docs/components/select)           |
+| 22 | Command    | Use Command for search           | Command component for searchable lists and palettes | Command for command palette search                                | Input with custom dropdown                                   | <Command><CommandInput><CommandList>                                      | <Input><div className="dropdown">                                         | Medium     | [shadcn Command](https://ui.shadcn.com/docs/components/command)         |
+| 23 | Command    | Group command items              | Use CommandGroup for categorized items | CommandGroup with heading for sections                            | Flat list without grouping                                   | <CommandGroup heading="Suggestions"><CommandItem>                         | <CommandItem> without groups                                              | Low        | [shadcn Command](https://ui.shadcn.com/docs/components/command)         |
+| 24 | Table      | Use Table for data display       | Table component for structured data | Table for tabular data display                                    | Div grid for table-like layouts                              | <Table><TableHeader><TableBody><TableRow>                                 | <div className="grid">                                                    | Medium     | [shadcn Table](https://ui.shadcn.com/docs/components/table)             |
+| 25 | Table      | Include proper table structure   | Use TableHeader TableBody TableRow TableCell | Semantic table structure                                          | Missing thead or tbody                                       | <TableHeader><TableRow><TableHead>                                        | <Table><TableRow> without header                                          | High       | [shadcn Table](https://ui.shadcn.com/docs/components/table)             |
+| 26 | DataTable  | Use DataTable for complex tables | Combine Table with TanStack Table for features | DataTable pattern for sorting filtering pagination                 | Custom table implementation                                  | useReactTable + Table components                                          | Custom sort filter pagination logic                                       | Medium     | [shadcn DataTable](https://ui.shadcn.com/docs/components/data-table)    |
+| 27 | Tabs       | Use Tabs for content switching   | Tabs component for tabbed interfaces | Tabs for related content sections                                 | Custom tab implementation                                    | <Tabs><TabsList><TabsTrigger><TabsContent>                                | <div onClick={() => setTab(...)}                                          | Medium     | [shadcn Tabs](https://ui.shadcn.com/docs/components/tabs)               |
+| 28 | Tabs       | Set default tab value            | Specify defaultValue for initial tab | defaultValue on Tabs component                                    | No default leaving first tab                                 | <Tabs defaultValue="account">                                             | <Tabs> without defaultValue                                               | Low        | [shadcn Tabs](https://ui.shadcn.com/docs/components/tabs)               |
+| 29 | Accordion  | Use Accordion for collapsible    | Accordion for expandable content sections | Accordion for FAQ settings panels                                  | Custom collapse implementation                               | <Accordion><AccordionItem><AccordionTrigger>                              | <div onClick={() => setOpen(!open)}>                                      | Medium     | [shadcn Accordion](https://ui.shadcn.com/docs/components/accordion)     |
+| 30 | Accordion  | Choose accordion type            | Use type="single" or type="multiple" appropriately | type="single" for one open type="multiple" for many               | Default type without consideration                           | <Accordion type="single" collapsible>                                     | <Accordion> without type                                                  | Low        | [shadcn Accordion](https://ui.shadcn.com/docs/components/accordion)     |
+| 31 | Toast      | Use Sonner for toasts            | Sonner integration for toast notifications | toast() from sonner for notifications                              | Custom toast implementation                                  | toast("Event created")                                                    | setShowToast(true)                                                        | Medium     | [shadcn Sonner](https://ui.shadcn.com/docs/components/sonner)           |
+| 32 | Toast      | Add Toaster to layout            | Include Toaster component in root layout | <Toaster /> in app layout                                          | Toaster in individual pages                                  | app/layout.tsx: <Toaster />                                               | page.tsx: <Toaster />                                                     | High       | [shadcn Sonner](https://ui.shadcn.com/docs/components/sonner)           |
+| 33 | Toast      | Use toast variants               | Apply toast.success toast.error for context | Semantic toast methods                                             | Generic toast for all messages                               | toast.success("Saved!") toast.error("Failed")                              | toast("Saved!") toast("Failed")                                           | Medium     | [shadcn Sonner](https://ui.shadcn.com/docs/components/sonner)           |
+| 34 | Popover    | Use Popover for floating content | Popover for dropdown menus and floating panels | Popover for contextual actions                                     | Absolute positioned divs                                     | <Popover><PopoverTrigger><PopoverContent>                                 | <div className="relative"><div className="absolute">                      | Medium     | [shadcn Popover](https://ui.shadcn.com/docs/components/popover)         |
+| 35 | Popover    | Handle popover alignment         | Use align and side props for positioning | Explicit alignment configuration                                   | Default alignment for all                                    | <PopoverContent align="start" side="bottom">                              | <PopoverContent>                                                          | Low        | [shadcn Popover](https://ui.shadcn.com/docs/components/popover)         |
+| 36 | DropdownMenu| Use DropdownMenu for actions    | DropdownMenu for action lists and context menus | DropdownMenu for user menu actions                                 | Popover for action lists                                      | <DropdownMenu><DropdownMenuTrigger><DropdownMenuContent>                  | <Popover> for menu actions                                                 | Medium     | [shadcn DropdownMenu](https://ui.shadcn.com/docs/components/dropdown-menu) |
+| 37 | DropdownMenu| Group menu items                 | Use DropdownMenuGroup and DropdownMenuSeparator | Organized menu with separators                                     | Flat list of items                                           | <DropdownMenuGroup><DropdownMenuItem><DropdownMenuSeparator>              | <DropdownMenuItem> without organization                                   | Low        | [shadcn DropdownMenu](https://ui.shadcn.com/docs/components/dropdown-menu) |
+| 38 | Tooltip    | Use Tooltip for hints            | Tooltip for icon buttons and truncated text | Tooltip for additional context                                     | Title attribute for tooltips                                 | <Tooltip><TooltipTrigger><TooltipContent>                                 | <button title="Delete">                                                   | Medium     | [shadcn Tooltip](https://ui.shadcn.com/docs/components/tooltip)         |
+| 39 | Tooltip    | Add TooltipProvider              | Wrap app or section in TooltipProvider | TooltipProvider at app level                                       | TooltipProvider per tooltip                                   | <TooltipProvider><App/></TooltipProvider>                                  | <Tooltip><TooltipProvider>                                                | High       | [shadcn Tooltip](https://ui.shadcn.com/docs/components/tooltip)         |
+| 40 | Skeleton   | Use Skeleton for loading         | Skeleton component for loading placeholders | Skeleton matching content layout                                   | Spinner for content loading                                  | <Skeleton className="h-4 w-[200px]"/>                                     | <Spinner/> for card loading                                               | Medium     | [shadcn Skeleton](https://ui.shadcn.com/docs/components/skeleton)       |
+| 41 | Skeleton   | Match skeleton dimensions        | Size skeleton to match loaded content | Skeleton same size as expected content                             | Generic skeleton size                                         | <Skeleton className="h-12 w-12 rounded-full"/>                            | <Skeleton/> without sizing                                                 | Medium     | [shadcn Skeleton](https://ui.shadcn.com/docs/components/skeleton)       |
+| 42 | AlertDialog| Use AlertDialog for confirms    | AlertDialog for destructive action confirmation | AlertDialog for delete confirmations                               | Dialog for confirmations                                     | <AlertDialog><AlertDialogTrigger><AlertDialogContent>                     | <Dialog> for delete confirmation                                           | High       | [shadcn AlertDialog](https://ui.shadcn.com/docs/components/alert-dialog) |
+| 43 | AlertDialog| Include action buttons          | Use AlertDialogAction and AlertDialogCancel | Standard confirm/cancel pattern                                    | Custom buttons in AlertDialog                                | <AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction>          | <Button>Cancel</Button><Button>Confirm</Button>                           | Medium     | [shadcn AlertDialog](https://ui.shadcn.com/docs/components/alert-dialog) |
+| 44 | Sidebar    | Use Sidebar for navigation       | Sidebar component for app navigation | Sidebar for main app navigation                                    | Custom sidebar implementation                                | <SidebarProvider><Sidebar><SidebarContent>                                | <div className="w-64 fixed">                                              | Medium     | [shadcn Sidebar](https://ui.shadcn.com/docs/components/sidebar)         |
+| 45 | Sidebar    | Wrap in SidebarProvider          | Use SidebarProvider for sidebar state management | SidebarProvider at layout level                                    | Sidebar without provider                                     | <SidebarProvider><Sidebar></SidebarProvider>                              | <Sidebar> without provider                                                | High       | [shadcn Sidebar](https://ui.shadcn.com/docs/components/sidebar)         |
+| 46 | Sidebar    | Use SidebarTrigger               | Include SidebarTrigger for mobile toggle | SidebarTrigger for responsive toggle                               | Custom toggle button                                         | <SidebarTrigger/>                                                         | <Button onClick={() => toggleSidebar()}>                                  | Medium     | [shadcn Sidebar](https://ui.shadcn.com/docs/components/sidebar)         |
+| 47 | Chart      | Use Chart for data viz           | Chart component with Recharts integration | Chart component for dashboards                                     | Direct Recharts without wrapper                              | <ChartContainer config={chartConfig}>                                     | <ResponsiveContainer><BarChart>                                           | Medium     | [shadcn Chart](https://ui.shadcn.com/docs/components/chart)             |
+| 48 | Chart      | Define chart config              | Create chartConfig for consistent theming | chartConfig with color definitions                                 | Inline colors in charts                                       | { desktop: { label: "Desktop", color: "#2563eb" } }                       | <Bar fill="#2563eb"/>                                                     | Medium     | [shadcn Chart](https://ui.shadcn.com/docs/components/chart)             |
+| 49 | Chart      | Use ChartTooltip                 | Apply ChartTooltip for interactive charts | ChartTooltip with ChartTooltipContent                              | Recharts Tooltip directly                                    | <ChartTooltip content={<ChartTooltipContent/>}/>                          | <Tooltip/> from recharts                                                  | Low        | [shadcn Chart](https://ui.shadcn.com/docs/components/chart)             |
+| 50 | Blocks     | Use blocks for scaffolding       | Start from shadcn blocks for common layouts | npx shadcn@latest add dashboard-01                                 | Build dashboard from scratch                                 | npx shadcn@latest add login-01                                            | Custom login page from scratch                                            | Medium     | [shadcn Blocks](https://ui.shadcn.com/blocks)                           |
+| 51 | Blocks     | Customize block components       | Modify copied block code to fit needs | Edit block files after installation                                | Use blocks without modification                               | Customize dashboard-01 layout                                             | Use dashboard-01 as-is                                                    | Low        | [shadcn Blocks](https://ui.shadcn.com/blocks)                           |
+| 52 | A11y       | Use semantic components          | Shadcn components have built-in ARIA | Rely on component accessibility                                    | Override ARIA attributes                                     | <Button> has button role                                                  | <div role="button">                                                       | High       | [shadcn Button](https://ui.shadcn.com/docs/components/button)           |
+| 53 | A11y       | Maintain focus management        | Dialog Sheet handle focus automatically | Let components manage focus                                        | Custom focus handling                                         | <Dialog> traps focus                                                      | document.querySelector().focus()                                           | High       | [shadcn Dialog](https://ui.shadcn.com/docs/components/dialog)           |
+| 54 | A11y       | Provide labels                   | Use FormLabel and aria-label appropriately | FormLabel for form inputs                                          | Placeholder as only label                                     | <FormLabel>Email</FormLabel><Input/>                                       | <Input placeholder="Email"/>                                               | High       | [shadcn Form](https://ui.shadcn.com/docs/components/form)               |
+| 55 | Performance| Import components individually  | Import only needed components | Named imports from component files                                 | Import all from index                                        | import { Button } from "@/components/ui/button"                           | import { Button Card Dialog } from "@/components/ui"                       | Medium     | -                                                                      |
+| 56 | Performance| Lazy load dialogs                | Dynamic import for heavy dialog content | React.lazy for dialog content                                     | Import all dialogs upfront                                   | const HeavyContent = lazy(() => import('./Heavy'))                        | import HeavyContent from './Heavy'                                        | Medium     | -                                                                      |
+| 57 | Customization| Extend variants with cva       | Add new variants using class-variance-authority | Extend buttonVariants for new styles                               | Inline classes for variants                                  | variants: { size: { xl: "h-14 px-8" } }                                   | className="h-14 px-8"                                                     | Medium     | [shadcn Button](https://ui.shadcn.com/docs/components/button)           |
+| 58 | Customization| Create custom components       | Build new components following shadcn patterns | Use cn() and cva for custom components                             | Different patterns for custom                                 | const Custom = ({ className }) => <div className={cn("base", className)}> | const Custom = ({ style }) => <div style={style}>                         | Medium     | -                                                                      |
+| 59 | Patterns   | Use asChild for composition      | asChild prop for component composition | Slot pattern with asChild                                         | Wrapper divs for composition                                 | <Button asChild><Link href="/">                                           | <Button><Link href="/"></Link></Button>                                    | Medium     | [shadcn Button](https://ui.shadcn.com/docs/components/button)           |
+| 60 | Patterns   | Combine with React Hook Form     | Form + useForm for complete forms | RHF Controller with shadcn inputs                                  | Custom form state management                                 | <FormField control={form.control} name="email">                           | <Input value={email} onChange={(e) => setEmail(e.target.value)}           | High       | [shadcn Form](https://ui.shadcn.com/docs/components/form)               |