freecodego 0.1.7-alpha.2.2 → 0.1.7-rc.2.2

package/dist/assets/uiux/data/motion.csv

@@ -0,0 +1,18 @@
+No,Category,Intensity Tier,Keywords,Trigger,Duration,Easing,GSAP Snippet,Framework Notes,Do,Don't,Performance Notes
+1,Hover Micro-interaction,Subtle,"hover, button, opacity, lift, press feedback",hover,150-200ms,power1.out,"gsap.to(el, { y: -1, opacity: 0.9, duration: 0.15, ease: 'power1.out' });",Bind on mouseenter/mouseleave; in React wrap in a ref + useEffect (or onMouseEnter/onMouseLeave props directly calling gsap.to); Use matchMedia('(prefers-reduced-motion: reduce)') to skip non-essential motion and render the final state immediately,Keep displacement under 2px so it reads as feedback not motion,Don't animate layout-affecting props (width/height/margin) on hover,Runs on transform/opacity only so it stays on the compositor thread
+2,Hover Micro-interaction,Standard,"hover, card, scale, tilt, cursor feedback",hover,200-300ms,power2.out,"gsap.to(el, { y: -4, scale: 1.02, boxShadow: '0 12px 24px rgba(0,0,0,0.12)', duration: 0.25, ease: 'power2.out' });","Use gsap.quickTo(el, 'y') for cards with many hover targets to avoid re-creating tweens every event; Use matchMedia('(prefers-reduced-motion: reduce)') to skip non-essential motion and render the final state immediately",Pair with a matching mouseleave tween that reverses the same properties,Don't leave the hover state stuck if the pointer leaves fast; always attach the reverse tween,quickTo() avoids GC churn on lists with 20+ hoverable cards
+3,Hover Micro-interaction,Complex,"hover, magnetic, cursor follow, 3d tilt, removable event listener cleanup",hover + mousemove,300-500ms,"elastic.out(1,0.4)","const onPointerMove = (e) => { const r = el.getBoundingClientRect(); xTo((e.clientX - r.left - r.width / 2) * 0.3); yTo((e.clientY - r.top - r.height / 2) * 0.3); }; el.addEventListener('pointermove', onPointerMove); return () => el.removeEventListener('pointermove', onPointerMove);",Keep a stable named pointer handler so cleanup removes the same function; in React/Vue return the removeEventListener cleanup; use gsap.matchMedia('(prefers-reduced-motion: reduce)') and render x/y at the final neutral state,Clamp the pull strength (e.g. * 0.3) so the element never fully leaves its hit box,Don't apply magnetic effect to more than 1-2 focal elements per screen; it becomes noisy,Use will-change: transform on the target element for smoother compositing
+4,Scroll Reveal,Subtle,"scroll, fade in, reveal, on view",scroll (viewport enter),300-400ms,power1.out,"gsap.from(el, { opacity: 0, y: 12, duration: 0.35, ease: 'power1.out', scrollTrigger: { trigger: el, start: 'top 90%', toggleActions: 'play none none reverse' } });",Requires the ScrollTrigger plugin registered once via gsap.registerPlugin(ScrollTrigger); Use matchMedia('(prefers-reduced-motion: reduce)') to skip non-essential motion and render the final state immediately,"Keep the y offset small (8-16px) so it reads as a fade, not a slide",Don't reveal below-the-fold content needed for SEO/crawlers as invisible-by-default without a no-JS fallback,toggleActions 'play none none reverse' avoids re-triggering on every scroll direction change
+5,Scroll Reveal,Standard,"scroll, slide up, staggered section, reveal",scroll (viewport enter),400-600ms,power2.out,"gsap.from(el.children, { opacity: 0, y: 24, duration: 0.5, stagger: 0.08, ease: 'power2.out', scrollTrigger: { trigger: el, start: 'top 85%' } });","In React use useGSAP(() => {...}, { scope: containerRef }) from @gsap/react to auto-cleanup on unmount; Use matchMedia('(prefers-reduced-motion: reduce)') to skip non-essential motion and render the final state immediately",Scope the ScrollTrigger to the section container so it doesn't re-scan the whole page,Don't stagger more than ~8 children; beyond that the last items feel laggy,Set scroller/markers: false in production; markers is dev-only
+6,Scroll Reveal,Complex,"scroll, pin, scrub, storytelling, scrollytelling",scroll (continuous scrub),tied to scroll position,none (scrub-driven),"gsap.timeline({ scrollTrigger: { trigger: section, start: 'top top', end: '+=150%', scrub: 1, pin: true } }).from('.headline', { opacity: 0, y: 40 }).to('.bg-layer', { yPercent: -20 }, '<');",Pinning needs the section to have deterministic height; recalc ScrollTrigger.refresh() after images/fonts load; Use matchMedia('(prefers-reduced-motion: reduce)') to skip non-essential motion and render the final state immediately,Use scrub: true or a small number (0.5-1.5) instead of instant jumps so it feels tied to the scrollbar,Don't pin more than 1-2 sections per page; excessive pinning fights native scroll feel and hurts mobile UX,"Pinning forces layout reflow; test on mid-tier mobile devices, not just desktop"
+7,Stagger List,Subtle,"list, stagger, cards, grid entrance",load or scroll,250-350ms,power1.out,"gsap.from('.list-item', { opacity: 0, y: 8, duration: 0.3, stagger: 0.03 });",Select items with a stable class/data-attribute (not array index) so re-renders in React don't break targeting; Use matchMedia('(prefers-reduced-motion: reduce)') to skip non-essential motion and render the final state immediately,Keep per-item stagger delay small (0.02-0.04s) for lists longer than 10 items,Don't stagger by more than 0.1s per item on long lists; total reveal time becomes sluggish,"For virtualized lists, only animate items currently mounted in the DOM"
+8,Stagger List,Standard,"grid, bento, cards, staggered scale",load or scroll,300-450ms,back.out(1.4),"gsap.from('.grid-item', { opacity: 0, scale: 0.92, y: 16, duration: 0.4, stagger: { each: 0.06, from: 'start', grid: 'auto' }, ease: 'back.out(1.4)' });",grid: 'auto' lets GSAP infer rows/columns from a CSS grid layout for a natural wave stagger; Use matchMedia('(prefers-reduced-motion: reduce)') to skip non-essential motion and render the final state immediately,Combine with from: 'center' for a bento-grid layout to draw the eye inward first,Don't use back.out on dense data tables; the overshoot reads as sloppy on informational UI,Group DOM writes; avoid interleaving layout reads (getBoundingClientRect) between staggered tweens
+9,Stagger List,Complex,"stagger, wave, text reveal, split text",load or scroll,400-700ms,expo.out,"const split = new SplitText(headline, { type: 'chars' }); gsap.from(split.chars, { opacity: 0, y: 20, rotateX: -40, duration: 0.6, stagger: 0.015, ease: 'expo.out' });","SplitText is included with GSAP 3.13+; register it before use, review the current GSAP license, and keep a plain-text fade fallback; Use gsap.matchMedia('(prefers-reduced-motion: reduce)') to skip character motion and render the readable final state immediately",Revert SplitText on unmount/cleanup (split.revert()) to restore original text nodes for accessibility tools,Don't split-animate long paragraphs; reserve for short headlines (under ~8 words),Splitting text creates one element per character; keep it to headline-length copy only for DOM size
+10,Page Transition,Subtle,"route change, fade, page transition",route change,200-300ms,power1.inOut,"gsap.to(main, { opacity: 0, duration: 0.2, onComplete: () => { navigate(); gsap.fromTo(main, { opacity: 0 }, { opacity: 1, duration: 0.2 }); } });","Pair with the router's transition hooks (Next.js App Router transitions, React Router's useNavigate, Vue Router's beforeEach/afterEach); Use matchMedia('(prefers-reduced-motion: reduce)') to skip non-essential motion and render the final state immediately",Preload the destination route's critical assets before the exit tween finishes,Don't block navigation on animation; cap exit duration at ~250ms so the app never feels unresponsive,Exit animation should always resolve faster than entrance (asymmetric timing) so back/forward feels snappy
+11,Page Transition,Standard,"route change, slide, overlay wipe",route change,400-600ms,power2.inOut,"const tl = gsap.timeline(); tl.to('.transition-overlay', { yPercent: 0, duration: 0.4, ease: 'power2.inOut' }).call(navigate).to('.transition-overlay', { yPercent: -100, duration: 0.4, ease: 'power2.inOut', delay: 0.1 });",Keep the overlay element mounted at the layout root (outside the page component) so it survives the route swap; Use matchMedia('(prefers-reduced-motion: reduce)') to skip non-essential motion and render the final state immediately,Show a lightweight loading indicator if the destination route's data fetch outlasts the overlay,Don't tie the overlay's reveal directly to data-fetch completion without a max-wait timeout; a slow API stalls the whole transition,Prefer CSS transform (yPercent) over top/left to keep the overlay animation on the compositor thread
+12,Page Transition,Complex,"shared element, morph, hero transition",route change,500-800ms,expo.inOut,"const state = Flip.getState('.hero-image'); navigate(); Flip.from(state, { duration: 0.6, ease: 'expo.inOut', absolute: true, zIndex: 100 });",Requires the GSAP Flip plugin; the 'from' and 'to' route must render the same element with a shared data-flip-id; Use matchMedia('(prefers-reduced-motion: reduce)') to skip non-essential motion and render the final state immediately,Verify the shared element exists in both DOM states before calling Flip.from to avoid a silent no-op,Don't use shared-element transitions across more than one element pair per navigation; compounding Flips are hard to time correctly,Flip recalculates layout (FLIP technique) so test on low-end devices for jank
+13,Parallax Scroll,Subtle,"parallax, background, depth, scroll speed",scroll (continuous),tied to scroll position,linear (scrub),"gsap.to('.bg-layer', { yPercent: 10, ease: 'none', scrollTrigger: { trigger: section, scrub: true } });","Apply parallax to background/decorative layers only, never to text or interactive controls; Use matchMedia('(prefers-reduced-motion: reduce)') to skip non-essential motion and render the final state immediately",Keep the yPercent delta small (5-15) so foreground and background never desync distractingly,Don't parallax body copy; it hurts reading comfort and can trigger motion sickness,will-change: transform on the parallax layer only; remove it after scroll settles to free GPU memory
+14,Parallax Scroll,Standard,"multi-layer parallax, depth, hero background",scroll (continuous),tied to scroll position,linear (scrub),"gsap.utils.toArray('.parallax-layer').forEach((layer, i) => { gsap.to(layer, { yPercent: (i + 1) * -8, ease: 'none', scrollTrigger: { trigger: layer.parentElement, scrub: 0.5 } }); });",Layer count beyond 3-4 has diminishing visual return and multiplies scroll-listener cost; Use matchMedia('(prefers-reduced-motion: reduce)') to skip non-essential motion and render the final state immediately,"Vary speed per layer (background slowest, foreground fastest) to sell the depth illusion",Don't let parallax layers overflow their container; clip with overflow: hidden on the wrapper,Batch all layers under one ScrollTrigger container where possible instead of one per layer
+15,Loading / Skeleton,Subtle,"loading, skeleton, shimmer, pulse, stop animation offscreen, visibility pause, reduced motion final state",on mount / async wait,1200-1600ms loop,sine.inOut,"const tween = gsap.to('.skeleton', { backgroundPosition: '200% 0', duration: 1.4, ease: 'sine.inOut', repeat: -1 }); return () => tween.kill();",Kill the tween when content mounts or the component unmounts; pause it when its IntersectionObserver reports offscreen or document.visibilityState is hidden; when '(prefers-reduced-motion: reduce)' matches kill the tween and set the final static skeleton state,Use a CSS gradient background-position sweep rather than opacity pulsing; reads as 'loading' more clearly,Don't run more than one shimmer loop per skeleton group; sync them under one timeline so the wave reads as a single unit,repeat: -1 tweens are cheap but must be explicitly killed on unmount or they leak in SPA route changes
+16,Loading / Skeleton,Standard,"progress, spinner, morphing loader, stop animation offscreen, visibility pause, timer cleanup, reduced motion final state",on mount / async wait,800-1200ms loop,power1.inOut,"const tl = gsap.timeline({ repeat: -1 }).to('.loader-dot', { y: -8, duration: 0.4, stagger: { each: 0.15, yoyo: true, repeat: 1 } }); const onVisibility = () => document.hidden ? tl.pause() : tl.resume(); document.addEventListener('visibilitychange', onVisibility); return () => { document.removeEventListener('visibilitychange', onVisibility); tl.kill(); };",In React use useGSAP scope for tween cleanup; add IntersectionObserver pause/resume when the loader is offscreen; when '(prefers-reduced-motion: reduce)' matches kill the loop and show the final static loading state,Cap total loop duration under ~1.5s so long waits don't feel like the UI froze on a single beat,Don't use elaborate loaders for sub-300ms waits; they flash and feel worse than no indicator,Pause the timeline (tl.pause()) when the loading tab/view is not visible to save CPU on background tabs
+17,Carousel / Auto-Rotation,Standard,"carousel, auto-rotate, pause, focus, hover, reduced-motion, stop animation offscreen, visibility pause, timer cleanup, final state",timer / focus / hover / visibility,user-controlled or stopped,none,"const reduced = matchMedia('(prefers-reduced-motion: reduce)'); let timer; let onscreen = true; const stop = () => { clearInterval(timer); timer = undefined; }; const start = () => { stop(); if (!reduced.matches && !document.hidden && onscreen) timer = setInterval(nextSlide, 5000); }; const sync = () => reduced.matches ? (stop(), showSlide(activeIndex)) : start(); const observer = new IntersectionObserver(([entry]) => { onscreen = entry.isIntersecting; onscreen ? sync() : stop(); }); const onVisibility = () => document.hidden ? stop() : sync(); observer.observe(root); root.addEventListener('focusin', stop); root.addEventListener('pointerenter', stop); document.addEventListener('visibilitychange', onVisibility); reduced.addEventListener('change', sync); sync(); return () => { stop(); observer.disconnect(); root.removeEventListener('focusin', stop); root.removeEventListener('pointerenter', stop); document.removeEventListener('visibilitychange', onVisibility); reduced.removeEventListener('change', sync); };","Use one cancellable timer; pause on focus, hover, offscreen, or hidden visibility; remove every listener and clear the timer on unmount; reduced motion stops rotation and renders the active slide as the final state",Provide previous/next and play/pause controls; announce the current slide without moving focus,Don't auto-advance without a visible stop control or continue while focus is inside,IntersectionObserver stops animation offscreen; visibilitychange stops hidden-tab work; cleanup disconnects the observer and clears the timer and listeners

package/dist/assets/uiux/data/products.csv

@@ -0,0 +1,193 @@
+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 & Swiss Style",Hero + Features + CTA,Data-Dense + Real-Time Monitoring,Trust blue + accent contrast,Balance modern feel with clarity. Focus on CTAs.
+2,Micro SaaS,"indie, micro-saas, niche, solo, bootstrap, micro, side-project, solopreneur, small-team, indie-hacker, product-hunt",Flat Design + Vibrant & Block-based,"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,B2B Service,"b2b, enterprise, consulting, professional, solution, contract, corporate, strategy, advisory, roi, deliverable, whitepaper",Accessible & Ethical + Minimalism & Swiss Style,"Bento Box Grid , Micro-interactions",Feature-Rich Showcase,Sales Intelligence Dashboard,Professional blue + neutral grey,Credibility essential. Clear ROI messaging.
+6,Financial Dashboard,"portfolio, trading, pnl, budget, revenue, expense, cashflow, balance-sheet, investment, bank, accounting, fintech",Dark Mode (OLED) + Data-Dense Dashboard,"Minimalism & Swiss Style , Accessible & Ethical",N/A - Dashboard focused,Financial Dashboard,Dark bg + red/green alerts + trust blue,"High contrast, real-time updates, accuracy paramount."
+7,Analytics Dashboard,"kpi, metric, funnel, conversion, cohort, retention, segment, attribution, ab-test, dashboard-data, business-intelligence",Data-Dense Dashboard + Heat Map & Heatmap Style,"Minimalism & Swiss Style , Dark Mode (OLED)",N/A - Analytics focused,Drill-Down Analytics + Comparative,Cool→Hot gradients + neutral grey,Clarity > aesthetics. Color-coded data priority.
+8,Healthcare App,"app, clinic, health, healthcare, medical, patient",Neumorphism + Accessible & Ethical,"Soft UI Evolution , Claymorphism",Social Proof-Focused,User Behavior Analytics,Calm blue + health green + trust,Accessibility mandatory. Calming aesthetic.
+9,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.
+10,Creative Agency,"branding, identity, portfolio, logo, visual, rebrand, creative-director, campaign, awards, award-winning, showreel",Brutalism + Motion-Driven,"Retro-Futurism , Editorial Grid / Magazine",Storytelling-Driven,N/A - Portfolio focused,Bold primaries + artistic freedom,Differentiation key. Wow-factor necessary.
+11,Portfolio/Personal,"creative, personal, portfolio, projects, showcase, work",Motion-Driven + Minimalism & Swiss Style,"Brutalism , Aurora UI",Storytelling-Driven,N/A - Personal branding,Brand primary + artistic interpretation,Showcase work. Personality shine through.
+12,Gaming,"entertainment, esports, game, gaming, play",3D & Hyperrealism + Retro-Futurism,"Motion-Driven , Vibrant & Block-based",Feature-Rich Showcase,N/A - Game focused,Vibrant + neon + immersive colors,Immersion priority. Performance critical.
+13,Government/Public Service,"government, civic, municipal, federal, citizen, public, administration, permit, tax, voter, transparency, regulation",Accessible & Ethical + Minimalism & Swiss Style,"Flat Design , Inclusive Design",Minimal & Direct,Executive Dashboard,Professional blue + high contrast,WCAG AAA mandatory. Trust paramount.
+14,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.
+15,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.
+16,Productivity Tool,"collaboration, productivity, project, task, tool, workflow",Flat Design + Micro-interactions,"Minimalism & Swiss Style , Soft UI Evolution",Interactive Product Demo,Drill-Down Analytics,Clear hierarchy + functional colors,Ease of use. Speed & efficiency focus.
+17,Design System/Component Library,"component, design, library, system",Minimalism & Swiss Style + Accessible & Ethical,"Flat Design , Zero Interface",Feature-Rich Showcase,N/A - Dev focused,Clear hierarchy + code-like structure,Consistency. Developer-first approach.
+18,AI/Chatbot Platform,"ai, artificial-intelligence, automation, chatbot, machine-learning, ml, platform",AI-Native UI + Minimalism & Swiss Style,"Zero Interface , Glassmorphism",Interactive Product Demo,AI/ML Analytics Dashboard,Neutral + AI Purple (#6366F1),Conversational UI. Streaming text. Context awareness. Minimal chrome.
+19,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.
+20,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.
+21,Remote Work/Collaboration Tool,"collaboration, remote, tool, work",Soft UI Evolution + Minimalism & Swiss Style,"Glassmorphism , Micro-interactions",Feature-Rich Showcase,Drill-Down Analytics,Calm Blue + Neutral grey,Real-time collaboration. Status indicators. Video integration. Notification management.
+22,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.
+23,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.
+24,Smart Home/IoT Dashboard,"admin, analytics, dashboard, data, home, iot, panel, smart",Glassmorphism + Dark Mode (OLED),"Minimalism & Swiss Style , AI-Native UI",Interactive Product Demo,Real-Time Monitoring,Dark + Status indicator colors,Device status. Real-time controls. Energy monitoring. Automation rules. Quick actions.
+25,EV/Charging Ecosystem,"charging, ecosystem, ev",Minimalism & Swiss Style + Aurora UI,"Glassmorphism , Organic Biophilic",Hero-Centric Design,Energy/Utilities Dashboard,Electric Blue (#009CD1) + Green,Charging station maps. Range estimation. Cost calculation. Environmental impact.
+26,Subscription Box Service,"subscription, box, recurring, membership, unboxing, curated, plan, monthly, surprise, product-box",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.
+27,Podcast Platform,"platform, podcast",Dark Mode (OLED) + Minimalism & Swiss Style,"Motion-Driven , Vibrant & Block-based",Storytelling-Driven,Media/Entertainment Dashboard,Dark + Audio waveform accents,Audio player UX. Episode discovery. Creator tools. Analytics for podcasters.
+28,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.
+29,Micro-Credentials/Badges Platform,"badges, credentials, micro, platform",Minimalism & Swiss Style + 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.
+30,Knowledge Base/Documentation,"base, documentation, knowledge",Minimalism & Swiss Style + 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.
+31,Hyperlocal Services,"hyperlocal, local, neighborhood, nearby, community, nearby, zip, map, local-business, geo-target, city",Minimalism & Swiss Style + 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.
+32,Beauty/Spa/Wellness Service,"spa, beauty, salon, wellness, treatment, relaxation, massage, skincare, facial, aesthetic, self-care, pamper",Soft UI Evolution + Neumorphism,"Glassmorphism , Minimalism & Swiss Style",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.
+33,Luxury/Premium Brand,"brand, elegant, exclusive, high-end, luxury, premium",Liquid Glass + Glassmorphism,"Minimalism & Swiss Style , 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.
+34,Restaurant/Food Service,"restaurant, menu, order, food, dining, reservation, delivery, cuisine, chef, table, takeaway, eatery",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.
+35,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.
+36,Real Estate/Property,"buy, estate, housing, property, real, real-estate, rent",Glassmorphism + Minimalism & Swiss Style,"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.
+37,Travel/Tourism Agency,"travel, tourism, vacation, flight, hotel, destination, adventure, cruise, safari, backpacking, guided-tour, holiday-package",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.
+38,Hotel/Hospitality,"hospitality, hotel",Liquid Glass + Minimalism & Swiss Style,"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.
+39,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.
+40,Legal Services,"law, attorney, legal, case, compliance, contract, court, firm, counsel, litigation, practice-area, jurisdiction",Accessible & Ethical + Minimalism & Swiss Style,"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.
+41,Insurance Platform,"insurance, platform",Minimalism & Swiss Style + Flat Design,"Accessible & Ethical , Minimalism & Swiss Style",Conversion-Optimized + Trust,Claims Analytics Dashboard,Trust Blue (#0066CC) + Green (security) + Neutral,Quote calculator. Policy comparison. Claims process. Trust signals. Clear pricing. Security badges.
+42,Banking/Traditional Finance,"banking, finance, traditional",Minimalism & Swiss Style + Accessible & Ethical,"Swiss Modernism 2.0 , 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.
+43,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.
+44,Non-profit/Charity,"charity, non, profit",Accessible & Ethical + Organic Biophilic,"Minimalism & Swiss Style , Editorial Grid / Magazine",Storytelling-Driven + Trust,Donation Analytics Dashboard,Cause-related colors + Trust + Warm,Impact stories. Donation flow. Transparency reports. Volunteer signup. Event calendar. Emotional connection.
+45,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.
+46,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.
+47,Job Board/Recruitment,"board, job, recruitment",Flat Design + Minimalism & Swiss Style,"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.
+48,Marketplace (P2P),"buyers, listings, marketplace, p, platform, sellers",Vibrant & Block-based + Flat Design,"Micro-interactions , Bento Box Grid",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.
+49,Logistics/Delivery,"delivery, logistics",Minimalism & Swiss Style + 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.
+50,Agriculture/Farm Tech,"agriculture, farm, tech",Organic Biophilic + Flat Design,"Minimalism & Swiss Style , 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.
+51,Construction/Architecture,"architecture, construction",Minimalism & Swiss Style + 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.
+52,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.
+53,Photography Studio,"photography, studio",Motion-Driven + Minimalism & Swiss Style,"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.
+54,Coworking Space,"coworking, space",Vibrant & Block-based + Glassmorphism,"Minimalism & Swiss Style , 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.
+55,Home Services (Plumber/Electrician),"plumber, electrician, hvac, handyman, repair, maintenance, home, emergency, leak, wiring, inspection, licensed",Flat Design + Accessible & Ethical,"Minimalism & Swiss Style , Accessible & Ethical",Conversion-Optimized + Trust,Service Analytics,Trust Blue + Safety Orange + Professional grey,Service list. Emergency contact. Booking. Price transparency. Certifications. Local trust signals.
+56,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.
+57,Senior Care/Elderly,"care, elderly, senior",Accessible & Ethical + Soft UI Evolution,"Minimalism & Swiss Style , 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.
+58,Medical Clinic,"clinic, medical",Accessible & Ethical + Minimalism & Swiss Style,"Neumorphism , Soft UI Evolution",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.
+59,Pharmacy/Drug Store,"drug, pharmacy, store",Flat Design + Accessible & Ethical,"Minimalism & Swiss Style , Soft UI Evolution",Conversion-Optimized + Trust,Inventory Dashboard,Pharmacy Green + Trust Blue + Clean White,Product catalog. Prescription upload. Refill reminders. Health info. Store locator. Safety certifications.
+60,Dental Practice,"dental, practice",Soft UI Evolution + Minimalism & Swiss Style,"Accessible & Ethical , Inclusive Design",Social Proof-Focused + Conversion,Patient Analytics,Fresh Blue + White + Smile Yellow accent,Services. Dentist profiles. Before/after. Online booking. Insurance. Patient testimonials. Friendly imagery.
+61,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.
+62,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.
+63,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.
+64,Brewery/Winery,"brewery, winery",Motion-Driven + Vintage Analog / Retro Film,"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.
+65,Airline,"airline, aviation, flight, travel, booking, airport, flying",Minimalism & Swiss Style + 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.
+66,News/Media Platform,"content, entertainment, media, news, platform, streaming, video",Minimalism & Swiss Style + 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.
+67,Magazine/Blog,"articles, blog, content, magazine, posts, writing",Swiss Modernism 2.0 + Motion-Driven,"Minimalism & Swiss Style , 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.
+68,Freelancer Platform,"freelancer, platform",Flat Design + Minimalism & Swiss Style,"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.
+69,Marketing Agency,"campaign, ads, growth, roi, seo, sem, ppc, social-media, conversion-funnel, ab-test, attribution, performance-marketing",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.
+70,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.
+71,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.
+72,Newsletter Platform,"newsletter, platform",Minimalism & Swiss Style + 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.
+73,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.
+74,Church/Religious Organization,"church, organization, religious",Accessible & Ethical + Soft UI Evolution,"Minimalism & Swiss Style , Inclusive Design",Hero-Centric Design + Social Proof,N/A - Community focused,Warm Gold + Deep Purple/Blue + White,Service times. Events. Sermons. Community. Giving. Location. Welcoming imagery.
+75,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.
+76,Museum/Gallery,"gallery, museum",Minimalism & Swiss Style + 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.
+77,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.
+78,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.
+79,Coding Bootcamp,"bootcamp, coding",Dark Mode (OLED) + Minimalism & Swiss Style,"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.
+80,Cybersecurity Platform,"cyber, security, platform",Cyberpunk UI + Dark Mode (OLED),"Neubrutalism , Minimalism & Swiss Style",Trust & Authority + Real-Time,Real-Time Monitoring + Heat Map,Matrix Green + Deep Black + Terminal feel,Data density. Threat visualization. Dark mode default.
+81,Developer Tool / IDE,"dev, developer, tool, ide",Dark Mode (OLED) + Minimalism & Swiss Style,"Flat Design , Bento Box Grid",Minimal & Direct + Documentation,Real-Time Monitor + Terminal,Dark syntax theme colors + Blue focus,Keyboard shortcuts. Syntax highlighting. Fast performance.
+82,Biotech / Life Sciences,"biotech, biology, science",Glassmorphism + Biomimetic / Organic 2.0,"Minimalism & Swiss Style , Organic Biophilic",Storytelling-Driven + Research,Data-Dense + Predictive,Sterile White + DNA Blue + Life Green,Data accuracy. Cleanliness. Complex data viz.
+83,Space Tech / Aerospace,"aerospace, space, tech",HUD / Sci-Fi FUI + Dark Mode (OLED),"Glassmorphism , 3D & Hyperrealism",Immersive Experience + Hero,Real-Time Monitoring + 3D,Deep Space Black + Star White + Metallic,High-tech feel. Precision. Telemetry data.
+84,Architecture / Interior,"architecture, design, interior",Exaggerated Minimalism + 3D & Hyperrealism,"Swiss Modernism 2.0 , Parallax Storytelling",Portfolio Grid + Visuals,Project Management + Gallery,Monochrome + Gold Accent + High Imagery,High-res images. Typography. Space.
+85,Quantum Computing Interface,"quantum, computing, physics, qubit, future, science",HUD / Sci-Fi FUI + Dark Mode (OLED),"Glassmorphism , Spatial UI (VisionOS)",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.
+86,Biohacking / Longevity App,"biohacking, health, longevity, tracking, wellness, science",Biomimetic / Organic 2.0,"Minimalism & Swiss Style , 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.
+87,Autonomous Drone Fleet Manager,"drone, autonomous, fleet, aerial, logistics, robotics",HUD / Sci-Fi FUI,"Real-Time Monitoring , Spatial UI (VisionOS)",Real-Time Monitor,Geographic + Real-Time,Tactical Green #00FF00 + Alert Red + Map Dark,Real-time telemetry. 3D spatial awareness. Latency indicators. Safety alerts.
+88,Generative Art Platform,"art, generative, ai, creative, platform, gallery",Minimalism & Swiss Style + Gen Z Chaos / Maximalism,"Bento Box Grid , Dark Mode (OLED)",Bento Grid Showcase,Gallery / Portfolio,Neutral #F5F5F5 (Canvas) + User Content,Content is king. Fast loading. Creator attribution. Minting flow.
+89,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.
+90,Sustainable Energy / Climate Tech,"climate, energy, sustainable, green, tech, carbon",Organic Biophilic + E-Ink / Paper,"Data-Dense Dashboard , Swiss Modernism 2.0",Interactive Demo + Data,Energy/Utilities Dashboard,Earth Green + Sky Blue + Solar Yellow,Data transparency. Impact visualization. Low-carbon web design.
+91,Personal Finance Tracker,"budget, expense, money, finance, spending, savings, tracker, personal, wallet",Glassmorphism + Dark Mode (OLED),"Minimalism & Swiss Style , Flat Design",Interactive Product Demo,Financial Dashboard,Calm blue + success green + alert red + chart accents,Category pie/donut charts. Monthly trend lines. Budget progress bars. Transaction list with swipe actions. Receipt camera. Currency formatting. Recurring entries.
+92,Chat & Messaging App,"chat, message, messenger, im, realtime, conversation, inbox, dm, whatsapp, telegram",Minimalism & Swiss Style + Micro-interactions,"Glassmorphism , Flat Design",Feature-Rich Showcase + Demo,User Behavior Analytics,Brand primary + bubble contrast (sender/receiver) + typing grey,Bubble UI (left/right alignment). Typing indicators. Read receipts (✓✓). Image/file preview. Emoji reactions. Group avatars. Online status dots. Swipe-to-reply.
+93,Notes & Writing App,"notes, memo, writing, editor, notebook, markdown, journal, notion, obsidian",Minimalism & Swiss Style + Flat Design,"Swiss Modernism 2.0 , Soft UI Evolution",Minimal & Direct,N/A - Editor focused,Clean white/cream + minimal accent + editor syntax colors,WYSIWYG or Markdown toggle. Folder/tag organization. Full-text search. Cloud sync. Typography-first. Distraction-free zen mode. Slash-command palette.
+94,Habit Tracker,"habit, streak, routine, daily, tracker, goals, consistency, discipline",Claymorphism + Vibrant & Block-based,"Micro-interactions , Flat Design",Social Proof-Focused + Demo,User Behavior Analytics,Streak warm (amber/orange) + progress green + motivational accents,Streak calendar heatmap. Daily check-in interaction. Gamification (badges/levels/fire). Reminder push. Progress ring charts. Weekly/monthly stats. Motivational micro-copy.
+95,Food Delivery / On-Demand,"delivery, food, order, uber-eats, doordash, takeout, on-demand, courier",Vibrant & Block-based + Motion-Driven,"Glassmorphism , Flat Design",Hero-Centric Design + Feature-Rich,Real-Time Monitoring + Map,Appetizing warm (orange/red) + trust blue + map accent,Restaurant cards with ratings. Menu category horizontal scroll. Cart bottom sheet. Real-time map tracking + driver ETA. Order status stepper. Rating post-delivery.
+96,Ride Hailing / Transportation,"ride, taxi, uber, lyft, transport, carpool, driver, trip, fare",Minimalism & Swiss Style + Glassmorphism,"Dark Mode (OLED) , Motion-Driven",Conversion-Optimized + Demo,Real-Time Monitoring + Map,Brand primary + map neutral + status indicator colors,Map-centric full-screen UI. Pickup/dropoff pins + route polyline. Driver card (photo/rating/vehicle). Fare estimate. Trip timer. Safety SOS button. Payment sheet.
+97,Recipe & Cooking App,"recipe, cooking, food, kitchen, cookbook, meal, ingredient, chef",Claymorphism + Vibrant & Block-based,"Soft UI Evolution , Organic Biophilic",Hero-Centric Design + Feature-Rich,N/A - Content focused,Warm food tones (terracotta/sage/cream) + appetizing imagery,Step-by-step with checkable instructions. Ingredient list with serving adjuster. Built-in timer per step. Cooking mode (screen-awake + large text). Save/bookmark. Share.
+98,Meditation & Mindfulness,"meditation, mindfulness, calm, breathe, wellness, relaxation, sleep, headspace",Neumorphism + Soft UI Evolution,"Aurora UI , Glassmorphism",Storytelling-Driven + Social Proof,User Behavior Analytics,Ultra-calm pastels (lavender/sage/sky) + breathing animation gradient,Breathing circle animation. Session duration picker. Ambient sound mixer. Streak/consistency tracking. Guided audio player. Sleep timer. Minimal chrome. Slow easing transitions only.
+99,Weather App,"weather, forecast, temperature, climate, rain, sun, location, humidity",Glassmorphism + Aurora UI,"Motion-Driven , Minimalism & Swiss Style",Hero-Centric Design,N/A - Utility focused,Atmospheric gradients (sky blue → sunset → storm grey) + temp scale,Location auto-detect. Hourly horizontal scroll + daily/weekly list. Animated weather icons. Air quality index. UV/wind/humidity chips. Radar map overlay. Widget-friendly layout.
+100,Diary & Journal App,"diary, journal, personal, daily, reflection, mood, gratitude, writing",Soft UI Evolution + Minimalism & Swiss Style,"Neumorphism , Sketch Hand-Drawn (Mobile)",Storytelling-Driven,N/A - Personal focused,Warm paper tones (cream/linen) + muted ink + mood-coded accents,Calendar month-view entry. Mood tag selector (emoji/color). Photo/voice attachment. Writing prompts. Privacy lock (FaceID/PIN). Search across entries. Export to PDF.
+101,CRM & Client Management,"crm, client, customer, sales, pipeline, contact, lead, deal, hubspot",Flat Design + Minimalism & Swiss Style,"Soft UI Evolution , Micro-interactions",Feature-Rich Showcase + Demo,Sales Intelligence Dashboard,Professional blue + pipeline stage colors + closed-won green,Contact card list with avatar. Pipeline kanban board. Activity timeline. Quick-log (call/email/meeting). Deal amount + probability. Tag/segment filter. Mobile quick-actions.
+102,Inventory & Stock Management,"inventory, stock, warehouse, product, barcode, supply, sku, management",Flat Design + Minimalism & Swiss Style,"Dark Mode (OLED) , Accessible & Ethical",Feature-Rich Showcase,Real-Time Monitoring + Data-Dense,Functional neutral + status traffic-light (green/amber/red) + scanner accent,Product list/grid with thumbnails. Barcode/QR scanner. Stock level badges. Low-stock alert banner. Category/location filter. Batch edit. Reorder trigger. Audit log.
+103,Flashcard & Study Tool,"flashcard, quiz, study, spaced-repetition, anki, learn, memory, exam",Claymorphism + Micro-interactions,"Vibrant & Block-based , Flat Design",Feature-Rich Showcase + Demo,Learning Analytics,Playful primary + correct green + incorrect red + progress blue,3D card flip animation. Spaced repetition algorithm. Deck browser. Session progress bar. Streak tracking. Timed quiz mode. Share/import decks. Rich text + image cards.
+104,Booking & Appointment App,"booking, appointment, schedule, calendar, reservation, slot, service",Soft UI Evolution + Flat Design,"Minimalism & Swiss Style , Micro-interactions",Conversion-Optimized,Drill-Down Analytics,Trust blue + available green + booked grey + confirm accent,Calendar strip or month picker. Available time-slot grid. Service + staff selector. Confirmation summary. Reminder push. Reschedule/cancel flow. Two-sided (provider ↔ client).
+105,Invoice & Billing Tool,"invoice, billing, payment, receipt, freelance, estimate, quote, accounting",Minimalism & Swiss Style + Flat Design,"Swiss Modernism 2.0 , Accessible & Ethical",Conversion-Optimized + Trust,Financial Dashboard,Professional navy + paid green + overdue red + neutral grey,Invoice template with line items. Tax/discount calculation. Status badges (Draft/Sent/Paid/Overdue). PDF export + share. Payment link generation. Client address book. Recurring invoices.
+106,Grocery & Shopping List,"grocery, shopping, list, supermarket, checklist, pantry, meal-plan, buy",Flat Design + Vibrant & Block-based,"Claymorphism , Micro-interactions",Minimal & Direct + Demo,N/A - List focused,Fresh green + food-category colors + checkmark accent,Category-grouped list. Tap-to-check interaction (with strikethrough). Quantity stepper. Share list with family. Store aisle sorting. Barcode scan to add. Frequently bought suggestions.
+107,Timer & Pomodoro,"timer, pomodoro, countdown, stopwatch, focus, clock, productivity, interval",Minimalism & Swiss Style + Neumorphism,"Dark Mode (OLED) , Micro-interactions",Minimal & Direct,N/A - Utility focused,High-contrast on dark + focus red/amber + break green,Large centered countdown digits. Circular progress ring. Session/break auto-switch. Session history log. Custom interval settings. Sound + haptic alerts. Focus stats chart.
+108,Parenting & Baby Tracker,"baby, parenting, child, feeding, sleep, diaper, milestone, family, newborn",Claymorphism + Soft UI Evolution,"Vibrant & Block-based , Accessible & Ethical",Social Proof-Focused + Trust,User Behavior Analytics,Soft pastels (baby pink/sky blue/mint/peach) + warm accents,Feed/sleep/diaper quick-log buttons. Growth percentile chart. Milestone timeline with photos. Multiple child profiles. Partner invite + shared access. Pediatric reference. One-handed operation.
+109,Scanner & Document Manager,"scanner, document, ocr, pdf, scan, camera, file, archive, digitize",Minimalism & Swiss Style + Flat Design,"Dark Mode (OLED) , Accessible & Ethical",Feature-Rich Showcase + Demo,N/A - Tool focused,Clean white + camera viewfinder accent + file-type color coding,Camera capture with auto-edge detection. Crop/rotate/enhance. OCR text extraction overlay. PDF multi-page creation. Folder tree organization. Cloud sync. Share/export. Batch scan mode.
+110,Calendar & Scheduling App,"calendar, scheduling, planner, agenda, events, reminder, appointment, organize, date, sync",Flat Design + Micro-interactions,"Minimalism & Swiss Style , Soft UI Evolution",Feature-Rich Showcase + Demo,N/A - Calendar focused,Clean blue + event category accent colors + success green,Event color coding. Week/month/day views. Recurring events. Conflict detection. Multi-calendar sync.
+111,Password Manager,"password, security, vault, credentials, login, secure, encrypt, keychain, 2fa, biometric",Minimalism & Swiss Style + Accessible & Ethical,"Dark Mode (OLED) , Swiss Modernism 2.0",Trust & Authority + Feature-Rich,N/A - Vault focused,Trust blue + security green + dark neutral,Security-first. Zero-knowledge architecture. Biometric unlock. Breach alert dashboard. Password generator.
+112,Expense Splitter / Bill Split,"split, expense, bill, aa, share, friends, group, settle, debt, payment, owe",Flat Design + Vibrant & Block-based,"Minimalism & Swiss Style , Micro-interactions",Minimal & Direct + Demo,N/A - Balance focused,Success green + alert red + neutral grey + avatar accent colors,Group expense tracking. Debt simplification algorithm. Payment reminders. Multi-currency. Receipt photo import.
+113,Voice Recorder & Memo,"voice, recorder, memo, audio, transcription, dictate, recording, microphone, note, otter",Minimalism & Swiss Style + AI-Native UI,"Flat Design , Dark Mode (OLED)",Interactive Product Demo + Minimal,N/A - Recording focused,Clean white + recording red + waveform accent,Waveform display. Background recording. Auto-transcription (AI). Tag/organize. Cloud sync.
+114,Bookmark & Read-Later,"bookmark, read-later, save, article, pocket, link, reading, archive, collection, raindrop",Minimalism & Swiss Style + Flat Design,"Editorial Grid / Magazine , Swiss Modernism 2.0",Minimal & Direct + Demo,N/A - List focused,Paper warm white + ink neutral + minimal accent + tag colors,Fast save via share sheet. Article distraction-free view. Tags and collections. Offline sync. Reading progress.
+115,Translator App,"translate, language, text, voice, ocr, dictionary, multilingual, real-time, detect, deepl",Flat Design + AI-Native UI,"Minimalism & Swiss Style , Micro-interactions",Feature-Rich Showcase + Interactive Demo,N/A - Utility focused,Global blue + neutral grey + language flag accent,Real-time camera translation (OCR). Voice input and output. Offline mode. Conversation mode. Phrasebook.
+116,Calculator & Unit Converter,"calculator, converter, unit, math, currency, measurement, scientific, formula, percentage",Neumorphism + Minimalism & Swiss Style,"Flat Design , Dark Mode (OLED)",Minimal & Direct,N/A - Utility focused,Dark functional + orange operation keys + clear button hierarchy,Scientific mode toggle. Live currency rates. Calculation history. Widget support. Gesture input.
+117,Alarm & World Clock,"alarm, clock, world, timezone, timer, wake, sleep, schedule, reminder, bedtime",Dark Mode (OLED) + Minimalism & Swiss Style,"Neumorphism , Flat Design",Minimal & Direct,N/A - Utility focused,Deep dark + ambient glow accent + timezone gradient,Gentle wake (gradual volume). Timezone visualizer. Sleep tracking integration. Smart alarm skip. Bedtime mode.
+118,File Manager & Transfer,"file, manager, transfer, folder, document, storage, cloud, share, organize, compress",Flat Design + Minimalism & Swiss Style,"Accessible & Ethical , Dark Mode (OLED)",Feature-Rich Showcase + Demo,N/A - File tree focused,"Functional neutral + file type color coding (PDF orange, doc blue, image purple)",Folder tree navigation. File type preview. Wireless P2P transfer. Cloud integration. Compress and extract.
+119,Email Client,"email, mail, inbox, compose, thread, newsletter, filter, reply, gmail, spark, superhuman",Flat Design + Minimalism & Swiss Style,"Micro-interactions , Soft UI Evolution",Feature-Rich Showcase + Demo,N/A - Inbox focused,Clean white + brand primary + priority red + snooze amber,Unified inbox. Swipe actions (archive/delete/snooze). Priority sorting. Smart reply. Unsubscribe tool.
+120,Casual Puzzle Game,"puzzle, casual, match, brain, game, relaxing, level, tiles, logic, block, three",Claymorphism + Vibrant & Block-based,"Micro-interactions , Motion-Driven",Feature-Rich Showcase + Social Proof,N/A - Game focused,Cheerful pastels + progression gradient + reward gold + bright accent,Satisfying match/clear animations. Progressive difficulty. Daily challenges. No-skip tutorials. Offline play.
+121,Trivia & Quiz Game,"trivia, quiz, knowledge, question, answer, challenge, leaderboard, fact, brain, compete",Vibrant & Block-based + Micro-interactions,"Claymorphism , Flat Design",Feature-Rich Showcase + Social Proof,Leaderboard Analytics,Energetic blue + correct green + incorrect red + leaderboard gold,Timer pressure UX. Category selection. Streak system. Real-time multiplayer. Daily quiz mode.
+122,Card & Board Game,"card, board, chess, checkers, poker, strategy, turn-based, multiplayer, classic, tabletop",3D & Hyperrealism + Flat Design,"Motion-Driven , Dark Mode (OLED)",Feature-Rich Showcase,N/A - Game focused,Game-theme felt green + dark wood + card back patterns,Real-time or async multiplayer. Game state sync. Tutorial mode. Match history. ELO rating system.
+123,Idle & Clicker Game,"idle, clicker, incremental, passive, cookie, adventure, progress, offline, collect, prestige",Vibrant & Block-based + Motion-Driven,"Claymorphism , 3D & Hyperrealism",Feature-Rich Showcase,N/A - Progress focused,Coin gold + upgrade blue + prestige purple + progress green,Offline progress calculation. Satisfying number animations. Upgrade tree clarity. Prestige system. Optional ads.
+124,Word & Crossword Game,"word, crossword, wordle, spelling, vocabulary, letters, grid, puzzle, dictionary, daily",Minimalism & Swiss Style + Flat Design,"Swiss Modernism 2.0 , Micro-interactions",Minimal & Direct + Demo,N/A - Game focused,Clean white + warm letter tiles + success green + shake red,Daily challenge with shareable results. Physical keyboard feel. Difficulty levels. Dictionary hints. Streak stats.
+125,Arcade & Retro Game,"arcade, retro, 8bit, action, shoot, runner, tap, reflex, endless, pixel, classic, score",Pixel Art + Retro-Futurism,"Vibrant & Block-based , Motion-Driven",Feature-Rich Showcase + Hero-Centric,N/A - Score focused,Neon on black + pixel palette + score gold + danger red,Instant play with no login. Game Center leaderboards. Haptic feedback on collision. Offline. Controller support.
+126,Photo Editor & Filters,"photo, edit, filter, vsco, snapseed, enhance, crop, retouch, adjust, luts, preset, adjust",Minimalism & Swiss Style + Dark Mode (OLED),"Motion-Driven , Flat Design",Feature-Rich Showcase + Interactive Demo,N/A - Editor focused,Dark editor background + vibrant filter preview strip + tool icon accent,Non-destructive editing. Filter preview carousel. Histogram. RAW support. Batch export. Social share direct.
+127,Short Video Editor,"video, edit, capcut, inshot, clip, reel, tiktok, trim, effects, transitions, music, timeline",Dark Mode (OLED) + Motion-Driven,"Vibrant & Block-based , Glassmorphism",Feature-Rich Showcase + Hero-Centric,N/A - Timeline editor focused,Dark background + timeline track accent colors + effect preview vivid,Multi-track timeline. Licensed music library. Text overlays. Auto-captions. Export 9:16 / 16:9 / 1:1.
+128,Drawing & Sketching Canvas,"drawing, sketch, procreate, canvas, paint, illustration, digital, brush, layers, art, stylus",Minimalism & Swiss Style + Dark Mode (OLED),"Anti-Polish / Raw Aesthetic , Motion-Driven",Interactive Product Demo + Storytelling,N/A - Canvas focused,Neutral canvas + full-spectrum color picker + tool panel dark,Pressure sensitivity. Infinite canvas (pan/zoom). Layer management. Undo history. Export PNG/PSD/SVG.
+129,Music Creation & Beat Maker,"music, beat, daw, garageband, create, loop, sample, instrument, track, compose, record, midi",Dark Mode (OLED) + Motion-Driven,"Cyberpunk UI , Glassmorphism",Interactive Product Demo + Storytelling,N/A - DAW focused,Dark studio background + track colors rainbow + waveform accent + BPM pulse,Touch piano and drum pad. Loop browser. MIDI support. Export MP3/WAV. Low-latency audio engine.
+130,Meme & Sticker Maker,"meme, sticker, maker, funny, caption, template, edit, share, viral, emoji, creator, reaction",Vibrant & Block-based + Flat Design,"Gen Z Chaos / Maximalism , Claymorphism",Feature-Rich Showcase + Social Proof,N/A - Creator focused,Bold primary + comedic yellow + viral red + high saturation accent,Template library. Caption text overlay. Font variety. Reaction sticker packs. Share to all platforms. Fast creation.
+131,AI Photo & Avatar Generator,"ai, photo, avatar, lensa, portrait, generate, selfie, style, filter, prisma, art",AI-Native UI + Aurora UI,"Glassmorphism , Minimalism & Swiss Style",Feature-Rich Showcase + Social Proof,N/A - Generation focused,AI purple + aurora gradients + before/after neutral,Style selection. Multiple output variations. Privacy policy prominent. Fast generation. Credits/subscription system.
+132,Link-in-Bio Page Builder,"bio, link, linktree, personal, page, creator, social, portfolio, profile, landing, custom",Vibrant & Block-based + Bento Box Grid,"Minimalism & Swiss Style , Glassmorphism",Conversion-Optimized + Social Proof,Analytics (click tracking),Brand-customizable + accent link color + clean white canvas,Drag-drop builder. Theme templates. Click analytics. Custom domain. Social icon integration. QR code export.
+133,Wardrobe & Outfit Planner,"wardrobe, outfit, fashion, clothes, closet, style, wear, plan, capsule, ootd, lookbook",Minimalism & Swiss Style + Motion-Driven,"Aurora UI , Soft UI Evolution",Storytelling-Driven + Feature-Rich,N/A - Wardrobe focused,Clean fashion neutral + full clothes color palette + accent,Photo catalog of clothes. AI outfit suggestions. Calendar integration. Capsule wardrobe. Season filtering.
+134,Plant Care Tracker,"plant, care, water, garden, tracker, reminder, species, photo, grow, health, planta",Organic Biophilic + Soft UI Evolution,"Claymorphism , Flat Design",Storytelling-Driven + Social Proof,N/A - Plant collection focused,Nature greens + earth brown + sunny yellow reminder + water blue,Plant database with care guides. Watering reminders. Growth photo timeline. AI health diagnosis. Collection sharing.
+135,Book & Reading Tracker,"book, reading, tracker, goodreads, library, shelf, progress, review, notes, goal, literature",Swiss Modernism 2.0 + Minimalism & Swiss Style,"E-Ink / Paper , Soft UI Evolution",Social Proof-Focused + Feature-Rich,N/A - Library focused,Warm paper white + ink brown + reading progress green + book cover colors,Barcode scan to add. Progress percentage. Annual reading goal. Notes and quotes. Friends activity. Genre stats.
+136,Couple & Relationship App,"couple, relationship, partner, love, date, anniversary, memory, shared, intimate, between",Aurora UI + Soft UI Evolution,"Claymorphism , Glassmorphism",Storytelling-Driven + Social Proof,N/A - Couple focused,Warm romantic pink/rose + soft gradient + memory photo tones,Shared timeline. Anniversary countdowns. Secret chat. Photo albums. Love language quiz. Date night ideas.
+137,Family Calendar & Chores,"family, calendar, chores, tasks, household, shared, kids, schedule, cozi, organize, member",Flat Design + Claymorphism,"Accessible & Ethical , Vibrant & Block-based",Feature-Rich Showcase + Social Proof,N/A - Family hub focused,Warm playful + member color coding + chore completion green,Member color coding. Chore assignment rotation. Recurring events. Shared shopping list. Allowance tracking.
+138,Mood Tracker,"mood, emotion, feeling, mental, daily, journal, wellbeing, check-in, log, track, daylio",Soft UI Evolution + Minimalism & Swiss Style,"Aurora UI , Neumorphism",Storytelling-Driven + Social Proof,N/A - Mood chart focused,Emotion gradient (blue sad to yellow happy) + pastel per mood + insight accent,One-tap daily check-in. Emotion wheel selector. Mood calendar heatmap. Pattern insights. Export and share.
+139,Gift & Wishlist,"gift, wishlist, present, birthday, occasion, registry, idea, shop, list, share, surprise",Vibrant & Block-based + Soft UI Evolution,"Claymorphism , Flat Design",Minimal & Direct + Conversion,N/A - List focused,Celebration warm pink/gold/red + category colors + surprise accent,Add from any URL. Price range filter. Reserved-by-others system. Occasion calendar. Collaborative list. Surprise mode.
+140,Running & Cycling GPS,"running, cycling, gps, strava, track, route, speed, distance, cadence, pace, workout, sport",Dark Mode (OLED) + Vibrant & Block-based,"Motion-Driven , Glassmorphism",Feature-Rich Showcase + Social Proof,Performance Analytics,Energetic orange + map accent + pace zones (green/yellow/red),Live GPS tracking. Route map. Auto-pause detection. Segment leaderboards. Training zones. Social feed. Garmin sync.
+141,Yoga & Stretching Guide,"yoga, stretch, flexibility, pose, asana, guided, session, calm, routine, wellness, down-dog",Organic Biophilic + Soft UI Evolution,"Neumorphism , Minimalism & Swiss Style",Storytelling-Driven + Social Proof,N/A - Session focused,Earth calming sage/terracotta/cream + breathing gradient + warm accent,Pose library with illustrations. Guided sessions with audio. Breathing exercises. Progress calendar. Beginner to advanced.
+142,Sleep Tracker,"sleep, tracker, alarm, cycle, quality, snore, analysis, rem, deep, smart, wake, insomnia",Dark Mode (OLED) + Neumorphism,"Glassmorphism , Minimalism & Swiss Style",Feature-Rich Showcase + Social Proof,Healthcare Analytics,Deep midnight blue + stars/moon accent + sleep quality gradient (poor red to great green),Sleep cycle detection. Smart alarm wakes at light sleep. Snore detection. Weekly trends. Apple Health integration.
+143,Calorie & Nutrition Counter,"calorie, nutrition, food, diet, macro, protein, carb, fat, log, fitness, myfitnesspal",Flat Design + Vibrant & Block-based,"Minimalism & Swiss Style , Claymorphism",Feature-Rich Showcase + Social Proof,Healthcare Analytics,"Healthy green + macro colors (protein blue, carb orange, fat yellow) + progress circle",Barcode scanner food log. Large database. Macro goals. Restaurant lookup. Recipe builder. AI photo food logging.
+144,Period & Cycle Tracker,"period, cycle, menstrual, fertility, ovulation, pms, log, women, health, flo, clue, hormone",Soft UI Evolution + Aurora UI,"Accessible & Ethical , Claymorphism",Social Proof-Focused + Trust,Healthcare Analytics,Rose/blush + lavender + fertility green + soft calendar tones,Cycle prediction. Symptom logging. Fertility window. Personalized insights. Privacy-first. Partner sharing option.
+145,Medication & Pill Reminder,"medication, pill, reminder, dose, schedule, prescription, drug, health, medisafe, refill",Accessible & Ethical + Flat Design,"Minimalism & Swiss Style , Soft UI Evolution",Trust & Authority + Feature-Rich,N/A - Schedule focused,Medical trust blue + missed alert red + taken green + clean white,Multi-medication schedule. Caregiver sharing. Refill reminders. Drug interaction warnings. Large touch targets.
+146,Water & Hydration Reminder,"water, hydration, drink, reminder, daily, tracker, glasses, intake, health, cup, aqua",Claymorphism + Vibrant & Block-based,"Flat Design , Micro-interactions",Minimal & Direct + Demo,N/A - Daily goal focused,Refreshing blue + water wave animation + goal progress accent,Tap to log quickly. Animated fill visualization. Custom reminders. Goal by weight/weather. Streak system. Widget.
+147,Fasting & Intermittent Timer,"fasting, intermittent, 16:8, timer, fast, eating, window, keto, diet, zero, weight, protocol",Minimalism & Swiss Style + Dark Mode (OLED),"Neumorphism , Flat Design",Feature-Rich Showcase + Social Proof,N/A - Timer focused,Fasting deep blue/purple + eating window green + timeline neutral,"Protocol selector (16:8, 18:6, OMAD). Circular countdown timer. Fasting history log. Tips during fast. Electrolytes."
+148,Anonymous Community / Confession,"anonymous, community, confess, whisper, secret, vent, share, safe, private, social, yikyak",Dark Mode (OLED) + Minimalism & Swiss Style,"Glassmorphism , Soft UI Evolution",Social Proof-Focused + Feature-Rich,User Behavior Analytics,Dark protective + subtle gradient + upvote green + empathy warm accent,Anonymous posting with moderation. Safety reporting. Reaction system. Trending topics. Mental health resources link.
+149,Local Events & Discovery,"local, events, discovery, meetup, nearby, social, city, activities, calendar, community, explore",Vibrant & Block-based + Motion-Driven,"Glassmorphism , Flat Design",Hero-Centric Design + Feature-Rich,Event Analytics,City vibrant + event category colors + map accent + date highlight,Location-based discovery. Category filters. RSVP flow. Map view. Friend attendance. Organizer tools. Reminders.
+150,Study Together / Virtual Coworking,"study, focus, cowork, pomodoro, virtual, together, session, accountability, live, stream, room",Minimalism & Swiss Style + Soft UI Evolution,"Flat Design , Dark Mode (OLED)",Social Proof-Focused + Feature-Rich,User Behavior Analytics,Calm focus blue + session progress indicator + ambient warm neutrals,Live study rooms with video/avatar presence. Shared focus timer. Ambient music. Goals sharing. Streak accountability.
+151,Coding Challenge & Practice,"coding, leetcode, challenge, algorithm, practice, programming, competitive, skill, interview, problem",Dark Mode (OLED) + Cyberpunk UI,"Minimalism & Swiss Style , Flat Design",Feature-Rich Showcase + Social Proof,Student Analytics,Code editor dark + success green + difficulty gradient (easy green / medium amber / hard red),Code editor with syntax highlight. Multiple languages. Hint system. Solution explanation. Company tags. Contest mode.
+152,Kids Learning (ABC & Math),"kids, children, learning, abc, math, phonics, numbers, education, games, preschool, early",Claymorphism + Vibrant & Block-based,"Micro-interactions , Flat Design",Social Proof-Focused + Trust,Parent Dashboard,Bright primary + child-safe pastels + reward gold + interactive accent,Age-appropriate UI for 2-8. No ads. No dark patterns. Curriculum aligned. Parent progress reports. Reward system.
+153,Music Instrument Learning,"music, instrument, piano, guitar, learn, lesson, tutorial, notes, play, chord, practice, simply",Vibrant & Block-based + Motion-Driven,"Dark Mode (OLED) , Soft UI Evolution",Interactive Product Demo + Social Proof,Learning Analytics,Musical warm deep red/brown + note color system + skill progress bar,Interactive instrument on-screen. Sheet music display. Song library. Slow-tempo practice. Recording and playback. Teacher mode.
+154,Parking Finder,"parking, spot, finder, map, pay, meter, garage, location, car, reserve, spothero",Minimalism & Swiss Style + Glassmorphism,"Flat Design , Micro-interactions",Conversion-Optimized + Feature-Rich,Real-Time Monitoring + Map,Trust blue + available green + occupied red + map neutral,Real-time availability. In-app navigation. Payment integration. Parking timer alert. Favorite spots. Street vs garage.
+155,Public Transit Guide,"transit, bus, metro, subway, train, route, schedule, map, city, commute, trip, citymapper",Flat Design + Accessible & Ethical,"Minimalism & Swiss Style , Motion-Driven",Feature-Rich Showcase + Interactive Demo,Real-Time Monitoring + Map,Transit brand line colors + real-time indicator green/red + map neutral,Real-time arrivals. Offline maps. Disruption alerts. Multi-modal routing. Fare calculation. Accessibility features.
+156,Road Trip Planner,"road, trip, drive, route, planner, travel, stop, map, adventure, scenic, car, wanderlog",Aurora UI + Organic Biophilic,"Motion-Driven , Vibrant & Block-based",Storytelling-Driven + Hero-Centric,N/A - Trip focused,Adventure warm sunset orange + map teal + stop markers + road neutral,Route planning with stops. Point-of-interest discovery. Gas/food/hotel along route. Offline maps. Trip sharing.
+157,VPN & Privacy Tool,"vpn, privacy, secure, anonymous, encrypt, proxy, ip, protect, shield, network, nordvpn",Minimalism & Swiss Style + Dark Mode (OLED),"Cyberpunk UI , Accessible & Ethical",Trust & Authority + Conversion-Optimized,N/A - Connection focused,Dark shield blue + connected green + disconnected red + trust accent,One-tap connect. Server selection by country. No-log policy prominent. Speed indicator. Kill switch. Protocol choice.
+158,Emergency SOS & Safety,"emergency, sos, safety, alert, location, help, danger, crisis, first-aid, guard, bsafe",Accessible & Ethical + Flat Design,"Dark Mode (OLED) , Minimalism & Swiss Style",Trust & Authority + Social Proof,N/A - Safety focused,Alert red + safety blue + location green + high contrast critical,One-tap SOS. Emergency contacts auto-notify. Live location sharing. Fake call feature. Safe walk mode. Local emergency numbers.
+159,Wallpaper & Theme App,"wallpaper, theme, background, customize, aesthetic, home-screen, lock-screen, widget, design, zedge",Vibrant & Block-based + Aurora UI,"Glassmorphism , Motion-Driven",Feature-Rich Showcase + Social Proof,N/A - Gallery focused,Content-driven + trending aesthetic palettes + download accent,Category browsing. Preview on device. Daily wallpaper auto-set. Widget matching. Creator uploads. Resolution auto-fit.
+160,White Noise & Ambient Sound,"white noise, ambient, sound, sleep, focus, rain, nature, relax, concentration, background, noisli",Minimalism & Swiss Style + Dark Mode (OLED),"Neumorphism , Organic Biophilic",Minimal & Direct + Social Proof,N/A - Player focused,Calming dark + ambient texture visual + subtle sound wave + sleep blue,Sound mixer with multiple simultaneous layers. Sleep timer with fade. Custom soundscapes. Offline. Background audio.
+161,Home Decoration & Interior Design,"home, interior, decor, design, furniture, room, renovation, ar, plan, inspire, 3d, houzz",Minimalism & Swiss Style + 3D Product Preview,"Organic Biophilic , Aurora UI",Storytelling-Driven + Feature-Rich,N/A - Project focused,Neutral interior palette + material texture accent + AR blue,AR room visualization. Style quiz. Product catalog with purchase links. 3D room planner. Mood board. Before/after.
+162,Academic Journal / Scholarly Publishing,"academic, journal, paper, research, peer-review, open-access, scholarly, publication, citation, manuscript, issn, doi",Swiss Modernism 2.0 + Minimalism & Swiss Style,"Editorial Grid / Magazine , Accessible & Ethical",Content-Index + Search,N/A - Publication focused,Trust navy + White + Citation blue + Serif accents,"Prioritize readability (serif body text). Clear article hierarchy. Abstract/DOI prominence. WCAG AAA. Minimal visual noise. Trust signals: ISSN, indexing badges."
+163,API Developer Portal,"api, developer, documentation, sdk, endpoint, integration, rest, graphql, webhook, reference, getting-started, auth",Accessible & Ethical + Minimalism & Swiss Style,"Glassmorphism , Dark Mode (OLED)",Quick Start + Interactive Docs,N/A - Documentation focused,Dark code theme + Brand accent + Syntax colors,Endpoint discoverability. Copy-paste code samples. Auth flow clarity. Version switching. Interactive playground. Rate limit visibility.
+164,Forum / Discussion Board,"forum, discussion, thread, post, reply, community, comment, moderation, subreddit, stackexchange, topic",Dark Mode (OLED) + Minimalism & Swiss Style,"Flat Design , Vibrant & Block-based",Feed + Thread View,N/A - Discussion focused,Dark neutral + topic accent colors + unread indicator + reputation badge,Thread list with pagination. Rich text editor. Quote/mention system. Upvote/downvote. User badges. Moderation tools.
+165,Directory / Listing Site,"directory, listing, classifieds, catalogue, business-directory, yellow-pages, venue, find, search, filter, map",Flat Design + Vibrant & Block-based,"Minimalism & Swiss Style , Bento Box Grid",Filter-Heavy Grid + Map,N/A - Listing focused,Neutral bg + category color chips + map accent + verified badge,Category tree. Multi-filter sidebar. Map/list toggle. Verified badges. Reviews. Claim listing flow.
+166,Status Page / Incident Management,"status, incident, outage, uptime, downtime, statuspage, monitoring, sla, maintenance, sev1, postmortem",Data-Dense Dashboard + Real-Time Monitoring,"Minimalism & Swiss Style , Dark Mode (OLED)",Timeline + Severity Indicators,Real-Time Monitoring + Timeline,Status green + incident red + maintenance amber + neutral dark,Service status matrix. Incident timeline. Severity badges. Maintenance schedule. SLA uptime history. Email/SMS subscribe.
+167,Wiki / Encyclopedia,"wiki, encyclopedia, knowledge, article, reference, wikipedia, documentation, collaborative, edit, version, citation",Minimalism & Swiss Style + Flat Design,"Swiss Modernism 2.0 , Accessible & Ethical",Search-First + Hierarchical Navigation,N/A - Reference focused,Clean white + link blue + heading hierarchy + citation grey,Full-text search bar. Table of contents sidebar. Edit history. Inter-page linking. Mobile responsive. Print-friendly.
+168,Auction Platform,"auction, bid, hammer, lot, live-auction, bidding-war, estate-sale, proxibid, gavel, lot-number, reserve-price",Dark Mode (OLED) + Motion-Driven,"Vibrant & Block-based , Real-Time Monitoring",Live Auction Feed + Countdown,N/A - Auction focused,Dark bg + bid green + outbid red + countdown amber,Real-time bid updates. Countdown timer urgency. Auto-bid ceiling. Outbid notifications. Bid history. Reserve price indicator.
+169,Changelog / Release Notes,"changelog, release-notes, version-history, whats-new, product-updates, semver, patch-notes, release-tracker",Minimalism & Swiss Style + Flat Design,"Swiss Modernism 2.0 , Editorial Grid / Magazine",Timeline + Version List,N/A - Documentation focused,"Neutral bg + version badge colors (feat=green, fix=blue, breaking=red) + date grey",Chronological release feed. Semver badges. Breaking change warnings. Copy-paste install commands. Subscribe to feed. Search by version.
+170,Citizen Science Platform,"citizen-science, zooniverse, crowdsourced-research, volunteer-science, public-participation, distributed-research, citizen-researcher",Organic Biophilic + Vibrant & Block-based,"Claymorphism , Motion-Driven",Storytelling-Driven + Social Proof,Project Participation Dashboard,Earth green + discovery orange + volunteer badge blue + data neutral,Project cards with impact metrics. Contribution tracker. Beginner-friendly onboarding. Data quality feedback loop. Leaderboards. Community forums.
+171,Classifieds / Buy-Sell,"classifieds, buy-sell, craigslist, secondhand, marketplace-listing, for-sale, trade, flea-market, thrift, resell",Flat Design + Vibrant & Block-based,"Minimalism & Swiss Style , Bento Box Grid",Filter-Heavy Grid + Map,N/A - Listing focused,Neutral bg + price green + category chips + verified seller badge,Category tree. Photo-first listing cards. Price negotiation. Location radius filter. Saved searches. Seller reputation. Flag/report.
+172,Conference / Symposium Landing Page,"conference, symposium, summit, cfp, call-for-papers, speaker-lineup, registration, venue, proceedings, keynote, track",Swiss Modernism 2.0 + Minimalism & Swiss Style,"Editorial Grid / Magazine , Accessible & Ethical",Hero + Agenda + CFP,N/A - Event focused,Academic navy + track color chips + gold keynote + neutral white,Speaker grid. Multi-track agenda. CFP deadline countdown. Venue map. Sponsor tiers. Early-bird pricing. Proceedings download.
+173,Crowdfunding Platform,"crowdfunding, kickstarter, indiegogo, campaign, backer, pledge, funding-goal, stretch-goal, reward-tier, all-or-nothing",Vibrant & Block-based + Motion-Driven,"Claymorphism , Editorial Grid / Magazine",Storytelling-Driven + Social Proof,Campaign Analytics Dashboard,Brand primary + funding progress green + urgency amber + reward tier colors,Funding progress bar with % goal. Reward tier selector. Backer count. Countdown timer. Updates feed. Creator profile. Risk/disclaimer section.
+174,Digital Signage / Kiosk,"digital-signage, kiosk, interactive-display, touchscreen, wayfinding, lobby-display, menu-board, point-of-sale-display",Minimalism & Swiss Style + Dark Mode (OLED),"Flat Design , Motion-Driven",Full-Screen Immersive,N/A - Display focused,High contrast + brand accent + touch target emphasis (56px min),Full-screen single-purpose layout. Touch targets ≥56px. Auto-rotate content. Offline fallback. Brightness-aware color palette. No scroll.
+175,E-signature / Document Workflow,"esignature, e-sign, docusign, digital-signature, document-workflow, approval-chain, contract-signing, signing-ceremony",Accessible & Ethical + Minimalism & Swiss Style,"Accessible & Ethical , Flat Design",Feature-Rich Showcase + Conversion,Document Pipeline Dashboard,Trust navy + signature green + pending amber + neutral grey,Document preview with annotation. Signature placement UI. Multi-signer workflow. Audit trail. Compliance badges. Mobile signing. Expiry reminders.
+176,Feature Flag / Config Management,"feature-flag, config, launchdarkly, feature-toggle, experiment, rollout, kill-switch, a-b-test-config, percentage-rollout",Dark Mode (OLED) + Data-Dense Dashboard,"Minimalism & Swiss Style , Accessible & Ethical",Feature List + Toggle Panel,N/A - Config focused,Dark bg + enabled green + disabled grey + experimental amber + kill-switch red,Feature list with on/off toggles. Percentage rollout slider. Environment selector (prod/staging). User targeting rules. Kill switch. Audit log.
+177,Government Portal / Civic Services,"government-portal, civic-services, city-hall, permit-application, tax-payment, voter-registration, public-records, municipal-online",Accessible & Ethical + Inclusive Design,"Flat Design , Inclusive Design",Service Directory + Search,N/A - Service focused,Professional blue + accessibility high contrast + service category colors,Multilingual toggle. Service A-Z index. Form wizard with save-progress. Document upload. Appointment booking. Status tracker. WCAG AAA. Plain language.
+178,Grant / Funding Portal,"grant, funding, rfp, proposal, research-grant, foundation, fellowship, award, application-portal, funding-opportunity",Accessible & Ethical + Minimalism & Swiss Style,"Accessible & Ethical , Swiss Modernism 2.0",Opportunity Grid + Search,Application Tracking Dashboard,Institution navy + funding green + deadline red + neutral white,Funding opportunity cards. Eligibility checker. Deadline countdown. Application form wizard. Document checklist. Review status tracker. Award announcement feed.
+179,LMS (Learning Management System),"lms, course-management, learning-management, canvas, moodle, blackboard, enrollment, gradebook, syllabus, assignment-submit",Flat Design + Accessible & Ethical,"Minimalism & Swiss Style , Vibrant & Block-based",Dashboard + Course Grid,Education Analytics Dashboard,Calm blue + course category colors + grade green + alert red,Dashboard with enrolled courses. Assignment deadlines. Gradebook view. Discussion forums. File upload. Calendar integration. Mobile offline sync.
+180,No-code / Low-code Builder,"no-code, low-code, builder, bubble, webflow, drag-drop, visual-builder, app-builder, workflow-builder, logic-blocks",Vibrant & Block-based + Bento Box Grid,"Motion-Driven , Glassmorphism",Interactive Product Demo,App Builder Workspace,Brand primary + component palette colors + canvas neutral + connect blue,Drag-drop canvas. Component library sidebar. Logic flow visual editor. Preview pane. Template gallery. Publish button. Version history.
+181,Open Source Project Landing,"open-source, github-project, oss, contributor, star, fork, pull-request, maintainer, sponsoring, readme, repository",Dark Mode (OLED) + Minimalism & Swiss Style,"Accessible & Ethical , Flat Design",Hero + Install + Contribute,Contributor Analytics Dashboard,Dark bg + language color bar + star gold + fork silver + sponsor purple,Star/fork count badges. Install command (copy-paste). Language breakdown bar. Top contributors grid. Sponsor CTA. Documentation link. Issue/pr status.
+182,Patient Portal / Health Records,"patient-portal, health-records, ehr, emr, mychart, lab-results, prescription-refill, medical-history, test-results, care-team",Minimalism & Swiss Style + Accessible & Ethical,"Minimalism & Swiss Style , Flat Design",Health Summary Dashboard,Healthcare Analytics,Clinical blue + health green + alert red + calm white + accessible contrast,Labs and results timeline. Medication list with refill. Appointment scheduling. Message care team. Immunization records. Allergy alerts. Family access proxy.
+183,Patent / IP Database,"patent, intellectual-property, trademark, prior-art, uspto, wipo, invention, ip-portfolio, patent-search, claims",Swiss Modernism 2.0 + Minimalism & Swiss Style,"Editorial Grid / Magazine , Data-Dense Dashboard",Search-First + Results Grid,N/A - Search focused,Formal neutral + patent type chips + status badges (granted/pending/rejected),Full-text patent search. Classification tree. Citation graph. Prior art comparison. Patent family view. PDF download. Legal status tracker.
+184,Q&A Community Platform,"qa, stack-overflow, question-answer, knowledge-sharing, community-qa, expert-answer, upvote, accepted-answer, reputation",Minimalism & Swiss Style + Flat Design,"Dark Mode (OLED) , Accessible & Ethical",Feed + Thread View,Community Analytics Dashboard,Clean white + upvote orange + accepted green + reputation gold + tag colors,Question list with vote count. Rich code blocks. Tag filter. Reputation system. Accepted answer highlight. Comment threads. Bookmark/save.
+185,Research Lab / University Department,"research-lab, university-department, academic-lab, principal-investigator, lab-members, publications, research-group, pi-page",Swiss Modernism 2.0 + Minimalism & Swiss Style,"Editorial Grid / Magazine , Accessible & Ethical",Overview + People + Publications,N/A - Academic focused,Institutional navy + white + research area accent colors + serif headings,PI bio and research focus. Current members grid. Publication list with links. Open positions. Lab facilities photos. Funding acknowledgments.
+186,Resume / CV Builder,"resume, cv, builder, job-search, curriculum-vitae, portfolio-resume, cover-letter, career-builder, ats-friendly",Minimalism & Swiss Style + Flat Design,"Swiss Modernism 2.0 , Accessible & Ethical",Interactive Product Demo + CTA,Template Selection Gallery,Professional navy + section accent + success green + clean white,Template picker. Section-by-section editor. Real-time preview. ATS score indicator. PDF export. Cover letter generator. Import from LinkedIn.
+187,Review Platform,"review, rating, yelp, trustpilot, testimonial, customer-review, star-rating, verified-purchase, pros-cons",Flat Design + Vibrant & Block-based,"Accessible & Ethical , Minimalism & Swiss Style",Hero + Rating Summary + Review Feed,Review Analytics Dashboard,Brand primary + star gold + positive green + negative red + verified blue,Star rating summary with distribution. Verified purchase badge. Photo/video reviews. Helpful/upvote. Filter by rating. Response from business. Sort by recency.
+188,RPA / Automation Dashboard,"rpa, robotic-process-automation, uipath, automation-anywhere, bot-orchestrator, process-discovery, attended-bot, unattended-bot",Dark Mode (OLED) + Data-Dense Dashboard,"Minimalism & Swiss Style , Accessible & Ethical",Bot Fleet Dashboard,Real-Time Monitoring + Process Analytics,Dark bg + running green + failed red + queued amber + completed blue,Bot status grid (running/idle/failed). Queue depth. Process flow visualization. Exception handling alert. ROI metrics. Bot scheduling calendar. Audit trail.
+189,Survey / Form Builder,"survey, form-builder, questionnaire, typeform, survey-monkey, poll, feedback-form, multi-step-form, nps-survey, logic-jump",Minimalism & Swiss Style + Micro-interactions,"Claymorphism , Flat Design",Interactive Product Demo,Response Analytics Dashboard,Clean white + question accent + progress green + submit blue,Drag-drop form builder. Question type library. Conditional logic visualizer. Theme picker. Response dashboard with charts. Export CSV. Share link/QR/embed.
+190,Telemedicine Platform,"telemedicine, telehealth, virtual-visit, remote-consultation, video-doctor, remote-patient-monitoring, telehealth-app",Neumorphism + Accessible & Ethical,"Minimalism & Swiss Style , Soft UI Evolution",Trust & Authority + Conversion,Healthcare Analytics,Calm medical blue + video green + waiting amber + trust white,Video call UI with screen share. Appointment queue. Symptom intake form. Prescription e-delivery. Waiting room with ETA. Post-visit summary. Insurance verification.
+191,Testimonial & Social Proof Widget,"testimonial, social-proof, wall-of-love, customer-quote, case-study, review-widget, trust-signal, user-story",Vibrant & Block-based + Flat Design,"Motion-Driven , Minimalism & Swiss Style",Wall-of-Love Grid,Engagement Analytics Dashboard,Brand primary + quote accent + star gold + verified blue,Testimonial cards with photo. Star ratings. Video testimonials. Case study summaries. Filter by industry/product. Embeddable widget code. Auto-rotate carousel.
+192,Ticketing / Box Office,"ticketing, box-office, eventbrite, ticket-sales, seat-selection, will-call, qr-ticket, venue-capacity, will-call-pickup",Vibrant & Block-based + Motion-Driven,"Dark Mode (OLED) , Glassmorphism",Event Grid + Seat Map,Sales Analytics Dashboard,Event theme colors + available green + sold-out red + seat map neutral,Event cards with date/venue. Interactive seat map. Cart with countdown. QR code ticket. Will-call pickup. Group discounts. Refund policy.

package/dist/assets/uiux/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,Effect Events,useeffectevent effect event non-reactive latest values,React/Next.js,Read non-reactive latest values inside Effects without re-synchronizing the Effect,Use useEffectEvent only for non-reactive logic called from inside Effects; keep real reactive dependencies,Use Effect Events to hide dependencies or call them from render or ordinary event handlers,"const onConnected = useEffectEvent(() => notify(theme)); useEffect(() => { connection.on('connected', onConnected) }, [roomId])","useEffect(() => connect(roomId, theme), [roomId]) // hides reactive theme use",Medium
+44,Advanced,Latest Value Refs,useref latest value callback escape hatch effect synchronization,React/Next.js,Use refs only when a latest value must be read without causing a render,Synchronize the ref after commit and read current from asynchronous callbacks,Mutate ref.current during render or use refs to bypass reactive dependencies,"const valueRef = useRef(value); useEffect(() => { valueRef.current = value }, [value]); setTimeout(() => use(valueRef.current), 0)","valueRef.current = value // render-phase mutation",Low

package/dist/assets/uiux/data/stacks/angular.csv

@@ -0,0 +1,51 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
+1,Components,Use standalone components,Standalone components are the default in current Angular,Standalone components for all new code,NgModule-based components for new projects,@Component({ imports: [CommonModule] }),@NgModule({ declarations: [MyComp] }),High,https://angular.dev/guide/components/importing,angular 22.x,active,2026-08-13
+2,Components,Use signals for state,Signals are Angular's reactive primitive for fine-grained reactivity,Signals for component state over class properties,Mutable class properties without signals,count = signal(0); increment() { this.count.update(v => v + 1) },count = 0; increment() { this.count++ },High,https://angular.dev/guide/signals,angular 22.x,active,2026-08-13
+3,Components,Use @if/@for/@switch control flow,Built-in control flow syntax replaces *ngIf/*ngFor directives,@if and @for in templates,*ngIf and *ngFor structural directives,@if (isLoggedIn) { <Dashboard /> } @else { <Login /> },"<div *ngIf=""isLoggedIn""><Dashboard /></div>",High,https://angular.dev/guide/templates/control-flow,angular 22.x,active,2026-08-13
+4,Components,Use input() and output() component APIs,Use signal inputs and the output function for typed component contracts,input() and output() for new component APIs,Decorator-based inputs and outputs in new components,name = input<string>(); clicked = output<void>(),@Input() name: string; @Output() clicked = new EventEmitter(),High,https://angular.dev/guide/components/outputs,angular 22.x,active,2026-08-13
+5,Components,Use content projection,ng-content for flexible component composition,ng-content with select for named slots,Rigid templates that can't be customized,"<ng-content select=""[header]"" /> <ng-content />","<div class=""header"">{{ title }}</div>",Medium,https://angular.dev/guide/components/content-projection,angular 22.x,active,2026-08-13
+6,Components,Keep components small,Single responsibility; components should do one thing,Extract sub-components when template exceeds 50 lines,Monolithic components handling multiple concerns,<UserAvatar /> <UserDetails /> <UserActions />,One 300-line component template,Medium,https://angular.dev/guide/components,angular 22.x,active,2026-08-13
+7,Components,Use OnPush where subtree skipping fits,Reduces checks for compatible component subtrees while signals still notify consumers,OnPush for stable input-driven components,Applying OnPush without understanding mutable input or event boundaries,changeDetection: ChangeDetectionStrategy.OnPush,items.push(nextItem) // same input reference,High,https://angular.dev/best-practices/skipping-subtrees,angular 22.x,active,2026-08-13
+8,Components,Avoid direct DOM manipulation,Use renderer or ElementRef sparingly; prefer template bindings,Template bindings and Angular directives,Direct document.querySelector or innerHTML,"[class.active]=""isActive""",this.el.nativeElement.classList.add('active'),High,https://angular.dev/guide/components/host-elements,angular 22.x,active,2026-08-13
+9,Routing,Lazy load feature routes,Load route chunks on demand to reduce initial bundle,loadComponent() for all feature routes,Eager-loaded routes in app config,{ path: 'admin' loadComponent: () => import('./admin/admin.component') },{ path: 'admin' component: AdminComponent },High,https://angular.dev/guide/routing/lazy-loading,angular 22.x,active,2026-08-13
+10,Routing,Use route guards with functional API,Protect routes with canActivate/canMatch functional guards,Functional guards returning boolean or UrlTree,Class-based guards with CanActivate interface,canActivate: [() => inject(AuthService).isLoggedIn()],canActivate: [AuthGuard],High,https://angular.dev/guide/routing/common-router-tasks#preventing-unauthorized-access,angular 22.x,active,2026-08-13
+11,Routing,Use route resolvers for data,Pre-fetch data before route activation using resolve,ResolveFn for route data,Fetching data in ngOnInit causing flash of empty state,resolve: { user: () => inject(UserService).getUser() },Fetch in ngOnInit with loading state flickering,Medium,https://angular.dev/guide/routing/common-router-tasks#resolve,angular 22.x,active,2026-08-13
+12,Routing,Type route params with inject,Use inject(ActivatedRoute) with signals or toSignal,Typed route params via ActivatedRoute,Untyped route.snapshot.params string access,const id = toSignal(route.paramMap.pipe(map(p => p.get('id')))),const id = this.route.snapshot.params['id'],Medium,https://angular.dev/api/router/ActivatedRoute,angular 22.x,active,2026-08-13
+13,Routing,Use nested routes for layouts,Compose shared layouts using router-outlet nesting,Nested routes with shared layout components,Duplicating layout code across routes,{ path: 'app' component: ShellComponent children: [...] },Duplicate header/sidebar in each route component,Medium,https://angular.dev/guide/routing/router-tutorial-toh#child-route-configuration,angular 22.x,active,2026-08-13
+14,Routing,Configure preloading strategies,Preload lazy modules in background after initial load,PreloadAllModules or custom strategy,No preloading causing delayed navigation,provideRouter(routes withPreloading(PreloadAllModules)),provideRouter(routes),Low,https://angular.dev/api/router/PreloadAllModules,angular 22.x,active,2026-08-13
+15,State,Use signals for local state,Signals provide synchronous reactive state without RxJS overhead,signal() for component-local reactive state,BehaviorSubject for simple local state,const items = signal<Item[]>([]); addItem(i: Item) { this.items.update(arr => [...arr i]) },items$ = new BehaviorSubject<Item[]>([]),High,https://angular.dev/guide/signals,angular 22.x,active,2026-08-13
+16,State,Use computed() for derived state,Lazily evaluated derived values that update when dependencies change,computed() for values derived from other signals,Duplicated state or manual sync,readonly total = computed(() => this.items().reduce((s i) => s + i.price 0)),this.total = this.items.reduce(...) // called manually,High,https://angular.dev/guide/signals#computed-signals,angular 22.x,active,2026-08-13
+17,State,Use effect() carefully,Effects run side effects when signals change; avoid overuse,effect() for side effects like logging or localStorage sync,effect() for deriving state (use computed instead),effect(() => localStorage.setItem('cart' JSON.stringify(this.cart()))),effect(() => { this.total.set(this.items().length) }),Medium,https://angular.dev/guide/signals#effects,angular 22.x,active,2026-08-13
+18,State,Use NgRx Signal Store for complex state,NgRx Signal Store is the modern lightweight state management for Angular,@ngrx/signals SignalStore for feature state,Full NgRx reducer/action/effect boilerplate for simple state,const Store = signalStore(withState({ count: 0 }) withMethods(s => ({ increment: () => patchState(s { count: s.count() + 1 }) }))),createReducer(on(increment state => ({ ...state count: state.count + 1 }))),Medium,https://ngrx.io/guide/signals,angular 22.x,active,2026-08-13
+19,State,Inject services for shared state,Services with signals share state across components without a store,Injectable service with signals for cross-component state,Prop drilling or @Input chains for shared state,@Injectable({ providedIn: 'root' }) class CartService { items = signal<Item[]>([]) },@Input() cartItems passed through 4 component levels,Medium,https://angular.dev/guide/di/creating-injectable-service,angular 22.x,active,2026-08-13
+20,State,Avoid mixing RxJS and signals unnecessarily,Use toSignal() to bridge RxJS into signal world at the boundary,toSignal() to convert observable to signal at component edge,Subscribing in components and storing in signal manually,readonly user = toSignal(this.userService.user$),this.userService.user$.subscribe(u => this.user.set(u)),Medium,https://angular.dev/guide/rxjs-interop,angular 22.x,active,2026-08-13
+21,Forms,Use typed reactive forms,FormGroup/FormControl with explicit generics for compile-time safety,FormBuilder with typed controls,Untyped FormControl or any casts,fb.group<LoginForm>({ email: fb.control('') password: fb.control('') }),new FormGroup({ email: new FormControl(null) }),High,https://angular.dev/guide/forms/typed-forms,angular 22.x,active,2026-08-13
+22,Forms,Use reactive forms over template-driven,Reactive forms scale better and are fully testable,ReactiveFormsModule for all non-trivial forms,FormsModule with ngModel for complex forms,"<input [formControl]=""emailControl"" />","<input [(ngModel)]=""email"" />",Medium,https://angular.dev/guide/forms/reactive-forms,angular 22.x,active,2026-08-13
+23,Forms,Write custom validators as functions,Functional validators are composable and tree-shakeable,ValidatorFn functions for custom validation,Class-based validators implementing Validator interface,const noSpaces: ValidatorFn = ctrl => ctrl.value?.includes(' ') ? { noSpaces: true } : null,class NoSpacesValidator implements Validator { validate(c) {} },Medium,https://angular.dev/guide/forms/form-validation#custom-validators,angular 22.x,active,2026-08-13
+24,Forms,Use updateOn for performance,Control when validation runs to avoid per-keystroke validation overhead,updateOn: 'blur' or 'submit' for expensive validators,Default updateOn: 'change' for async validators,fb.control('' { updateOn: 'blur' validators: [Validators.email] }),fb.control('' [Validators.email]) // validates on every key,Low,https://angular.dev/api/forms/AbstractControl#updateOn,angular 22.x,active,2026-08-13
+25,Forms,Use FormArray for dynamic fields,FormArray manages variable-length lists of controls,FormArray for add/remove field scenarios,Manually tracking index-based controls,get items(): FormArray { return this.form.get('items') as FormArray },items: [FormControl] managed outside form,Medium,https://angular.dev/guide/forms/reactive-forms#using-the-formarray-class,angular 22.x,active,2026-08-13
+26,Forms,Display validation errors clearly,Use form control touched and dirty states to show errors at the right time,Show errors after field is touched,Show all errors on page load,@if (email.invalid && email.touched) { <span>Invalid email</span> },@if (email.invalid) { <span>Invalid email</span> },Medium,https://angular.dev/guide/forms/form-validation,angular 22.x,active,2026-08-13
+27,Performance,Prepare components for zoneless change detection,Use signals markForCheck AsyncPipe and bound listeners so Angular receives change notifications,Notification-driven state updates,Depending on ZoneJS to notice arbitrary state mutation,count.set(count() + 1),this.count++ // outside a notifying Angular boundary,High,https://angular.dev/guide/zoneless,angular 22.x,active,2026-08-13
+28,Performance,Use trackBy in @for blocks,Stable identity for list items prevents full DOM re-creation on change,track item.id in @for,track $index for dynamic data,@for (item of items; track item.id) { <li>{{ item.name }}</li> },@for (item of items; track $index) { <li>{{ item.name }}</li> },High,https://angular.dev/guide/templates/control-flow#track-and-identity,angular 22.x,active,2026-08-13
+29,Performance,Use @defer for below-the-fold content,Defer blocks lazy-load components when they enter the viewport,@defer with on viewport for non-critical UI,Eagerly loading all components at startup,@defer (on viewport) { <HeavyChart /> } @placeholder { <Skeleton /> },<HeavyChart /> loaded at startup,High,https://angular.dev/guide/defer,angular 22.x,active,2026-08-13
+30,Performance,Use NgOptimizedImage,Enforces image best practices: lazy loading LCP hints and proper sizing,NgOptimizedImage for all img tags,Plain img tags for CMS or user content,"<img ngSrc=""/hero.jpg"" width=""800"" height=""400"" priority />","<img src=""/hero.jpg"" />",High,https://angular.dev/guide/image-optimization,angular 22.x,active,2026-08-13
+31,Performance,Tree-shake unused Angular features,Import only what you use from Angular packages,Import specific Angular modules needed,Import BrowserAnimationsModule when not using animations,import { NgOptimizedImage } from '@angular/common',import { CommonModule } from '@angular/common' // entire module,Medium,https://angular.dev/tools/cli/build,angular 22.x,active,2026-08-13
+32,Performance,Avoid subscribe in components,Subscriptions leak and cause bugs; prefer async pipe or toSignal,toSignal() or async pipe instead of manual subscribe,Manual subscribe without unsubscribe in ngOnDestroy,readonly data = toSignal(this.service.data$),this.service.data$.subscribe(d => this.data = d),High,https://angular.dev/guide/rxjs-interop,angular 22.x,active,2026-08-13
+33,Performance,Use @angular/ssr for hybrid rendering,Server rendering and prerendering improve LCP and SEO for public routes,Configure SSR or prerender per route,Pure CSR for SEO-critical pages,ng add @angular/ssr,"// no SSR, client renders empty shell",Medium,https://angular.dev/guide/ssr,angular 22.x,active,2026-08-13
+34,Performance,Minimize bundle with standalone APIs,Standalone components + provideRouter() eliminate dead NgModule code,provideRouter() and provideHttpClient() in app.config,Root AppModule with all imports,provideRouter(routes) in app.config.ts,@NgModule({ imports: [RouterModule.forRoot(routes)] }),Medium,https://angular.dev/guide/routing/standalone,angular 22.x,active,2026-08-13
+35,Testing,Use TestBed for component tests,TestBed sets up Angular DI for realistic component testing,TestBed.configureTestingModule for component tests,Instantiate components with new keyword,TestBed.configureTestingModule({ imports: [MyComponent] }),const comp = new MyComponent(),High,https://angular.dev/guide/testing/components-basics,angular 22.x,active,2026-08-13
+36,Testing,Use Angular CDK component harnesses,Harnesses provide a stable testing API that survives template refactors,MatButtonHarness and custom HarnessLoader,Direct native element queries that break on template changes,const btn = await loader.getHarness(MatButtonHarness),fixture.debugElement.query(By.css('button')),Medium,https://material.angular.io/cdk/test-harnesses/overview,angular 22.x,active,2026-08-13
+37,Testing,Use Spectator for less boilerplate,Spectator wraps TestBed with a cleaner API reducing test setup noise,Spectator for unit tests,Raw TestBed for every test,const spectator = createComponentFactory(MyComponent),TestBed.configureTestingModule({ declarations: [MyComponent] providers: [...] }),Low,https://github.com/ngneat/spectator,angular 22.x,active,2026-08-13
+38,Testing,Mock services with jasmine.createSpyObj,Isolate unit tests by providing mock implementations of dependencies,SpyObj or jest.fn() mocks for services,Real HTTP calls in unit tests,const spy = jasmine.createSpyObj('UserService' ['getUser']); spy.getUser.and.returnValue(of(user)),providers: [UserService] // real service in unit test,High,https://angular.dev/guide/testing/services,angular 22.x,active,2026-08-13
+39,Testing,Write integration tests for routes,Test full route navigation including guards and resolvers,RouterTestingHarness for route integration tests,Mock all routing behavior in unit tests,const harness = await RouterTestingHarness.create(); await harness.navigateByUrl('/home'),// manually calling route guard methods,Medium,https://angular.dev/api/router/testing/RouterTestingHarness,angular 22.x,active,2026-08-13
+40,Testing,Test signal-based components,Signals update synchronously; no async flush needed in most cases,Read signal value directly in test assertions,TestBed.tick() or fakeAsync for signal reads,component.count.set(5); expect(component.double()).toBe(10),fakeAsync(() => { component.count.set(5); tick(); expect(component.double()).toBe(10) }),Medium,https://angular.dev/guide/testing,angular 22.x,active,2026-08-13
+41,Styling,Use ViewEncapsulation.Emulated,Default emulation scopes styles to component preventing global leaks,Emulated or None for intentional global styles,ViewEncapsulation.None for component-specific styles,ViewEncapsulation.Emulated (default),ViewEncapsulation.None on feature components,Medium,https://angular.dev/guide/components/styling#style-scoping,angular 22.x,active,2026-08-13
+42,Styling,Use :host selector,Style the component's host element using :host pseudo-class,:host for host element styles,Adding wrapper div just for styling,:host { display: block; padding: 1rem },"<div class=""wrapper"">...</div> + .wrapper { padding: 1rem }",Medium,https://angular.dev/guide/components/styling#host-element,angular 22.x,active,2026-08-13
+43,Styling,Use CSS custom properties for theming,CSS variables work across component boundaries and enable dynamic theming,CSS custom properties for colors and spacing,Hardcoded hex values in component styles,:root { --primary: #6200ee } button { background: var(--primary) },button { background: #6200ee },Medium,https://angular.dev/guide/components/styling,angular 22.x,active,2026-08-13
+44,Styling,Integrate Tailwind with Angular,Tailwind utilities work alongside Angular's ViewEncapsulation via global stylesheet,Add Tailwind in styles.css and use utility classes in templates,Custom CSS for layout that Tailwind already handles,"<div class=""flex items-center gap-4 p-6"">","<div class=""my-custom-flex""> /* .my-custom-flex { display: flex } */",Low,https://tailwindcss.com/docs/guides/angular,angular 22.x,active,2026-08-13
+45,Styling,Use Angular Material theming tokens,Material 3 uses design tokens for systematic theming,M3 token-based theming for Angular Material,Overriding Angular Material CSS with deep selectors,@include mat.button-theme($my-theme),::ng-deep .mat-button { background: red },Medium,https://material.angular.io/guide/theming,angular 22.x,active,2026-08-13
+46,Architecture,Use injection tokens for config,Provide configuration via InjectionToken for testability and flexibility,InjectionToken for environment-specific values,Importing environment.ts directly in services,const API_URL = new InjectionToken<string>('apiUrl'); provide: [{ provide: API_URL useValue: env.apiUrl }],constructor(private env: Environment) { this.url = env.apiUrl },Medium,https://angular.dev/guide/di/dependency-injection-providers#using-an-injectiontoken-object,angular 22.x,active,2026-08-13
+47,Architecture,Use HTTP interceptors,Intercept requests for auth headers error handling and logging,Functional interceptors with withInterceptors(),Service-level header management in every request,withInterceptors([authInterceptor errorInterceptor]),httpClient.get(url { headers: { Authorization: token } }) in every call,High,https://angular.dev/guide/http/interceptors,angular 22.x,active,2026-08-13
+48,Architecture,Organize by feature not type,Feature-based folder structure scales better than type-based,Feature folders with collocated component service and routes,Flat folders: all-components/ all-services/,src/features/checkout/checkout.component.ts checkout.service.ts checkout.routes.ts,src/components/checkout.component.ts src/services/checkout.service.ts,Medium,https://angular.dev/style-guide#folders-by-feature-structure,angular 22.x,active,2026-08-13
+49,Architecture,Use environment configurations,Separate environment values for dev staging and prod via Angular build configs,angular.json fileReplacements for env configs,Hardcoded API URLs or feature flags in source,fileReplacements: [{ replace: environment.ts with: environment.prod.ts }],const API = 'https://api.example.com' // hardcoded in service,High,https://angular.dev/tools/cli/environments,angular 22.x,active,2026-08-13
+50,Architecture,Prefer inject() over constructor DI,inject() function is composable and works in more contexts than constructor injection,inject() for dependency injection,Constructor parameters for new code,readonly http = inject(HttpClient); readonly router = inject(Router),constructor(private http: HttpClient private router: Router) {},Medium,https://angular.dev/api/core/inject,angular 22.x,active,2026-08-13