codymaster 4.1.3 → 4.3.0

package/skills/cm-ux-master/data/products.csv

@@ -0,0 +1,97 @@
+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/skills/cm-ux-master/data/react-performance.csv

@@ -0,0 +1,45 @@
+No,Category,Issue,Keywords,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
+1,Async Waterfall,Defer Await,async await defer branch,React/Next.js,Move await into branches where actually used to avoid blocking unused code paths,Move await operations into branches where they're needed,Await at top of function blocking all branches,"if (skip) return { skipped: true }; const data = await fetch()","const data = await fetch(); if (skip) return { skipped: true }",Critical
+2,Async Waterfall,Promise.all Parallel,promise all parallel concurrent,React/Next.js,Execute independent async operations concurrently using Promise.all(),Use Promise.all() for independent operations,Sequential await for independent operations,"const [user, posts] = await Promise.all([fetchUser(), fetchPosts()])","const user = await fetchUser(); const posts = await fetchPosts()",Critical
+3,Async Waterfall,Dependency Parallelization,better-all dependency parallel,React/Next.js,Use better-all for operations with partial dependencies to maximize parallelism,Use better-all to start each task at earliest possible moment,Wait for unrelated data before starting dependent fetch,"await all({ user() {}, config() {}, profile() { return fetch((await this.$.user).id) } })","const [user, config] = await Promise.all([...]); const profile = await fetchProfile(user.id)",Critical
+4,Async Waterfall,API Route Optimization,api route waterfall promise,React/Next.js,In API routes start independent operations immediately even if not awaited yet,Start promises early and await late,Sequential awaits in API handlers,"const sessionP = auth(); const configP = fetchConfig(); const session = await sessionP","const session = await auth(); const config = await fetchConfig()",Critical
+5,Async Waterfall,Suspense Boundaries,suspense streaming boundary,React/Next.js,Use Suspense to show wrapper UI faster while data loads,Wrap async components in Suspense boundaries,Await data blocking entire page render,"<Suspense fallback={<Skeleton />}><DataDisplay /></Suspense>","const data = await fetchData(); return <DataDisplay data={data} />",High
+6,Bundle Size,Barrel Imports,barrel import direct path,React/Next.js,Import directly from source files instead of barrel files to avoid loading unused modules,Import directly from source path,Import from barrel/index files,"import Check from 'lucide-react/dist/esm/icons/check'","import { Check } from 'lucide-react'",Critical
+7,Bundle Size,Dynamic Imports,dynamic import lazy next,React/Next.js,Use next/dynamic to lazy-load large components not needed on initial render,Use dynamic() for heavy components,Import heavy components at top level,"const Monaco = dynamic(() => import('./monaco'), { ssr: false })","import { MonacoEditor } from './monaco-editor'",Critical
+8,Bundle Size,Defer Third Party,analytics defer third-party,React/Next.js,Load analytics and logging after hydration since they don't block interaction,Load non-critical scripts after hydration,Include analytics in main bundle,"const Analytics = dynamic(() => import('@vercel/analytics'), { ssr: false })","import { Analytics } from '@vercel/analytics/react'",Medium
+9,Bundle Size,Conditional Loading,conditional module lazy,React/Next.js,Load large data or modules only when a feature is activated,Dynamic import when feature enabled,Import large modules unconditionally,"useEffect(() => { if (enabled) import('./heavy.js') }, [enabled])","import { heavyData } from './heavy.js'",High
+10,Bundle Size,Preload Intent,preload hover focus intent,React/Next.js,Preload heavy bundles on hover/focus before they're needed,Preload on user intent signals,Load only on click,"onMouseEnter={() => import('./editor')}","onClick={() => import('./editor')}",Medium
+11,Server,React.cache Dedup,react cache deduplicate request,React/Next.js,Use React.cache() for server-side request deduplication within single request,Wrap data fetchers with cache(),Fetch same data multiple times in tree,"export const getUser = cache(async () => await db.user.find())","export async function getUser() { return await db.user.find() }",Medium
+12,Server,LRU Cache Cross-Request,lru cache cross request,React/Next.js,Use LRU cache for data shared across sequential requests,Use LRU for cross-request caching,Refetch same data on every request,"const cache = new LRUCache({ max: 1000, ttl: 5*60*1000 })","Always fetch from database",High
+13,Server,Minimize Serialization,serialization rsc boundary,React/Next.js,Only pass fields that client actually uses across RSC boundaries,Pass only needed fields to client components,Pass entire objects to client,"<Profile name={user.name} />","<Profile user={user} /> // 50 fields serialized",High
+14,Server,Parallel Fetching,parallel fetch component composition,React/Next.js,Restructure components to parallelize data fetching in RSC,Use component composition for parallel fetches,Sequential fetches in parent component,"<Header /><Sidebar /> // both fetch in parallel","const header = await fetchHeader(); return <><div>{header}</div><Sidebar /></>",Critical
+15,Server,After Non-blocking,after non-blocking logging,React/Next.js,Use Next.js after() to schedule work after response is sent,Use after() for logging/analytics,Block response for non-critical operations,"after(async () => { await logAction() }); return Response.json(data)","await logAction(); return Response.json(data)",Medium
+16,Client,SWR Deduplication,swr dedup cache revalidate,React/Next.js,Use SWR for automatic request deduplication and caching,Use useSWR for client data fetching,Manual fetch in useEffect,"const { data } = useSWR('/api/users', fetcher)","useEffect(() => { fetch('/api/users').then(setUsers) }, [])",Medium-High
+17,Client,Event Listener Dedup,event listener deduplicate global,React/Next.js,Share global event listeners across component instances,Use useSWRSubscription for shared listeners,Register listener per component instance,"useSWRSubscription('global-keydown', () => { window.addEventListener... })","useEffect(() => { window.addEventListener('keydown', handler) }, [])",Low
+18,Rerender,Defer State Reads,state read callback subscription,React/Next.js,Don't subscribe to state only used in callbacks,Read state on-demand in callbacks,Subscribe to state used only in handlers,"const handleClick = () => { const params = new URLSearchParams(location.search) }","const params = useSearchParams(); const handleClick = () => { params.get('ref') }",Medium
+19,Rerender,Memoized Components,memo extract expensive,React/Next.js,Extract expensive work into memoized components for early returns,Extract to memo() components,Compute expensive values before early return,"const UserAvatar = memo(({ user }) => ...); if (loading) return <Skeleton />","const avatar = useMemo(() => compute(user)); if (loading) return <Skeleton />",Medium
+20,Rerender,Narrow Dependencies,effect dependency primitive,React/Next.js,Specify primitive dependencies instead of objects in effects,Use primitive values in dependency arrays,Use object references as dependencies,"useEffect(() => { console.log(user.id) }, [user.id])","useEffect(() => { console.log(user.id) }, [user])",Low
+21,Rerender,Derived State,derived boolean subscription,React/Next.js,Subscribe to derived booleans instead of continuous values,Use derived boolean state,Subscribe to continuous values,"const isMobile = useMediaQuery('(max-width: 767px)')","const width = useWindowWidth(); const isMobile = width < 768",Medium
+22,Rerender,Functional setState,functional setstate callback,React/Next.js,Use functional setState updates for stable callbacks and no stale closures,Use functional form: setState(curr => ...),Reference state directly in setState,"setItems(curr => [...curr, newItem])","setItems([...items, newItem]) // items in deps",Medium
+23,Rerender,Lazy State Init,usestate lazy initialization,React/Next.js,Pass function to useState for expensive initial values,Use function form for expensive init,Compute expensive value directly,"useState(() => buildSearchIndex(items))","useState(buildSearchIndex(items)) // runs every render",Medium
+24,Rerender,Transitions,starttransition non-urgent,React/Next.js,Mark frequent non-urgent state updates as transitions,Use startTransition for non-urgent updates,Block UI on every state change,"startTransition(() => setScrollY(window.scrollY))","setScrollY(window.scrollY) // blocks on every scroll",Medium
+25,Rendering,SVG Animation Wrapper,svg animation wrapper div,React/Next.js,Wrap SVG in div and animate wrapper for hardware acceleration,Animate div wrapper around SVG,Animate SVG element directly,"<div class='animate-spin'><svg>...</svg></div>","<svg class='animate-spin'>...</svg>",Low
+26,Rendering,Content Visibility,content-visibility auto,React/Next.js,Apply content-visibility: auto to defer off-screen rendering,Use content-visibility for long lists,Render all list items immediately,".item { content-visibility: auto; contain-intrinsic-size: 0 80px }","Render 1000 items without optimization",High
+27,Rendering,Hoist Static JSX,hoist static jsx element,React/Next.js,Extract static JSX outside components to avoid re-creation,Hoist static elements to module scope,Create static elements inside components,"const skeleton = <div class='animate-pulse' />; function C() { return skeleton }","function C() { return <div class='animate-pulse' /> }",Low
+28,Rendering,Hydration No Flicker,hydration mismatch flicker,React/Next.js,Use inline script to set client-only data before hydration,Inject sync script for client-only values,Use useEffect causing flash,"<script dangerouslySetInnerHTML={{ __html: 'el.className = localStorage.theme' }} />","useEffect(() => setTheme(localStorage.theme), []) // flickers",Medium
+29,Rendering,Conditional Render,conditional render ternary,React/Next.js,Use ternary instead of && when condition can be 0 or NaN,Use explicit ternary for conditionals,Use && with potentially falsy numbers,"{count > 0 ? <Badge>{count}</Badge> : null}","{count && <Badge>{count}</Badge>} // renders '0'",Low
+30,Rendering,Activity Component,activity show hide preserve,React/Next.js,Use Activity component to preserve state/DOM for toggled components,Use Activity for expensive toggle components,Unmount/remount on visibility toggle,"<Activity mode={isOpen ? 'visible' : 'hidden'}><Menu /></Activity>","{isOpen && <Menu />} // loses state",Medium
+31,JS Perf,Batch DOM CSS,batch dom css reflow,React/Next.js,Group CSS changes via classes or cssText to minimize reflows,Use class toggle or cssText,Change styles one property at a time,"element.classList.add('highlighted')","el.style.width='100px'; el.style.height='200px'",Medium
+32,JS Perf,Index Map Lookup,map index lookup find,React/Next.js,Build Map for repeated lookups instead of multiple .find() calls,Build index Map for O(1) lookups,Use .find() in loops,"const byId = new Map(users.map(u => [u.id, u])); byId.get(id)","users.find(u => u.id === order.userId) // O(n) each time",Low-Medium
+33,JS Perf,Cache Property Access,cache property loop,React/Next.js,Cache object property lookups in hot paths,Cache values before loops,Access nested properties in loops,"const val = obj.config.settings.value; for (...) process(val)","for (...) process(obj.config.settings.value)",Low-Medium
+34,JS Perf,Cache Function Results,memoize cache function,React/Next.js,Use module-level Map to cache repeated function results,Use Map cache for repeated calls,Recompute same values repeatedly,"const cache = new Map(); if (cache.has(x)) return cache.get(x)","slugify(name) // called 100 times same input",Medium
+35,JS Perf,Cache Storage API,localstorage cache read,React/Next.js,Cache localStorage/sessionStorage reads in memory,Cache storage reads in Map,Read storage on every call,"if (!cache.has(key)) cache.set(key, localStorage.getItem(key))","localStorage.getItem('theme') // every call",Low-Medium
+36,JS Perf,Combine Iterations,combine filter map loop,React/Next.js,Combine multiple filter/map into single loop,Single loop for multiple categorizations,Chain multiple filter() calls,"for (u of users) { if (u.isAdmin) admins.push(u); if (u.isTester) testers.push(u) }","users.filter(admin); users.filter(tester); users.filter(inactive)",Low-Medium
+37,JS Perf,Length Check First,length check array compare,React/Next.js,Check array lengths before expensive comparisons,Early return if lengths differ,Always run expensive comparison,"if (a.length !== b.length) return true; // then compare","a.sort().join() !== b.sort().join() // even when lengths differ",Medium-High
+38,JS Perf,Early Return,early return exit function,React/Next.js,Return early when result is determined to skip processing,Return immediately on first error,Process all items then check errors,"for (u of users) { if (!u.email) return { error: 'Email required' } }","let hasError; for (...) { if (!email) hasError=true }; if (hasError)...",Low-Medium
+39,JS Perf,Hoist RegExp,regexp hoist module,React/Next.js,Don't create RegExp inside render - hoist or memoize,Hoist RegExp to module scope,Create RegExp every render,"const EMAIL_RE = /^[^@]+@[^@]+$/; function validate() { EMAIL_RE.test(x) }","function C() { const re = new RegExp(pattern); re.test(x) }",Low-Medium
+40,JS Perf,Loop Min Max,loop min max sort,React/Next.js,Use loop for min/max instead of sort - O(n) vs O(n log n),Single pass loop for min/max,Sort array to find min/max,"let max = arr[0]; for (x of arr) if (x > max) max = x","arr.sort((a,b) => b-a)[0] // O(n log n)",Low
+41,JS Perf,Set Map Lookups,set map includes has,React/Next.js,Use Set/Map for O(1) lookups instead of array.includes(),Convert to Set for membership checks,Use .includes() for repeated checks,"const allowed = new Set(['a','b']); allowed.has(id)","const allowed = ['a','b']; allowed.includes(id)",Low-Medium
+42,JS Perf,toSorted Immutable,tosorted sort immutable,React/Next.js,Use toSorted() instead of sort() to avoid mutating arrays,Use toSorted() for immutability,Mutate arrays with sort(),"users.toSorted((a,b) => a.name.localeCompare(b.name))","users.sort((a,b) => a.name.localeCompare(b.name)) // mutates",Medium-High
+43,Advanced,Event Handler Refs,useeffectevent ref handler,React/Next.js,Store callbacks in refs for stable effect subscriptions,Use useEffectEvent for stable handlers,Re-subscribe on every callback change,"const onEvent = useEffectEvent(handler); useEffect(() => { listen(onEvent) }, [])","useEffect(() => { listen(handler) }, [handler]) // re-subscribes",Low
+44,Advanced,useLatest Hook,uselatest ref callback,React/Next.js,Access latest values in callbacks without adding to dependency arrays,Use useLatest for fresh values in stable callbacks,Add callback to effect dependencies,"const cbRef = useLatest(cb); useEffect(() => { setTimeout(() => cbRef.current()) }, [])","useEffect(() => { setTimeout(() => cb()) }, [cb]) // re-runs",Low

package/skills/cm-ux-master/data/responsive.csv

@@ -0,0 +1,26 @@
+Category,Pattern,Keywords,Description,Do,Don't,Code_Good,Code_Bad,Severity,Breakpoints
+Breakpoints,Mobile-First Strategy,mobile first breakpoint min-width progressive,Start with mobile styles and progressively enhance for larger screens,Use min-width media queries ascending,Use max-width queries (desktop-first),"@media (min-width: 768px) { }","@media (max-width: 767px) { }",High,"320 375 390 414"
+Breakpoints,Standard Breakpoints,breakpoint standard width responsive,Use standard breakpoint values aligned with common devices,sm:640px md:768px lg:1024px xl:1280px 2xl:1536px,Arbitrary breakpoints like 847px or 1137px,"@media (min-width: 768px) { }","@media (min-width: 847px) { }",Medium,"640 768 1024 1280 1536"
+Breakpoints,Content-Based Breakpoints,content breakpoint natural flow,Set breakpoints where content naturally breaks rather than device widths,Break where content looks bad not at device widths,Only use device-specific widths,"@media (min-width: 45em) { /* content breaks here */ }","@media (min-width: 768px) { /* iPad width */ }",Medium,"varies"
+Container,Container Queries,container query component responsive cqw,Use container queries for component-level responsiveness,@container for components that live in different contexts,Media queries for component-internal layout,"@container (min-width: 400px) { .card { flex-direction: row; } }","@media (min-width: 768px) { .card { flex-direction: row; } }",High,"per container"
+Container,Container Query Units,cqw cqi container units size,Use container query units for fluid sizing within containers,cqw cqh cqi cqb for container-relative sizing,Fixed px values inside responsive containers,"font-size: clamp(1rem 3cqw 2rem);","font-size: 16px;",Medium,"per container"
+Typography,Fluid Typography,fluid typography clamp viewport responsive,Use clamp() for font sizes that scale smoothly between breakpoints,clamp(min preferred max) for all text sizes,Fixed font sizes with media query jumps,"font-size: clamp(1rem 2.5vw 2rem);","font-size: 16px; @media (min-width:768px) { font-size: 24px; }",High,"all"
+Typography,Viewport Units for Headings,viewport vw heading hero responsive scale,Use viewport units (with clamp) for large headings that scale,Combine vw with clamp for bounded scaling,Raw vw without min/max bounds,"font-size: clamp(2rem 5vw 4rem);","font-size: 5vw;",Medium,"all"
+Typography,Line Length Control,line length measure reading characters,Limit line length to 45-75 characters for readability,max-width on text containers (65ch ideal),Full-width text on large screens,"max-width: 65ch;","width: 100%; /* on large screens */",High,"1024+"
+Spacing,Fluid Spacing,fluid spacing clamp gap margin padding,Use fluid spacing that scales between breakpoints,clamp() for padding/margins/gaps,Fixed spacing jumps at breakpoints,"padding: clamp(1rem 3vw 3rem);","padding: 16px; @media (min-width:768px) { padding: 48px; }",Medium,"all"
+Spacing,Spacing Scale,spacing scale consistent rhythm,Use consistent spacing scale (4px/8px base) across breakpoints,Maintain proportional spacing ratios at all sizes,Random spacing values per breakpoint,"gap: clamp(0.5rem 2vw 2rem);","gap: 8px; @media { gap: 32px; }",Medium,"all"
+Layout,Grid Auto-Fit,grid auto-fit responsive column,Use CSS Grid auto-fit/auto-fill for automatic responsive columns,auto-fit with minmax for self-adapting grids,Fixed column counts changed at every breakpoint,"grid-template-columns: repeat(auto-fit minmax(280px 1fr));","grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",Medium,"all"
+Layout,Flexbox Wrap,flexbox wrap responsive flow,Use flex-wrap for natural content flow at any width,flex-wrap: wrap with min-width on children,Separate layouts per breakpoint for flow content,"display: flex; flex-wrap: wrap; > * { min-width: 250px; flex: 1; }","grid-cols-1 md:grid-cols-2 lg:grid-cols-3",Low,"all"
+Layout,Sidebar Responsive Pattern,sidebar responsive collapse hamburger,Handle sidebar visibility across screen sizes,Overlay/drawer on mobile + persistent on desktop,Hiding entire navigation on mobile,"@media (max-width: 768px) { .sidebar { position:fixed; transform:translateX(-100%); } }","display:none on mobile",High,"768"
+Layout,Stack to Horizontal,stack horizontal mobile desktop row column,Convert vertical stack to horizontal layout at wider viewports,flex-direction: column on mobile → row on desktop,Separate components for mobile and desktop,"flex-direction: column; @media (min-width:768px) { flex-direction: row; }","Two separate divs for mobile/desktop",Medium,"768"
+Images,Responsive Images,responsive images srcset sizes picture art direction,Serve appropriately sized images for each viewport,srcset + sizes for automatic resolution switching,Same large image at all sizes,"<img srcset='sm.jpg 480w md.jpg 768w lg.jpg 1200w' sizes='(max-width:768px) 100vw 50vw'>","<img src='large-4000px.jpg'>",High,"all"
+Images,Art Direction,art direction picture source media crop,Use different image crops/compositions for different viewports,<picture> with <source> for different aspect ratios,Same landscape photo cropped badly on mobile,"<picture><source media='(max-width:768px)' srcset='portrait.jpg'><img src='landscape.jpg'></picture>","Same image everywhere with object-fit:cover",Medium,"768"
+Images,Aspect Ratio Responsive,aspect-ratio responsive image video,Maintain aspect ratios across viewports,aspect-ratio property for consistent proportions,Hardcoded width/height that distorts on resize,"aspect-ratio: 16/9; width: 100%;","width: 640px; height: 360px;",Medium,"all"
+Touch,Touch Target Size,touch target size finger tap 44px 48px,Ensure interactive elements are large enough for touch (≥44×44px),min-height: 44px min-width: 44px on all interactive elements on mobile,Small buttons or links with <32px touch area,"min-height: 44px; min-width: 44px;","height: 24px; width: 24px; /* on mobile */",High,"<768"
+Touch,Touch vs Pointer,touch pointer hover media query,Differentiate touch and pointer input for interaction patterns,@media (hover: hover) for hover-dependent features,Relying on :hover for essential functionality,"@media (hover: hover) { .tooltip:hover { display:block } }",":hover { display:block } /* breaks touch */",High,"all"
+Touch,Touch Spacing,touch spacing gap clickable elements,Ensure adequate spacing between touch targets,min 8px gap between adjacent interactive elements,Tightly packed buttons/links on mobile,"gap: 12px; /* between touch targets */","gap: 2px; /* between buttons on mobile */",High,"<768"
+Orientation,Orientation Handling,orientation landscape portrait rotate,Handle both portrait and landscape orientations,Use orientation media query for layout adjustments,Locking to portrait-only in web apps,"@media (orientation: landscape) { .hero { height: 100vh; } }","/* No landscape handling */",Medium,"mobile tablet"
+Orientation,Viewport Height,viewport height dvh svh lvh 100vh,Use dynamic viewport height units to handle mobile browser chrome,dvh for elements that should fill visible area,100vh which doesn't account for mobile browser bars,"height: 100dvh;","height: 100vh; /* broken on mobile Safari */",High,"mobile"
+Device,Retina Display,retina hidpi device-pixel-ratio resolution,Serve higher resolution assets for retina/HiDPI displays,Use 2x/3x images for HiDPI or SVG for icons,1x raster images on retina screens,"@media (min-resolution: 2dppx) { background-image: url(hero@2x.png); }","/* Same 1x images everywhere */",Medium,"all"
+Device,Print Styles,print media stylesheet,Include print-specific styles for content pages,@media print for clean printable output,Ignoring print styles entirely,"@media print { nav footer .no-print { display:none; } body { font-size: 12pt; } }","/* No print styles */",Low,"desktop"
+Performance,CSS Containment,contain layout size paint performance,Use CSS containment for rendering performance,contain: layout style for isolated components,No containment on large pages with many elements,"contain: layout style;","/* No containment */",Medium,"all"

package/skills/cm-ux-master/data/semi-tokens.csv

@@ -0,0 +1,52 @@
+Variable,Category,Default,Description,Keywords
+--semi-color-primary,brand,#0077FA,Primary brand color for buttons, links, and interactive elements,primary brand accent action button
+--semi-color-primary-hover,brand,#0066D6,Primary color hover state (darker),primary hover interaction
+--semi-color-primary-active,brand,#0055B3,Primary color active/pressed state (darkest),primary active pressed
+--semi-color-primary-light-default,brand,#E6F0FF,Primary color light background variant,primary light background
+--semi-color-secondary,brand,#AAB2BF,Secondary brand color,secondary brand muted
+--semi-color-tertiary,brand,#C2C7CE,Tertiary brand color,tertiary brand subtle
+--semi-color-success,semantic,#00B42A,Success state color (green),success green positive complete
+--semi-color-success-hover,semantic,#009A24,Success hover state,success hover
+--semi-color-success-active,semantic,#00801E,Success active state,success active
+--semi-color-warning,semantic,#FF7D00,Warning state color (orange),warning orange caution alert
+--semi-color-warning-hover,semantic,#D66A00,Warning hover state,warning hover
+--semi-color-warning-active,semantic,#B35800,Warning active state,warning active
+--semi-color-danger,semantic,#F53F3F,Danger/error state color (red),danger error red destructive delete
+--semi-color-danger-hover,semantic,#CC3535,Danger hover state,danger hover
+--semi-color-danger-active,semantic,#A62C2C,Danger active state,danger active
+--semi-color-info,semantic,#0077FA,Info state color (blue),info blue information
+--semi-color-bg-0,surface,#F4F5F5,Application root background,background app surface root
+--semi-color-bg-1,surface,#FFFFFF,Card/panel background,background card panel white surface
+--semi-color-bg-2,surface,#FAFAFA,Elevated surface background,background elevated surface
+--semi-color-bg-3,surface,#F0F0F0,Inset/recessed background,background inset recessed input
+--semi-color-bg-4,surface,#C6C6C6,Disabled background,background disabled
+--semi-color-fill-0,fill,#FFFFFF,Fill color level 0,fill default white
+--semi-color-fill-1,fill,#F5F5F5,Fill color level 1,fill subtle
+--semi-color-fill-2,fill,#E8E8E8,Fill color level 2,fill medium
+--semi-color-text-0,text,#1C1F23,Title/heading text (darkest),text title heading primary dark
+--semi-color-text-1,text,#4E5969,Body text color,text body paragraph secondary
+--semi-color-text-2,text,#86909C,Muted/caption text,text muted caption tertiary light
+--semi-color-text-3,text,#C9CDD4,Placeholder text,text placeholder disabled
+--semi-color-link,text,#0077FA,Hyperlink text color,link anchor href text
+--semi-color-border,border,#E5E6EB,Default border color,border divider separator line
+--semi-color-border-transparent,border,transparent,Transparent border,border transparent
+--semi-font-family-regular,typography,"Inter\, -apple-system\, BlinkMacSystemFont\, sans-serif",Regular text font family,font family body text
+--semi-font-family-mono,typography,"SFMono-Regular\, Consolas\, monospace",Monospace code font,font family code mono
+--semi-font-size-small,typography,12px,Small text size,font size small caption
+--semi-font-size-regular,typography,14px,Regular body text size,font size regular body default
+--semi-font-size-header-6,typography,16px,H6 heading size,font size heading h6
+--semi-font-size-header-5,typography,18px,H5 heading size,font size heading h5
+--semi-font-size-header-4,typography,20px,H4 heading size,font size heading h4
+--semi-font-size-header-3,typography,24px,H3 heading size,font size heading h3
+--semi-font-size-header-2,typography,28px,H2 heading size,font size heading h2
+--semi-font-size-header-1,typography,32px,H1 heading size,font size heading h1
+--semi-border-radius-small,geometry,2px,Small border-radius (tags),border radius small tag
+--semi-border-radius-medium,geometry,4px,Medium border-radius (buttons),border radius medium button input
+--semi-border-radius-large,geometry,8px,Large border-radius (cards),border radius large card panel modal
+--semi-border-radius-full,geometry,9999px,Full border-radius (pills),border radius full pill round circle
+--semi-shadow-elevated,shadow,"0px 4px 14px rgba(0\, 0\, 0\, 0.1)",Elevated element shadow (cards),shadow elevated card raised
+--semi-shadow-raised,shadow,"0px 0px 1px rgba(0\, 0\, 0\, 0.3)\, 0px 1px 3px rgba(0\, 0\, 0\, 0.1)",Raised element shadow,shadow raised subtle
+--semi-spacing-extra-tight,spacing,4px,Extra tight spacing,spacing gap margin padding tight
+--semi-spacing-tight,spacing,8px,Tight spacing,spacing gap margin padding tight
+--semi-spacing-base,spacing,12px,Base spacing unit,spacing gap margin padding base
+--semi-spacing-loose,spacing,16px,Loose spacing,spacing gap margin padding loose

package/skills/cm-ux-master/data/stacks/angular.csv

@@ -0,0 +1,34 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Components,Use Standalone Components,Standalone components simplify module management and improve tree-shaking,@Component({ standalone: true }) for all new components,NgModule-based components for new code,@Component({ standalone: true imports: [CommonModule] }),@NgModule({ declarations: [MyComponent] }),High,https://angular.dev/guide/components/importing
+2,Components,Use Signals for Reactivity,Signals provide fine-grained reactivity and better performance,signal() computed() effect() for reactive state,BehaviorSubject for local component state,"count = signal(0); doubled = computed(() => this.count() * 2);","count$ = new BehaviorSubject(0);",High,https://angular.dev/guide/signals
+3,Components,Use input() and output() functions,Function-based inputs and outputs with better type safety,input() input.required() output() for component API,@Input() @Output() decorators,"name = input.required<string>(); clicked = output<void>();","@Input() name!: string; @Output() clicked = new EventEmitter();",Medium,https://angular.dev/guide/components/inputs
+4,Components,Use OnPush Change Detection,OnPush reduces unnecessary change detection cycles,changeDetection: ChangeDetectionStrategy.OnPush,Default change detection for all components,"@Component({ changeDetection: ChangeDetectionStrategy.OnPush })","@Component({}) /* Default change detection */",High,https://angular.dev/guide/components/advanced-configuration
+5,Components,Keep Templates Clean,Templates should be declarative with minimal logic,Move complex logic to computed signals or methods,Complex expressions in templates,"@if (isVisible()) { <div>Content</div> }","<div *ngIf='items.length > 0 && user.role === 'admin' && !loading'>",Medium,
+6,State,Use Signal Store (NgRx),NgRx SignalStore for scalable state management,SignalStore for shared state across components,Manual service-based stores without patterns,"const Store = signalStore(withState({ count: 0 }) withComputed(...))","@Injectable() class Store { private state = new BehaviorSubject(...) }",Medium,https://ngrx.io/guide/signals/signal-store
+7,State,Avoid Nested Subscriptions,Nested subscriptions cause memory leaks and complexity,Use RxJS operators to compose streams,subscribe inside subscribe,"this.http.get(url).pipe(switchMap(data => this.process(data)))","this.http.get(url).subscribe(data => { this.other.subscribe(...) })",High,
+8,State,Unsubscribe from Observables,Prevent memory leaks by cleaning up subscriptions,takeUntilDestroyed() or AsyncPipe in templates,Manual subscription without unsubscribe,"data$ = this.service.data$.pipe(takeUntilDestroyed());","this.service.data$.subscribe(d => this.data = d); /* no unsubscribe */",High,https://angular.dev/guide/components/lifecycle
+9,Routing,Use Lazy Loading,Lazy load routes to reduce initial bundle size,loadComponent or loadChildren for routes,Eagerly importing all route components,"{ path: 'admin' loadComponent: () => import('./admin') }","{ path: 'admin' component: AdminComponent } /* eager */",High,https://angular.dev/guide/routing/lazy-loading
+10,Routing,Use Route Guards,Protect routes with functional guards,canActivate canDeactivate as functions,Component-level access checks,"canActivate: [() => inject(AuthService).isLoggedIn()]","/* Check in component ngOnInit */",Medium,https://angular.dev/guide/routing/route-guards
+11,Routing,Use Router Input Binding,Bind route params directly to component inputs,Input binding for route params query params and data,ActivatedRoute snapshot params,"@Component(...) export class UserComponent { id = input<string>(); }","constructor(private route: ActivatedRoute) { this.id = route.snapshot.params['id'] }",Medium,https://angular.dev/guide/routing/router-reference
+12,Forms,Use Reactive Forms,Reactive forms provide better testability and control,FormBuilder and FormGroup for complex forms,Template-driven forms for complex validation,"form = this.fb.group({ email: ['' [Validators.required Validators.email]] })","<input [(ngModel)]='email' required> /* for complex forms */",Medium,https://angular.dev/guide/forms/reactive-forms
+13,Forms,Use Typed Forms,Strongly typed forms catch errors at compile time,FormControl<string> FormGroup<{...}>,Untyped form controls,"new FormControl<string>('hello')","new FormControl('hello') /* untyped */",Medium,https://angular.dev/guide/forms/typed-forms
+14,Forms,Validate on Blur,Validate fields when user leaves them not on every keystroke,updateOn: 'blur' for individual fields,Real-time validation on every change,"new FormControl('' { updateOn: 'blur' })","new FormControl('' { updateOn: 'change' }) /* aggressive */",Low,
+15,Performance,Use trackBy in @for,Track items by unique key for efficient list rendering,track item.id in @for loops,No tracking for dynamic lists,"@for (item of items; track item.id) { <div>{{item.name}}</div> }","@for (item of items; track $index) { ... } /* unstable */",High,https://angular.dev/guide/templates/control-flow
+16,Performance,Use Defer Blocks,Defer loading of heavy components until needed,@defer with on triggers for below-fold content,Loading everything eagerly,"@defer (on viewport) { <HeavyChart /> } @loading { <Spinner /> }","<app-heavy-chart></app-heavy-chart> /* always loaded */",Medium,https://angular.dev/guide/defer
+17,Performance,Avoid Zone Pollution,Keep async operations out of Zone.js when not needed,runOutsideAngular for non-UI async tasks,All async operations running in Zone,"this.ngZone.runOutsideAngular(() => { setInterval(...) })","setInterval(() => this.tick()) /* triggers CD */",Medium,
+18,Performance,Use Image Directive,Angular image directive for optimized loading,NgOptimizedImage for all images,Regular <img> tags without optimization,"<img ngSrc='hero.jpg' width='800' height='600' priority>","<img src='hero.jpg'> /* no optimization */",High,https://angular.dev/guide/image-optimization
+19,HTTP,Use HttpClient with Types,Type HTTP responses for safety,Generic type parameter on HTTP methods,Untyped HTTP responses,"this.http.get<User[]>('/api/users')","this.http.get('/api/users') /* any type */",Medium,https://angular.dev/guide/http
+20,HTTP,Handle Errors with catchError,Graceful error handling for HTTP requests,catchError operator with fallback,No error handling on HTTP calls,"this.http.get(url).pipe(catchError(() => of(fallback)))","this.http.get(url) /* no error handling */",High,
+21,HTTP,Use Interceptors,Centralize cross-cutting concerns for HTTP,Functional interceptors for auth logging retries,Repeating auth headers in every service,"export const authInterceptor: HttpInterceptorFn = (req next) => { ... }","/* Adding auth header in every service method */",Medium,https://angular.dev/guide/http/interceptors
+22,Testing,Use Component Harnesses,Material component harnesses for reliable tests,ComponentHarness for Material component testing,Direct DOM queries for Material components,"const button = await loader.getHarness(MatButtonHarness)","fixture.nativeElement.querySelector('button') /* fragile */",Medium,https://material.angular.io/cdk/test-harnesses/overview
+23,Testing,Use TestBed Properly,Configure TestBed with minimal providers,Override only what's needed for the test,Importing entire AppModule in tests,"TestBed.configureTestingModule({ imports: [ComponentUnderTest] })","TestBed.configureTestingModule({ imports: [AppModule] }) /* slow */",Medium,
+24,Testing,Test with Signals,Test signal-based components properly,Read signal values and verify computed reactions,Direct property access on signal-based state,"expect(component.count()).toBe(0)","expect(component.count).toBe(0) /* wrong */",Medium,
+25,Material,Use Angular Material 3,Material Design 3 components and theming,M3 theming with custom color schemes,Material 2 legacy components,"@use '@angular/material' as mat; $theme: mat.define-theme(...)","@use '~@angular/material/prebuilt-themes/indigo-pink.css'",Medium,https://material.angular.io/guide/theming
+26,Material,Use CDK for Custom Components,CDK provides unstyled building blocks,CDK overlays portals and a11y utilities,Building custom dialogs/tooltips from scratch,"import { OverlayModule } from '@angular/cdk/overlay'","/* Custom overlay implementation */",Medium,https://material.angular.io/cdk/categories
+27,SSR,Use Angular SSR,Server-side rendering for SEO and performance,@angular/ssr for server rendering,Client-only rendering for content sites,"ng add @angular/ssr","/* No SSR for public content pages */",Medium,https://angular.dev/guide/ssr
+28,SSR,Use Hydration,Client-side hydration for SSR pages,provideClientHydration() in bootstrap,Full client re-render after SSR,"provideClientHydration()","/* No hydration = layout shift */",High,
+29,Accessibility,Use ARIA Attributes,Proper ARIA for custom components,role aria-label aria-describedby on custom widgets,Custom interactive elements without ARIA,"<div role='button' aria-label='Close' tabindex='0'>","<div (click)='close()'> /* no a11y */",High,
+30,Accessibility,Keyboard Navigation,All interactive elements keyboard accessible,tabindex and keydown handlers on custom elements,Mouse-only interaction on custom components,"(keydown.enter)='select()' tabindex='0'","(click)='select()' /* keyboard inaccessible */",High,
+31,Architecture,Use Inject Function,Functional injection with inject(),inject() in components services and guards,Constructor injection for new code,"private http = inject(HttpClient)","constructor(private http: HttpClient) /* older pattern */",Low,https://angular.dev/guide/di
+32,Architecture,Feature-Based Structure,Organize by feature not by type,feature/ folder with component service routes,Separate components/ services/ models/ folders,"features/user/ (component service routes)","components/user.component services/user.service",Medium,
+33,Architecture,Use Barrel Exports,Public API via index.ts for features,Export public API from feature index.ts,Importing deep paths into feature internals,"import { UserComponent } from './features/user'","import { UserComponent } from './features/user/components/user.component'",Low,

package/skills/cm-ux-master/data/stacks/astro.csv

@@ -0,0 +1,54 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Architecture,Use Islands Architecture,Astro's partial hydration only loads JS for interactive components,Interactive components with client directives,Hydrate entire page like traditional SPA,<Counter client:load />,Everything as client component,High,https://docs.astro.build/en/concepts/islands/
+2,Architecture,Default to zero JS,Astro ships zero JS by default - add only when needed,Static components without client directive,Add client:load to everything,<Header /> (static),<Header client:load /> (unnecessary),High,https://docs.astro.build/en/basics/astro-components/
+3,Architecture,Choose right client directive,Different directives for different hydration timing,client:visible for below-fold client:idle for non-critical,client:load for everything,<Comments client:visible />,<Comments client:load />,Medium,https://docs.astro.build/en/reference/directives-reference/#client-directives
+4,Architecture,Use content collections,Type-safe content management for blogs docs,Content collections for structured content,Loose markdown files without schema,const posts = await getCollection('blog'),import.meta.glob('./posts/*.md'),High,https://docs.astro.build/en/guides/content-collections/
+5,Architecture,Define collection schemas,Zod schemas for content validation,Schema with required fields and types,No schema validation,"defineCollection({ schema: z.object({...}) })",defineCollection({}),High,https://docs.astro.build/en/guides/content-collections/#defining-a-collection-schema
+6,Routing,Use file-based routing,Create routes by adding .astro files in pages/,pages/ directory for routes,Manual route configuration,src/pages/about.astro,Custom router setup,Medium,https://docs.astro.build/en/basics/astro-pages/
+7,Routing,Dynamic routes with brackets,Use [param] for dynamic routes,Bracket notation for params,Query strings for dynamic content,pages/blog/[slug].astro,pages/blog.astro?slug=x,Medium,https://docs.astro.build/en/guides/routing/#dynamic-routes
+8,Routing,Use getStaticPaths for SSG,Generate static pages at build time,getStaticPaths for known dynamic routes,Fetch at runtime for static content,"export async function getStaticPaths() { return [...] }",No getStaticPaths with dynamic route,High,https://docs.astro.build/en/reference/api-reference/#getstaticpaths
+9,Routing,Enable SSR when needed,Server-side rendering for dynamic content,output: 'server' or 'hybrid' for dynamic,SSR for purely static sites,"export const prerender = false;",SSR for static blog,Medium,https://docs.astro.build/en/guides/server-side-rendering/
+10,Components,Keep .astro for static,Use .astro components for static content,Astro components for layout structure,React/Vue for static markup,<Layout><slot /></Layout>,<ReactLayout>{children}</ReactLayout>,High,
+11,Components,Use framework components for interactivity,React Vue Svelte for complex interactivity,Framework component with client directive,Astro component with inline scripts,<ReactCounter client:load />,<script> in .astro for complex state,Medium,https://docs.astro.build/en/guides/framework-components/
+12,Components,Pass data via props,Astro components receive props in frontmatter,Astro.props for component data,Global state for simple data,"const { title } = Astro.props;",Import global store,Low,https://docs.astro.build/en/basics/astro-components/#component-props
+13,Components,Use slots for composition,Named and default slots for flexible layouts,<slot /> for child content,Props for HTML content,<slot name="header" />,<Component header={<div>...</div>} />,Medium,https://docs.astro.build/en/basics/astro-components/#slots
+14,Components,Colocate component styles,Scoped styles in component file,<style> in same .astro file,Separate CSS files for component styles,<style> .card { } </style>,import './Card.css',Low,
+15,Styling,Use scoped styles by default,Astro scopes styles to component automatically,<style> for component-specific styles,Global styles for everything,<style> h1 { } </style> (scoped),<style is:global> for everything,Medium,https://docs.astro.build/en/guides/styling/#scoped-styles
+16,Styling,Use is:global sparingly,Global styles only when truly needed,is:global for base styles or overrides,is:global for component styles,<style is:global> body { } </style>,<style is:global> .card { } </style>,Medium,
+17,Styling,Integrate Tailwind properly,Use @astrojs/tailwind integration,Official Tailwind integration,Manual Tailwind setup,npx astro add tailwind,Manual PostCSS config,Low,https://docs.astro.build/en/guides/integrations-guide/tailwind/
+18,Styling,Use CSS variables for theming,Define tokens in :root,CSS custom properties for themes,Hardcoded colors everywhere,:root { --primary: #3b82f6; },color: #3b82f6; everywhere,Medium,
+19,Data,Fetch in frontmatter,Data fetching in component frontmatter,Top-level await in frontmatter,useEffect for initial data,const data = await fetch(url),client-side fetch on mount,High,https://docs.astro.build/en/guides/data-fetching/
+20,Data,Use Astro.glob for local files,Import multiple local files,Astro.glob for markdown/data files,Manual imports for each file,const posts = await Astro.glob('./posts/*.md'),"import post1; import post2;",Medium,
+21,Data,Prefer content collections over glob,Type-safe collections for structured content,getCollection() for blog/docs,Astro.glob for structured content,await getCollection('blog'),await Astro.glob('./blog/*.md'),High,
+22,Data,Use environment variables correctly,Import.meta.env for env vars,PUBLIC_ prefix for client vars,Expose secrets to client,import.meta.env.PUBLIC_API_URL,import.meta.env.SECRET in client,High,https://docs.astro.build/en/guides/environment-variables/
+23,Performance,Preload critical assets,Use link preload for important resources,Preload fonts above-fold images,No preload hints,"<link rel=""preload"" href=""font.woff2"" as=""font"">",No preload for critical assets,Medium,
+24,Performance,Optimize images with astro:assets,Built-in image optimization,<Image /> component for optimization,<img> for local images,"import { Image } from 'astro:assets';","<img src=""./image.jpg"">",High,https://docs.astro.build/en/guides/images/
+25,Performance,Use picture for responsive images,Multiple formats and sizes,<Picture /> for art direction,Single image size for all screens,<Picture /> with multiple sources,<Image /> with single size,Medium,
+26,Performance,Lazy load below-fold content,Defer loading non-critical content,loading=lazy for images client:visible for components,Load everything immediately,"<img loading=""lazy"">",No lazy loading,Medium,
+27,Performance,Minimize client directives,Each directive adds JS bundle,Audit client: usage regularly,Sprinkle client:load everywhere,Only interactive components hydrated,Every component with client:load,High,
+28,ViewTransitions,Enable View Transitions,Smooth page transitions,<ViewTransitions /> in head,Full page reloads,"import { ViewTransitions } from 'astro:transitions';",No transition API,Medium,https://docs.astro.build/en/guides/view-transitions/
+29,ViewTransitions,Use transition:name,Named elements for morphing,transition:name for persistent elements,Unnamed transitions,"<header transition:name=""header"">",<header> without name,Low,
+30,ViewTransitions,Handle transition:persist,Keep state across navigations,transition:persist for media players,Re-initialize on every navigation,"<video transition:persist id=""player"">",Video restarts on navigation,Medium,
+31,ViewTransitions,Add fallback for no-JS,Graceful degradation,Content works without JS,Require JS for basic navigation,Static content accessible,Broken without ViewTransitions JS,High,
+32,SEO,Use built-in SEO component,Head management for meta tags,Astro SEO integration or manual head,No meta tags,"<title>{title}</title><meta name=""description"">",No SEO tags,High,
+33,SEO,Generate sitemap,Automatic sitemap generation,@astrojs/sitemap integration,Manual sitemap maintenance,npx astro add sitemap,Hand-written sitemap.xml,Medium,https://docs.astro.build/en/guides/integrations-guide/sitemap/
+34,SEO,Add RSS feed for content,RSS for blogs and content sites,@astrojs/rss for feed generation,No RSS feed,rss() helper in pages/rss.xml.js,No feed for blog,Low,https://docs.astro.build/en/guides/rss/
+35,SEO,Use canonical URLs,Prevent duplicate content issues,Astro.url for canonical generation,"<link rel=""canonical"" href={Astro.url}>",No canonical tags,Medium,
+36,Integrations,Use official integrations,Astro's integration system,npx astro add for integrations,Manual configuration,npx astro add react,Manual React setup,Medium,https://docs.astro.build/en/guides/integrations-guide/
+37,Integrations,Configure integrations in astro.config,Centralized configuration,integrations array in config,Scattered configuration,"integrations: [react(), tailwind()]",Multiple config files,Low,
+38,Integrations,Use adapter for deployment,Platform-specific adapters,Correct adapter for host,Wrong or no adapter,@astrojs/vercel for Vercel,No adapter for SSR,High,https://docs.astro.build/en/guides/deploy/
+39,TypeScript,Enable TypeScript,Type safety for Astro projects,tsconfig.json with astro types,No TypeScript,Astro TypeScript template,JavaScript only,Medium,https://docs.astro.build/en/guides/typescript/
+40,TypeScript,Type component props,Define prop interfaces,Props interface in frontmatter,Untyped props,"interface Props { title: string }",No props typing,Medium,
+41,TypeScript,Use strict mode,Catch errors early,strict: true in tsconfig,Loose TypeScript config,strictest template,base template,Low,
+42,Markdown,Use MDX for components,Components in markdown content,@astrojs/mdx for interactive docs,Plain markdown with workarounds,<Component /> in .mdx,HTML in .md files,Medium,https://docs.astro.build/en/guides/integrations-guide/mdx/
+43,Markdown,Configure markdown plugins,Extend markdown capabilities,remarkPlugins rehypePlugins in config,Manual HTML for features,remarkPlugins: [remarkToc],Manual TOC in every post,Low,
+44,Markdown,Use frontmatter for metadata,Structured post metadata,Frontmatter with typed schema,Inline metadata,title date in frontmatter,# Title as first line,Medium,
+45,API,Use API routes for endpoints,Server endpoints in pages/api,pages/api/[endpoint].ts for APIs,External API for simple endpoints,pages/api/posts.json.ts,Separate Express server,Medium,https://docs.astro.build/en/guides/endpoints/
+46,API,Return proper responses,Use Response object,new Response() with headers,Plain objects,return new Response(JSON.stringify(data)),return data,Medium,
+47,API,Handle methods correctly,Export named method handlers,export GET POST handlers,Single default export,export const GET = async () => {},export default async () => {},Low,
+48,Security,Sanitize user content,Prevent XSS in dynamic content,set:html only for trusted content,set:html with user input,"<Fragment set:html={sanitized} />","<div set:html={userInput} />",High,
+49,Security,Use HTTPS in production,Secure connections,HTTPS for all production sites,HTTP in production,https://example.com,http://example.com,High,
+50,Security,Validate API input,Check and sanitize all input,Zod validation for API routes,Trust all input,const body = schema.parse(data),const body = await request.json(),High,
+51,Build,Use hybrid rendering,Mix static and dynamic pages,output: 'hybrid' for flexibility,All SSR or all static,prerender per-page basis,Single rendering mode,Medium,https://docs.astro.build/en/guides/server-side-rendering/#hybrid-rendering
+52,Build,Analyze bundle size,Monitor JS bundle impact,Build output shows bundle sizes,Ignore bundle growth,Check astro build output,No size monitoring,Medium,
+53,Build,Use prefetch,Preload linked pages,prefetch integration,No prefetch for navigation,npx astro add prefetch,Manual prefetch,Low,https://docs.astro.build/en/guides/prefetch/

package/skills/cm-ux-master/data/stacks/electron.csv

@@ -0,0 +1,32 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Security,Enable Context Isolation,Context isolation prevents renderer from accessing Node.js,contextIsolation: true in BrowserWindow webPreferences,contextIsolation: false in production,"webPreferences: { contextIsolation: true preload: path.join(__dirname 'preload.js') }","webPreferences: { contextIsolation: false nodeIntegration: true }",High,https://www.electronjs.org/docs/latest/tutorial/context-isolation
+2,Security,Use Preload Scripts,Expose safe APIs via preload contextBridge,contextBridge.exposeInMainWorld for safe API exposure,Direct require() in renderer process,"contextBridge.exposeInMainWorld('api' { readFile: (path) => ipcRenderer.invoke('read-file' path) })","const fs = require('fs') /* in renderer */",High,https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
+3,Security,Disable Node Integration,Renderer should not have direct Node.js access,nodeIntegration: false (default in modern Electron),Enabling nodeIntegration in renderer,"webPreferences: { nodeIntegration: false }","webPreferences: { nodeIntegration: true } /* security risk */",High,https://www.electronjs.org/docs/latest/tutorial/security
+4,Security,Validate IPC Messages,Validate all data received via IPC in main process,Type-check and sanitize IPC handler arguments,Trusting renderer input without validation,"ipcMain.handle('read-file' (event path) => { if (!isAllowedPath(path)) throw new Error('forbidden') })","ipcMain.handle('read-file' (event path) => fs.readFileSync(path))",High,
+5,Security,Use Sandbox Mode,Sandbox renderer processes for defense in depth,sandbox: true in webPreferences (default in v20+),Disabling sandbox without security review,"webPreferences: { sandbox: true }","webPreferences: { sandbox: false } /* unnecessary */",High,
+6,IPC,Use ipcMain.handle/invoke,Request-response pattern with promises,handle/invoke for async communication,send/on for request-response patterns,"ipcMain.handle('get-data' async () => await fetchData()); ipcRenderer.invoke('get-data')","ipcMain.on('get-data' (e) => e.reply('data' result)) /* callback hell */",Medium,https://www.electronjs.org/docs/latest/tutorial/ipc
+7,IPC,Minimize IPC Payloads,Send minimal data over IPC for performance,Send IDs or small payloads then fetch in main,Sending large objects or binary over IPC,"ipcRenderer.invoke('get-user' userId)","ipcRenderer.invoke('save-data' entireDatabase) /* huge payload */",Medium,
+8,IPC,Type IPC Channels,Use TypeScript types for IPC channel contracts,Typed channel names and payload types,String literals without type safety,"type IpcChannels = 'get-user' | 'save-file' | 'app-quit'","ipcRenderer.invoke('gt-user') /* typo undetected */",Medium,
+9,Window,Configure BrowserWindow Properly,Set appropriate window options for platform,Show window after ready-to-show event,Showing window immediately (white flash),"const win = new BrowserWindow({show: false}); win.once('ready-to-show' () => win.show())","const win = new BrowserWindow({}) /* white flash */",Medium,https://www.electronjs.org/docs/latest/api/browser-window
+10,Window,Support Multiple Windows,Handle multi-window architecture cleanly,Track windows in a Map with lifecycle management,Global references to single window,"const windows = new Map(); function createWindow(id) { ... }","let mainWindow = null /* single window only */",Low,
+11,Window,Handle Window State,Persist and restore window position and size,Save bounds on close restore on create,Hardcoded window dimensions,"const bounds = store.get('windowBounds'); win = new BrowserWindow(bounds)","new BrowserWindow({ width: 1200 height: 800 }) /* always same */",Low,
+12,Menu,Use Application Menu,Native application menu for platform consistency,Menu.buildFromTemplate with platform-aware items,No application menu or web-only hamburger menu,"const template = [{ role: 'appMenu' } { role: 'fileMenu' } ...]","/* No native menu - custom HTML menu only */",Medium,https://www.electronjs.org/docs/latest/api/menu
+13,Menu,Context Menu Support,Right-click context menus for desktop experience,electron-context-menu or Menu.popup for context menus,No right-click support in desktop app,"menu.popup({ window: BrowserWindow.getFocusedWindow() })","/* Disable right-click: event.preventDefault() */",Medium,
+14,Tray,System Tray Integration,Add tray icon for background apps,Tray with context menu and notification badges,Running without tray icon for background apps,"const tray = new Tray(icon); tray.setContextMenu(contextMenu)","/* No tray icon for app that runs in background */",Medium,https://www.electronjs.org/docs/latest/api/tray
+15,Storage,Use Electron Store,Persist user preferences and app state,electron-store or custom JSON file in userData,localStorage for persistent desktop data,"const Store = require('electron-store'); const store = new Store()","localStorage.setItem('prefs' JSON.stringify(data)) /* web pattern */",Medium,
+16,Storage,Use app.getPath for Locations,Use proper OS directories for file storage,app.getPath('userData') app.getPath('documents'),Hardcoded paths or relative paths,"const savePath = path.join(app.getPath('userData') 'data.json')","const savePath = './data.json' /* wrong location */",High,https://www.electronjs.org/docs/latest/api/app#appgetpathname
+17,Updates,Auto-Update Setup,Implement automatic updates for distribution,electron-updater with code signing,No update mechanism or manual downloads only,"autoUpdater.checkForUpdatesAndNotify()","/* Users download from website manually */",High,https://www.electron.build/auto-update.html
+18,Updates,Update UX,Inform users about update progress,Show download progress and restart prompt,Silent update without user notification,"autoUpdater.on('download-progress' (info) => sendProgress(info))","autoUpdater.on('update-downloaded' () => autoUpdater.quitAndInstall()) /* forced */",Medium,
+19,Performance,Lazy Load Windows,Create windows only when needed,Create secondary windows on demand,All windows created at startup,"function openSettings() { if (!settingsWindow) settingsWindow = new BrowserWindow(...) }","app.whenReady().then(() => { createMainWindow(); createSettingsWindow(); createAboutWindow(); })",Medium,
+20,Performance,Use Web Workers,Offload heavy computation from renderer main thread,Web Workers for data processing parsing and computation,Heavy computation in renderer main thread,"const worker = new Worker('heavy-task.js')","/* Processing 10MB JSON in renderer main thread */",Medium,
+21,Performance,Optimize Startup Time,Minimize time to first meaningful paint,Defer non-essential module loading + show splash screen,Loading all modules synchronously at startup,"const heavyModule = await import('./heavy-module')","const heavyModule = require('./heavy-module') /* blocks startup */",Medium,
+22,Native,Use Dialog Module,Native OS dialogs for file operations,dialog.showOpenDialog dialog.showSaveDialog,Custom HTML dialogs for file operations,"const { filePaths } = await dialog.showOpenDialog({ properties: ['openFile'] })","<input type='file'> /* web fallback for desktop */",Medium,https://www.electronjs.org/docs/latest/api/dialog
+23,Native,Use Notifications,OS-native notifications for user alerts,new Notification({ title body }) for system notifications,Custom toast UI for system-level alerts,"new Notification({ title: 'Update' body: 'New version available' })","/* Custom HTML toast for critical system notification */",Low,https://www.electronjs.org/docs/latest/api/notification
+24,Native,Drag and Drop Support,Native file drag and drop,webContents.startDrag for dragging from app / ondrop for receiving,No drag and drop support in desktop app,"element.addEventListener('drop' (e) => { const files = e.dataTransfer.files })","/* No file drop zone in desktop app */",Low,
+25,Build,Use Electron Forge or Builder,Production build and packaging toolchain,@electron-forge/cli or electron-builder for packaging,Manual packaging scripts,"npx electron-forge make","/* Custom shell script for packaging */",High,https://www.electronforge.io/
+26,Build,Code Signing,Sign application for distribution,Code sign for both macOS and Windows,Distributing unsigned applications,"afterSign: 'scripts/notarize.js' /* macOS */ + certificateFile /* Windows */","/* Distribute without signing - security warnings */",High,
+27,Build,Platform-Specific Handling,Handle OS differences gracefully,process.platform checks for OS-specific behavior,Assuming all users are on same OS,"if (process.platform === 'darwin') { app.dock.setMenu(dockMenu) }","app.dock.setMenu(dockMenu) /* crashes on Windows */",Medium,
+28,Testing,Test with Spectron or Playwright,E2E testing for Electron apps,Playwright with electron fixture for E2E tests,Manual testing only,"const electronApp = await electron.launch({ args: ['main.js'] })","/* Manual click-through testing */",Medium,
+29,Accessibility,Keyboard Shortcuts,Register global and local keyboard shortcuts,globalShortcut.register and accelerator in Menu,Mouse-only interaction in desktop app,"globalShortcut.register('CommandOrControl+Shift+I' () => { ... })","/* No keyboard shortcuts */",Medium,https://www.electronjs.org/docs/latest/api/global-shortcut
+30,Accessibility,Screen Reader Support,Ensure content is accessible to screen readers,Semantic HTML and ARIA attributes in renderer,Custom non-semantic UI elements,"<nav role='navigation'><button aria-label='Settings'>⚙️</button></nav>","<div onclick='openSettings()'>⚙️</div> /* no a11y */",High,
+31,Deep Link,Protocol Handler,Handle custom URL protocol for deep linking,app.setAsDefaultProtocolClient for custom protocol,No deep linking support,"app.setAsDefaultProtocolClient('myapp') /* handles myapp:// links */","/* No custom protocol handling */",Low,https://www.electronjs.org/docs/latest/tutorial/launch-app-from-url-in-another-app

package/skills/cm-ux-master/data/stacks/flutter.csv

@@ -0,0 +1,53 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
+1,Widgets,Use StatelessWidget when possible,Immutable widgets are simpler,StatelessWidget for static UI,StatefulWidget for everything,class MyWidget extends StatelessWidget,class MyWidget extends StatefulWidget (static),Medium,https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html
+2,Widgets,Keep widgets small,Single responsibility principle,Extract widgets into smaller pieces,Large build methods,Column(children: [Header() Content()]),500+ line build method,Medium,
+3,Widgets,Use const constructors,Compile-time constants for performance,const MyWidget() when possible,Non-const for static widgets,const Text('Hello'),Text('Hello') for literals,High,https://dart.dev/guides/language/language-tour#constant-constructors
+4,Widgets,Prefer composition over inheritance,Combine widgets using children,Compose widgets,Extend widget classes,Container(child: MyContent()),class MyContainer extends Container,Medium,
+5,State,Use setState correctly,Minimal state in StatefulWidget,setState for UI state changes,setState for business logic,setState(() { _counter++; }),Complex logic in setState,Medium,https://api.flutter.dev/flutter/widgets/State/setState.html
+6,State,Avoid setState in build,Never call setState during build,setState in callbacks only,setState in build method,onPressed: () => setState(() {}),build() { setState(); },High,
+7,State,Use state management for complex apps,Provider Riverpod BLoC,State management for shared state,setState for global state,Provider.of<MyState>(context),Global setState calls,Medium,
+8,State,Prefer Riverpod or Provider,Recommended state solutions,Riverpod for new projects,InheritedWidget manually,ref.watch(myProvider),Custom InheritedWidget,Medium,https://riverpod.dev/
+9,State,Dispose resources,Clean up controllers and subscriptions,dispose() for cleanup,Memory leaks from subscriptions,@override void dispose() { controller.dispose(); },No dispose implementation,High,
+10,Layout,Use Column and Row,Basic layout widgets,Column Row for linear layouts,Stack for simple layouts,"Column(children: [Text(), Button()])",Stack for vertical list,Medium,https://api.flutter.dev/flutter/widgets/Column-class.html
+11,Layout,Use Expanded and Flexible,Control flex behavior,Expanded to fill space,Fixed sizes in flex containers,Expanded(child: Container()),Container(width: 200) in Row,Medium,
+12,Layout,Use SizedBox for spacing,Consistent spacing,SizedBox for gaps,Container for spacing only,SizedBox(height: 16),Container(height: 16),Low,
+13,Layout,Use LayoutBuilder for responsive,Respond to constraints,LayoutBuilder for adaptive layouts,Fixed sizes for responsive,LayoutBuilder(builder: (context constraints) {}),Container(width: 375),Medium,https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html
+14,Layout,Avoid deep nesting,Keep widget tree shallow,Extract deeply nested widgets,10+ levels of nesting,Extract widget to method or class,Column(Row(Column(Row(...)))),Medium,
+15,Lists,Use ListView.builder,Lazy list building,ListView.builder for long lists,ListView with children for large lists,"ListView.builder(itemCount: 100, itemBuilder: ...)",ListView(children: items.map(...).toList()),High,https://api.flutter.dev/flutter/widgets/ListView-class.html
+16,Lists,Provide itemExtent when known,Skip measurement,itemExtent for fixed height items,No itemExtent for uniform lists,ListView.builder(itemExtent: 50),ListView.builder without itemExtent,Medium,
+17,Lists,Use keys for stateful items,Preserve widget state,Key for stateful list items,No key for dynamic lists,ListTile(key: ValueKey(item.id)),ListTile without key,High,
+18,Lists,Use SliverList for custom scroll,Custom scroll effects,CustomScrollView with Slivers,Nested ListViews,CustomScrollView(slivers: [SliverList()]),ListView inside ListView,Medium,https://api.flutter.dev/flutter/widgets/SliverList-class.html
+19,Navigation,Use Navigator 2.0 or GoRouter,Declarative routing,go_router for navigation,Navigator.push for complex apps,GoRouter(routes: [...]),Navigator.push everywhere,Medium,https://pub.dev/packages/go_router
+20,Navigation,Use named routes,Organized navigation,Named routes for clarity,Anonymous routes,Navigator.pushNamed(context '/home'),Navigator.push(context MaterialPageRoute()),Low,
+21,Navigation,Handle back button (PopScope),Android back behavior and predictive back (Android 14+),Use PopScope widget (WillPopScope is deprecated),Use WillPopScope,"PopScope(canPop: false, onPopInvoked: (didPop) => ...)",WillPopScope(onWillPop: ...),High,https://api.flutter.dev/flutter/widgets/PopScope-class.html
+22,Navigation,Pass typed arguments,Type-safe route arguments,Typed route arguments,Dynamic arguments,MyRoute(id: '123'),arguments: {'id': '123'},Medium,
+23,Async,Use FutureBuilder,Async UI building,FutureBuilder for async data,setState for async,FutureBuilder(future: fetchData()),fetchData().then((d) => setState()),Medium,https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html
+24,Async,Use StreamBuilder,Stream UI building,StreamBuilder for streams,Manual stream subscription,StreamBuilder(stream: myStream),stream.listen in initState,Medium,https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html
+25,Async,Handle loading and error states,Complete async UI states,ConnectionState checks,Only success state,if (snapshot.connectionState == ConnectionState.waiting),No loading indicator,High,
+26,Async,Cancel subscriptions,Clean up stream subscriptions,Cancel in dispose,Memory leaks,subscription.cancel() in dispose,No subscription cleanup,High,
+27,Theming,Use ThemeData,Consistent theming,ThemeData for app theme,Hardcoded colors,Theme.of(context).primaryColor,Color(0xFF123456) everywhere,Medium,https://api.flutter.dev/flutter/material/ThemeData-class.html
+28,Theming,Use ColorScheme,Material 3 color system,ColorScheme for colors,Individual color properties,colorScheme: ColorScheme.fromSeed(),primaryColor: Colors.blue,Medium,
+29,Theming,Access theme via context,Dynamic theme access,Theme.of(context),Static theme reference,Theme.of(context).textTheme.bodyLarge,TextStyle(fontSize: 16),Medium,
+30,Theming,Support dark mode,Respect system theme,darkTheme in MaterialApp,Light theme only,"MaterialApp(theme: light, darkTheme: dark)",MaterialApp(theme: light),Medium,
+31,Animation,Use implicit animations,Simple animations,AnimatedContainer AnimatedOpacity,Explicit for simple transitions,AnimatedContainer(duration: Duration()),AnimationController for fade,Low,https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html
+32,Animation,Use AnimationController for complex,Fine-grained control,AnimationController with Ticker,Implicit for complex sequences,AnimationController(vsync: this),AnimatedContainer for staggered,Medium,
+33,Animation,Dispose AnimationControllers,Clean up animation resources,dispose() for controllers,Memory leaks,controller.dispose() in dispose,No controller disposal,High,
+34,Animation,Use Hero for transitions,Shared element transitions,Hero for navigation animations,Manual shared element,Hero(tag: 'image' child: Image()),Custom shared element animation,Low,https://api.flutter.dev/flutter/widgets/Hero-class.html
+35,Forms,Use Form widget,Form validation,Form with GlobalKey,Individual validation,Form(key: _formKey child: ...),TextField without Form,Medium,https://api.flutter.dev/flutter/widgets/Form-class.html
+36,Forms,Use TextEditingController,Control text input,Controller for text fields,onChanged for all text,final controller = TextEditingController(),onChanged: (v) => setState(),Medium,
+37,Forms,Validate on submit,Form validation flow,_formKey.currentState!.validate(),Skip validation,if (_formKey.currentState!.validate()),Submit without validation,High,
+38,Forms,Dispose controllers,Clean up text controllers,dispose() for controllers,Memory leaks,controller.dispose() in dispose,No controller disposal,High,
+39,Performance,Use const widgets,Reduce rebuilds,const for static widgets,No const for literals,const Icon(Icons.add),Icon(Icons.add),High,
+40,Performance,Avoid rebuilding entire tree,Minimal rebuild scope,Isolate changing widgets,setState on parent,Consumer only around changing widget,setState on root widget,High,
+41,Performance,Use RepaintBoundary,Isolate repaints,RepaintBoundary for animations,Full screen repaints,RepaintBoundary(child: AnimatedWidget()),Animation without boundary,Medium,https://api.flutter.dev/flutter/widgets/RepaintBoundary-class.html
+42,Performance,Profile with DevTools,Measure before optimizing,Flutter DevTools profiling,Guess at performance,DevTools performance tab,Optimize without measuring,Medium,https://docs.flutter.dev/tools/devtools
+43,Accessibility,Use Semantics widget,Screen reader support,Semantics for accessibility,Missing accessibility info,Semantics(label: 'Submit button'),GestureDetector without semantics,High,https://api.flutter.dev/flutter/widgets/Semantics-class.html
+44,Accessibility,Support large fonts,MediaQuery text scaling,MediaQuery.textScaleFactor,Fixed font sizes,style: Theme.of(context).textTheme,TextStyle(fontSize: 14),High,
+45,Accessibility,Test with screen readers,TalkBack and VoiceOver,Test accessibility regularly,Skip accessibility testing,Regular TalkBack testing,No screen reader testing,High,
+46,Testing,Use widget tests,Test widget behavior,WidgetTester for UI tests,Unit tests only,testWidgets('...' (tester) async {}),Only test() for UI,Medium,https://docs.flutter.dev/testing
+47,Testing,Use integration tests,Full app testing,integration_test package,Manual testing only,IntegrationTestWidgetsFlutterBinding,Manual E2E testing,Medium,
+48,Testing,Mock dependencies,Isolate tests,Mockito or mocktail,Real dependencies in tests,when(mock.method()).thenReturn(),Real API calls in tests,Medium,
+49,Platform,Use Platform checks,Platform-specific code,Platform.isIOS Platform.isAndroid,Same code for all platforms,if (Platform.isIOS) {},Hardcoded iOS behavior,Medium,
+50,Platform,Use kIsWeb for web,Web platform detection,kIsWeb for web checks,Platform for web,if (kIsWeb) {},Platform.isWeb (doesn't exist),Medium,
+51,Packages,Use pub.dev packages,Community packages,Popular maintained packages,Custom implementations,cached_network_image,Custom image cache,Medium,https://pub.dev/
+52,Packages,Check package quality,Quality before adding,Pub points and popularity,Any package without review,100+ pub points,Unmaintained packages,Medium,