# domain_style

style_category: Minimalism & Swiss Style
type: General
primary_colors: Monochromatic, Black #000000, White #FFFFFF
best_for: Enterprise apps, dashboards, documentation, SaaS platforms, professional tools, AI interfaces
performance: ⚡ Excellent
accessibility: ✓ WCAG AAA
framework_compatibility: Tailwind 10/10, Bootstrap 9/10, MUI 9/10
complexity: Low
keywords:
Clean, simple, spacious, functional, white space, high contrast, geometric, sans-serif, grid-based, essential

effects_and_animation:
Subtle hover (200-250ms), smooth transitions, sharp shadows if any, clear type hierarchy, fast loading


style_category: Neumorphism
type: General
primary_colors: Light pastels: Soft Blue #C8E0F4, Soft Pink #F5E0E8, Soft Grey #E8E8E8
effects_and_animation: Soft box-shadow (multiple: -5px -5px 15px, 5px 5px 15px), smooth press (150ms), inner subtle shadow
best_for: Health/wellness apps, meditation platforms, fitness trackers, minimal interaction UIs
performance: ⚡ Good
accessibility: ⚠ Low contrast risk
framework_compatibility: Tailwind 8/10, CSS-in-JS 9/10
complexity: Medium
keywords:
Soft UI, embossed, debossed, convex, concave, light source, subtle depth, rounded (12-16px), monochromatic


style_category: Glassmorphism
type: General
primary_colors: Translucent white: rgba(255,255,255,0.1-0.3)
performance: ⚠ Good (GPU required)
accessibility: ⚠ Ensure 4.5:1 contrast
framework_compatibility: Tailwind 9/10, MUI 8/10, Chakra 8/10
complexity: Medium
keywords:
Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer

effects_and_animation:
Backdrop blur (10-20px), subtle border (1px solid rgba white 0.2), light reflection, Z-depth layering

best_for:
Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, spatial computing


style_category: Brutalism
type: General
primary_colors: Primary: Red #FF0000, Blue #0000FF, Yellow #FFFF00, Black #000000, White #FFFFFF
best_for: Design portfolios, artistic projects, counter-culture brands, editorial/media, tech blogs
performance: ⚡ Excellent
accessibility: ✓ WCAG AAA (inherent)
framework_compatibility: Tailwind 10/10, Bootstrap 7/10
complexity: Low
keywords:
Raw, unpolished, stark, high contrast, plain text, system fonts, visible borders, asymmetric, anti-design

effects_and_animation:
No smooth transitions (instant), sharp corners (0px), bold typography (700+), visible grid, large blocks


style_category: 3D & Hyperrealism
type: General
primary_colors: Deep Navy #001F3F, Forest Green #228B22, Burgundy #800020, Gold #FFD700, Silver #C0C0C0
performance: ❌ Heavy (GPU intensive)
accessibility: ⚠ Not accessible
framework_compatibility: Three.js 10/10, R3F 10/10, Babylon.js 10/10
complexity: High
keywords:
Depth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic, rich detail, immersive, WebGPU

effects_and_animation:
WebGL/WebGPU/Three.js 3D, realistic shadows, physics lighting, parallax (3-5 layers), smooth 3D (300-400ms)

best_for:
Gaming, product showcase, immersive experiences, high-end e-commerce, architectural viz, digital twins


style_category: Vibrant & Block-based
type: General
best_for: Startups, creative agencies, gaming, social media, youth-focused, entertainment, consumer apps
performance: ⚡ Good
accessibility: ◐ Ensure WCAG AA
framework_compatibility: Tailwind 10/10, Chakra 9/10, Styled 9/10
complexity: Medium
keywords:
Bold, energetic, playful, block layout, geometric shapes, high color contrast, duotone, modern, scroll-snap

primary_colors:
Neon Green #39FF14, Electric Purple #BF00FF, Vivid Pink #FF1493, Bright Cyan #00FFFF, Sunburst #FFAA00

effects_and_animation:
Large sections (48px+ gaps), animated patterns, bold hover (color shift), scroll-snap, large type (32px+)


style_category: Dark Mode (OLED)
type: General
primary_colors: Deep Black #000000, Dark Grey #121212, Midnight Blue #0A0E27
best_for: Night-mode apps, coding platforms, entertainment, OLED devices, AI dashboards, monitoring
performance: ⚡ Excellent
accessibility: ✓ WCAG AAA
framework_compatibility: Tailwind 10/10, MUI 10/10, Chakra 10/10
complexity: Low
keywords:
Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, power efficient

effects_and_animation:
Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions, high readability, visible focus states


style_category: Accessible & Ethical
type: General
primary_colors: WCAG AAA (7:1+ min), simple primary, clear secondary, high luminosity
best_for: Government, healthcare, education, inclusive products, legal compliance, public services
performance: ⚡ Excellent
accessibility: ✓ WCAG AAA
framework_compatibility: All frameworks 10/10
complexity: Low
keywords:
High contrast, large text (16px+), keyboard navigation, screen reader, WCAG AAA, focus state, semantic, voice nav

effects_and_animation:
Clear focus rings (3-4px), ARIA labels, skip links, reduced motion, 48x48px touch targets, voice navigation


style_category: Claymorphism
type: General
primary_colors: Pastel: Soft Peach #FDBCB4, Baby Blue #ADD8E6, Mint #98FF98, Lilac #E6E6FA
effects_and_animation: Inner+outer shadows, soft press (200ms ease-out), fluffy elements, smooth bounce transitions
best_for: Educational apps, children's apps, creative tools, onboarding, casual games, AI tutoring
performance: ⚡ Good
accessibility: ⚠ Ensure 4.5:1
framework_compatibility: Tailwind 9/10, CSS-in-JS 9/10
complexity: Medium
keywords:
Soft 3D, chunky, playful, toy-like, bubbly, thick borders (3-4px), double shadows, rounded (16-24px)


style_category: Aurora UI
type: General
keywords: Vibrant gradients, smooth blend, Northern Lights, mesh gradient, luminous, atmospheric, iridescent
primary_colors: Complementary: Blue-Orange, Purple-Yellow, Electric Blue #0080FF, Magenta #FF1493, Cyan #00FFFF
effects_and_animation: Large flowing CSS/SVG gradients, subtle 8-12s animations, depth via color layering, smooth morph
performance: ⚠ Good (GPU compositing)
accessibility: ⚠ Text contrast over gradients
framework_compatibility: Tailwind 9/10, CSS-in-JS 10/10
complexity: Medium
best_for:
Modern SaaS, creative agencies, branding, music platforms, lifestyle, premium products, hero sections


style_category: Flat Design
type: General
keywords: 2D, minimalist, bold colors, no shadows, clean lines, simple shapes, typography-focused, icon-heavy
primary_colors: Solid bright: Red, Orange, Blue, Green, limited palette (4-6 max)
best_for: Web apps, mobile apps, cross-platform, startup MVPs, SaaS, dashboards, corporate
performance: ⚡ Excellent
accessibility: ✓ WCAG AAA
framework_compatibility: Tailwind 10/10, Bootstrap 10/10, MUI 9/10
complexity: Low
effects_and_animation:
No gradients/shadows, simple hover (color/opacity shift), fast loading, clean transitions (150-200ms)


style_category: Skeuomorphism
type: General
keywords: Realistic, texture, depth, real-world metaphors, shadows, gradients, tactile, detailed, material
primary_colors: Rich realistic: wood, leather, metal colors, detailed gradients (8-12 stops)
best_for: Legacy apps, gaming, immersive storytelling, premium products, luxury, realistic simulations
performance: ❌ Heavy
accessibility: ⚠ Textures reduce readability
framework_compatibility: CSS-in-JS 7/10, Custom 8/10
complexity: High
effects_and_animation:
Realistic shadows (layers), depth (perspective), texture details (noise, grain), tactile animations (300-500ms)


style_category: Liquid Glass
type: General
primary_colors: Vibrant iridescent (rainbow spectrum), translucent base with opacity shifts
best_for: Premium SaaS, high-end e-commerce, creative platforms, branding, luxury portfolios
performance: ⚠ Moderate (GPU required)
accessibility: ⚠ Text contrast over effects
framework_compatibility: Framer Motion 10/10, GSAP 10/10
complexity: High
keywords:
Flowing glass, morphing, smooth transitions, fluid effects, translucent, animated blur, iridescent, chromatic

effects_and_animation:
Morphing elements (SVG/CSS), fluid animations (400-600ms), dynamic blur (backdrop-filter), color transitions


style_category: Motion-Driven
type: General
primary_colors: Bold colors emphasize movement, high contrast animated, dynamic gradients
effects_and_animation: Scroll anim (Intersection Observer), View Transitions API, parallax (3-5 layers), GPU accelerated
best_for: Portfolio sites, storytelling, interactive experiences, entertainment, creative, SaaS landing
performance: ⚠ Good
accessibility: ⚠ Prefers-reduced-motion required
framework_compatibility: GSAP 10/10, Framer Motion 10/10
complexity: High
keywords:
Animation-heavy, microinteractions, scroll effects, parallax, entrance animations, page transitions, View Transitions


style_category: Micro-interactions
type: General
primary_colors: Subtle color shifts (10-20%), feedback: Green #22C55E, Red #EF4444, Amber #F59E0B
effects_and_animation: Small hover (50-100ms), skeleton loading, success/error states, gesture-triggered, haptic API
best_for: Mobile apps, touchscreen UIs, productivity tools, consumer apps, AI interfaces
performance: ⚡ Excellent
accessibility: ✓ Good
framework_compatibility: Framer Motion 10/10, React Spring 9/10
complexity: Medium
keywords:
Small animations, gesture-based, tactile feedback, subtle, contextual, responsive, haptic, state feedback


style_category: Inclusive Design
type: General
primary_colors: WCAG AAA (7:1+ contrast), avoid red-green only, symbol-based indicators
effects_and_animation: Haptic feedback, voice guidance, focus indicators (4px+ ring), motion options, semantic HTML
best_for: Public services, education, healthcare, finance, government, accessible consumer
performance: ⚡ Excellent
accessibility: ✓ WCAG AAA
framework_compatibility: All frameworks 10/10
complexity: Low
keywords:
Accessible, color-blind friendly, high contrast, haptic, voice interaction, screen reader, WCAG AAA, universal


style_category: Zero Interface
type: General
primary_colors: Neutral backgrounds: Soft white #FAFAFA, light grey #F0F0F0, warm off-white #F5F1E8
best_for: Voice assistants, AI platforms, smart home, contextual computing, ambient experiences, agent-first
performance: ⚡ Excellent
accessibility: ✓ Excellent
framework_compatibility: Tailwind 10/10, Custom 10/10
complexity: Low
keywords:
Minimal visible UI, voice-first, gesture-based, AI-driven, invisible controls, predictive, context-aware, ambient

effects_and_animation:
Voice recognition UI, gesture detection, AI predictions (smooth reveal), progressive disclosure, popover API


style_category: Soft UI Evolution
type: General
primary_colors: Improved contrast pastels: Soft Blue #87CEEB, Soft Pink #FFB6C1, Soft Green #90EE90
effects_and_animation: Improved shadows (softer than flat, clearer than neumorphism), modern (200-300ms), WCAG AA+
best_for: Modern enterprise, SaaS, health/wellness, professional tools, hybrid apps
performance: ⚡ Excellent
accessibility: ✓ WCAG AA+
framework_compatibility: Tailwind 9/10, MUI 9/10, Chakra 9/10
complexity: Medium
keywords:
Evolved soft UI, better contrast, modern aesthetics, subtle depth, accessibility-focused, improved shadows


style_category: Hero-Centric Design
type: Landing Page
primary_colors: Brand primary, white/light backgrounds for contrast, accent color for CTA
effects_and_animation: Smooth scroll reveal, fade-in on hero, subtle background parallax, CTA glow/pulse, View Transitions
best_for: SaaS landing pages, product launches, service pages, B2B platforms, tech companies
performance: ⚡ Good
accessibility: ✓ WCAG AA
framework_compatibility: Tailwind 10/10, Bootstrap 9/10
complexity: Medium
keywords:
Large hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video


style_category: Feature-Rich Showcase
type: Landing Page
primary_colors: Primary brand, bright secondary for feature cards, contrasting accent for CTAs
best_for: Enterprise SaaS, software tools, platform services, complex product explanations, B2B
performance: ⚡ Good
accessibility: ✓ WCAG AA
framework_compatibility: Tailwind 10/10, MUI 9/10
complexity: Medium
keywords:
Multiple feature sections, grid layout, benefit cards, visual demonstrations, interactive elements, problem-solution

effects_and_animation:
Card hover effects (lift/scale), icon animations on scroll, feature toggle, smooth section transitions


style_category: Minimal & Direct
type: Landing Page
primary_colors: Monochromatic primary, white background, single accent for CTA, dark text
effects_and_animation: Very subtle hover, minimal animations, fast page load, smooth scroll
best_for: Simple service pages, indie products, consulting, micro SaaS, freelancer portfolios
performance: ⚡ Excellent
accessibility: ✓ WCAG AAA
framework_compatibility: Tailwind 10/10, Bootstrap 9/10
complexity: Low
keywords:
Minimal text, white space heavy, single column, direct messaging, clean typography, visual-centric, fast


style_category: Social Proof-Focused
type: Landing Page
primary_colors: Primary brand, trust colors (blue), success/growth (green), neutral backgrounds
best_for: B2B SaaS, professional services, premium products, e-commerce conversion, established brands
performance: ⚡ Good
accessibility: ✓ WCAG AA
framework_compatibility: Tailwind 10/10, Framer Motion 9/10
complexity: Medium
keywords:
Testimonials prominent, client logos, case studies, reviews/ratings, user avatars, success metrics, credibility

effects_and_animation:
Testimonial carousel, logo grid fade-in, stat counter animations, review star ratings, structured data


style_category: Interactive Product Demo
type: Landing Page
primary_colors: Primary brand, interface colors matching product, demo highlight colors
effects_and_animation: Product animation playback, step progression, hover reveal effects, smooth zoom on interaction
best_for: SaaS platforms, tool/software products, productivity apps, developer tools
performance: ⚠ Good (video/interactive)
accessibility: ✓ WCAG AA
framework_compatibility: Tailwind 10/10, Framer Motion 10/10
complexity: Medium
keywords:
Embedded product mockup/video, interactive elements, walkthrough, step-by-step, hover-to-reveal, embedded demos


style_category: Trust & Authority
type: Landing Page
primary_colors: Professional (blue/grey), trust colors, certification badge colors (gold/silver)
effects_and_animation: Badge hover effects, metric pulse animations, certificate carousel, smooth stat reveal
best_for: Healthcare, financial services, enterprise software, premium/luxury, legal services
performance: ⚡ Excellent
accessibility: ✓ WCAG AAA
framework_compatibility: Tailwind 10/10, Bootstrap 9/10
complexity: Medium
keywords:
Certificates/badges, expert credentials, case studies with metrics, before/after, industry recognition, security


style_category: Storytelling-Driven
type: Landing Page
primary_colors: Brand primary, warm/emotional colors, varied accent per story section
effects_and_animation: Section-to-section animations, scroll-triggered reveals, scroll-timeline API, morphing transitions
best_for: Brand stories, mission-driven products, premium/lifestyle, documentary-style, educational
performance: ⚠ Moderate (animations)
accessibility: ✓ WCAG AA
framework_compatibility: GSAP 10/10, Framer Motion 10/10
complexity: High
keywords:
Narrative flow, visual story progression, section transitions, emotional messaging, journey visualization, scroll-driven


style_category: Data-Dense Dashboard
type: BI/Analytics
primary_colors: Neutral primary (#F5F5F5), data colors (blue/green/red), dark text #333333
performance: ⚡ Excellent
accessibility: ✓ WCAG AA
framework_compatibility: Recharts 10/10, Chart.js 9/10, D3 10/10
complexity: Medium
keywords:
Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data

effects_and_animation:
Hover tooltips, chart zoom, row highlighting, smooth filter animations, skeleton loading, virtual scrolling

best_for:
Business intelligence, financial analytics, enterprise reporting, operational dashboards, AI monitoring


style_category: Heat Map & Heatmap Style
type: BI/Analytics
primary_colors: Gradient: Cool blue #0080FF to hot red #FF0000, neutral middle (white/yellow)
effects_and_animation: Color gradient transitions, cell highlighting on hover, tooltip reveal, smooth color animation
best_for: Geographical analysis, performance matrices, correlation analysis, user behavior, AI attention maps
performance: ⚡ Excellent
accessibility: ⚠ Colorblind considerations
framework_compatibility: D3 10/10, Recharts 9/10
complexity: Medium
keywords:
Color-coded grid/matrix, data intensity, geographical heat maps, correlation matrices, gradient coloring


style_category: Executive Dashboard
type: BI/Analytics
primary_colors: Brand colors, professional (blue/grey/white), accent for KPIs, red for alerts
effects_and_animation: KPI value animations (count-up), trend arrow animations, metric card hover lift, alert pulse
best_for: C-suite dashboards, business summary, decision-maker views, strategic planning, AI executive briefs
performance: ⚡ Excellent
accessibility: ✓ WCAG AA
framework_compatibility: Recharts 9/10, Chart.js 9/10
complexity: Low
keywords:
High-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights


style_category: Real-Time Monitoring
type: BI/Analytics
primary_colors: Alert: critical #FF0000, warning #FFA500, normal #22C55E, updating (blue animation)
performance: ⚡ Good (real-time load)
accessibility: ✓ WCAG AA
framework_compatibility: Recharts 9/10, D3 10/10, Custom 10/10
complexity: Medium
keywords:
Live data updates, status indicators, alert notifications, streaming data, active monitoring, WebSocket

effects_and_animation:
Real-time chart animations, alert pulse/glow, status blink, smooth data stream, WebSocket integration

best_for:
System monitoring, DevOps, real-time analytics, stock market, live event tracking, AI model monitoring


style_category: Drill-Down Analytics
type: BI/Analytics
primary_colors: Primary brand, breadcrumb colors, drill-level indicators, hierarchy depth colors
effects_and_animation: Drill-down expand animations, breadcrumb transitions, smooth detail reveal, data reload animation
performance: ⚡ Good
accessibility: ✓ WCAG AA
framework_compatibility: Recharts 9/10, D3 10/10
complexity: Medium
keywords:
Hierarchical data exploration, expandable sections, interactive drill-down, summary-to-detail, context preservation

best_for:
Sales analytics, product analytics, funnel analysis, multi-dimensional exploration, AI model debugging


style_category: Comparative Analysis
type: BI/Analytics
keywords: Side-by-side comparisons, period-over-period, A/B test results, regional comparisons, benchmarks
primary_colors: Comparison: primary (blue), comparison (orange/purple), delta (green/red)
effects_and_animation: Comparison bar animations, delta indicators, highlight on compare, smooth transitions
performance: ⚡ Excellent
accessibility: ✓ WCAG AA
framework_compatibility: Recharts 9/10, Chart.js 9/10
complexity: Medium
best_for:
Period-over-period, A/B test dashboards, market comparison, competitive analysis, AI model comparison


style_category: Predictive Analytics
type: BI/Analytics
primary_colors: Forecast line (distinct from actual), confidence interval shading, anomaly highlight (red)
effects_and_animation: Forecast line animation, confidence band fade-in, anomaly pulse alert, smoothing animations
best_for: Forecasting dashboards, anomaly detection, trend prediction, AI-powered analytics, budget planning
performance: ⚠ Good (computation)
accessibility: ✓ WCAG AA
framework_compatibility: D3 10/10, Recharts 9/10
complexity: Medium
keywords:
Forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection


style_category: User Behavior Analytics
type: BI/Analytics
primary_colors: Funnel: high engagement (green), drop-off (red), conversion (blue), flow arrows (grey)
effects_and_animation: Funnel animation (fill-down), flow diagram animations, conversion pulse, engagement bar fill
best_for: Conversion funnel, user journey tracking, engagement analytics, cohort analysis, AI personalization
performance: ⚡ Good
accessibility: ✓ WCAG AA
framework_compatibility: Recharts 9/10, D3 10/10
complexity: Medium
keywords:
Funnel visualization, user flow diagrams, conversion tracking, engagement metrics, journey mapping, cohort


style_category: Sales Intelligence
type: BI/Analytics
primary_colors: Sales: won (green), lost (red), in-progress (blue), blocked (orange), quota met (gold)
effects_and_animation: Deal movement animations, metric updates, leaderboard changes, gauge movements, status highlights
best_for: CRM dashboards, sales management, opportunity tracking, performance management, AI lead scoring
performance: ⚡ Good
accessibility: ✓ WCAG AA
framework_compatibility: Recharts 9/10, Chart.js 9/10
complexity: Medium
keywords:
Deal pipeline, sales metrics, territory performance, leaderboard, win-loss, quota tracking, forecast


style_category: Neubrutalism
type: General
primary_colors: Pop Yellow #FFDB58, Bright Red #FF6B6B, Teal #4ECDC4, Black #000000
best_for: Gen Z brands, startups, creative agencies, design tools, personal blogs, developer tools
performance: ⚡ Excellent
accessibility: ✓ WCAG AAA
framework_compatibility: Tailwind 10/10, Plain CSS 10/10
complexity: Low
keywords:
Bold borders, black outlines, primary colors, thick shadows, no gradients, flat, playful, Gen Z, ugly-cute

effects_and_animation:
Hard hover shifts (4px), marquee scrolling, jitter animations, bold borders 3px+, hard shadow 5px 5px 0


style_category: Bento Box Grid
type: General
primary_colors: Neutral base + brand accent, #FFFFFF, #F5F5F7, brand primary
effects_and_animation: Grid with varied spans, rounded-xl (16-24px), subtle shadows, hover scale (1.02), container queries
best_for: Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS, AI platforms
performance: ⚡ Excellent
accessibility: ✓ WCAG AA
framework_compatibility: Tailwind 10/10, CSS Grid 10/10
complexity: Low
keywords:
Modular cards, asymmetric grid, varied sizes (1x1, 2x1, 2x2, 3x1), Apple-style, dashboard tiles, clean hierarchy


style_category: Y2K Aesthetic
type: General
primary_colors: Hot Pink #FF69B4, Cyan #00FFFF, Silver #C0C0C0, Purple #9400D3
effects_and_animation: Linear-gradient metallic, glossy buttons, 3D chrome effects, glow animations, bubble shapes
best_for: Fashion brands, music platforms, Gen Z brands, nostalgia marketing, entertainment
performance: ⚠ Good
accessibility: ⚠ Check contrast
framework_compatibility: Tailwind 8/10, CSS-in-JS 9/10
complexity: Medium
keywords:
Neon pink, chrome, metallic, bubblegum, iridescent, glossy, retro-futurism, 2000s, futuristic nostalgia


style_category: Organic Biophilic
type: General
primary_colors: Forest Green #228B22, Earth Brown #8B4513, Sky Blue #87CEEB, Beige #F5F5DC
effects_and_animation: Rounded corners (16-24px), organic curves, natural shadows, flowing SVG shapes, gentle sway 4-6s
best_for: Wellness apps, sustainability brands, eco products, health, meditation, organic food, climate tech
performance: ⚡ Excellent
accessibility: ✓ WCAG AA
framework_compatibility: Tailwind 10/10, CSS 10/10
complexity: Low
keywords:
Nature, organic shapes, green, sustainable, rounded, flowing, wellness, earthy, natural textures, low-carbon


style_category: AI-Native UI
type: General
primary_colors: Neutral + AI Purple #6366F1, Success #10B981, Background #F5F5F5
performance: ⚡ Excellent
accessibility: ✓ WCAG AA
framework_compatibility: Tailwind 10/10, React 10/10
complexity: Low
keywords:
Chatbot, conversational, voice, assistant, agentic, ambient, minimal chrome, streaming text, agent workflows

effects_and_animation:
Typing indicators (3-dot pulse), streaming text, pulse animations, context cards, tool-use visualization

best_for:
AI products, chatbots, voice assistants, copilots, AI-powered tools, agent orchestration, conversational


style_category: Dimensional Layering
type: General
keywords: Depth, overlapping, z-index, layers, 3D, shadows, elevation, floating, cards, spatial hierarchy
primary_colors: Neutral base (#FFFFFF, #F5F5F5, #E0E0E0) + brand accent
best_for: Dashboards, card layouts, modals, navigation, product showcases, SaaS, AI overlay panels
performance: ⚠ Good
accessibility: ⚠ Moderate (SR issues)
framework_compatibility: Tailwind 10/10, MUI 10/10, Chakra 10/10
complexity: Medium
effects_and_animation:
Z-index stacking, box-shadow elevation (4 levels), transform: translateZ(), backdrop-filter, parallax


style_category: Exaggerated Minimalism
type: General
primary_colors: Black #000000, White #FFFFFF, single vibrant accent only
effects_and_animation: font-size: clamp(3rem, 10vw, 12rem), font-weight: 900, letter-spacing: -0.05em, massive whitespace
best_for: Fashion, architecture, portfolios, agency landing pages, luxury brands, editorial
performance: ⚡ Excellent
accessibility: ✓ WCAG AA
framework_compatibility: Tailwind 10/10, Typography.js 10/10
complexity: Low
keywords:
Bold minimalism, oversized typography, high contrast, negative space, loud minimal, statement design


style_category: Parallax Storytelling
type: General
primary_colors: Story-dependent, gradients and natural colors, section-specific palettes
effects_and_animation: transform: translateY(scroll), position: sticky, scroll-timeline API, scroll-triggered animations
best_for: Brand storytelling, product launches, case studies, portfolios, annual reports
performance: ❌ Heavy
accessibility: ❌ Poor (motion)
framework_compatibility: GSAP ScrollTrigger 10/10, Locomotive Scroll 10/10
complexity: High
keywords:
Scroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic, scroll-timeline


style_category: Swiss Modernism 2.0
type: General
primary_colors: Black #000000, White #FFFFFF, #F5F5F5, single vibrant accent
effects_and_animation: display: grid, repeat(12, 1fr), gap: 1rem, mathematical ratios, clear hierarchy, fluid typography
best_for: Corporate sites, architecture, editorial, SaaS, museums, professional services, documentation
performance: ⚡ Excellent
accessibility: ✓ WCAG AAA
framework_compatibility: Tailwind 10/10, Bootstrap 9/10, Foundation 10/10
complexity: Low
keywords:
Grid system, Helvetica, modular, asymmetric, international style, rational, clean, mathematical spacing


style_category: Spatial UI (VisionOS)
type: General
keywords: Glass, depth, immersion, spatial, translucent, gaze, gesture, apple, vision-pro, mixed reality, XR
primary_colors: Frosted Glass #FFFFFF (15-30% opacity), System White
best_for: Spatial computing, VR/AR interfaces, immersive media, futuristic dashboards, mixed reality AI
performance: ⚠ Moderate (blur cost)
accessibility: ⚠ Contrast risks
framework_compatibility: SwiftUI 10/10, R3F 10/10
complexity: High
effects_and_animation:
Parallax depth, dynamic lighting, gaze-hover effects, smooth scale on focus, hand tracking affordances


style_category: Holographic / Iridescent
type: General
primary_colors: Prismatic spectrum, Silver base #C0C0C0, Gold base #FFD700
effects_and_animation: conic-gradient with animated angle, hue-rotate 3-5s, brightness/contrast filters, metallic sheen
best_for: Space tech, quantum computing, spatial computing, luxury tech, premium AI products, futuristic
performance: ⚠ Moderate (GPU)
accessibility: ⚠ Shifting colors challenge contrast
framework_compatibility: Tailwind 9/10, CSS-in-JS 10/10
complexity: Medium
keywords:
Rainbow, prismatic, metallic sheen, light-reactive, 3D depth illusion, futuristic premium, chromatic


style_category: Data-Dense General
type: General
primary_colors: Neutral primary (#F5F5F5), data colors (blue/green/red/amber), dark text #333333
effects_and_animation: Hover tooltips, sortable tables, sparklines (inline SVG), virtual scrolling, skeleton loading
best_for: AI analytics, model monitoring, business intelligence, operational dashboards, data platforms
performance: ⚡ Excellent
accessibility: ✓ WCAG AA
framework_compatibility: Recharts 10/10, D3 10/10, AG Grid 10/10
complexity: Medium
keywords:
Information-heavy, compact layouts, small multiples, sparklines, heat maps, KPI cards, power user, analyst


style_category: Agentic Interface
type: General
primary_colors: AI Purple #6366F1, Agent Blue #3B82F6, Success #10B981, Background #FAFAFA
performance: ⚡ Excellent
accessibility: ✓ WCAG AA
framework_compatibility: Tailwind 10/10, React 10/10, D3 9/10
complexity: Medium
keywords:
Agent workflows, tool-use visualization, chain-of-thought, human-in-the-loop, multi-agent, orchestration

effects_and_animation:
Agent status indicators, workflow graph animations, token counter, thinking pulse, tool execution viz

best_for:
AI agent platforms, orchestration dashboards, copilot interfaces, multi-agent systems, workflow builders


style_category: Conversational UI
type: General
primary_colors: Neutral background #F5F5F5, User bubble #3B82F6, AI bubble #F3F4F6, accent #6366F1
effects_and_animation: Typing indicator pulse, message slide-in (200ms), voice waveform animation, smooth scroll-to-bottom
best_for: Chatbots, AI assistants, customer support, conversational commerce, voice AI platforms
performance: ⚡ Excellent
accessibility: ✓ WCAG AA
framework_compatibility: Tailwind 10/10, React 10/10
complexity: Low
keywords:
Chat interface, message bubbles, typing indicators, voice waveforms, conversation threads, context panels


style_category: Privacy-First
type: General
primary_colors: Trust Green #22C55E, Ethical Blue #3B82F6, Clean White #FFFFFF
best_for: Privacy analytics, GDPR tools, consent platforms, data governance, sovereign cloud, compliance
performance: ⚡ Excellent
accessibility: ✓ WCAG AAA
framework_compatibility: Tailwind 10/10, All frameworks 10/10
complexity: Low
keywords:
Consent management, data transparency, anonymization indicators, compliance badges, trust signals, GDPR

effects_and_animation:
Consent banner animations, privacy toggle transitions, data flow visualization, compliance badge hover


style_category: Streaming Response
type: General
primary_colors: Background #FAFAFA, Streaming text #1A1A1A, Citation #6366F1, Confidence gradient
best_for: AI chat interfaces, code generation, content studios, search engines, AI writing tools
performance: ⚡ Excellent
accessibility: ✓ WCAG AA
framework_compatibility: React 10/10, Tailwind 10/10
complexity: Medium
keywords:
Token-by-token display, progressive rendering, thinking states, confidence indicators, source citations

effects_and_animation:
Token append animation (30-50ms), thinking pulse, confidence bar fill, citation popover, skeleton loading


style_category: Dashboard Composition
type: General
primary_colors: Neutral base #F5F5F5, Widget borders #E5E7EB, Active widget #3B82F6
effects_and_animation: Widget drag animation, resize handles, snap-to-grid, smooth layout transitions, skeleton loading
best_for: Customizable dashboards, analytics platforms, admin panels, AI monitoring, enterprise tools
performance: ⚡ Good
accessibility: ✓ WCAG AA
framework_compatibility: React-Grid-Layout 10/10, Tailwind 10/10
complexity: Medium
keywords:
Widget-based, drag-and-drop, customizable layout, resizable panels, saved views, role-based dashboards


# domain_prompt

style_category: Minimalism & Swiss Style
ai_prompt_keywords_copy_paste_ready:
Design a minimalist landing page. Use: white space, geometric layouts, sans-serif fonts, high contrast, grid-based structure, essential elements only. Avoid shadows and gradients. Focus on clarity, functionality, and content hierarchy. Optimize for fast loading and AI-generated content blocks.

css_technical_keywords:
display: grid; gap: 2rem; font-family: sans-serif; color: #000 or #FFF; max-width: 1200px; clean borders; no box-shadow; container queries for responsive

implementation_checklist:
☐ Grid-based layout 12-16 columns ☐ Typography hierarchy clear ☐ No unnecessary decorations ☐ WCAG AAA contrast verified ☐ Mobile responsive grid ☐ Container queries implemented ☐ Core Web Vitals optimized


style_category: Neumorphism
ai_prompt_keywords_copy_paste_ready:
Create a neumorphic UI with soft 3D effects. Use light pastels, rounded corners (12-16px), subtle soft shadows (multiple layers), no hard lines, monochromatic color scheme with light/dark variations. Embossed/debossed effect on interactive elements. Ensure sufficient contrast for accessibility.

css_technical_keywords:
border-radius: 12-16px; box-shadow: -5px -5px 15px rgba(0,0,0,0.1), 5px 5px 15px rgba(255,255,255,0.8); background: linear-gradient(145deg, color1, color2); transform: scale on press; color-contrast: 4.5:1+

implementation_checklist:
☐ Rounded corners 12-16px consistent ☐ Multiple shadow layers (2-3) ☐ Pastel color verified ☐ Monochromatic palette checked ☐ Press animation smooth 150ms ☐ Contrast ratio 4.5:1+ verified ☐ Focus states visible


style_category: Glassmorphism
ai_prompt_keywords_copy_paste_ready:
Design a glassmorphic interface with frosted glass effect. Use backdrop blur (10-20px), translucent overlays (rgba 10-30% opacity), vibrant background colors, subtle borders, light source reflection, layered depth. Ensure text readability over blurred backgrounds. Support dark/light mode switching.

css_technical_keywords:
backdrop-filter: blur(15px); background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); -webkit-backdrop-filter: blur(15px); z-index layering; @media (prefers-color-scheme)

implementation_checklist:
☐ Backdrop-filter blur 10-20px ☐ Translucent white 15-30% opacity ☐ Subtle border 1px light ☐ Vibrant background verified ☐ Text contrast 4.5:1 checked ☐ Fallback for no backdrop-filter ☐ Dark/light mode tested


style_category: Brutalism
ai_prompt_keywords_copy_paste_ready:
Create a brutalist design with raw, unpolished, stark aesthetic. Use pure primary colors (red, blue, yellow), black & white, no smooth transitions (instant), sharp corners, bold large typography, visible grid lines, system fonts, intentional asymmetry. Prioritize content over decoration.

css_technical_keywords:
border-radius: 0px; transition: none; font-family: system-ui or monospace; font-weight: 700+; border: 2-4px solid; colors: #FF0000, #0000FF, #FFFF00, #000, #FFF; mix-blend-mode for overlaps

implementation_checklist:
☐ No border-radius (0px) ☐ No transitions (instant) ☐ Bold typography (700+) ☐ Pure primary colors used ☐ Visible grid/borders ☐ Asymmetric layout intentional ☐ System fonts only (fast load)


style_category: 3D & Hyperrealism
ai_prompt_keywords_copy_paste_ready:
Build an immersive 3D interface using realistic textures, 3D models (Three.js/React Three Fiber), complex shadows, realistic lighting, parallax scrolling (3-5 layers), physics-based motion. Include skeuomorphic elements with tactile detail. Optimize for WebGPU where available.

css_technical_keywords:
transform: translate3d; perspective: 1000px; WebGL/WebGPU canvas; Three.js/R3F; box-shadow: complex multi-layer; filter: drop-shadow(); will-change: transform; loading=lazy for 3D assets

implementation_checklist:
☐ WebGL/Three.js integrated ☐ 3D models optimized (glTF/draco) ☐ Parallax 3-5 layers ☐ Realistic lighting verified ☐ Complex shadows rendered ☐ Physics animation 300-400ms ☐ WebGPU fallback to WebGL ☐ Loading states for 3D


style_category: Vibrant & Block-based
ai_prompt_keywords_copy_paste_ready:
Design an energetic, vibrant interface with bold block layouts, geometric shapes, high color contrast, large typography (32px+), animated background patterns, duotone effects. Use 4-6 contrasting colors from complementary/triadic schemes. Scroll-snap for section navigation.

css_technical_keywords:
display: grid; gap: 48px+; font-size: clamp(24px, 4vw, 48px); background: animated patterns; color: vibrant; animation: continuous pattern; scroll-snap-type: y mandatory

implementation_checklist:
☐ Block layout with 48px+ gaps ☐ Large typography 32px+ ☐ 4-6 vibrant colors max ☐ Animated patterns active ☐ Scroll-snap enabled ☐ High contrast verified (7:1+) ☐ Fluid typography (clamp)


style_category: Dark Mode (OLED)
ai_prompt_keywords_copy_paste_ready:
Create an OLED-optimized dark interface with deep black (#000000), dark grey (#121212), accent colors. Use minimal glow effects, vibrant neon accents, high contrast text (15:1+). Optimize for eye comfort, OLED power saving, and extended viewing sessions. Support system dark mode preference.

css_technical_keywords:
background: #000000 or #121212; color: #FFFFFF or #E0E0E0; text-shadow: 0 0 10px neon (sparingly); color-scheme: dark; @media (prefers-color-scheme: dark); scrollbar-color: dark

implementation_checklist:
☐ Deep black #000000 or #121212 ☐ Vibrant neon accents used ☐ Text contrast 15:1+ ☐ Minimal glow effects ☐ OLED power optimization ☐ No white backgrounds ☐ System dark mode respected ☐ Scrollbar styled dark


style_category: Accessible & Ethical
ai_prompt_keywords_copy_paste_ready:
Design with WCAG AAA compliance. Include: high contrast (7:1+), large text (16px+), keyboard navigation, screen reader compatibility, focus states (3-4px ring), semantic HTML, ARIA labels, skip links, reduced motion support, 48x48px touch targets, voice navigation support.

css_technical_keywords:
color-contrast: 7:1+; font-size: 16px+; outline: 3-4px on :focus-visible; aria-label; role; @media (prefers-reduced-motion: reduce); touch-target: 48x48px; :focus-within styling

implementation_checklist:
☐ WCAG AAA verified ☐ 7:1+ contrast checked ☐ Keyboard navigation tested ☐ Screen reader tested (NVDA/VoiceOver) ☐ Focus visible 3-4px ☐ Semantic HTML used ☐ Touch targets 48x48px ☐ Voice nav tested ☐ Reduced motion respected


style_category: Claymorphism
ai_prompt_keywords_copy_paste_ready:
Design a playful, toy-like interface with soft 3D, chunky elements, bubbly aesthetic, rounded edges (16-24px), thick borders (3-4px), double shadows (inner + outer), pastel colors, smooth bounce animations. Ideal for children's apps, onboarding flows, and creative tools.

css_technical_keywords:
border-radius: 16-24px; border: 3-4px solid; box-shadow: inset -2px -2px 8px, 4px 4px 8px; background: pastel-gradient; animation: cubic-bezier(0.34, 1.56, 0.64, 1)

implementation_checklist:
☐ Border-radius 16-24px ☐ Thick borders 3-4px ☐ Double shadows (inner+outer) ☐ Pastel colors used ☐ Soft bounce animations ☐ Playful interactions ☐ Touch-friendly targets 48px+


style_category: Aurora UI
ai_prompt_keywords_copy_paste_ready:
Create a vibrant gradient interface inspired by Northern Lights with mesh gradients, smooth color blends, flowing animations. Use complementary color pairs, flowing background gradients, subtle continuous animations (8-12s loops), iridescent effects. Ensure text remains readable over gradients.

css_technical_keywords:
background: conic-gradient or radial-gradient; animation: @keyframes gradient 8-12s infinite; background-size: 400% 400%; filter: saturate(1.2); mix-blend-mode: screen; color: high contrast over gradient

implementation_checklist:
☐ Mesh/flowing gradients applied ☐ 8-12s animation loop ☐ Complementary colors used ☐ Smooth color transitions ☐ Iridescent effect subtle ☐ Text contrast verified over all gradient states ☐ GPU composited


style_category: Retro-Futurism
ai_prompt_keywords_copy_paste_ready:
Build a retro-futuristic (cyberpunk/vaporwave) interface with neon colors (cyan, magenta, electric blue), deep black background, 80s aesthetic, CRT scanlines, glitch effects, neon glow, monospace fonts, geometric patterns. Balance nostalgia with modern performance.

css_technical_keywords:
color: #0080FF, #FF006E, #00FFFF; text-shadow: 0 0 10px neon; background: #000 or #1A1A2E; font-family: monospace; animation: glitch (skew+offset); filter: hue-rotate; image-rendering: auto

implementation_checklist:
☐ Neon colors used ☐ CRT scanlines effect ☐ Glitch animations active ☐ Monospace font ☐ Deep black background ☐ Glow effects applied ☐ 80s patterns present ☐ Reduced motion alternative


style_category: Flat Design
ai_prompt_keywords_copy_paste_ready:
Create a flat, 2D interface with bold colors, no shadows/gradients, clean lines, simple geometric shapes, icon-heavy, typography-focused, minimal ornamentation. Use 4-6 solid bright colors. Prioritize fast loading and content clarity. Ideal for data-heavy and utility interfaces.

css_technical_keywords:
box-shadow: none; background: solid color; border-radius: 0-4px; fill: solid; stroke: 1-2px; font: bold sans-serif; icons: simplified SVG inline; color: solid high-saturation

implementation_checklist:
☐ No shadows/gradients ☐ 4-6 solid colors max ☐ Clean lines consistent ☐ Simple shapes used ☐ Icon-heavy layout ☐ High saturation colors ☐ Fast loading verified ☐ SVG icons inline


style_category: Skeuomorphism
ai_prompt_keywords_copy_paste_ready:
Design a realistic, textured interface with 3D depth, real-world metaphors (leather, wood, metal), complex gradients (8-12 stops), realistic shadows, grain/texture overlays, tactile press animations. Use for premium/luxury products where tactile feel matters.

css_technical_keywords:
background: complex gradient 8-12 stops; box-shadow: realistic multi-layer; background-image: texture overlay (noise, grain); filter: drop-shadow; transform: scale on press 300-500ms

implementation_checklist:
☐ Realistic textures applied ☐ Complex gradients 8-12 stops ☐ Multi-layer shadows ☐ Texture overlays present ☐ Tactile animations smooth ☐ Depth effect pronounced ☐ Texture assets optimized (WebP/AVIF)


style_category: Liquid Glass
ai_prompt_keywords_copy_paste_ready:
Create a premium liquid glass effect with morphing shapes, flowing animations, chromatic aberration, iridescent gradients, smooth 400-600ms transitions. Use SVG morphing, dynamic blur, smooth color transitions. Ideal for premium brands and immersive product pages.

css_technical_keywords:
animation: morphing SVG paths 400-600ms; backdrop-filter: blur + saturate; filter: hue-rotate + brightness; mix-blend-mode: screen; background: iridescent gradient; will-change: filter

implementation_checklist:
☐ Morphing animations 400-600ms ☐ Chromatic aberration applied ☐ Dynamic blur active ☐ Iridescent gradients ☐ Smooth color transitions ☐ Premium feel achieved ☐ GPU composited ☐ Fallback for low-end devices


style_category: Motion-Driven
ai_prompt_keywords_copy_paste_ready:
Build an animation-heavy interface with scroll-triggered animations, microinteractions, parallax scrolling (3-5 layers), smooth transitions (300-400ms), entrance animations, page transitions. Use Intersection Observer, View Transitions API, GPU acceleration. Respect reduced motion preferences.

css_technical_keywords:
animation: scroll-reveal; transform: translateY/X; Intersection Observer; will-change: transform; scroll-behavior: smooth; view-transition-name; @media (prefers-reduced-motion: reduce)

implementation_checklist:
☐ Scroll animations active ☐ Parallax 3-5 layers ☐ Entrance animations smooth ☐ Page transitions fluid ☐ GPU accelerated ☐ Prefers-reduced-motion respected ☐ View Transitions API used ☐ No layout thrashing


style_category: Micro-interactions
ai_prompt_keywords_copy_paste_ready:
Design with delightful micro-interactions: 50-100ms animations, gesture responses, tactile feedback, loading states, success/error states, subtle hover effects, haptic triggers. Focus on responsive, contextual interactions that guide users through AI-powered workflows.

css_technical_keywords:
animation: 50-100ms; transition: hover states; @media (hover: hover); :active for press; Vibration API for haptic; loading: skeleton screens; :has() for state-based styling

implementation_checklist:
☐ Micro-animations 50-100ms ☐ Gesture-responsive ☐ Tactile feedback visual/haptic ☐ Skeleton loading screens ☐ Success/error states clear ☐ Hover effects subtle ☐ :has() selector used ☐ Haptic API integrated


style_category: Inclusive Design
ai_prompt_keywords_copy_paste_ready:
Design for universal accessibility: high contrast (7:1+), large text (16px+), keyboard-only navigation, screen reader optimization, WCAG AAA, symbol-based indicators (not color-only), haptic feedback, voice interaction, reduced motion, cognitive load reduction, plain language.

css_technical_keywords:
aria-* complete; role semantic; focus-visible: 3-4px; contrast: 7:1+; @media (prefers-reduced-motion); @media (prefers-contrast: more); alt text all images; form labels associated; lang attribute

implementation_checklist:
☐ WCAG AAA verified ☐ 7:1+ contrast all text ☐ Keyboard accessible ☐ Screen reader tested ☐ Focus visible 3-4px ☐ No color-only indicators ☐ Haptic fallback ☐ Voice nav supported ☐ Cognitive load minimized


style_category: Zero Interface
ai_prompt_keywords_copy_paste_ready:
Create a voice-first, gesture-based, AI-driven interface with minimal visible UI, progressive disclosure, voice recognition, gesture detection, AI predictions, smart suggestions, context-aware actions. Hide controls until needed. Design for ambient computing and agent-first interactions.

css_technical_keywords:
Web Speech API; touch/gesture events; progressive-disclosure: show on demand; minimal visible UI; @media (prefers-reduced-data); container queries; popover API for contextual UI

implementation_checklist:
☐ Voice commands responsive ☐ Gesture detection active ☐ AI predictions contextual ☐ Progressive disclosure working ☐ Minimal visible UI ☐ Smart suggestions contextual ☐ Popover API for on-demand UI ☐ Agent handoff states


style_category: Soft UI Evolution
ai_prompt_keywords_copy_paste_ready:
Design evolved neumorphism with improved contrast (WCAG AA+), modern aesthetics, subtle depth, accessibility focus. Softer than flat but clearer than pure neumorphism. Better color hierarchy, improved focus states, modern 200-300ms animations. Ideal for calm, professional interfaces.

css_technical_keywords:
box-shadow: 0 2px 4px multi-layer; background: improved contrast pastels; border-radius: 8-12px; animation: 200-300ms; outline: 2-3px on focus; contrast: 4.5:1+; color-mix() for palette

implementation_checklist:
☐ Improved contrast AA/AAA ☐ Soft shadows modern ☐ Border-radius 8-12px ☐ Animations 200-300ms ☐ Focus states visible ☐ Color hierarchy clear ☐ color-mix() for consistent palette


style_category: Bento Box Grid
ai_prompt_keywords_copy_paste_ready:
Design a Bento Grid layout with modular grid system, rounded corners (16-24px), varied card sizes (1x1, 2x1, 2x2, 3x1), card-based hierarchy, soft backgrounds, subtle borders, content-first approach. Apple-style aesthetic. Use CSS Subgrid for nested alignment.

css_technical_keywords:
display: grid; grid-template-columns: repeat(auto-fit, minmax()); gap: 1rem; border-radius: 20px; background: #FFF; subgrid for nested; container queries for card responsiveness

implementation_checklist:
☐ CSS Grid layout ☐ Rounded corners 16-24px ☐ Varied card spans ☐ Content fits card size ☐ Responsive re-flow ☐ Apple-like aesthetic ☐ Subgrid for alignment ☐ Container queries per card


style_category: Neubrutalism
ai_prompt_keywords_copy_paste_ready:
Design a neubrutalist interface with high contrast, hard black borders (3px+), bright pop colors, no blur, sharp corners, bold typography, hard shadows (offset 4px 4px), raw but functional aesthetic. Modern take on brutalism with better usability.

css_technical_keywords:
border: 3px solid black; box-shadow: 5px 5px 0px black; colors: #FFDB58 #FF6B6B #4ECDC4; font-weight: 700; no gradients; no blur; accent-color for form elements

implementation_checklist:
☐ Hard borders 2-4px ☐ Hard offset shadows ☐ High saturation colors ☐ Bold typography ☐ No blurs/gradients ☐ Distinctive aesthetic ☐ Form elements styled with accent-color ☐ Functional despite raw look


style_category: HUD / Sci-Fi FUI
ai_prompt_keywords_copy_paste_ready:
Design a futuristic HUD (Heads-Up Display) or FUI. Use thin lines (1px), neon cyan/blue on black, technical markers, decorative brackets, data visualization, monospaced fonts, glowing elements, transparency. Ideal for real-time monitoring and telemetry interfaces.

css_technical_keywords:
border: 1px solid rgba(0,255,255,0.5); color: #00FFFF; background: transparent or rgba(0,0,0,0.8); font-family: monospace; text-shadow: 0 0 5px cyan; SVG for technical markers

implementation_checklist:
☐ Fine lines 1px ☐ Neon glow text/borders ☐ Monospaced font ☐ Dark/Transparent BG ☐ Decorative tech markers ☐ Holographic feel ☐ SVG markers animated ☐ Real-time data integration ready


style_category: Pixel Art
ai_prompt_keywords_copy_paste_ready:
Design a pixel art inspired interface with pixelated fonts, 8-bit/16-bit aesthetic, sharp edges, limited color palette (16-32 colors), blocky UI elements, retro gaming feel. Use for nostalgic or gaming-adjacent products.

css_technical_keywords:
font-family: 'Press Start 2P'; image-rendering: pixelated; box-shadow: 4px 0 0 #000 (pixel border); no anti-aliasing; crisp-edges

implementation_checklist:
☐ Pixelated fonts loaded ☐ Images sharp (no blur) ☐ CSS box-shadow pixel borders ☐ Retro palette 16-32 colors ☐ Blocky layout ☐ No anti-aliasing ☐ Responsive pixel scaling


style_category: AI-Native UI
ai_prompt_keywords_copy_paste_ready:
Design an AI-native interface optimized for conversational AI, streaming responses, agent workflows, and intelligent suggestions. Use: streaming text containers, thinking/loading indicators, confidence scores, source citations, token counters, context windows, tool-use visualization, human-in-the-loop controls.

css_technical_keywords:
content-visibility: auto; streaming-text: typewriter effect; skeleton: pulse loading; popover: for citations; scroll-snap: for conversation; container queries; CSS scroll-timeline for progress

implementation_checklist:
☐ Streaming text display ☐ Thinking/loading states ☐ Confidence indicators ☐ Source citations linked ☐ Token usage visible ☐ Context window indicator ☐ Tool-use visualization ☐ Human-in-the-loop controls ☐ Error recovery flows


style_category: Organic Biophilic
ai_prompt_keywords_copy_paste_ready:
Design a nature-inspired interface with organic shapes, earth tones, natural textures, flowing curves, leaf/plant motifs, warm lighting, sustainable aesthetic. Use SVG for organic shapes, natural color palettes (greens, browns, sky blues), and calming animations.

css_technical_keywords:
border-radius: 40-60% for organic shapes; background: earth-tone gradients; clip-path: organic SVG paths; color: #228B22, #8B4513, #87CEEB; animation: gentle sway 4-6s

implementation_checklist:
☐ Organic shapes (SVG clip-path) ☐ Earth tone palette ☐ Natural textures subtle ☐ Flowing curves ☐ Calming animations 4-6s ☐ Sustainable imagery ☐ Low-carbon design practices ☐ Green hosting indicator


style_category: Biomimetic / Organic 2.0
ai_prompt_keywords_copy_paste_ready:
Design a biomimetic interface inspired by biological systems: cellular structures, neural networks, DNA helixes, organic growth patterns, bioluminescence effects. Use for biotech, health-tracking, and scientific visualization. Combine organic aesthetics with data precision.

css_technical_keywords:
clip-path: complex organic; background: radial-gradient cellular; animation: organic growth; SVG: neural/cellular patterns; filter: glow for bioluminescence; color: biological spectrum

implementation_checklist:
☐ Cellular/neural patterns ☐ Organic growth animations ☐ Bioluminescence effects ☐ Biological color spectrum ☐ Data overlays on organic shapes ☐ Scientific precision maintained ☐ SVG patterns optimized


style_category: Spatial UI (VisionOS)
ai_prompt_keywords_copy_paste_ready:
Design for spatial computing (VisionOS/XR). Use: frosted glass panels, depth hierarchy (near/mid/far), gaze-friendly targets (60px+), hand tracking affordances, environment-aware transparency, system-consistent materials, window management, ornament patterns.

css_technical_keywords:
backdrop-filter: blur(40px); border-radius: 28px; padding: 20px+; min-target: 60px; background: rgba(255,255,255,0.3); depth: z-translation; hover: gaze-highlight

implementation_checklist:
☐ Frosted glass panels ☐ Depth hierarchy (3 layers) ☐ Gaze targets 60px+ ☐ Hand tracking affordances ☐ Environment-aware transparency ☐ System materials used ☐ Window management ☐ Ornament patterns


style_category: E-Ink / Paper
ai_prompt_keywords_copy_paste_ready:
Design a paper-like, low-energy interface inspired by e-ink displays. Use: high contrast black on white, minimal color (1-2 accent max), serif or humanist fonts, generous margins, print-like typography, reduced animations, sustainable low-power aesthetic.

css_technical_keywords:
background: #FAFAF8; color: #1A1A1A; font-family: serif or humanist sans; line-height: 1.6-1.8; max-width: 65ch; animation: none or fade only; @media print optimized

implementation_checklist:
☐ Paper-like background ☐ High contrast text ☐ Minimal color (1-2 accents) ☐ Generous margins ☐ Print-optimized typography ☐ No/minimal animations ☐ Print stylesheet included ☐ Low energy consumption


style_category: Swiss Modernism 2.0
ai_prompt_keywords_copy_paste_ready:
Design a modern Swiss/International style interface with strict grid systems, Helvetica-style typography, mathematical proportions, asymmetric balance, photographic integration, clear information hierarchy. Updated with modern CSS Grid, fluid typography, and responsive design.

css_technical_keywords:
display: grid; grid-template: strict proportions; font-family: 'Helvetica Neue', system-ui; font-size: clamp(); line-height: mathematical ratio; gap: proportional; color: limited palette

implementation_checklist:
☐ Strict grid system ☐ Helvetica-style typography ☐ Mathematical proportions ☐ Asymmetric balance ☐ Photo integration ☐ Clear hierarchy ☐ Fluid typography (clamp) ☐ Responsive grid


style_category: Storytelling-Driven
ai_prompt_keywords_copy_paste_ready:
Design a narrative-focused interface with full-screen sections, scroll-driven storytelling, cinematic transitions, immersive imagery, progressive content reveal, emotional pacing. Use scroll-timeline API, view transitions, and intersection observer for narrative flow.

css_technical_keywords:
scroll-timeline; view-transition-name; Intersection Observer; scroll-snap-type: y proximity; full-bleed images; animation-timeline: scroll(); container queries for sections

implementation_checklist:
☐ Full-screen sections ☐ Scroll-driven narrative ☐ Cinematic transitions ☐ Immersive imagery ☐ Progressive reveal ☐ Emotional pacing ☐ Scroll-timeline API ☐ View transitions ☐ Reduced motion alternative


style_category: Social Proof-Focused
ai_prompt_keywords_copy_paste_ready:
Design a trust-building interface centered on social proof: testimonials, ratings, user counts, case studies, trust badges, before/after comparisons, video testimonials, real-time activity feeds. Use structured data for SEO and trust signals.

css_technical_keywords:
structured data (JSON-LD); counter animation; star-rating SVG; testimonial carousel; trust-badge grid; real-time feed (WebSocket); schema.org Review markup

implementation_checklist:
☐ Testimonials displayed ☐ Star ratings visible ☐ User/customer counts ☐ Trust badges prominent ☐ Case studies linked ☐ Video testimonials ☐ Real-time activity feed ☐ Structured data (schema.org) ☐ A/B testable


style_category: Trust & Authority
ai_prompt_keywords_copy_paste_ready:
Design a credibility-focused interface with professional typography, certification displays, security badges, data transparency, regulatory compliance indicators, executive-style layout, case study integration, ROI calculators. Build institutional trust.

css_technical_keywords:
font-family: professional serif + sans; badge-grid: flex; security-indicators: SVG; ROI-calculator: interactive; color: navy + gold + white; border: subtle professional

implementation_checklist:
☐ Professional typography ☐ Certification badges ☐ Security indicators ☐ Data transparency ☐ Compliance badges ☐ Executive layout ☐ Case studies ☐ ROI calculator ☐ Contact prominent


style_category: Conversion-Optimized
ai_prompt_keywords_copy_paste_ready:
Design a conversion-focused interface with clear CTAs, urgency indicators, pricing tables, comparison matrices, A/B testable components, exit-intent triggers, social proof integration, progress indicators, friction-reducing forms. Optimize for measurable outcomes.

css_technical_keywords:
CTA: high contrast button; pricing-table: grid; comparison: table; form: minimal fields; progress: step indicator; exit-intent: Intersection Observer; A/B: data attributes

implementation_checklist:
☐ Clear primary CTA ☐ Urgency indicators ☐ Pricing table clear ☐ Comparison matrix ☐ A/B test ready (data attributes) ☐ Exit-intent trigger ☐ Social proof near CTA ☐ Progress indicators ☐ Minimal form fields


style_category: Data-Dense
ai_prompt_keywords_copy_paste_ready:
Design a data-dense interface for information-heavy dashboards: compact layouts, small multiples, sparklines, heat maps, data tables with sorting/filtering, KPI cards, real-time indicators, drill-down navigation. Optimize for power users and analysts.

css_technical_keywords:
display: grid; gap: 8-12px; font-size: 12-14px; table: sortable; sparkline: inline SVG; heatmap: CSS gradient; KPI: card component; overflow: scroll; resize: observer

implementation_checklist:
☐ Compact grid layout ☐ Small multiples ☐ Sparklines inline ☐ Heat maps functional ☐ Sortable/filterable tables ☐ KPI cards prominent ☐ Real-time indicators ☐ Drill-down navigation ☐ Export functionality


style_category: Cyberpunk UI
ai_prompt_keywords_copy_paste_ready:
Design a cyberpunk-inspired interface with neon accents on dark backgrounds, glitch effects, terminal aesthetics, matrix-style data rain, angular geometric shapes, high-tech borders, scan-line overlays. Combine dystopian aesthetic with functional data display.

css_technical_keywords:
background: #0A0A0A; color: #00FF41 or #FF00FF; border: 1px solid neon; text-shadow: neon glow; animation: glitch + scanline; font-family: monospace; clip-path: angular

implementation_checklist:
☐ Neon on dark background ☐ Glitch effects subtle ☐ Terminal aesthetic ☐ Angular shapes ☐ Scan-line overlay ☐ High-tech borders ☐ Matrix-style elements ☐ Functional despite aesthetic ☐ Reduced motion fallback


style_category: Holographic / Iridescent
ai_prompt_keywords_copy_paste_ready:
Design a holographic interface with rainbow iridescent effects, prismatic color shifts, metallic sheens, light-reactive gradients, 3D depth illusion. Use CSS conic-gradient, hue-rotate animations, and metallic color palettes for a futuristic premium feel.

css_technical_keywords:
background: conic-gradient(from var(--angle)); animation: hue-rotate 3-5s; filter: brightness(1.1) contrast(1.1); background-blend-mode: overlay; border-image: linear-gradient

implementation_checklist:
☐ Iridescent gradient active ☐ Prismatic color shifts ☐ Metallic sheen effect ☐ Light-reactive animation ☐ 3D depth illusion ☐ Hue-rotate smooth ☐ Text readable over effects ☐ GPU composited


style_category: Gen Z Chaos
ai_prompt_keywords_copy_paste_ready:
Design a chaotic, maximalist interface with clashing colors, overlapping elements, meme-inspired layouts, sticker aesthetics, hand-drawn elements, anti-design principles, intentional visual noise. Controlled chaos that still communicates effectively.

css_technical_keywords:
z-index: overlapping; transform: rotate(random); mix-blend-mode: multiply; border: hand-drawn SVG; color: clashing neon; font: mixed weights/styles; position: absolute scattered

implementation_checklist:
☐ Controlled chaos layout ☐ Overlapping elements ☐ Clashing colors intentional ☐ Sticker/meme aesthetic ☐ Hand-drawn elements ☐ Mixed typography ☐ Still navigable ☐ Mobile-responsive chaos ☐ Reduced motion: simplified


style_category: Component Library UI
ai_prompt_keywords_copy_paste_ready:
Design a component-driven interface using a design system with tokens, variants, slots, and composable primitives. Use: consistent spacing scale (4px grid), semantic color tokens, size variants (sm/md/lg), compound components, Radix/Headless UI primitives.

css_technical_keywords:
CSS custom properties; data-attributes for state; :where() for low specificity; @layer for cascade; container queries; gap: token-based; aspect-ratio

implementation_checklist:
☐ Design tokens defined ☐ Component variants (sm/md/lg) ☐ Semantic color tokens ☐ Compound component API ☐ Slot-based composition ☐ :where() specificity ☐ @layer cascade order


style_category: Dashboard Analytics
ai_prompt_keywords_copy_paste_ready:
Design an analytics dashboard with KPI cards, chart grids, data tables, filter bars, date range pickers, real-time indicators, drill-down navigation. Use: 12-column grid, card-based layout, compact typography (13-14px), status colors (green/amber/red).

css_technical_keywords:
display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; font-size: 13px; overflow: auto; resize: observer; color: status-semantic; scroll-snap for cards mobile

implementation_checklist:
☐ 12-col grid layout ☐ KPI cards with sparklines ☐ Chart integration (Recharts) ☐ Data table sortable ☐ Filter bar functional ☐ Date range picker ☐ Real-time WebSocket


style_category: Chat / Conversational UI
ai_prompt_keywords_copy_paste_ready:
Design a conversational chat interface with message bubbles, typing indicators, read receipts, avatar integration, file attachments, emoji reactions, thread replies, voice messages. Use: bubble radius 18px, alternating alignment, timestamp separation.

css_technical_keywords:
border-radius: 18px 18px 4px 18px; gap: 4px; scroll-behavior: smooth; scroll-snap-align: end; position: sticky for input; flexbox column-reverse

implementation_checklist:
☐ Message bubbles styled ☐ Typing indicator animated ☐ Read receipts displayed ☐ Avatars integrated ☐ File upload/preview ☐ Emoji picker ☐ Thread support ☐ Voice message player


style_category: Multi-Step Form / Wizard
ai_prompt_keywords_copy_paste_ready:
Design a multi-step form wizard with progress indicator, step validation, conditional branching, summary review, auto-save draft. Use: horizontal stepper, form sections, inline validation, progressive disclosure, smart defaults.

css_technical_keywords:
grid or flexbox stepper; scroll-snap for steps mobile; :valid/:invalid pseudo-classes; fieldset grouping; progress element; transition: slide 300ms

implementation_checklist:
☐ Progress stepper visible ☐ Step-by-step validation ☐ Conditional branching ☐ Summary/review step ☐ Auto-save draft ☐ Inline error messages ☐ Smart defaults


style_category: Notification / Alert System
ai_prompt_keywords_copy_paste_ready:
Design a notification system with toast messages, alert banners, badge indicators, notification center, priority levels (info/success/warning/error), stacking, auto-dismiss, action buttons.

css_technical_keywords:
position: fixed; z-index: 9999; animation: slide-in 200ms; pointer-events: auto; role: alert; aria-live: polite/assertive; gap: 8px stack

implementation_checklist:
☐ Toast component styled ☐ Priority colors defined ☐ Stacking behavior ☐ Auto-dismiss timer ☐ Action buttons ☐ ARIA live regions ☐ Notification center drawer


style_category: Onboarding / Tour
ai_prompt_keywords_copy_paste_ready:
Design an onboarding experience with welcome screens, feature tours, tooltips, spotlight highlights, progress dots, skip option, personalization questions. Use: overlay masks, spotlight cut-outs, coach marks, step-by-step reveal.

css_technical_keywords:
clip-path: circle/polygon for spotlight; backdrop: rgba(0,0,0,0.6); z-index layering; animation: fade-in 300ms; popper.js for positioning; transition: step 400ms

implementation_checklist:
☐ Welcome screen designed ☐ Feature tour tooltips ☐ Spotlight highlights ☐ Progress indicators ☐ Skip option visible ☐ Personalization step ☐ Completion celebration


style_category: Pricing / Comparison
ai_prompt_keywords_copy_paste_ready:
Design a pricing page with tier cards, feature comparison matrix, toggle (monthly/annual), popular badge, CTA hierarchy, FAQ section, money-back guarantee. Use: 3-4 tiers, highlighted recommended, compact feature checks.

css_technical_keywords:
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 24px; position: sticky for header; scroll-snap mobile; border: highlighted tier

implementation_checklist:
☐ 3-4 pricing tiers ☐ Feature comparison grid ☐ Monthly/annual toggle ☐ Popular/recommended badge ☐ CTA hierarchy clear ☐ FAQ accordion ☐ Guarantee badge


style_category: Settings / Preferences
ai_prompt_keywords_copy_paste_ready:
Design a settings interface with categorized sections, toggle switches, dropdowns, sliders, search/filter, reset defaults, save confirmation. Use: sidebar navigation, form groups, inline descriptions, danger zone section.

css_technical_keywords:
display: grid; grid-template-columns: 240px 1fr; gap: 24px; fieldset grouping; toggle: custom checkbox; slider: input[type=range]; color: danger #EF4444

implementation_checklist:
☐ Sidebar navigation ☐ Toggle switches styled ☐ Dropdowns functional ☐ Sliders with values ☐ Search/filter settings ☐ Reset to defaults ☐ Save confirmation ☐ Danger zone


style_category: Empty State / Zero Data
ai_prompt_keywords_copy_paste_ready:
Design empty states with illustrations, action prompts, helpful descriptions, primary CTA, secondary suggestions. Use: centered layout, friendly illustration, clear next-step, onboarding hint. Handle: first-use, no-results, error-recovery, offline.

css_technical_keywords:
display: flex; align-items: center; justify-content: center; min-height: 300px; text-align: center; max-width: 400px; margin: auto; gap: 16px

implementation_checklist:
☐ First-use empty state ☐ No-results state ☐ Error-recovery state ☐ Offline state ☐ Illustration/icon ☐ Clear CTA ☐ Helpful description ☐ Onboarding hint


style_category: Media Gallery / Lightbox
ai_prompt_keywords_copy_paste_ready:
Design a media gallery with grid layout, lightbox overlay, zoom, swipe navigation, EXIF data, lazy loading, masonry layout option. Use: CSS Grid or Masonry, IntersectionObserver, dialog element for lightbox.

css_technical_keywords:
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 4px; dialog for lightbox; object-fit: cover; loading: lazy; aspect-ratio: 1/1 or 3/4

implementation_checklist:
☐ Grid layout responsive ☐ Lightbox overlay ☐ Zoom functionality ☐ Swipe navigation ☐ Lazy loading ☐ Masonry option ☐ EXIF/metadata ☐ Keyboard navigation


style_category: Code Editor / Terminal
ai_prompt_keywords_copy_paste_ready:
Design a code editor or terminal interface with syntax highlighting, line numbers, copy button, language badge, diff view, tab navigation, command palette. Use: monospace font, dark theme default, proper indentation.

css_technical_keywords:
font-family: 'JetBrains Mono', monospace; background: #1E1E1E; color: #D4D4D4; tab-size: 2; white-space: pre; overflow-x: auto; counter-reset for line numbers

implementation_checklist:
☐ Syntax highlighting ☐ Line numbers ☐ Copy button ☐ Language badge ☐ Diff view ☐ Tab navigation ☐ Command palette ☐ Search/replace


style_category: Kanban / Task Board
ai_prompt_keywords_copy_paste_ready:
Design a kanban board with draggable columns, task cards, status labels, assignee avatars, priority badges, swimlanes, WIP limits. Use: CSS Grid for columns, drag-and-drop API, scroll-snap mobile.

css_technical_keywords:
display: grid; grid-auto-flow: column; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; user-select: none during drag; cursor: grab

implementation_checklist:
☐ Draggable columns ☐ Task cards styled ☐ Status labels (color) ☐ Assignee avatars ☐ Priority badges ☐ Swimlanes ☐ WIP limits ☐ Mobile scroll-snap


style_category: Agent Workflow / Pipeline
ai_prompt_keywords_copy_paste_ready:
Design an AI agent workflow visualizer with node graph, step cards, connection lines, status indicators, tool-use panels, human-in-the-loop checkpoints, execution timeline, log viewer. Use: SVG for connections, status colors, real-time updates.

css_technical_keywords:
SVG for connection lines; display: flex for timeline; position: relative for nodes; animation: pulse for active; stroke-dasharray for pending; WebSocket for real-time; overflow: auto

implementation_checklist:
☐ Node graph layout ☐ Step cards with status ☐ Connection lines (SVG) ☐ Active step pulse ☐ Tool-use visualization ☐ Human-in-the-loop gate ☐ Execution timeline ☐ Log viewer ☐ Error recovery


# domain_react

category: Async Waterfall
issue: Dependency Parallelization
platform: React 19 / Next.js 15
description: Start dependent operations as early as possible; use Promise.all with dependency chains
do: Start each task at earliest possible moment; chain only true dependencies
dont: Wait for unrelated data before starting dependent fetch
severity: Critical
code_example_good:
const userP = fetchUser(); const configP = fetchConfig(); const user = await userP; const profile = await fetchProfile(user.id)

code_example_bad:
const user = await fetchUser(); const config = await fetchConfig(); const profile = await fetchProfile(user.id)


category: Bundle Size
issue: React Compiler Auto-Memo
platform: React 19
do: Enable React Compiler; remove manual memoization it handles
dont: Manually wrap everything in memo/useMemo/useCallback
code_example_good: // react-compiler enabled in babel config; write plain components
code_example_bad: const MemoComp = memo(({ data }) => ...); const cb = useCallback(() => {}, [deps])
severity: High
description:
React Compiler (React Forget) automatically memoizes components and hooks; remove manual memo/useMemo/useCallback


category: Server
issue: Server Actions
platform: React 19 / Next.js 15
do: Use 'use server' for mutations; combine with useActionState
dont: Manual API routes for simple form submissions
code_example_good: async function submitForm(formData) { 'use server'; await db.insert(formData) }
code_example_bad: const handleSubmit = async () => { await fetch('/api/submit', { method: 'POST' }) }
severity: High
description:
Use Server Actions for form mutations; they integrate with Suspense, transitions, and error boundaries


category: Client
issue: useOptimistic
platform: React 19
description: Use useOptimistic for instant UI feedback while server action processes
do: Use useOptimistic for form submissions and mutations
dont: Wait for server response before updating UI
code_example_bad: const handleAdd = async () => { await addItem(); refetch() } // slow feedback
severity: Medium
code_example_good:
const [optimisticItems, addOptimistic] = useOptimistic(items, (state, newItem) => [...state, newItem])


category: Client
issue: useFormStatus
platform: React 19
description: Use useFormStatus to show loading states in form submit buttons
do: Use useFormStatus inside form children for pending state
dont: Manual loading state management with useState
severity: Medium
code_example_good:
function SubmitButton() { const { pending } = useFormStatus(); return <button disabled={pending}>Submit</button> }

code_example_bad:
const [loading, setLoading] = useState(false); onClick={() => { setLoading(true); await submit(); setLoading(false) }}


category: Rerender
issue: React Compiler Eliminates Manual Memo
platform: React 19
do: Enable React Compiler and write plain components
dont: Manually memoize everything when compiler handles it
code_example_good: function UserAvatar({ user }) { return <img src={user.avatar} /> }
code_example_bad: const UserAvatar = memo(({ user }) => <img src={user.avatar} />)
severity: Medium
description:
React Compiler auto-memoizes; remove manual memo(), useMemo(), useCallback() when compiler is enabled


category: Rendering
issue: Hydration No Flicker
platform: React 19 / Next.js 15
description: Use inline script to set client-only data before hydration to prevent flash
do: Inject sync script for client-only values (theme, locale)
dont: Use useEffect causing visible flash of wrong content
code_example_bad: useEffect(() => setTheme(localStorage.theme), []) // flickers
severity: Medium
code_example_good:
<script dangerouslySetInnerHTML={{ __html: 'document.documentElement.dataset.theme = localStorage.theme' }} />


category: AI/Streaming
issue: Streaming Text Display
platform: React 19 / Next.js 15
description: Use ReadableStream and SSE for AI streaming responses; render tokens incrementally
do: Use ReadableStream + TextDecoder for token-by-token rendering
dont: Wait for complete AI response before displaying
code_example_bad: const result = await response.json(); setContent(result.text) // waits for full response
severity: Critical
code_example_good:
const reader = response.body.getReader(); while (true) { const { done, value } = await reader.read(); appendToken(decode(value)) }


category: AI/Streaming
issue: Abort Controller for AI
platform: React 19 / Next.js 15
description: Use AbortController to cancel in-flight AI requests when user navigates away or submits new query
do: Abort previous AI request on new submission; cleanup on unmount
dont: Let abandoned AI requests complete wasting resources
code_example_bad: // No cleanup; previous AI request continues running in background
severity: High
code_example_good:
const controller = new AbortController(); fetch(url, { signal: controller.signal }); return () => controller.abort()


category: AI/Streaming
issue: Token-by-Token Rendering
platform: React 19 / Next.js 15
description: Render AI tokens incrementally without causing full re-renders; use refs for append-only content
do: Use ref-based DOM manipulation for streaming text; batch state updates
dont: setState on every token causing thousands of re-renders
severity: Critical
code_example_good:
const contentRef = useRef(); reader.onToken = (token) => { contentRef.current.textContent += token }

code_example_bad:
const [text, setText] = useState(''); onToken = (t) => setText(prev => prev + t) // re-render per token


category: Security
issue: Sanitize AI Output
platform: React 19 / Next.js 15
description: Sanitize AI-generated HTML/markdown before rendering to prevent XSS attacks
do: Use DOMPurify or sanitize-html for AI output; render markdown safely
dont: Render AI output with dangerouslySetInnerHTML without sanitization
code_example_bad: <div dangerouslySetInnerHTML={{ __html: aiOutput }} /> // XSS vulnerability
severity: Critical
code_example_good:
import DOMPurify from 'dompurify'; <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(aiOutput) }} />


category: Security
issue: Server Action Validation
platform: React 19 / Next.js 15
description: Always validate and sanitize Server Action inputs; never trust client data
do: Use Zod/Valibot to validate all Server Action inputs
dont: Trust client-submitted form data without validation
severity: Critical
code_example_good:
async function action(formData) { 'use server'; const data = schema.parse(Object.fromEntries(formData)) }

code_example_bad:
async function action(formData) { 'use server'; await db.insert(Object.fromEntries(formData)) } // no validation


category: Caching
issue: Stale-While-Revalidate
platform: React 19 / Next.js 15
description: Implement stale-while-revalidate pattern for instant UI with background refresh
do: Show cached data immediately; revalidate in background
dont: Show loading spinner while refetching cached data
code_example_good: const { data } = useSWR(key, fetcher, { revalidateOnFocus: true })
severity: High
code_example_bad:
const [data, setData] = useState(); useEffect(() => { setLoading(true); fetch().then(setData) }, [])


# search_index_content

c0: style
c1: Minimalism & Swiss Style
c4: domain_style
c2:
Clean, simple, spacious, functional, white space, high contrast, geometric, sans-serif, grid-based, essential

c3:
Minimalism & Swiss Style Clean, simple, spacious, functional, white space, high contrast, geometric, sans-serif, grid-based, essential Enterprise apps, dashboards, documentation, SaaS platforms, professional tools, AI interfaces General


c0: style
c1: Neumorphism
c4: domain_style
c2:
Soft UI, embossed, debossed, convex, concave, light source, subtle depth, rounded (12-16px), monochromatic

c3:
Neumorphism Soft UI, embossed, debossed, convex, concave, light source, subtle depth, rounded (12-16px), monochromatic Health/wellness apps, meditation platforms, fitness trackers, minimal interaction UIs General


c0: style
c1: Glassmorphism
c4: domain_style
c2:
Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer

c3:
Glassmorphism Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, spatial computing General


c0: style
c1: Brutalism
c4: domain_style
c2:
Raw, unpolished, stark, high contrast, plain text, system fonts, visible borders, asymmetric, anti-design

c3:
Brutalism Raw, unpolished, stark, high contrast, plain text, system fonts, visible borders, asymmetric, anti-design Design portfolios, artistic projects, counter-culture brands, editorial/media, tech blogs General


c0: style
c1: 3D & Hyperrealism
c4: domain_style
c2:
Depth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic, rich detail, immersive, WebGPU

c3:
3D & Hyperrealism Depth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic, rich detail, immersive, WebGPU Gaming, product showcase, immersive experiences, high-end e-commerce, architectural viz, digital twins General


c0: style
c1: Vibrant & Block-based
c4: domain_style
c2:
Bold, energetic, playful, block layout, geometric shapes, high color contrast, duotone, modern, scroll-snap

c3:
Vibrant & Block-based Bold, energetic, playful, block layout, geometric shapes, high color contrast, duotone, modern, scroll-snap Startups, creative agencies, gaming, social media, youth-focused, entertainment, consumer apps General


c0: style
c1: Dark Mode (OLED)
c4: domain_style
c2:
Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, power efficient

c3:
Dark Mode (OLED) Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, power efficient Night-mode apps, coding platforms, entertainment, OLED devices, AI dashboards, monitoring General


c0: style
c1: Accessible & Ethical
c4: domain_style
c2:
High contrast, large text (16px+), keyboard navigation, screen reader, WCAG AAA, focus state, semantic, voice nav

c3:
Accessible & Ethical High contrast, large text (16px+), keyboard navigation, screen reader, WCAG AAA, focus state, semantic, voice nav Government, healthcare, education, inclusive products, legal compliance, public services General


c0: style
c1: Claymorphism
c4: domain_style
c2:
Soft 3D, chunky, playful, toy-like, bubbly, thick borders (3-4px), double shadows, rounded (16-24px)

c3:
Claymorphism Soft 3D, chunky, playful, toy-like, bubbly, thick borders (3-4px), double shadows, rounded (16-24px) Educational apps, children's apps, creative tools, onboarding, casual games, AI tutoring General


c0: style
c1: Aurora UI
c2: Vibrant gradients, smooth blend, Northern Lights, mesh gradient, luminous, atmospheric, iridescent
c4: domain_style
c3:
Aurora UI Vibrant gradients, smooth blend, Northern Lights, mesh gradient, luminous, atmospheric, iridescent Modern SaaS, creative agencies, branding, music platforms, lifestyle, premium products, hero sections General


c0: style
c1: Retro-Futurism
c2: Vintage sci-fi, 80s aesthetic, neon glow, CRT scanlines, pixel art, cyberpunk, synthwave, vaporwave
c4: domain_style
c3:
Retro-Futurism Vintage sci-fi, 80s aesthetic, neon glow, CRT scanlines, pixel art, cyberpunk, synthwave, vaporwave Gaming, entertainment, music platforms, tech brands, artistic projects, cyberpunk themes General


c0: style
c1: Flat Design
c2: 2D, minimalist, bold colors, no shadows, clean lines, simple shapes, typography-focused, icon-heavy
c4: domain_style
c3:
Flat Design 2D, minimalist, bold colors, no shadows, clean lines, simple shapes, typography-focused, icon-heavy Web apps, mobile apps, cross-platform, startup MVPs, SaaS, dashboards, corporate General


c0: style
c1: Skeuomorphism
c2: Realistic, texture, depth, real-world metaphors, shadows, gradients, tactile, detailed, material
c4: domain_style
c3:
Skeuomorphism Realistic, texture, depth, real-world metaphors, shadows, gradients, tactile, detailed, material Legacy apps, gaming, immersive storytelling, premium products, luxury, realistic simulations General


c0: style
c1: Liquid Glass
c4: domain_style
c2:
Flowing glass, morphing, smooth transitions, fluid effects, translucent, animated blur, iridescent, chromatic

c3:
Liquid Glass Flowing glass, morphing, smooth transitions, fluid effects, translucent, animated blur, iridescent, chromatic Premium SaaS, high-end e-commerce, creative platforms, branding, luxury portfolios General


c0: style
c1: Motion-Driven
c4: domain_style
c2:
Animation-heavy, microinteractions, scroll effects, parallax, entrance animations, page transitions, View Transitions

c3:
Motion-Driven Animation-heavy, microinteractions, scroll effects, parallax, entrance animations, page transitions, View Transitions Portfolio sites, storytelling, interactive experiences, entertainment, creative, SaaS landing General


c0: style
c1: Micro-interactions
c4: domain_style
c2:
Small animations, gesture-based, tactile feedback, subtle, contextual, responsive, haptic, state feedback

c3:
Micro-interactions Small animations, gesture-based, tactile feedback, subtle, contextual, responsive, haptic, state feedback Mobile apps, touchscreen UIs, productivity tools, consumer apps, AI interfaces General


c0: style
c1: Inclusive Design
c4: domain_style
c2:
Accessible, color-blind friendly, high contrast, haptic, voice interaction, screen reader, WCAG AAA, universal

c3:
Inclusive Design Accessible, color-blind friendly, high contrast, haptic, voice interaction, screen reader, WCAG AAA, universal Public services, education, healthcare, finance, government, accessible consumer General


c0: style
c1: Zero Interface
c4: domain_style
c2:
Minimal visible UI, voice-first, gesture-based, AI-driven, invisible controls, predictive, context-aware, ambient

c3:
Zero Interface Minimal visible UI, voice-first, gesture-based, AI-driven, invisible controls, predictive, context-aware, ambient Voice assistants, AI platforms, smart home, contextual computing, ambient experiences, agent-first General


c0: style
c1: Soft UI Evolution
c4: domain_style
c2:
Evolved soft UI, better contrast, modern aesthetics, subtle depth, accessibility-focused, improved shadows

c3:
Soft UI Evolution Evolved soft UI, better contrast, modern aesthetics, subtle depth, accessibility-focused, improved shadows Modern enterprise, SaaS, health/wellness, professional tools, hybrid apps General


c0: style
c1: Hero-Centric Design
c4: domain_style
c2:
Large hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video

c3:
Hero-Centric Design Large hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video SaaS landing pages, product launches, service pages, B2B platforms, tech companies Landing Page


c0: style
c1: Conversion-Optimized
c2: Form-focused, single CTA focus, high contrast, urgency, trust signals, social proof, A/B testable
c4: domain_style
c3:
Conversion-Optimized Form-focused, single CTA focus, high contrast, urgency, trust signals, social proof, A/B testable E-commerce, free trial signups, lead generation, SaaS pricing, limited-time offers Landing Page


c0: style
c1: Feature-Rich Showcase
c4: domain_style
c2:
Multiple feature sections, grid layout, benefit cards, visual demonstrations, interactive elements, problem-solution

c3:
Feature-Rich Showcase Multiple feature sections, grid layout, benefit cards, visual demonstrations, interactive elements, problem-solution Enterprise SaaS, software tools, platform services, complex product explanations, B2B Landing Page


c0: style
c1: Minimal & Direct
c4: domain_style
c2:
Minimal text, white space heavy, single column, direct messaging, clean typography, visual-centric, fast

c3:
Minimal & Direct Minimal text, white space heavy, single column, direct messaging, clean typography, visual-centric, fast Simple service pages, indie products, consulting, micro SaaS, freelancer portfolios Landing Page


c0: style
c1: Social Proof-Focused
c4: domain_style
c2:
Testimonials prominent, client logos, case studies, reviews/ratings, user avatars, success metrics, credibility

c3:
Social Proof-Focused Testimonials prominent, client logos, case studies, reviews/ratings, user avatars, success metrics, credibility B2B SaaS, professional services, premium products, e-commerce conversion, established brands Landing Page


c0: style
c1: Interactive Product Demo
c4: domain_style
c2:
Embedded product mockup/video, interactive elements, walkthrough, step-by-step, hover-to-reveal, embedded demos

c3:
Interactive Product Demo Embedded product mockup/video, interactive elements, walkthrough, step-by-step, hover-to-reveal, embedded demos SaaS platforms, tool/software products, productivity apps, developer tools Landing Page


c0: style
c1: Trust & Authority
c4: domain_style
c2:
Certificates/badges, expert credentials, case studies with metrics, before/after, industry recognition, security

c3:
Trust & Authority Certificates/badges, expert credentials, case studies with metrics, before/after, industry recognition, security Healthcare, financial services, enterprise software, premium/luxury, legal services Landing Page


c0: style
c1: Storytelling-Driven
c4: domain_style
c2:
Narrative flow, visual story progression, section transitions, emotional messaging, journey visualization, scroll-driven

c3:
Storytelling-Driven Narrative flow, visual story progression, section transitions, emotional messaging, journey visualization, scroll-driven Brand stories, mission-driven products, premium/lifestyle, documentary-style, educational Landing Page


c0: style
c1: Data-Dense Dashboard
c4: domain_style
c2:
Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data

c3:
Data-Dense Dashboard Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data Business intelligence, financial analytics, enterprise reporting, operational dashboards, AI monitoring BI/Analytics


c0: style
c1: Heat Map & Heatmap Style
c4: domain_style
c2:
Color-coded grid/matrix, data intensity, geographical heat maps, correlation matrices, gradient coloring

c3:
Heat Map & Heatmap Style Color-coded grid/matrix, data intensity, geographical heat maps, correlation matrices, gradient coloring Geographical analysis, performance matrices, correlation analysis, user behavior, AI attention maps BI/Analytics


c0: style
c1: Executive Dashboard
c4: domain_style
c2:
High-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights

c3:
Executive Dashboard High-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights C-suite dashboards, business summary, decision-maker views, strategic planning, AI executive briefs BI/Analytics


c0: style
c1: Real-Time Monitoring
c4: domain_style
c2:
Live data updates, status indicators, alert notifications, streaming data, active monitoring, WebSocket

c3:
Real-Time Monitoring Live data updates, status indicators, alert notifications, streaming data, active monitoring, WebSocket System monitoring, DevOps, real-time analytics, stock market, live event tracking, AI model monitoring BI/Analytics


c0: style
c1: Drill-Down Analytics
c4: domain_style
c2:
Hierarchical data exploration, expandable sections, interactive drill-down, summary-to-detail, context preservation

c3:
Drill-Down Analytics Hierarchical data exploration, expandable sections, interactive drill-down, summary-to-detail, context preservation Sales analytics, product analytics, funnel analysis, multi-dimensional exploration, AI model debugging BI/Analytics


c0: style
c1: Comparative Analysis
c2: Side-by-side comparisons, period-over-period, A/B test results, regional comparisons, benchmarks
c4: domain_style
c3:
Comparative Analysis Side-by-side comparisons, period-over-period, A/B test results, regional comparisons, benchmarks Period-over-period, A/B test dashboards, market comparison, competitive analysis, AI model comparison BI/Analytics


c0: style
c1: Predictive Analytics
c4: domain_style
c2:
Forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection

c3:
Predictive Analytics Forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection Forecasting dashboards, anomaly detection, trend prediction, AI-powered analytics, budget planning BI/Analytics


c0: style
c1: User Behavior Analytics
c4: domain_style
c2:
Funnel visualization, user flow diagrams, conversion tracking, engagement metrics, journey mapping, cohort

c3:
User Behavior Analytics Funnel visualization, user flow diagrams, conversion tracking, engagement metrics, journey mapping, cohort Conversion funnel, user journey tracking, engagement analytics, cohort analysis, AI personalization BI/Analytics


c0: style
c1: Financial Dashboard
c2: Revenue metrics, profit/loss, budget tracking, financial ratios, portfolio, cash flow, audit trail
c4: domain_style
c3:
Financial Dashboard Revenue metrics, profit/loss, budget tracking, financial ratios, portfolio, cash flow, audit trail Financial reporting, accounting, portfolio tracking, budget monitoring, banking analytics, AI risk BI/Analytics


c0: style
c1: Sales Intelligence
c4: domain_style
c2:
Deal pipeline, sales metrics, territory performance, leaderboard, win-loss, quota tracking, forecast

c3:
Sales Intelligence Deal pipeline, sales metrics, territory performance, leaderboard, win-loss, quota tracking, forecast CRM dashboards, sales management, opportunity tracking, performance management, AI lead scoring BI/Analytics


c0: style
c1: Neubrutalism
c4: domain_style
c2:
Bold borders, black outlines, primary colors, thick shadows, no gradients, flat, playful, Gen Z, ugly-cute

c3:
Neubrutalism Bold borders, black outlines, primary colors, thick shadows, no gradients, flat, playful, Gen Z, ugly-cute Gen Z brands, startups, creative agencies, design tools, personal blogs, developer tools General


c0: style
c1: Bento Box Grid
c4: domain_style
c2:
Modular cards, asymmetric grid, varied sizes (1x1, 2x1, 2x2, 3x1), Apple-style, dashboard tiles, clean hierarchy

c3:
Bento Box Grid Modular cards, asymmetric grid, varied sizes (1x1, 2x1, 2x2, 3x1), Apple-style, dashboard tiles, clean hierarchy Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS, AI platforms General


c0: style
c1: Y2K Aesthetic
c4: domain_style
c2:
Neon pink, chrome, metallic, bubblegum, iridescent, glossy, retro-futurism, 2000s, futuristic nostalgia

c3:
Y2K Aesthetic Neon pink, chrome, metallic, bubblegum, iridescent, glossy, retro-futurism, 2000s, futuristic nostalgia Fashion brands, music platforms, Gen Z brands, nostalgia marketing, entertainment General


c0: style
c1: Cyberpunk UI
c2: Neon, dark mode, terminal, HUD, sci-fi, glitch, dystopian, matrix, tech noir, threat visualization
c4: domain_style
c3:
Cyberpunk UI Neon, dark mode, terminal, HUD, sci-fi, glitch, dystopian, matrix, tech noir, threat visualization Gaming, tech products, crypto, sci-fi, developer tools, cybersecurity, fraud detection General


c0: style
c1: Organic Biophilic
c4: domain_style
c2:
Nature, organic shapes, green, sustainable, rounded, flowing, wellness, earthy, natural textures, low-carbon

c3:
Organic Biophilic Nature, organic shapes, green, sustainable, rounded, flowing, wellness, earthy, natural textures, low-carbon Wellness apps, sustainability brands, eco products, health, meditation, organic food, climate tech General


c0: style
c1: AI-Native UI
c4: domain_style
c2:
Chatbot, conversational, voice, assistant, agentic, ambient, minimal chrome, streaming text, agent workflows

c3:
AI-Native UI Chatbot, conversational, voice, assistant, agentic, ambient, minimal chrome, streaming text, agent workflows AI products, chatbots, voice assistants, copilots, AI-powered tools, agent orchestration, conversational General


c0: style
c1: Memphis Design
c2: 80s, geometric, playful, postmodern, shapes, patterns, squiggles, triangles, neon, abstract, bold
c4: domain_style
c3:
Memphis Design 80s, geometric, playful, postmodern, shapes, patterns, squiggles, triangles, neon, abstract, bold Creative agencies, music sites, youth brands, event promotion, artistic portfolios General


c0: style
c1: Vaporwave
c2: Synthwave, retro-futuristic, 80s-90s, neon, glitch, nostalgic, sunset gradient, dreamy, aesthetic
c4: domain_style
c3:
Vaporwave Synthwave, retro-futuristic, 80s-90s, neon, glitch, nostalgic, sunset gradient, dreamy, aesthetic Music platforms, gaming, creative portfolios, tech startups, entertainment General


c0: style
c1: Dimensional Layering
c2: Depth, overlapping, z-index, layers, 3D, shadows, elevation, floating, cards, spatial hierarchy
c4: domain_style
c3:
Dimensional Layering Depth, overlapping, z-index, layers, 3D, shadows, elevation, floating, cards, spatial hierarchy Dashboards, card layouts, modals, navigation, product showcases, SaaS, AI overlay panels General


c0: style
c1: Exaggerated Minimalism
c4: domain_style
c2:
Bold minimalism, oversized typography, high contrast, negative space, loud minimal, statement design

c3:
Exaggerated Minimalism Bold minimalism, oversized typography, high contrast, negative space, loud minimal, statement design Fashion, architecture, portfolios, agency landing pages, luxury brands, editorial General


c0: style
c1: Kinetic Typography
c2: Motion text, animated type, moving letters, dynamic, typing effect, morphing, scroll-triggered text
c4: domain_style
c3:
Kinetic Typography Motion text, animated type, moving letters, dynamic, typing effect, morphing, scroll-triggered text Hero sections, marketing sites, video platforms, storytelling, creative portfolios General


c0: style
c1: Parallax Storytelling
c4: domain_style
c2:
Scroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic, scroll-timeline

c3:
Parallax Storytelling Scroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic, scroll-timeline Brand storytelling, product launches, case studies, portfolios, annual reports General


c0: style
c1: Swiss Modernism 2.0
c4: domain_style
c2:
Grid system, Helvetica, modular, asymmetric, international style, rational, clean, mathematical spacing

c3:
Swiss Modernism 2.0 Grid system, Helvetica, modular, asymmetric, international style, rational, clean, mathematical spacing Corporate sites, architecture, editorial, SaaS, museums, professional services, documentation General


c0: style
c1: HUD / Sci-Fi FUI
c2: Futuristic, technical, wireframe, neon, data, transparency, sci-fi, interface, telemetry, real-time
c4: domain_style
c3:
HUD / Sci-Fi FUI Futuristic, technical, wireframe, neon, data, transparency, sci-fi, interface, telemetry, real-time Sci-fi games, space tech, cybersecurity, drone fleet, immersive dashboards, autonomous systems General


c0: style
c1: Pixel Art
c2: Retro, 8-bit, 16-bit, gaming, blocky, nostalgic, pixelated, arcade, limited palette
c4: domain_style
c3:
Pixel Art Retro, 8-bit, 16-bit, gaming, blocky, nostalgic, pixelated, arcade, limited palette Indie games, retro tools, creative portfolios, nostalgia marketing, NFT collections General


c0: style
c1: Spatial UI (VisionOS)
c2: Glass, depth, immersion, spatial, translucent, gaze, gesture, apple, vision-pro, mixed reality, XR
c4: domain_style
c3:
Spatial UI (VisionOS) Glass, depth, immersion, spatial, translucent, gaze, gesture, apple, vision-pro, mixed reality, XR Spatial computing, VR/AR interfaces, immersive media, futuristic dashboards, mixed reality AI General


c0: style
c1: E-Ink / Paper
c2: Paper-like, matte, high contrast, texture, reading, calm, slow tech, monochrome, low-energy
c4: domain_style
c3:
E-Ink / Paper Paper-like, matte, high contrast, texture, reading, calm, slow tech, monochrome, low-energy Reading apps, digital newspapers, journals, distraction-free writing, documentation, AI reports General


c0: style
c1: Gen Z Chaos / Maximalism
c2: Chaos, clutter, stickers, raw, collage, mixed media, loud, internet culture, ironic, anti-design
c4: domain_style
c3:
Gen Z Chaos / Maximalism Chaos, clutter, stickers, raw, collage, mixed media, loud, internet culture, ironic, anti-design Gen Z lifestyle brands, music artists, creative portfolios, viral marketing, fashion General


c0: style
c1: Biomimetic / Organic 2.0
c2: Nature-inspired, cellular, fluid, breathing, generative, algorithms, life-like, neural, biological
c4: domain_style
c3:
Biomimetic / Organic 2.0 Nature-inspired, cellular, fluid, breathing, generative, algorithms, life-like, neural, biological Sustainability tech, biotech, advanced health, meditation, generative art, neurotech General


c0: style
c1: Holographic / Iridescent
c4: domain_style
c2:
Rainbow, prismatic, metallic sheen, light-reactive, 3D depth illusion, futuristic premium, chromatic

c3:
Holographic / Iridescent Rainbow, prismatic, metallic sheen, light-reactive, 3D depth illusion, futuristic premium, chromatic Space tech, quantum computing, spatial computing, luxury tech, premium AI products, futuristic General


c0: style
c1: Data-Dense General
c4: domain_style
c2:
Information-heavy, compact layouts, small multiples, sparklines, heat maps, KPI cards, power user, analyst

c3:
Data-Dense General Information-heavy, compact layouts, small multiples, sparklines, heat maps, KPI cards, power user, analyst AI analytics, model monitoring, business intelligence, operational dashboards, data platforms General


c0: style
c1: Agentic Interface
c4: domain_style
c2:
Agent workflows, tool-use visualization, chain-of-thought, human-in-the-loop, multi-agent, orchestration

c3:
Agentic Interface Agent workflows, tool-use visualization, chain-of-thought, human-in-the-loop, multi-agent, orchestration AI agent platforms, orchestration dashboards, copilot interfaces, multi-agent systems, workflow builders General


c0: style
c1: Conversational UI
c4: domain_style
c2:
Chat interface, message bubbles, typing indicators, voice waveforms, conversation threads, context panels

c3:
Conversational UI Chat interface, message bubbles, typing indicators, voice waveforms, conversation threads, context panels Chatbots, AI assistants, customer support, conversational commerce, voice AI platforms General


c0: style
c1: Privacy-First
c4: domain_style
c2:
Consent management, data transparency, anonymization indicators, compliance badges, trust signals, GDPR

c3:
Privacy-First Consent management, data transparency, anonymization indicators, compliance badges, trust signals, GDPR Privacy analytics, GDPR tools, consent platforms, data governance, sovereign cloud, compliance General


c0: style
c1: Streaming Response
c4: domain_style
c2:
Token-by-token display, progressive rendering, thinking states, confidence indicators, source citations

c3:
Streaming Response Token-by-token display, progressive rendering, thinking states, confidence indicators, source citations AI chat interfaces, code generation, content studios, search engines, AI writing tools General


c0: style
c1: Dashboard Composition
c4: domain_style
c2:
Widget-based, drag-and-drop, customizable layout, resizable panels, saved views, role-based dashboards

c3:
Dashboard Composition Widget-based, drag-and-drop, customizable layout, resizable panels, saved views, role-based dashboards Customizable dashboards, analytics platforms, admin panels, AI monitoring, enterprise tools General


c0: prompt
c1: Minimalism & Swiss Style
c4: domain_prompt
c3:
Minimalism & Swiss Style Design a minimalist landing page. Use: white space, geometric layouts, sans-serif fonts, high contrast, grid-based structure, essential elements only. Avoid shadows and gradients. Focus on clarity, functionality, and content hierarchy. Optimize for fast loading and AI-generated content blocks. display: grid; gap: 2rem; font-family: sans-serif; color: #000 or #FFF; max-width: 1200px; clean borders; no box-shadow; container queries for responsive


c0: prompt
c1: Neumorphism
c4: domain_prompt
c3:
Neumorphism Create a neumorphic UI with soft 3D effects. Use light pastels, rounded corners (12-16px), subtle soft shadows (multiple layers), no hard lines, monochromatic color scheme with light/dark variations. Embossed/debossed effect on interactive elements. Ensure sufficient contrast for accessibility. border-radius: 12-16px; box-shadow: -5px -5px 15px rgba(0,0,0,0.1), 5px 5px 15px rgba(255,255,255,0.8); background: linear-gradient(145deg, color1, color2); transform: scale on press; color-contrast: 4.5:1+


c0: prompt
c1: Glassmorphism
c4: domain_prompt
c3:
Glassmorphism Design a glassmorphic interface with frosted glass effect. Use backdrop blur (10-20px), translucent overlays (rgba 10-30% opacity), vibrant background colors, subtle borders, light source reflection, layered depth. Ensure text readability over blurred backgrounds. Support dark/light mode switching. backdrop-filter: blur(15px); background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); -webkit-backdrop-filter: blur(15px); z-index layering; @media (prefers-color-scheme)


c0: prompt
c1: Brutalism
c4: domain_prompt
c3:
Brutalism Create a brutalist design with raw, unpolished, stark aesthetic. Use pure primary colors (red, blue, yellow), black & white, no smooth transitions (instant), sharp corners, bold large typography, visible grid lines, system fonts, intentional asymmetry. Prioritize content over decoration. border-radius: 0px; transition: none; font-family: system-ui or monospace; font-weight: 700+; border: 2-4px solid; colors: #FF0000, #0000FF, #FFFF00, #000, #FFF; mix-blend-mode for overlaps


c0: prompt
c1: 3D & Hyperrealism
c4: domain_prompt
c3:
3D & Hyperrealism Build an immersive 3D interface using realistic textures, 3D models (Three.js/React Three Fiber), complex shadows, realistic lighting, parallax scrolling (3-5 layers), physics-based motion. Include skeuomorphic elements with tactile detail. Optimize for WebGPU where available. transform: translate3d; perspective: 1000px; WebGL/WebGPU canvas; Three.js/R3F; box-shadow: complex multi-layer; filter: drop-shadow(); will-change: transform; loading=lazy for 3D assets


c0: prompt
c1: Vibrant & Block-based
c4: domain_prompt
c3:
Vibrant & Block-based Design an energetic, vibrant interface with bold block layouts, geometric shapes, high color contrast, large typography (32px+), animated background patterns, duotone effects. Use 4-6 contrasting colors from complementary/triadic schemes. Scroll-snap for section navigation. display: grid; gap: 48px+; font-size: clamp(24px, 4vw, 48px); background: animated patterns; color: vibrant; animation: continuous pattern; scroll-snap-type: y mandatory


c0: prompt
c1: Dark Mode (OLED)
c4: domain_prompt
c3:
Dark Mode (OLED) Create an OLED-optimized dark interface with deep black (#000000), dark grey (#121212), accent colors. Use minimal glow effects, vibrant neon accents, high contrast text (15:1+). Optimize for eye comfort, OLED power saving, and extended viewing sessions. Support system dark mode preference. background: #000000 or #121212; color: #FFFFFF or #E0E0E0; text-shadow: 0 0 10px neon (sparingly); color-scheme: dark; @media (prefers-color-scheme: dark); scrollbar-color: dark


c0: prompt
c1: Accessible & Ethical
c4: domain_prompt
c3:
Accessible & Ethical Design with WCAG AAA compliance. Include: high contrast (7:1+), large text (16px+), keyboard navigation, screen reader compatibility, focus states (3-4px ring), semantic HTML, ARIA labels, skip links, reduced motion support, 48x48px touch targets, voice navigation support. color-contrast: 7:1+; font-size: 16px+; outline: 3-4px on :focus-visible; aria-label; role; @media (prefers-reduced-motion: reduce); touch-target: 48x48px; :focus-within styling


c0: prompt
c1: Claymorphism
c4: domain_prompt
c3:
Claymorphism Design a playful, toy-like interface with soft 3D, chunky elements, bubbly aesthetic, rounded edges (16-24px), thick borders (3-4px), double shadows (inner + outer), pastel colors, smooth bounce animations. Ideal for children's apps, onboarding flows, and creative tools. border-radius: 16-24px; border: 3-4px solid; box-shadow: inset -2px -2px 8px, 4px 4px 8px; background: pastel-gradient; animation: cubic-bezier(0.34, 1.56, 0.64, 1)


c0: prompt
c1: Aurora UI
c4: domain_prompt
c3:
Aurora UI Create a vibrant gradient interface inspired by Northern Lights with mesh gradients, smooth color blends, flowing animations. Use complementary color pairs, flowing background gradients, subtle continuous animations (8-12s loops), iridescent effects. Ensure text remains readable over gradients. background: conic-gradient or radial-gradient; animation: @keyframes gradient 8-12s infinite; background-size: 400% 400%; filter: saturate(1.2); mix-blend-mode: screen; color: high contrast over gradient


c0: prompt
c1: Retro-Futurism
c4: domain_prompt
c3:
Retro-Futurism Build a retro-futuristic (cyberpunk/vaporwave) interface with neon colors (cyan, magenta, electric blue), deep black background, 80s aesthetic, CRT scanlines, glitch effects, neon glow, monospace fonts, geometric patterns. Balance nostalgia with modern performance. color: #0080FF, #FF006E, #00FFFF; text-shadow: 0 0 10px neon; background: #000 or #1A1A2E; font-family: monospace; animation: glitch (skew+offset); filter: hue-rotate; image-rendering: auto


c0: prompt
c1: Flat Design
c4: domain_prompt
c3:
Flat Design Create a flat, 2D interface with bold colors, no shadows/gradients, clean lines, simple geometric shapes, icon-heavy, typography-focused, minimal ornamentation. Use 4-6 solid bright colors. Prioritize fast loading and content clarity. Ideal for data-heavy and utility interfaces. box-shadow: none; background: solid color; border-radius: 0-4px; fill: solid; stroke: 1-2px; font: bold sans-serif; icons: simplified SVG inline; color: solid high-saturation


c0: prompt
c1: Skeuomorphism
c4: domain_prompt
c3:
Skeuomorphism Design a realistic, textured interface with 3D depth, real-world metaphors (leather, wood, metal), complex gradients (8-12 stops), realistic shadows, grain/texture overlays, tactile press animations. Use for premium/luxury products where tactile feel matters. background: complex gradient 8-12 stops; box-shadow: realistic multi-layer; background-image: texture overlay (noise, grain); filter: drop-shadow; transform: scale on press 300-500ms


c0: prompt
c1: Liquid Glass
c4: domain_prompt
c3:
Liquid Glass Create a premium liquid glass effect with morphing shapes, flowing animations, chromatic aberration, iridescent gradients, smooth 400-600ms transitions. Use SVG morphing, dynamic blur, smooth color transitions. Ideal for premium brands and immersive product pages. animation: morphing SVG paths 400-600ms; backdrop-filter: blur + saturate; filter: hue-rotate + brightness; mix-blend-mode: screen; background: iridescent gradient; will-change: filter


c0: prompt
c1: Motion-Driven
c4: domain_prompt
c3:
Motion-Driven Build an animation-heavy interface with scroll-triggered animations, microinteractions, parallax scrolling (3-5 layers), smooth transitions (300-400ms), entrance animations, page transitions. Use Intersection Observer, View Transitions API, GPU acceleration. Respect reduced motion preferences. animation: scroll-reveal; transform: translateY/X; Intersection Observer; will-change: transform; scroll-behavior: smooth; view-transition-name; @media (prefers-reduced-motion: reduce)


c0: prompt
c1: Micro-interactions
c4: domain_prompt
c3:
Micro-interactions Design with delightful micro-interactions: 50-100ms animations, gesture responses, tactile feedback, loading states, success/error states, subtle hover effects, haptic triggers. Focus on responsive, contextual interactions that guide users through AI-powered workflows. animation: 50-100ms; transition: hover states; @media (hover: hover); :active for press; Vibration API for haptic; loading: skeleton screens; :has() for state-based styling


c0: prompt
c1: Inclusive Design
c4: domain_prompt
c3:
Inclusive Design Design for universal accessibility: high contrast (7:1+), large text (16px+), keyboard-only navigation, screen reader optimization, WCAG AAA, symbol-based indicators (not color-only), haptic feedback, voice interaction, reduced motion, cognitive load reduction, plain language. aria-* complete; role semantic; focus-visible: 3-4px; contrast: 7:1+; @media (prefers-reduced-motion); @media (prefers-contrast: more); alt text all images; form labels associated; lang attribute


c0: prompt
c1: Zero Interface
c4: domain_prompt
c3:
Zero Interface Create a voice-first, gesture-based, AI-driven interface with minimal visible UI, progressive disclosure, voice recognition, gesture detection, AI predictions, smart suggestions, context-aware actions. Hide controls until needed. Design for ambient computing and agent-first interactions. Web Speech API; touch/gesture events; progressive-disclosure: show on demand; minimal visible UI; @media (prefers-reduced-data); container queries; popover API for contextual UI


c0: prompt
c1: Soft UI Evolution
c4: domain_prompt
c3:
Soft UI Evolution Design evolved neumorphism with improved contrast (WCAG AA+), modern aesthetics, subtle depth, accessibility focus. Softer than flat but clearer than pure neumorphism. Better color hierarchy, improved focus states, modern 200-300ms animations. Ideal for calm, professional interfaces. box-shadow: 0 2px 4px multi-layer; background: improved contrast pastels; border-radius: 8-12px; animation: 200-300ms; outline: 2-3px on focus; contrast: 4.5:1+; color-mix() for palette


c0: prompt
c1: Bento Box Grid
c4: domain_prompt
c3:
Bento Box Grid Design a Bento Grid layout with modular grid system, rounded corners (16-24px), varied card sizes (1x1, 2x1, 2x2, 3x1), card-based hierarchy, soft backgrounds, subtle borders, content-first approach. Apple-style aesthetic. Use CSS Subgrid for nested alignment. display: grid; grid-template-columns: repeat(auto-fit, minmax()); gap: 1rem; border-radius: 20px; background: #FFF; subgrid for nested; container queries for card responsiveness


c0: prompt
c1: Neubrutalism
c4: domain_prompt
c3:
Neubrutalism Design a neubrutalist interface with high contrast, hard black borders (3px+), bright pop colors, no blur, sharp corners, bold typography, hard shadows (offset 4px 4px), raw but functional aesthetic. Modern take on brutalism with better usability. border: 3px solid black; box-shadow: 5px 5px 0px black; colors: #FFDB58 #FF6B6B #4ECDC4; font-weight: 700; no gradients; no blur; accent-color for form elements


c0: prompt
c1: HUD / Sci-Fi FUI
c4: domain_prompt
c3:
HUD / Sci-Fi FUI Design a futuristic HUD (Heads-Up Display) or FUI. Use thin lines (1px), neon cyan/blue on black, technical markers, decorative brackets, data visualization, monospaced fonts, glowing elements, transparency. Ideal for real-time monitoring and telemetry interfaces. border: 1px solid rgba(0,255,255,0.5); color: #00FFFF; background: transparent or rgba(0,0,0,0.8); font-family: monospace; text-shadow: 0 0 5px cyan; SVG for technical markers


c0: prompt
c1: Pixel Art
c4: domain_prompt
c3:
Pixel Art Design a pixel art inspired interface with pixelated fonts, 8-bit/16-bit aesthetic, sharp edges, limited color palette (16-32 colors), blocky UI elements, retro gaming feel. Use for nostalgic or gaming-adjacent products. font-family: 'Press Start 2P'; image-rendering: pixelated; box-shadow: 4px 0 0 #000 (pixel border); no anti-aliasing; crisp-edges


c0: prompt
c1: AI-Native UI
c4: domain_prompt
c3:
AI-Native UI Design an AI-native interface optimized for conversational AI, streaming responses, agent workflows, and intelligent suggestions. Use: streaming text containers, thinking/loading indicators, confidence scores, source citations, token counters, context windows, tool-use visualization, human-in-the-loop controls. content-visibility: auto; streaming-text: typewriter effect; skeleton: pulse loading; popover: for citations; scroll-snap: for conversation; container queries; CSS scroll-timeline for progress


c0: prompt
c1: Organic Biophilic
c4: domain_prompt
c3:
Organic Biophilic Design a nature-inspired interface with organic shapes, earth tones, natural textures, flowing curves, leaf/plant motifs, warm lighting, sustainable aesthetic. Use SVG for organic shapes, natural color palettes (greens, browns, sky blues), and calming animations. border-radius: 40-60% for organic shapes; background: earth-tone gradients; clip-path: organic SVG paths; color: #228B22, #8B4513, #87CEEB; animation: gentle sway 4-6s


c0: prompt
c1: Biomimetic / Organic 2.0
c4: domain_prompt
c3:
Biomimetic / Organic 2.0 Design a biomimetic interface inspired by biological systems: cellular structures, neural networks, DNA helixes, organic growth patterns, bioluminescence effects. Use for biotech, health-tracking, and scientific visualization. Combine organic aesthetics with data precision. clip-path: complex organic; background: radial-gradient cellular; animation: organic growth; SVG: neural/cellular patterns; filter: glow for bioluminescence; color: biological spectrum


c0: prompt
c1: Spatial UI (VisionOS)
c4: domain_prompt
c3:
Spatial UI (VisionOS) Design for spatial computing (VisionOS/XR). Use: frosted glass panels, depth hierarchy (near/mid/far), gaze-friendly targets (60px+), hand tracking affordances, environment-aware transparency, system-consistent materials, window management, ornament patterns. backdrop-filter: blur(40px); border-radius: 28px; padding: 20px+; min-target: 60px; background: rgba(255,255,255,0.3); depth: z-translation; hover: gaze-highlight


c0: prompt
c1: E-Ink / Paper
c4: domain_prompt
c3:
E-Ink / Paper Design a paper-like, low-energy interface inspired by e-ink displays. Use: high contrast black on white, minimal color (1-2 accent max), serif or humanist fonts, generous margins, print-like typography, reduced animations, sustainable low-power aesthetic. background: #FAFAF8; color: #1A1A1A; font-family: serif or humanist sans; line-height: 1.6-1.8; max-width: 65ch; animation: none or fade only; @media print optimized


c0: prompt
c1: Swiss Modernism 2.0
c4: domain_prompt
c3:
Swiss Modernism 2.0 Design a modern Swiss/International style interface with strict grid systems, Helvetica-style typography, mathematical proportions, asymmetric balance, photographic integration, clear information hierarchy. Updated with modern CSS Grid, fluid typography, and responsive design. display: grid; grid-template: strict proportions; font-family: 'Helvetica Neue', system-ui; font-size: clamp(); line-height: mathematical ratio; gap: proportional; color: limited palette


c0: prompt
c1: Storytelling-Driven
c4: domain_prompt
c3:
Storytelling-Driven Design a narrative-focused interface with full-screen sections, scroll-driven storytelling, cinematic transitions, immersive imagery, progressive content reveal, emotional pacing. Use scroll-timeline API, view transitions, and intersection observer for narrative flow. scroll-timeline; view-transition-name; Intersection Observer; scroll-snap-type: y proximity; full-bleed images; animation-timeline: scroll(); container queries for sections


c0: prompt
c1: Social Proof-Focused
c4: domain_prompt
c3:
Social Proof-Focused Design a trust-building interface centered on social proof: testimonials, ratings, user counts, case studies, trust badges, before/after comparisons, video testimonials, real-time activity feeds. Use structured data for SEO and trust signals. structured data (JSON-LD); counter animation; star-rating SVG; testimonial carousel; trust-badge grid; real-time feed (WebSocket); schema.org Review markup


c0: prompt
c1: Trust & Authority
c4: domain_prompt
c3:
Trust & Authority Design a credibility-focused interface with professional typography, certification displays, security badges, data transparency, regulatory compliance indicators, executive-style layout, case study integration, ROI calculators. Build institutional trust. font-family: professional serif + sans; badge-grid: flex; security-indicators: SVG; ROI-calculator: interactive; color: navy + gold + white; border: subtle professional


c0: prompt
c1: Conversion-Optimized
c4: domain_prompt
c3:
Conversion-Optimized Design a conversion-focused interface with clear CTAs, urgency indicators, pricing tables, comparison matrices, A/B testable components, exit-intent triggers, social proof integration, progress indicators, friction-reducing forms. Optimize for measurable outcomes. CTA: high contrast button; pricing-table: grid; comparison: table; form: minimal fields; progress: step indicator; exit-intent: Intersection Observer; A/B: data attributes


c0: prompt
c1: Data-Dense
c4: domain_prompt
c3:
Data-Dense Design a data-dense interface for information-heavy dashboards: compact layouts, small multiples, sparklines, heat maps, data tables with sorting/filtering, KPI cards, real-time indicators, drill-down navigation. Optimize for power users and analysts. display: grid; gap: 8-12px; font-size: 12-14px; table: sortable; sparkline: inline SVG; heatmap: CSS gradient; KPI: card component; overflow: scroll; resize: observer


c0: prompt
c1: Cyberpunk UI
c4: domain_prompt
c3:
Cyberpunk UI Design a cyberpunk-inspired interface with neon accents on dark backgrounds, glitch effects, terminal aesthetics, matrix-style data rain, angular geometric shapes, high-tech borders, scan-line overlays. Combine dystopian aesthetic with functional data display. background: #0A0A0A; color: #00FF41 or #FF00FF; border: 1px solid neon; text-shadow: neon glow; animation: glitch + scanline; font-family: monospace; clip-path: angular


c0: prompt
c1: Holographic / Iridescent
c4: domain_prompt
c3:
Holographic / Iridescent Design a holographic interface with rainbow iridescent effects, prismatic color shifts, metallic sheens, light-reactive gradients, 3D depth illusion. Use CSS conic-gradient, hue-rotate animations, and metallic color palettes for a futuristic premium feel. background: conic-gradient(from var(--angle)); animation: hue-rotate 3-5s; filter: brightness(1.1) contrast(1.1); background-blend-mode: overlay; border-image: linear-gradient


c0: prompt
c1: Gen Z Chaos
c4: domain_prompt
c3:
Gen Z Chaos Design a chaotic, maximalist interface with clashing colors, overlapping elements, meme-inspired layouts, sticker aesthetics, hand-drawn elements, anti-design principles, intentional visual noise. Controlled chaos that still communicates effectively. z-index: overlapping; transform: rotate(random); mix-blend-mode: multiply; border: hand-drawn SVG; color: clashing neon; font: mixed weights/styles; position: absolute scattered


c0: prompt
c1: Component Library UI
c4: domain_prompt
c3:
Component Library UI Design a component-driven interface using a design system with tokens, variants, slots, and composable primitives. Use: consistent spacing scale (4px grid), semantic color tokens, size variants (sm/md/lg), compound components, Radix/Headless UI primitives. CSS custom properties; data-attributes for state; :where() for low specificity; @layer for cascade; container queries; gap: token-based; aspect-ratio


c0: prompt
c1: Dashboard Analytics
c4: domain_prompt
c3:
Dashboard Analytics Design an analytics dashboard with KPI cards, chart grids, data tables, filter bars, date range pickers, real-time indicators, drill-down navigation. Use: 12-column grid, card-based layout, compact typography (13-14px), status colors (green/amber/red). display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; font-size: 13px; overflow: auto; resize: observer; color: status-semantic; scroll-snap for cards mobile


c0: prompt
c1: Chat / Conversational UI
c4: domain_prompt
c3:
Chat / Conversational UI Design a conversational chat interface with message bubbles, typing indicators, read receipts, avatar integration, file attachments, emoji reactions, thread replies, voice messages. Use: bubble radius 18px, alternating alignment, timestamp separation. border-radius: 18px 18px 4px 18px; gap: 4px; scroll-behavior: smooth; scroll-snap-align: end; position: sticky for input; flexbox column-reverse


c0: prompt
c1: Multi-Step Form / Wizard
c4: domain_prompt
c3:
Multi-Step Form / Wizard Design a multi-step form wizard with progress indicator, step validation, conditional branching, summary review, auto-save draft. Use: horizontal stepper, form sections, inline validation, progressive disclosure, smart defaults. grid or flexbox stepper; scroll-snap for steps mobile; :valid/:invalid pseudo-classes; fieldset grouping; progress element; transition: slide 300ms


c0: prompt
c1: Notification / Alert System
c4: domain_prompt
c3:
Notification / Alert System Design a notification system with toast messages, alert banners, badge indicators, notification center, priority levels (info/success/warning/error), stacking, auto-dismiss, action buttons. position: fixed; z-index: 9999; animation: slide-in 200ms; pointer-events: auto; role: alert; aria-live: polite/assertive; gap: 8px stack


c0: prompt
c1: Onboarding / Tour
c4: domain_prompt
c3:
Onboarding / Tour Design an onboarding experience with welcome screens, feature tours, tooltips, spotlight highlights, progress dots, skip option, personalization questions. Use: overlay masks, spotlight cut-outs, coach marks, step-by-step reveal. clip-path: circle/polygon for spotlight; backdrop: rgba(0,0,0,0.6); z-index layering; animation: fade-in 300ms; popper.js for positioning; transition: step 400ms


c0: prompt
c1: Pricing / Comparison
c4: domain_prompt
c3:
Pricing / Comparison Design a pricing page with tier cards, feature comparison matrix, toggle (monthly/annual), popular badge, CTA hierarchy, FAQ section, money-back guarantee. Use: 3-4 tiers, highlighted recommended, compact feature checks. display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 24px; position: sticky for header; scroll-snap mobile; border: highlighted tier


c0: prompt
c1: Settings / Preferences
c4: domain_prompt
c3:
Settings / Preferences Design a settings interface with categorized sections, toggle switches, dropdowns, sliders, search/filter, reset defaults, save confirmation. Use: sidebar navigation, form groups, inline descriptions, danger zone section. display: grid; grid-template-columns: 240px 1fr; gap: 24px; fieldset grouping; toggle: custom checkbox; slider: input[type=range]; color: danger #EF4444


c0: prompt
c1: Empty State / Zero Data
c4: domain_prompt
c3:
Empty State / Zero Data Design empty states with illustrations, action prompts, helpful descriptions, primary CTA, secondary suggestions. Use: centered layout, friendly illustration, clear next-step, onboarding hint. Handle: first-use, no-results, error-recovery, offline. display: flex; align-items: center; justify-content: center; min-height: 300px; text-align: center; max-width: 400px; margin: auto; gap: 16px


c0: prompt
c1: Media Gallery / Lightbox
c4: domain_prompt
c3:
Media Gallery / Lightbox Design a media gallery with grid layout, lightbox overlay, zoom, swipe navigation, EXIF data, lazy loading, masonry layout option. Use: CSS Grid or Masonry, IntersectionObserver, dialog element for lightbox. display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 4px; dialog for lightbox; object-fit: cover; loading: lazy; aspect-ratio: 1/1 or 3/4


c0: prompt
c1: Code Editor / Terminal
c4: domain_prompt
c3:
Code Editor / Terminal Design a code editor or terminal interface with syntax highlighting, line numbers, copy button, language badge, diff view, tab navigation, command palette. Use: monospace font, dark theme default, proper indentation. font-family: 'JetBrains Mono', monospace; background: #1E1E1E; color: #D4D4D4; tab-size: 2; white-space: pre; overflow-x: auto; counter-reset for line numbers


c0: prompt
c1: Kanban / Task Board
c4: domain_prompt
c3:
Kanban / Task Board Design a kanban board with draggable columns, task cards, status labels, assignee avatars, priority badges, swimlanes, WIP limits. Use: CSS Grid for columns, drag-and-drop API, scroll-snap mobile. display: grid; grid-auto-flow: column; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; user-select: none during drag; cursor: grab


c0: prompt
c1: Agent Workflow / Pipeline
c4: domain_prompt
c3:
Agent Workflow / Pipeline Design an AI agent workflow visualizer with node graph, step cards, connection lines, status indicators, tool-use panels, human-in-the-loop checkpoints, execution timeline, log viewer. Use: SVG for connections, status colors, real-time updates. SVG for connection lines; display: flex for timeline; position: relative for nodes; animation: pulse for active; stroke-dasharray for pending; WebSocket for real-time; overflow: auto


c0: product
c1: SaaS (General)
c2: saas, b2b, cloud, software, subscription, platform
c4: domain_product
c3:
SaaS (General) saas, b2b, cloud, software, subscription, platform Glassmorphism + Flat Design Balance modern feel with clarity. Focus on CTAs. Onboarding flows critical.


c0: product
c1: Micro SaaS
c2: micro-saas, indie, niche, solo, saas, subscription, lightweight
c4: domain_product
c3:
Micro SaaS micro-saas, indie, niche, solo, saas, subscription, lightweight Flat Design + Vibrant & Block Keep simple, show product quickly. Speed is key. Single-purpose clarity.


c0: product
c1: E-commerce (General)
c2: ecommerce, retail, shop, store, products, buy, sell
c4: domain_product
c3:
E-commerce (General) ecommerce, retail, shop, store, products, buy, sell Vibrant & Block-based Engagement & conversions. High visual hierarchy. AI-powered recommendations.


c0: product
c1: E-commerce Luxury
c2: luxury, ecommerce, premium, high-end, exclusive, retail
c4: domain_product
c3:
E-commerce Luxury luxury, ecommerce, premium, high-end, exclusive, retail Liquid Glass + Glassmorphism Elegance & sophistication. Premium materials. White-glove digital experience.


c0: product
c1: Service Landing Page
c2: landing-page, service, conversion, marketing, booking
c4: domain_product
c3:
Service Landing Page landing-page, service, conversion, marketing, booking Hero-Centric + Trust & Authority Social proof essential. Show expertise. Clear value proposition above fold.


c0: product
c1: B2B Service Platform
c2: b2b, enterprise, corporate, service, consultation, business
c4: domain_product
c3:
B2B Service Platform b2b, enterprise, corporate, service, consultation, business Trust & Authority + Minimal Credibility essential. Clear ROI messaging. Case studies and metrics.


c0: product
c1: Financial Dashboard
c2: financial, dashboard, analytics, data, banking, portfolio
c4: domain_product
c3:
Financial Dashboard financial, dashboard, analytics, data, banking, portfolio Dark Mode (OLED) + Data-Dense High contrast, real-time updates, accuracy paramount. Regulatory compliance.


c0: product
c1: Analytics Dashboard
c2: analytics, dashboard, data, visualization, metrics, reporting
c4: domain_product
c3:
Analytics Dashboard analytics, dashboard, data, visualization, metrics, reporting Data-Dense + Heat Map Clarity over aesthetics. Color-coded data priority. Drill-down capability.


c0: product
c1: Healthcare App
c2: healthcare, medical, patient, clinic, health, telehealth
c4: domain_product
c3:
Healthcare App healthcare, medical, patient, clinic, health, telehealth Neumorphism + Accessible & Ethical Accessibility mandatory. Calming aesthetic. HIPAA compliance. Telehealth-ready.


c0: product
c1: Educational App
c2: education, learning, course, school, training, edtech
c4: domain_product
c3:
Educational App education, learning, course, school, training, edtech Claymorphism + Micro-interactions Engagement & ease of use. Age-appropriate design. Adaptive learning paths.


c0: product
c1: Creative Agency
c2: agency, creative, design, studio, branding
c4: domain_product
c3:
Creative Agency agency, creative, design, studio, branding Brutalism + Motion-Driven Differentiation key. Wow-factor necessary. Portfolio-first design.


c0: product
c1: Portfolio / Personal Brand
c2: portfolio, personal, showcase, projects, creative, freelance
c4: domain_product
c3:
Portfolio / Personal Brand portfolio, personal, showcase, projects, creative, freelance Motion-Driven + Minimalism Showcase work. Personality shine through. Fast loading. Mobile-first.


c0: product
c1: Gaming Platform
c2: gaming, esports, game, entertainment, play, streaming
c4: domain_product
c3:
Gaming Platform gaming, esports, game, entertainment, play, streaming 3D & Hyperrealism + Retro-Futurism Immersion priority. Performance critical. Low latency. Community features.


c0: product
c1: Government / Public Service
c2: government, public, civic, service, municipal, compliance
c4: domain_product
c3:
Government / Public Service government, public, civic, service, municipal, compliance Accessible & Ethical + Minimalism WCAG AAA mandatory. Trust paramount. Multi-language support. Data transparency.


c0: product
c1: Fintech / Crypto
c2: fintech, crypto, defi, blockchain, payment, web3, banking
c4: domain_product
c3:
Fintech / Crypto fintech, crypto, defi, blockchain, payment, web3, banking Glassmorphism + Dark Mode (OLED) Security perception. Real-time data critical. Wallet integration. Compliance.


c0: product
c1: Social Media App
c2: social, community, content, network, sharing, media, engagement
c4: domain_product
c3:
Social Media App social, community, content, network, sharing, media, engagement Vibrant & Block-based + Motion-Driven Engagement & retention. Ethical design patterns. Content moderation tools.


c0: product
c1: Productivity Tool
c2: productivity, task, workflow, collaboration, project, efficiency
c4: domain_product
c3:
Productivity Tool productivity, task, workflow, collaboration, project, efficiency Flat Design + Micro-interactions Ease of use. Speed & efficiency focus. Keyboard-first navigation.


c0: product
c1: Design System / Component Library
c2: design-system, component, library, ui-kit, tokens
c4: domain_product
c3:
Design System / Component Library design-system, component, library, ui-kit, tokens Minimalism + Accessible & Ethical Consistency. Developer-first approach. Token-based theming. Documentation.


c0: product
c1: AI / Chatbot Platform
c2: ai, chatbot, llm, conversational-ai, automation, ml, nlp
c4: domain_product
c3:
AI / Chatbot Platform ai, chatbot, llm, conversational-ai, automation, ml, nlp AI-Native UI + Minimalism Conversational UI. Streaming text. Context awareness. Minimal chrome. Agent orchestration.


c0: product
c1: NFT / Web3 Platform
c2: nft, web3, blockchain, digital-collectibles, decentralized
c4: domain_product
c3:
NFT / Web3 Platform nft, web3, blockchain, digital-collectibles, decentralized Cyberpunk UI + Glassmorphism Wallet integration. Transaction feedback. Gas fees display. Dark mode essential.


c0: product
c1: Creator Economy Platform
c2: creator, monetization, content, influencer, economy, platform
c4: domain_product
c3:
Creator Economy Platform creator, monetization, content, influencer, economy, platform Vibrant & Block-based + Bento Box Grid Creator profiles. Monetization display. Engagement metrics. Social proof.


c0: product
c1: Sustainability / ESG Platform
c2: sustainability, esg, carbon, climate, green, compliance
c4: domain_product
c3:
Sustainability / ESG Platform sustainability, esg, carbon, climate, green, compliance Organic Biophilic + Minimalism Carbon footprint visuals. Progress indicators. Certification badges. Regulatory reporting.


c0: product
c1: Remote Work / Collaboration Tool
c2: remote, collaboration, hybrid, workspace, team, async
c4: domain_product
c3:
Remote Work / Collaboration Tool remote, collaboration, hybrid, workspace, team, async Soft UI Evolution + Minimalism Real-time collaboration. Status indicators. Video integration. Async-first design.


c0: product
c1: Mental Health App
c2: mental-health, therapy, wellness, mindfulness, self-care
c4: domain_product
c3:
Mental Health App mental-health, therapy, wellness, mindfulness, self-care Neumorphism + Accessible & Ethical Calming aesthetics. Privacy-first. Crisis resources. Progress tracking. Accessibility mandatory.


c0: product
c1: Pet Tech App
c2: pet, animal, health-tracking, vet, pet-care
c4: domain_product
c3:
Pet Tech App pet, animal, health-tracking, vet, pet-care Claymorphism + Vibrant & Block-based Pet profiles. Health tracking. Playful UI. Photo galleries. Vet integration.


c0: product
c1: Smart Home / IoT Dashboard
c2: smart-home, iot, connected-devices, automation, home
c4: domain_product
c3:
Smart Home / IoT Dashboard smart-home, iot, connected-devices, automation, home Glassmorphism + Dark Mode (OLED) Device status. Real-time controls. Energy monitoring. Automation rules. Voice integration.


c0: product
c1: EV / Charging Ecosystem
c2: ev, charging, electric-vehicle, energy, mobility
c4: domain_product
c3:
EV / Charging Ecosystem ev, charging, electric-vehicle, energy, mobility Minimalism + Aurora UI Charging station maps. Range estimation. Cost calculation. Environmental impact.


c0: product
c1: Subscription Box Service
c2: subscription, box, recurring, membership, curation
c4: domain_product
c3:
Subscription Box Service subscription, box, recurring, membership, curation Vibrant & Block-based + Motion-Driven Unboxing experience. Personalization quiz. Subscription management. Product reveals.


c0: product
c1: Podcast Platform
c2: podcast, audio, creator, episodes, streaming
c4: domain_product
c3:
Podcast Platform podcast, audio, creator, episodes, streaming Dark Mode (OLED) + Minimalism Audio player UX. Episode discovery. Creator tools. AI transcription. Analytics.


c0: product
c1: Dating App
c2: dating, matching, social, relationships, connections
c4: domain_product
c3:
Dating App dating, matching, social, relationships, connections Vibrant & Block-based + Motion-Driven Profile cards. Swipe interactions. Match animations. Safety features. AI matching.


c0: product
c1: Micro-Credentials / Badges Platform
c2: credentials, badges, certification, verification, skills
c4: domain_product
c3:
Micro-Credentials / Badges Platform credentials, badges, certification, verification, skills Minimalism + Flat Design Credential verification. Badge display. Progress tracking. Blockchain verification.


c0: product
c1: Knowledge Base / Documentation
c2: documentation, knowledge-base, wiki, help-center, faq
c4: domain_product
c3:
Knowledge Base / Documentation documentation, knowledge-base, wiki, help-center, faq Minimalism + Accessible & Ethical Search-first. Clear navigation. Code highlighting. Version switching. AI search.


c0: product
c1: Hyperlocal Services
c2: hyperlocal, local, on-demand, services, neighborhood
c4: domain_product
c3:
Hyperlocal Services hyperlocal, local, on-demand, services, neighborhood Minimalism + Vibrant & Block-based Map integration. Service categories. Provider profiles. Booking system. Reviews.


c0: product
c1: Beauty / Spa / Wellness Service
c2: beauty, spa, wellness, skincare, self-care, booking
c4: domain_product
c3:
Beauty / Spa / Wellness Service beauty, spa, wellness, skincare, self-care, booking Soft UI Evolution + Neumorphism Calming aesthetic. Booking system. Service menu. Before/after gallery. Testimonials.


c0: product
c1: Luxury / Premium Brand
c2: luxury, premium, brand, high-end, exclusive, fashion
c4: domain_product
c3:
Luxury / Premium Brand luxury, premium, brand, high-end, exclusive, fashion Liquid Glass + Glassmorphism Elegance paramount. Premium imagery. Storytelling. High-quality visuals. Exclusive feel.


c0: product
c1: Restaurant / Food Service
c2: restaurant, food, delivery, menu, order, dining
c4: domain_product
c3:
Restaurant / Food Service restaurant, food, delivery, menu, order, dining Vibrant & Block-based + Motion-Driven Menu display. Online ordering. Reservation system. Food photography. Location prominent.


c0: product
c1: Fitness / Gym App
c2: fitness, gym, workout, exercise, health, training
c4: domain_product
c3:
Fitness / Gym App fitness, gym, workout, exercise, health, training Vibrant & Block-based + Dark Mode (OLED) Progress tracking. Workout plans. Community features. Wearable integration. AI coaching.


c0: product
c1: Real Estate / Property
c2: real-estate, property, housing, rent, buy, listings
c4: domain_product
c3:
Real Estate / Property real-estate, property, housing, rent, buy, listings Glassmorphism + Minimalism Property listings. Virtual tours. Map integration. AI valuation. Mortgage calculator.


c0: product
c1: Travel / Tourism Agency
c2: travel, tourism, booking, vacation, flight, hotel
c4: domain_product
c3:
Travel / Tourism Agency travel, tourism, booking, vacation, flight, hotel Aurora UI + Motion-Driven Destination showcase. Booking system. Itinerary builder. AI trip planning. Mobile-first.


c0: product
c1: Hotel / Hospitality
c2: hotel, hospitality, resort, accommodation, booking
c4: domain_product
c3:
Hotel / Hospitality hotel, hospitality, resort, accommodation, booking Liquid Glass + Minimalism Room booking. Amenities showcase. Guest reviews. Dynamic pricing. Luxury imagery.


c0: product
c1: Wedding / Event Planning
c2: wedding, event, planning, celebration, venue
c4: domain_product
c3:
Wedding / Event Planning wedding, event, planning, celebration, venue Soft UI Evolution + Aurora UI Portfolio gallery. Vendor directory. Planning tools. Timeline. Budget tracker.


c0: product
c1: Legal Services
c2: legal, law, attorney, compliance, contract, firm
c4: domain_product
c3:
Legal Services legal, law, attorney, compliance, contract, firm Trust & Authority + Minimalism Credibility paramount. Practice areas. Attorney profiles. AI contract review.


c0: product
c1: Insurance Platform
c2: insurance, policy, claims, coverage, risk, underwriting
c4: domain_product
c3:
Insurance Platform insurance, policy, claims, coverage, risk, underwriting Trust & Authority + Flat Design Quote calculator. Policy comparison. Claims automation. AI risk assessment.


c0: product
c1: Banking / Traditional Finance
c2: banking, finance, accounts, transactions, savings
c4: domain_product
c3:
Banking / Traditional Finance banking, finance, accounts, transactions, savings Minimalism + Accessible & Ethical Security-first. Account overview. Transaction history. Mobile banking. Accessibility.


c0: product
c1: Online Course / E-learning
c2: e-learning, online-course, mooc, education, training
c4: domain_product
c3:
Online Course / E-learning e-learning, online-course, mooc, education, training Claymorphism + Vibrant & Block-based Course catalog. Progress tracking. Video player. AI tutoring. Gamification.


c0: product
c1: Non-profit / Charity
c2: nonprofit, charity, donation, cause, social-impact
c4: domain_product
c3:
Non-profit / Charity nonprofit, charity, donation, cause, social-impact Accessible & Ethical + Organic Biophilic Impact stories. Donation flow. Transparency reports. Volunteer signup. Emotional design.


c0: product
c1: Music Streaming
c2: music, streaming, audio, playlist, artist
c4: domain_product
c3:
Music Streaming music, streaming, audio, playlist, artist Dark Mode (OLED) + Vibrant & Block-based Audio player. Playlist management. AI-generated playlists. Social features.


c0: product
c1: Video Streaming / OTT
c2: video, streaming, ott, content, entertainment
c4: domain_product
c3:
Video Streaming / OTT video, streaming, ott, content, entertainment Dark Mode (OLED) + Motion-Driven Video player. Content discovery. AI recommendations. Continue watching. Personalization.


c0: product
c1: Job Board / Recruitment
c2: job-board, recruitment, hiring, careers, talent
c4: domain_product
c3:
Job Board / Recruitment job-board, recruitment, hiring, careers, talent Flat Design + Minimalism Job listings. AI matching. Company profiles. Application tracking. Salary insights.


c0: product
c1: Marketplace (P2P)
c2: marketplace, p2p, buyers, sellers, listings, platform
c4: domain_product
c3:
Marketplace (P2P) marketplace, p2p, buyers, sellers, listings, platform Vibrant & Block-based + Flat Design Seller/buyer profiles. Reviews/ratings. Secure payment. AI fraud detection. Trust badges.


c0: product
c1: Logistics / Delivery
c2: logistics, delivery, shipping, tracking, fleet
c4: domain_product
c3:
Logistics / Delivery logistics, delivery, shipping, tracking, fleet Minimalism + Flat Design Real-time tracking. Route optimization. AI dispatch. Driver management. Map integration.


c0: product
c1: Agriculture / Farm Tech
c2: agriculture, farming, agritech, crop, iot, precision
c4: domain_product
c3:
Agriculture / Farm Tech agriculture, farming, agritech, crop, iot, precision Organic Biophilic + Flat Design Crop monitoring. Weather data. IoT sensors. AI yield prediction. Market prices.


c0: product
c1: Construction / Architecture
c2: construction, architecture, building, project, engineering
c4: domain_product
c3:
Construction / Architecture construction, architecture, building, project, engineering Minimalism + 3D & Hyperrealism Project portfolio. 3D renders. BIM integration. Timeline. Team collaboration.


c0: product
c1: Automotive / Car Dealership
c2: automotive, car, dealership, vehicle, ev, mobility
c4: domain_product
c3:
Automotive / Car Dealership automotive, car, dealership, vehicle, ev, mobility Motion-Driven + 3D & Hyperrealism Vehicle showcase. 360° views. Comparison tools. Financing calculator. AR preview.


c0: product
c1: Photography Studio
c2: photography, studio, visual, portfolio, creative
c4: domain_product
c3:
Photography Studio photography, studio, visual, portfolio, creative Motion-Driven + Minimalism Portfolio gallery. Before/after. Service packages. Booking system. Full-bleed imagery.


c0: product
c1: Coworking Space
c2: coworking, workspace, office, hybrid, community
c4: domain_product
c3:
Coworking Space coworking, workspace, office, hybrid, community Vibrant & Block-based + Glassmorphism Space tour. Membership plans. Booking system. Community events. Virtual tour.


c0: product
c1: Cleaning Service
c2: cleaning, service, home, commercial, booking
c4: domain_product
c3:
Cleaning Service cleaning, service, home, commercial, booking Soft UI Evolution + Flat Design Service packages. Booking system. Price calculator. Before/after. Trust badges.


c0: product
c1: Home Services (Trades)
c2: home-services, plumber, electrician, handyman, repair
c4: domain_product
c3:
Home Services (Trades) home-services, plumber, electrician, handyman, repair Flat Design + Trust & Authority Service list. Emergency contact. Booking. Price transparency. Certifications.


c0: product
c1: Childcare / Daycare
c2: childcare, daycare, preschool, kids, family
c4: domain_product
c3:
Childcare / Daycare childcare, daycare, preschool, kids, family Claymorphism + Vibrant & Block-based Programs. Staff profiles. Safety certifications. Parent portal. Activity updates.


c0: product
c1: Senior Care / Elderly
c2: senior-care, elderly, assisted-living, aging, health
c4: domain_product
c3:
Senior Care / Elderly senior-care, elderly, assisted-living, aging, health Accessible & Ethical + Soft UI Evolution Care services. Staff qualifications. Family portal. Large touch targets. High contrast.


c0: product
c1: Medical Clinic
c2: medical, clinic, doctor, healthcare, patient, telehealth
c4: domain_product
c3:
Medical Clinic medical, clinic, doctor, healthcare, patient, telehealth Accessible & Ethical + Minimalism Services. Doctor profiles. Online booking. Patient portal. HIPAA compliant. AI triage.


c0: product
c1: Pharmacy / Drug Store
c2: pharmacy, medication, prescription, health, drugstore
c4: domain_product
c3:
Pharmacy / Drug Store pharmacy, medication, prescription, health, drugstore Flat Design + Accessible & Ethical Product catalog. Prescription upload. Refill reminders. AI drug interaction check.


c0: product
c1: Dental Practice
c2: dental, dentist, oral-health, clinic, smile
c4: domain_product
c3:
Dental Practice dental, dentist, oral-health, clinic, smile Soft UI Evolution + Minimalism Services. Dentist profiles. Before/after. Online booking. Patient testimonials.


c0: product
c1: Veterinary Clinic
c2: veterinary, vet, animal-health, pet, clinic
c4: domain_product
c3:
Veterinary Clinic veterinary, vet, animal-health, pet, clinic Claymorphism + Accessible & Ethical Pet services. Vet profiles. Online booking. Pet portal. Emergency info.


c0: product
c1: Florist / Plant Shop
c2: florist, plants, flowers, garden, botanical
c4: domain_product
c3:
Florist / Plant Shop florist, plants, flowers, garden, botanical Organic Biophilic + Vibrant & Block-based Product catalog. Occasion categories. Delivery scheduling. Care guides.


c0: product
c1: Bakery / Cafe
c2: bakery, cafe, pastry, food, artisan
c4: domain_product
c3:
Bakery / Cafe bakery, cafe, pastry, food, artisan Vibrant & Block-based + Soft UI Evolution Menu display. Online ordering. Location/hours. Catering. Seasonal specials.


c0: product
c1: Coffee Shop
c2: coffee, cafe, roastery, specialty, beverage
c4: domain_product
c3:
Coffee Shop coffee, cafe, roastery, specialty, beverage Minimalism + Organic Biophilic Menu. Online ordering. Loyalty program. Origin story. Cozy aesthetic.


c0: product
c1: Brewery / Winery
c2: brewery, winery, craft, spirits, tasting
c4: domain_product
c3:
Brewery / Winery brewery, winery, craft, spirits, tasting Motion-Driven + Storytelling-Driven Product showcase. Heritage story. Tasting notes. Events. Club membership.


c0: product
c1: Airline / Aviation
c2: airline, aviation, flights, travel, booking, mobility
c4: domain_product
c3:
Airline / Aviation airline, aviation, flights, travel, booking, mobility Minimalism + Glassmorphism Flight search. Booking. Check-in. Boarding pass. Loyalty program. Mobile-first.


c0: product
c1: News / Media Platform
c2: news, media, journalism, publishing, editorial
c4: domain_product
c3:
News / Media Platform news, media, journalism, publishing, editorial Minimalism + Flat Design Article layout. Breaking news. AI curation. Subscription. Fast loading.


c0: product
c1: Magazine / Blog
c2: magazine, blog, editorial, content, writing
c4: domain_product
c3:
Magazine / Blog magazine, blog, editorial, content, writing Swiss Modernism 2.0 + Motion-Driven Article showcase. Category navigation. Author profiles. Newsletter. Typography-focused.


c0: product
c1: Freelancer Platform
c2: freelancer, gig, marketplace, talent, remote-work
c4: domain_product
c3:
Freelancer Platform freelancer, gig, marketplace, talent, remote-work Flat Design + Minimalism Profile creation. Portfolio. AI skill matching. Messaging. Payment. Reviews.


c0: product
c1: Consulting Firm
c2: consulting, advisory, strategy, management, professional
c4: domain_product
c3:
Consulting Firm consulting, advisory, strategy, management, professional Trust & Authority + Minimalism Service areas. Case studies. Team profiles. Thought leadership. Professional credibility.


c0: product
c1: Marketing Agency
c2: marketing, agency, digital, advertising, growth
c4: domain_product
c3:
Marketing Agency marketing, agency, digital, advertising, growth Brutalism + Motion-Driven Portfolio. Case studies. Services. Creative showcase. Results-focused. Bold aesthetic.


c0: product
c1: Event Management
c2: event, conference, meetup, registration, ticketing
c4: domain_product
c3:
Event Management event, conference, meetup, registration, ticketing Vibrant & Block-based + Motion-Driven Event showcase. Registration. Agenda. Speakers. Sponsors. Countdown timer.


c0: product
c1: Conference / Webinar Platform
c2: conference, webinar, virtual-event, streaming, networking
c4: domain_product
c3:
Conference / Webinar Platform conference, webinar, virtual-event, streaming, networking Glassmorphism + Minimalism Registration. Agenda. Speaker profiles. Live stream. AI networking. Recording access.


c0: product
c1: Membership / Community
c2: community, membership, forum, group, exclusive
c4: domain_product
c3:
Membership / Community community, membership, forum, group, exclusive Vibrant & Block-based + Soft UI Evolution Member benefits. Pricing tiers. Community showcase. Events. Exclusive content.


c0: product
c1: Newsletter Platform
c2: newsletter, email, subscriber, content, publishing
c4: domain_product
c3:
Newsletter Platform newsletter, email, subscriber, content, publishing Minimalism + Flat Design Subscribe form. Archive. Social proof. Sample content. Simple conversion.


c0: product
c1: Digital Products / Downloads
c2: digital-products, downloads, templates, assets, ebooks
c4: domain_product
c3:
Digital Products / Downloads digital-products, downloads, templates, assets, ebooks Vibrant & Block-based + Motion-Driven Product showcase. Preview. Pricing. Instant delivery. License management.


c0: product
c1: Church / Religious Organization
c2: church, religious, faith, community, worship
c4: domain_product
c3:
Church / Religious Organization church, religious, faith, community, worship Accessible & Ethical + Soft UI Evolution Service times. Events. Sermons. Community. Giving. Welcoming imagery.


c0: product
c1: Sports Team / Club
c2: sports, team, club, athletics, fan, league
c4: domain_product
c3:
Sports Team / Club sports, team, club, athletics, fan, league Vibrant & Block-based + Motion-Driven Schedule. Roster. News. Tickets. Merchandise. Fan engagement. Action imagery.


c0: product
c1: Museum / Gallery
c2: museum, gallery, art, exhibition, culture
c4: domain_product
c3:
Museum / Gallery museum, gallery, art, exhibition, culture Minimalism + Motion-Driven Exhibitions. Collections. Tickets. Virtual tours. Educational content. Art-focused.


c0: product
c1: Theater / Cinema
c2: theater, cinema, film, entertainment, showtime
c4: domain_product
c3:
Theater / Cinema theater, cinema, film, entertainment, showtime Dark Mode (OLED) + Motion-Driven Showtimes. Seat selection. Trailers. Coming soon. Membership. Dramatic imagery.


c0: product
c1: Language Learning App
c2: language, learning, translation, fluency, education
c4: domain_product
c3:
Language Learning App language, learning, translation, fluency, education Claymorphism + Vibrant & Block-based Lesson structure. Progress tracking. Gamification. AI conversation practice. Badges.


c0: product
c1: Coding Bootcamp
c2: coding, bootcamp, developer, programming, career
c4: domain_product
c3:
Coding Bootcamp coding, bootcamp, developer, programming, career Dark Mode (OLED) + Minimalism Curriculum. Projects. Career outcomes. AI code review. Terminal aesthetic.


c0: product
c1: Cybersecurity Platform
c2: cybersecurity, security, threat, compliance, soc
c4: domain_product
c3:
Cybersecurity Platform cybersecurity, security, threat, compliance, soc Cyberpunk UI + Dark Mode (OLED) Data density. Threat visualization. AI threat detection. Dark mode default.


c0: product
c1: Developer Tool / IDE
c2: developer-tool, ide, devops, api, sdk, cli
c4: domain_product
c3:
Developer Tool / IDE developer-tool, ide, devops, api, sdk, cli Dark Mode (OLED) + Minimalism Keyboard shortcuts. Syntax highlighting. Fast performance. AI code assist.


c0: product
c1: Biotech / Life Sciences
c2: biotech, life-sciences, pharma, genomics, research
c4: domain_product
c3:
Biotech / Life Sciences biotech, life-sciences, pharma, genomics, research Glassmorphism + Clean Science Data accuracy. Complex data visualization. Regulatory compliance. AI drug discovery.


c0: product
c1: Space Tech / Aerospace
c2: space, aerospace, satellite, rocket, telemetry
c4: domain_product
c3:
Space Tech / Aerospace space, aerospace, satellite, rocket, telemetry Holographic / HUD + Dark Mode High-tech feel. Precision. Telemetry data. Mission-critical reliability.


c0: product
c1: Architecture / Interior Design
c2: architecture, interior-design, spatial, visualization
c4: domain_product
c3:
Architecture / Interior Design architecture, interior-design, spatial, visualization Exaggerated Minimalism + High Imagery High-res images. Typography. Space. 3D walkthroughs. Material palettes.


c0: product
c1: Quantum Computing Interface
c2: quantum, computing, qubit, physics, simulation
c4: domain_product
c3:
Quantum Computing Interface quantum, computing, qubit, physics, simulation Holographic / HUD + Dark Mode Visualize complexity. Qubit states. Probability clouds. High-tech trust.


c0: product
c1: Biohacking / Longevity App
c2: biohacking, longevity, health-tracking, wellness, biomarkers
c4: domain_product
c3:
Biohacking / Longevity App biohacking, longevity, health-tracking, wellness, biomarkers Biomimetic / Organic 2.0 Personal data privacy. Scientific credibility. Biological visualizations. Wearable sync.


c0: product
c1: Autonomous Drone Fleet Manager
c2: drone, autonomous, fleet, aerial, logistics, robotics
c4: domain_product
c3:
Autonomous Drone Fleet Manager drone, autonomous, fleet, aerial, logistics, robotics HUD / Sci-Fi FUI Real-time telemetry. 3D spatial awareness. Latency indicators. Safety alerts.


c0: product
c1: Generative Art Platform
c2: generative-art, ai-art, creative, gallery, nft
c4: domain_product
c3:
Generative Art Platform generative-art, ai-art, creative, gallery, nft Minimalism (Frame) + Gen Z Chaos Content is king. Fast loading. Creator attribution. AI generation tools.


c0: product
c1: Spatial Computing OS / App
c2: spatial-computing, vr, ar, mixed-reality, xr, vision
c4: domain_product
c3:
Spatial Computing OS / App spatial-computing, vr, ar, mixed-reality, xr, vision Spatial UI (VisionOS) Gaze/Pinch interaction. Depth hierarchy. Environment awareness. Hand tracking.


c0: product
c1: Sustainable Energy / Climate Tech
c2: climate-tech, energy, sustainable, green, carbon, solar
c4: domain_product
c3:
Sustainable Energy / Climate Tech climate-tech, energy, sustainable, green, carbon, solar Organic Biophilic + E-Ink / Paper Data transparency. Impact visualization. Low-carbon web design. Grid analytics.


c0: product
c1: AI Agent Orchestration Platform
c2: ai-agent, orchestration, multi-agent, autonomous, llm, workflow
c4: domain_product
c3:
AI Agent Orchestration Platform ai-agent, orchestration, multi-agent, autonomous, llm, workflow AI-Native UI + Dark Mode (OLED) Agent workflow visualization. Real-time agent status. Token usage. Chain-of-thought display. Error recovery flows.


c0: product
c1: Voice AI / Conversational Platform
c2: voice-ai, speech, conversational, assistant, nlp, tts
c4: domain_product
c3:
Voice AI / Conversational Platform voice-ai, speech, conversational, assistant, nlp, tts AI-Native UI + Minimalism Voice waveform visualization. Latency indicators. Conversation flow. Multi-language. Real-time transcription.


c0: product
c1: AI-Powered Code Generation Tool
c2: code-generation, ai-coding, copilot, developer, automation
c4: domain_product
c3:
AI-Powered Code Generation Tool code-generation, ai-coding, copilot, developer, automation Dark Mode (OLED) + AI-Native UI Inline suggestions. Diff views. Context awareness. Multi-language support. Token efficiency display.


c0: product
c1: Synthetic Media / Deepfake Detection
c2: synthetic-media, deepfake, detection, verification, trust
c4: domain_product
c3:
Synthetic Media / Deepfake Detection synthetic-media, deepfake, detection, verification, trust Cyberpunk UI + Trust & Authority Media authenticity scoring. Provenance tracking. Watermark detection. Confidence indicators.


c0: product
c1: Digital Twin Platform
c2: digital-twin, simulation, iot, modeling, real-time
c4: domain_product
c3:
Digital Twin Platform digital-twin, simulation, iot, modeling, real-time 3D & Hyperrealism + Glassmorphism 3D model rendering. Real-time sensor overlay. Predictive maintenance. Scenario simulation.


c0: product
c1: Edge Computing Management
c2: edge-computing, distributed, iot, latency, infrastructure
c4: domain_product
c3:
Edge Computing Management edge-computing, distributed, iot, latency, infrastructure Minimalism + Dark Mode (OLED) Node health monitoring. Latency maps. Deployment management. Edge-cloud orchestration.


c0: product
c1: Privacy-First Analytics Platform
c2: privacy, analytics, cookieless, gdpr, compliance, first-party
c4: domain_product
c3:
Privacy-First Analytics Platform privacy, analytics, cookieless, gdpr, compliance, first-party Minimalism + Accessible & Ethical Consent management. Data residency indicators. Compliance badges. Anonymized insights.


c0: product
c1: Decentralized Identity (DID) Platform
c2: decentralized-identity, did, ssi, verifiable-credentials, web3
c4: domain_product
c3:
Decentralized Identity (DID) Platform decentralized-identity, did, ssi, verifiable-credentials, web3 Cyberpunk UI + Minimalism Credential wallet. Verification flows. Privacy controls. Cross-platform identity. Zero-knowledge proofs.


c0: product
c1: AI-Powered Customer Support
c2: customer-support, ai, helpdesk, ticketing, chatbot, automation
c4: domain_product
c3:
AI-Powered Customer Support customer-support, ai, helpdesk, ticketing, chatbot, automation AI-Native UI + Flat Design AI resolution rate. Handoff flows. Sentiment analysis. Knowledge base integration. Escalation paths.


c0: product
c1: Robotic Process Automation (RPA)
c2: rpa, automation, workflow, bot, process, enterprise
c4: domain_product
c3:
Robotic Process Automation (RPA) rpa, automation, workflow, bot, process, enterprise Flat Design + Data-Dense Bot status monitoring. Workflow builder. ROI calculator. Error handling. Audit trails.


c0: product
c1: AI-Native CRM
c2: crm, ai, sales, customer, pipeline, relationship
c4: domain_product
c3:
AI-Native CRM crm, ai, sales, customer, pipeline, relationship AI-Native UI + Glassmorphism AI lead scoring. Predictive pipeline. Auto-enrichment. Conversation intelligence. Revenue forecasting.


c0: product
c1: Autonomous Vehicle Fleet Platform
c2: autonomous-vehicle, fleet, self-driving, mobility, transport
c4: domain_product
c3:
Autonomous Vehicle Fleet Platform autonomous-vehicle, fleet, self-driving, mobility, transport HUD / Sci-Fi FUI + Dark Mode Real-time vehicle tracking. Safety metrics. Route optimization. Passenger status. Regulatory compliance.


c0: product
c1: Personal AI Assistant App
c2: personal-ai, assistant, productivity, automation, agent
c4: domain_product
c3:
Personal AI Assistant App personal-ai, assistant, productivity, automation, agent AI-Native UI + Soft UI Evolution Conversational interface. Task delegation. Calendar integration. Context memory. Privacy controls.


c0: product
c1: AI-Powered Legal Tech
c2: legal-tech, ai, contract, compliance, document-review
c4: domain_product
c3:
AI-Powered Legal Tech legal-tech, ai, contract, compliance, document-review Trust & Authority + AI-Native UI AI contract analysis. Risk scoring. Clause extraction. Compliance monitoring. Redline automation.


c0: product
c1: Carbon Credit / Offset Marketplace
c2: carbon-credit, offset, marketplace, sustainability, trading
c4: domain_product
c3:
Carbon Credit / Offset Marketplace carbon-credit, offset, marketplace, sustainability, trading Organic Biophilic + Minimalism Credit verification. Impact tracking. Trading interface. Certification display. Blockchain provenance.


c0: product
c1: AI-Powered Recruitment / HR Tech
c2: hr-tech, ai-recruitment, talent, hiring, workforce
c4: domain_product
c3:
AI-Powered Recruitment / HR Tech hr-tech, ai-recruitment, talent, hiring, workforce Flat Design + AI-Native UI AI candidate matching. Bias detection. Skills assessment. Workforce planning. Diversity metrics.


c0: product
c1: No-Code / Low-Code Platform
c2: no-code, low-code, builder, visual, automation, citizen-dev
c4: domain_product
c3:
No-Code / Low-Code Platform no-code, low-code, builder, visual, automation, citizen-dev Vibrant & Block-based + Micro-interactions Drag-and-drop builder. Template gallery. Integration marketplace. Version control. Collaboration.


c0: product
c1: Data Mesh / Data Platform
c2: data-mesh, data-platform, lakehouse, governance, pipeline
c4: domain_product
c3:
Data Mesh / Data Platform data-mesh, data-platform, lakehouse, governance, pipeline Dark Mode (OLED) + Data-Dense Data lineage visualization. Quality scores. Governance policies. Catalog search. Schema evolution.


c0: product
c1: AI-Powered Supply Chain
c2: supply-chain, ai, logistics, procurement, inventory
c4: domain_product
c3:
AI-Powered Supply Chain supply-chain, ai, logistics, procurement, inventory Flat Design + Data-Dense Demand forecasting. Inventory optimization. Supplier risk scoring. Route planning. Disruption alerts.


c0: product
c1: Telemedicine / Virtual Care
c2: telemedicine, virtual-care, telehealth, remote-health, consultation
c4: domain_product
c3:
Telemedicine / Virtual Care telemedicine, virtual-care, telehealth, remote-health, consultation Accessible & Ethical + Soft UI Evolution Video consultation. Prescription management. AI symptom checker. Patient records. HIPAA compliance.


c0: product
c1: AI Writing / Content Studio
c2: ai-writing, content, copywriting, generation, editor
c4: domain_product
c3:
AI Writing / Content Studio ai-writing, content, copywriting, generation, editor AI-Native UI + Minimalism Real-time generation. Tone controls. Brand voice. Plagiarism detection. Multi-format output.


c0: product
c1: Proptech / Smart Building
c2: proptech, smart-building, facility, iot, building-management
c4: domain_product
c3:
Proptech / Smart Building proptech, smart-building, facility, iot, building-management Glassmorphism + Dark Mode (OLED) Floor plan visualization. Energy management. Occupancy tracking. Maintenance scheduling. Tenant portal.


c0: product
c1: AI-Powered Personalization Engine
c2: personalization, ai, recommendation, engagement, dynamic
c4: domain_product
c3:
AI-Powered Personalization Engine personalization, ai, recommendation, engagement, dynamic AI-Native UI + Data-Dense Segment visualization. A/B test results. Recommendation performance. User journey mapping. Real-time adaptation.


c0: product
c1: Embedded Finance / BaaS
c2: embedded-finance, baas, banking-as-service, api, fintech
c4: domain_product
c3:
Embedded Finance / BaaS embedded-finance, baas, banking-as-service, api, fintech Minimalism + Trust & Authority API documentation. Integration guides. Transaction monitoring. Compliance dashboard. Developer portal.


c0: product
c1: AI-Powered Design Tool
c2: ai-design, generative-design, creative-tool, automation
c4: domain_product
c3:
AI-Powered Design Tool ai-design, generative-design, creative-tool, automation AI-Native UI + Motion-Driven AI generation controls. Style transfer. Brand consistency. Asset management. Collaboration.


c0: product
c1: Robotics Control Platform
c2: robotics, automation, manufacturing, control, industrial
c4: domain_product
c3:
Robotics Control Platform robotics, automation, manufacturing, control, industrial HUD / Sci-Fi FUI + Dark Mode Robot status. Safety zones. Task queues. Maintenance alerts. 3D workspace visualization.


c0: product
c1: Compliance / RegTech Platform
c2: regtech, compliance, regulation, audit, governance
c4: domain_product
c3:
Compliance / RegTech Platform regtech, compliance, regulation, audit, governance Trust & Authority + Minimalism Regulatory tracking. Audit trails. Risk scoring. Policy management. AI compliance monitoring.


c0: product
c1: AI-Powered Education / Adaptive Learning
c2: adaptive-learning, ai-tutor, personalized-education, edtech
c4: domain_product
c3:
AI-Powered Education / Adaptive Learning adaptive-learning, ai-tutor, personalized-education, edtech Claymorphism + AI-Native UI Adaptive difficulty. Knowledge graphs. AI tutor interface. Progress visualization. Skill mapping.


c0: product
c1: Wealth Management / Robo-Advisor
c2: wealth, robo-advisor, investment, portfolio, fintech
c4: domain_product
c3:
Wealth Management / Robo-Advisor wealth, robo-advisor, investment, portfolio, fintech Glassmorphism + Minimalism Portfolio visualization. Risk assessment. AI recommendations. Goal tracking. Tax optimization.


c0: product
c1: Developer API Marketplace
c2: api-marketplace, developer, integration, saas, platform
c4: domain_product
c3:
Developer API Marketplace api-marketplace, developer, integration, saas, platform Dark Mode (OLED) + Minimalism API catalog. Interactive docs. Sandbox testing. Usage metrics. Pricing tiers. SDK downloads.


c0: product
c1: AI-Powered Video Editing
c2: ai-video, editing, content-creation, automation, media
c4: domain_product
c3:
AI-Powered Video Editing ai-video, editing, content-creation, automation, media Dark Mode (OLED) + AI-Native UI Timeline interface. AI scene detection. Auto-captioning. Style transfer. Export optimization.


c0: product
c1: Federated Learning Platform
c2: federated-learning, privacy, ml, distributed, ai
c4: domain_product
c3:
Federated Learning Platform federated-learning, privacy, ml, distributed, ai Dark Mode (OLED) + Data-Dense Model performance. Privacy metrics. Node participation. Training progress. Data governance.


c0: product
c1: Mental Wellness for Enterprise
c2: employee-wellness, mental-health, hr, corporate, burnout
c4: domain_product
c3:
Mental Wellness for Enterprise employee-wellness, mental-health, hr, corporate, burnout Soft UI Evolution + Accessible & Ethical Anonymous usage. Burnout indicators. Resource library. Manager dashboards. ROI metrics.


c0: product
c1: AI-Powered Pricing Engine
c2: pricing, ai, dynamic, revenue, optimization
c4: domain_product
c3:
AI-Powered Pricing Engine pricing, ai, dynamic, revenue, optimization AI-Native UI + Data-Dense Price elasticity visualization. Competitor tracking. A/B pricing. Revenue impact. Market signals.


c0: product
c1: Circular Economy Marketplace
c2: circular-economy, resale, refurbish, sustainability, reuse
c4: domain_product
c3:
Circular Economy Marketplace circular-economy, resale, refurbish, sustainability, reuse Organic Biophilic + Vibrant & Block-based Product lifecycle tracking. Condition grading. Environmental impact. Seller verification. Repair guides.


c0: product
c1: AI Governance / Model Registry
c2: ai-governance, mlops, model-registry, responsible-ai, bias
c4: domain_product
c3:
AI Governance / Model Registry ai-governance, mlops, model-registry, responsible-ai, bias Trust & Authority + Dark Mode (OLED) Model cards. Bias metrics. Drift detection. Approval workflows. Audit logs. Fairness scores.


c0: product
c1: Agentic Workflow Builder
c2: agentic, workflow, ai-agent, automation, no-code, orchestration
c4: domain_product
c3:
Agentic Workflow Builder agentic, workflow, ai-agent, automation, no-code, orchestration AI-Native UI + Vibrant & Block-based Visual agent builder. Tool integration. Execution logs. Cost tracking. Human-in-the-loop controls.


c0: product
c1: AI-Native Search Engine
c2: ai-search, semantic, vector, retrieval, knowledge
c4: domain_product
c3:
AI-Native Search Engine ai-search, semantic, vector, retrieval, knowledge AI-Native UI + Minimalism Semantic understanding. Source attribution. Conversational refinement. Citation display. Speed metrics.


c0: product
c1: Tokenized Real-World Assets (RWA)
c2: rwa, tokenization, blockchain, real-estate, assets
c4: domain_product
c3:
Tokenized Real-World Assets (RWA) rwa, tokenization, blockchain, real-estate, assets Glassmorphism + Trust & Authority Asset verification. Fractional ownership. Compliance display. Yield tracking. Liquidity indicators.


c0: product
c1: AI-Powered Accessibility Tool
c2: accessibility, ai, wcag, inclusive, assistive-tech
c4: domain_product
c3:
AI-Powered Accessibility Tool accessibility, ai, wcag, inclusive, assistive-tech Accessible & Ethical + AI-Native UI WCAG scoring. Auto-remediation. Screen reader optimization. Color contrast analysis. Compliance reports.


c0: product
c1: Predictive Maintenance Platform
c2: predictive-maintenance, iot, industrial, manufacturing, ai
c4: domain_product
c3:
Predictive Maintenance Platform predictive-maintenance, iot, industrial, manufacturing, ai Data-Dense + Dark Mode (OLED) Equipment health scores. Failure probability. Maintenance scheduling. Cost avoidance metrics. Sensor data.


c0: product
c1: Creator AI Studio
c2: creator-ai, content-generation, multi-modal, studio, creative
c4: domain_product
c3:
Creator AI Studio creator-ai, content-generation, multi-modal, studio, creative AI-Native UI + Motion-Driven Multi-modal generation. Brand consistency. Asset library. Collaboration. Publishing pipeline.


c0: product
c1: Sovereign Cloud / Data Residency
c2: sovereign-cloud, data-residency, compliance, government, privacy
c4: domain_product
c3:
Sovereign Cloud / Data Residency sovereign-cloud, data-residency, compliance, government, privacy Trust & Authority + Minimalism Data residency maps. Compliance certifications. Jurisdiction indicators. Encryption status. Audit trails.


c0: product
c1: AI-Powered Sales Intelligence
c2: sales-intelligence, ai, prospecting, revenue, pipeline
c4: domain_product
c3:
AI-Powered Sales Intelligence sales-intelligence, ai, prospecting, revenue, pipeline AI-Native UI + Glassmorphism Lead scoring. Intent signals. Conversation intelligence. Pipeline forecasting. Competitive insights.


c0: product
c1: Neurotech / Brain-Computer Interface
c2: neurotech, bci, brain, neural, cognitive, interface
c4: domain_product
c3:
Neurotech / Brain-Computer Interface neurotech, bci, brain, neural, cognitive, interface Holographic / HUD + Biomimetic Brain signal visualization. Real-time neural data. Calibration flows. Safety indicators. Research-grade accuracy.


c0: product
c1: AI-Powered Fraud Detection
c2: fraud-detection, ai, security, risk, financial, compliance
c4: domain_product
c3:
AI-Powered Fraud Detection fraud-detection, ai, security, risk, financial, compliance Cyberpunk UI + Data-Dense Transaction scoring. Pattern visualization. Real-time alerts. Investigation tools. False positive management.


c0: product
c1: Composable Commerce Platform
c2: composable-commerce, headless, mach, api-first, ecommerce
c4: domain_product
c3:
Composable Commerce Platform composable-commerce, headless, mach, api-first, ecommerce Minimalism + Flat Design Architecture visualization. API health. Integration marketplace. Performance metrics. A/B testing.


c0: product
c1: AI Copilot for Enterprise
c2: enterprise-ai, copilot, productivity, automation, knowledge
c4: domain_product
c3:
AI Copilot for Enterprise enterprise-ai, copilot, productivity, automation, knowledge AI-Native UI + Minimalism Context-aware suggestions. Knowledge retrieval. Workflow automation. Usage analytics. Security controls.


c0: product
c1: Emotion AI / Affective Computing
c2: emotion-ai, sentiment, affective, biometric, experience
c4: domain_product
c3:
Emotion AI / Affective Computing emotion-ai, sentiment, affective, biometric, experience Biomimetic / Organic 2.0 + AI-Native Emotion visualization. Real-time sentiment. Ethical consent. Privacy controls. Calibration interface.


c0: react
c1: Async Waterfall
c2: async await defer branch
c4: domain_react
c3:
Async Waterfall Defer Await async await defer branch Move await into branches where actually used to avoid blocking unused code paths


c0: react
c1: Async Waterfall
c2: promise all parallel concurrent
c4: domain_react
c3:
Async Waterfall Promise.all Parallel promise all parallel concurrent Execute independent async operations concurrently using Promise.all()


c0: react
c1: Async Waterfall
c2: dependency parallel partial
c4: domain_react
c3:
Async Waterfall Dependency Parallelization dependency parallel partial Start dependent operations as early as possible; use Promise.all with dependency chains


c0: react
c1: Async Waterfall
c2: api route waterfall promise
c4: domain_react
c3:
Async Waterfall API Route Optimization api route waterfall promise In API routes start independent operations immediately even if not awaited yet


c0: react
c1: Async Waterfall
c2: suspense streaming boundary
c4: domain_react
c3:
Async Waterfall Suspense Boundaries suspense streaming boundary Use Suspense to show wrapper UI faster while data loads; enables streaming SSR


c0: react
c1: Async Waterfall
c2: use hook promise suspense
c4: domain_react
c3:
Async Waterfall use() Hook for Promises use hook promise suspense Use the use() hook to read promises in render; integrates with Suspense automatically


c0: react
c1: Bundle Size
c2: barrel import direct path tree
c4: domain_react
c3:
Bundle Size Barrel Imports barrel import direct path tree Import directly from source files instead of barrel files to avoid loading unused modules


c0: react
c1: Bundle Size
c2: dynamic import lazy next
c4: domain_react
c3:
Bundle Size Dynamic Imports dynamic import lazy next Use next/dynamic or React.lazy to lazy-load large components not needed on initial render


c0: react
c1: Bundle Size
c2: analytics defer third-party
c4: domain_react
c3:
Bundle Size Defer Third Party analytics defer third-party Load analytics and logging after hydration since they don't block interaction


c0: react
c1: Bundle Size
c2: conditional module lazy feature
c4: domain_react
c3:
Bundle Size Conditional Loading conditional module lazy feature Load large data or modules only when a feature is activated


c0: react
c1: Bundle Size
c2: preload hover focus intent
c4: domain_react
c3:
Bundle Size Preload Intent preload hover focus intent Preload heavy bundles on hover/focus before they're needed for instant interaction


c0: react
c1: Bundle Size
c2: react compiler forget memo
c4: domain_react
c3:
Bundle Size React Compiler Auto-Memo react compiler forget memo React Compiler (React Forget) automatically memoizes components and hooks; remove manual memo/useMemo/useCallback


c0: react
c1: Server
c2: react cache deduplicate request
c4: domain_react
c3:
Server React.cache Dedup react cache deduplicate request Use React.cache() for server-side request deduplication within single render pass


c0: react
c1: Server
c2: lru cache cross request ttl
c4: domain_react
c3:
Server LRU Cache Cross-Request lru cache cross request ttl Use LRU cache or unstable_cache for data shared across sequential requests


c0: react
c1: Server
c2: serialization rsc boundary props
c4: domain_react
c3:
Server Minimize Serialization serialization rsc boundary props Only pass fields that client actually uses across RSC boundaries; avoid serializing large objects


c0: react
c1: Server
c2: parallel fetch component composition rsc
c4: domain_react
c3:
Server Parallel Fetching RSC parallel fetch component composition rsc Restructure components to parallelize data fetching in React Server Components


c0: react
c1: Server
c2: after non-blocking logging next
c4: domain_react
c3:
Server After Non-blocking after non-blocking logging next Use Next.js after() to schedule work after response is sent to client


c0: react
c1: Server
c2: server actions form mutation
c4: domain_react
c3:
Server Server Actions server actions form mutation Use Server Actions for form mutations; they integrate with Suspense, transitions, and error boundaries


c0: react
c1: Server
c2: ppr partial prerendering static dynamic
c4: domain_react
c3:
Server Partial Prerendering ppr partial prerendering static dynamic Use Partial Prerendering (PPR) to combine static shell with dynamic streaming content


c0: react
c1: Client
c2: swr dedup cache revalidate
c4: domain_react
c3:
Client SWR Deduplication swr dedup cache revalidate Use SWR or TanStack Query for automatic request deduplication and caching


c0: react
c1: Client
c2: event listener deduplicate global shared
c4: domain_react
c3:
Client Event Listener Dedup event listener deduplicate global shared Share global event listeners across component instances to avoid duplicate registrations


c0: react
c1: Client
c2: useoptimistic optimistic update
c4: domain_react
c3:
Client useOptimistic useoptimistic optimistic update Use useOptimistic for instant UI feedback while server action processes


c0: react
c1: Client
c2: useformstatus pending form
c4: domain_react
c3:
Client useFormStatus useformstatus pending form Use useFormStatus to show loading states in form submit buttons


c0: react
c1: Client
c2: useactionstate form server action
c4: domain_react
c3:
Client useActionState useactionstate form server action Use useActionState for form state management with Server Actions


c0: react
c1: Rerender
c2: state read callback subscription
c4: domain_react
c3:
Rerender Defer State Reads state read callback subscription Don't subscribe to state only used in callbacks; read on-demand instead


c0: react
c1: Rerender
c2: react compiler memo usememo usecallback
c4: domain_react
c3:
Rerender React Compiler Eliminates Manual Memo react compiler memo usememo usecallback React Compiler auto-memoizes; remove manual memo(), useMemo(), useCallback() when compiler is enabled


c0: react
c1: Rerender
c2: effect dependency primitive
c4: domain_react
c3:
Rerender Narrow Dependencies effect dependency primitive Specify primitive dependencies instead of objects in effects to prevent unnecessary re-runs


c0: react
c1: Rerender
c2: derived boolean subscription
c4: domain_react
c3:
Rerender Derived State derived boolean subscription Subscribe to derived booleans instead of continuous values to reduce re-renders


c0: react
c1: Rerender
c2: functional setstate callback
c4: domain_react
c3:
Rerender Functional setState functional setstate callback Use functional setState updates for stable callbacks and no stale closures


c0: react
c1: Rerender
c2: usestate lazy initialization
c4: domain_react
c3:
Rerender Lazy State Init usestate lazy initialization Pass function to useState for expensive initial values to avoid recomputation


c0: react
c1: Rerender
c2: starttransition non-urgent
c4: domain_react
c3:
Rerender Transitions starttransition non-urgent Mark frequent non-urgent state updates as transitions to keep UI responsive


c0: react
c1: Rendering
c2: svg animation wrapper div gpu
c4: domain_react
c3:
Rendering SVG Animation Wrapper svg animation wrapper div gpu Wrap SVG in div and animate wrapper for hardware acceleration


c0: react
c1: Rendering
c2: content-visibility auto contain
c4: domain_react
c3:
Rendering Content Visibility content-visibility auto contain Apply content-visibility: auto to defer off-screen rendering for long lists


c0: react
c1: Rendering
c2: hoist static jsx element module
c4: domain_react
c3:
Rendering Hoist Static JSX hoist static jsx element module Extract static JSX outside components to avoid re-creation on every render


c0: react
c1: Rendering
c2: hydration mismatch flicker theme
c4: domain_react
c3:
Rendering Hydration No Flicker hydration mismatch flicker theme Use inline script to set client-only data before hydration to prevent flash


c0: react
c1: Rendering
c2: conditional render ternary falsy
c4: domain_react
c3:
Rendering Conditional Render conditional render ternary falsy Use ternary instead of && when condition can be 0 or NaN to prevent rendering falsy values


c0: react
c1: Rendering
c2: view transition api page navigation
c4: domain_react
c3:
Rendering View Transitions view transition api page navigation Use View Transitions API for smooth page transitions and element morphing


c0: react
c1: Rendering
c2: activity show hide preserve state
c4: domain_react
c3:
Rendering Activity Component activity show hide preserve state Use Activity component to preserve state/DOM for toggled components without unmounting


c0: react
c1: JS Perf
c2: batch dom css reflow class
c4: domain_react
c3:
JS Perf Batch DOM CSS batch dom css reflow class Group CSS changes via classes or cssText to minimize reflows


c0: react
c1: JS Perf
c2: map index lookup find o1
c4: domain_react
c3:
JS Perf Index Map Lookup map index lookup find o1 Build Map for repeated lookups instead of multiple .find() calls for O(1) access


c0: react
c1: JS Perf
c2: memoize cache function map
c4: domain_react
c3:
JS Perf Cache Function Results memoize cache function map Use module-level Map to cache repeated function results


c0: react
c1: JS Perf
c2: combine filter map loop single
c4: domain_react
c3:
JS Perf Combine Iterations combine filter map loop single Combine multiple filter/map into single loop for better performance


c0: react
c1: JS Perf
c2: set map includes has o1
c4: domain_react
c3:
JS Perf Set Map Lookups set map includes has o1 Use Set/Map for O(1) lookups instead of array.includes() for repeated checks


c0: react
c1: JS Perf
c2: tosorted sort immutable array
c4: domain_react
c3:
JS Perf toSorted Immutable tosorted sort immutable array Use toSorted()/toReversed()/toSpliced() instead of mutating array methods


c0: react
c1: JS Perf
c2: early return exit function guard
c4: domain_react
c3:
JS Perf Early Return early return exit function guard Return early when result is determined to skip unnecessary processing


c0: react
c1: JS Perf
c2: web worker offload heavy computation
c4: domain_react
c3:
JS Perf Web Workers web worker offload heavy computation Offload heavy computation (sorting, filtering, parsing) to Web Workers to keep main thread free


c0: react
c1: Advanced
c2: useeffectevent ref handler stable
c4: domain_react
c3:
Advanced Event Handler Refs useeffectevent ref handler stable Use useEffectEvent (or ref pattern) for stable effect subscriptions without re-subscribing


c0: react
c1: Advanced
c2: uselatest ref callback fresh
c4: domain_react
c3:
Advanced useLatest Hook uselatest ref callback fresh Access latest values in callbacks without adding to dependency arrays


c0: react
c1: AI/Streaming
c2: streaming sse text ai response
c4: domain_react
c3:
AI/Streaming Streaming Text Display streaming sse text ai response Use ReadableStream and SSE for AI streaming responses; render tokens incrementally


c0: react
c1: AI/Streaming
c2: ai suspense streaming boundary
c4: domain_react
c3:
AI/Streaming AI Response Suspense ai suspense streaming boundary Wrap AI response components in Suspense with skeleton fallbacks for streaming


c0: react
c1: AI/Streaming
c2: websocket connection singleton reuse
c4: domain_react
c3:
AI/Streaming WebSocket Connection Management websocket connection singleton reuse Use singleton WebSocket connections with reconnection logic for real-time AI features


c0: react
c1: AI/Streaming
c2: abort controller cancel ai request
c4: domain_react
c3:
AI/Streaming Abort Controller for AI abort controller cancel ai request Use AbortController to cancel in-flight AI requests when user navigates away or submits new query


c0: react
c1: AI/Streaming
c2: token render incremental ai
c4: domain_react
c3:
AI/Streaming Token-by-Token Rendering token render incremental ai Render AI tokens incrementally without causing full re-renders; use refs for append-only content


c0: react
c1: Image/Media
c2: next image optimization srcset
c4: domain_react
c3:
Image/Media Next Image Optimization next image optimization srcset Use next/image for automatic image optimization, lazy loading, and responsive srcset


c0: react
c1: Image/Media
c2: video lazy loading intersection
c4: domain_react
c3:
Image/Media Video Lazy Loading video lazy loading intersection Lazy-load video content using Intersection Observer; don't autoplay off-screen videos


c0: react
c1: Image/Media
c2: font loading display swap
c4: domain_react
c3:
Image/Media Font Loading Strategy font loading display swap Use font-display: swap and preload critical fonts to prevent layout shift and FOIT


c0: react
c1: Forms
c2: form progressive enhancement action
c4: domain_react
c3:
Forms Progressive Enhancement form progressive enhancement action Forms should work without JavaScript using native form actions; enhance with JS


c0: react
c1: Forms
c2: debounce search input transition
c4: domain_react
c3:
Forms Debounced Search debounce search input transition Debounce search inputs and use transitions for non-urgent filter updates


c0: react
c1: Security
c2: sanitize ai output xss html
c4: domain_react
c3:
Security Sanitize AI Output sanitize ai output xss html Sanitize AI-generated HTML/markdown before rendering to prevent XSS attacks


c0: react
c1: Security
c2: server action validation zod
c4: domain_react
c3:
Security Server Action Validation server action validation zod Always validate and sanitize Server Action inputs; never trust client data


c0: react
c1: Accessibility
c2: prefers-reduced-motion animation
c4: domain_react
c3:
Accessibility Reduced Motion prefers-reduced-motion animation Respect prefers-reduced-motion media query; provide static alternatives for all animations


c0: react
c1: Accessibility
c2: focus management navigation modal
c4: domain_react
c3:
Accessibility Focus Management focus management navigation modal Manage focus on route changes, modal opens, and dynamic content updates


c0: react
c1: Caching
c2: swr stale revalidate cache
c4: domain_react
c3:
Caching Stale-While-Revalidate swr stale revalidate cache Implement stale-while-revalidate pattern for instant UI with background refresh


c0: react
c1: Caching
c2: route segment cache next
c4: domain_react
c3:
Caching Route Segment Cache route segment cache next Use Next.js route segment caching with proper revalidation strategies


c0: react
c1: Error Handling
c2: error boundary fallback recovery
c4: domain_react
c3:
Error Handling Error Boundaries error boundary fallback recovery Use Error Boundaries with recovery actions; provide meaningful fallback UI


c0: react
c1: Error Handling
c2: ai error retry fallback graceful
c4: domain_react
c3:
Error Handling AI Error Recovery ai error retry fallback graceful Implement graceful degradation for AI failures; show cached/fallback content when AI is unavailable


c0: react
c1: Monitoring
c2: web vitals lcp cls inp monitoring
c4: domain_react
c3:
Monitoring Core Web Vitals web vitals lcp cls inp monitoring Monitor Core Web Vitals (LCP, CLS, INP) in production; set performance budgets


c0: react
c1: Monitoring
c2: react devtools profiler render
c4: domain_react
c3:
Monitoring React DevTools Profiler react devtools profiler render Use React DevTools Profiler to identify unnecessary re-renders and slow components


