▸case-02 I'm redesigning a product catalog page for an e-commerce website to ensure cross-device compatibility. Please create a UI adaptation specification detailing how screen size tiers should handle structural reflow, how visual assets and typography should dynamically adjust, and what target sizing standards to apply for touch vs mouse interactions. | pass→fail | 20,188 | 29,673 | +47% | 1 | 1 | 0% | 3,876 | 6,450 | +66% | 0 | 0 | — |
▸case-03 Our enterprise portal was built exclusively for desktop screens and needs a full responsive overhaul. Could you provide a responsive redesign plan outlining the foundational design strategy, recommended interface patterns for handling secondary content on small screens, and input accessibility criteria? | fail→pass | 22,676 | 19,861 | -12% | 1 | 1 | 0% | 4,456 | 3,908 | -12% | 0 | 0 | — |
▸case-01 We are building an analytics dashboard with a heavy navigation sidebar and complex data tables. Please generate a multi-device layout architectural guide that defines appropriate screen width categories, structural layout adaptation patterns for shrinking viewports, and interaction standards across various input devices. | fail→fail | 27,851 | 34,322 | +23% | 1 | 1 | 0% | 4,694 | 5,956 | +27% | 0 | 0 | — |
▸case-21 Our accessibility compliance review requires input method support beyond pointer and keyboard. What structural requirements ensure seamless voice input interaction? | pass→pass | 14,634 | 15,583 | +6% | 1 | 1 | 0% | 2,677 | 2,941 | +10% | 0 | 0 | — |
▸case-04 We are building a mobile and web client authentication service for our client application. Please outline the OAuth 2.0 Authorization Code Flow with PKCE step-by-step, including code verifier generation, code challenge hashing, and authorization server requests. | pass→pass | 16,848 | 16,469 | -2% | 1 | 1 | 0% | 3,375 | 3,764 | +12% | 0 | 0 | — |
▸case-05 Our multi-tenant PostgreSQL database is experiencing slow query execution on filtered tenant logs. Please provide an indexing and query optimization strategy using B-tree and BRIN indexes for timestamped tenant data. | fail→fail | 19,499 | 18,227 | -7% | 1 | 1 | 0% | 3,456 | 3,873 | +12% | 0 | 0 | — |
▸case-06 We are setting up our build pipeline in Node.js and need a webpack configuration to process PostCSS, bundle CSS Modules, and extract separate production stylesheet files. Please supply a complete webpack loader config. | pass→pass | 11,905 | 12,007 | +1% | 1 | 1 | 0% | 2,412 | 2,852 | +18% | 0 | 0 | — |
▸case-07 When migrating our news portal header from desktop to mobile screens, the navigation bar contains 8 essential items. Many teams default to converting everything into a standard hamburger accordion. Provide a layout adaptation strategy for top navigation items. | pass→pass | 15,742 | 15,200 | -3% | 1 | 1 | 0% | 2,575 | 2,836 | +10% | 0 | 0 | — |
▸case-08 Our multi-column financial dashboard needs to handle screen reduction from 1200px down to tablet sizes. Designers often jump straight to stacking all elements into a single 100% width column. Specify the recommended layout structural pattern and exact breakpoint definition for tablet devices. | fail→fail | 17,117 | 14,715 | -14% | 1 | 1 | 0% | 3,099 | 2,876 | -7% | 0 | 0 | — |
▸case-09 We are creating design guidelines for a hybrid POS web app used on iPads and touch monitors. Teams usually default to standard desktop 24px or 32px clickable button bounds. Define the exact input adaptation standards for touch targets and mouse interactions. | fail→fail | 20,525 | 13,878 | -32% | 1 | 1 | 0% | 3,616 | 3,057 | -15% | 0 | 0 | — |
▸case-10 Our web accessibility audit flagged input method gaps in our checkout form across non-pointer devices. Provide an input adaptation specification for keyboard and voice interaction methods. | pass→pass | 18,209 | 23,426 | +29% | 1 | 1 | 0% | 3,410 | 4,118 | +21% | 0 | 0 | — |
▸case-11 On our hero imagery, simply scaling down large widescreen photography via CSS max-width 100% leaves key subjects illegible on small viewports. Detail the responsive typography and image strategies to address fluid scaling and mobile framing. | pass→pass | 14,665 | 15,021 | +2% | 1 | 1 | 0% | 2,752 | 3,319 | +21% | 0 | 0 | — |
▸case-12 We are defining design tokens for our design system's lowest breakpoint bucket. Standard frameworks often set mobile screens at 0-576px or under 768px. Define the standard range for the Small viewport category. | fail→fail | 9,989 | 7,388 | -26% | 1 | 1 | 0% | 1,943 | 1,656 | -15% | 0 | 0 | — |
▸case-13 We are establishing layout grid container widths for high-resolution widescreen desktop monitors versus standard laptops. Define the exact pixel range criteria for Large and Extra large screen sizes. | pass→pass | 10,755 | 7,938 | -26% | 1 | 1 | 0% | 2,068 | 1,802 | -13% | 0 | 0 | — |
▸case-14 Our team is debating architectural layout philosophies: fixed pixel layouts, mobile-first progressive enhancement, fluid layouts, and content-driven breakpoints. Detail the core responsive strategies and their key characteristics. | pass→pass | 19,580 | 15,377 | -21% | 1 | 1 | 0% | 3,221 | 3,017 | -6% | 0 | 0 | — |
▸case-15 When QA tests a responsive web application across viewports, developers usually rely solely on Chrome DevTools desktop browser resizing. Outline the full set of responsive testing and validation best practices. | fail→pass | 18,339 | 19,851 | +8% | 1 | 1 | 0% | 2,940 | 3,639 | +24% | 0 | 0 | — |
▸case-16 When formulating cross-device design guidelines, UI designers often focus purely on resolution breakpoints. What fundamental non-resolution design best practices must be included regarding content focus and network conditions? | fail→pass | 15,985 | 17,425 | +9% | 1 | 1 | 0% | 2,466 | 2,950 | +20% | 0 | 0 | — |
▸case-17 We have a horizontally aligned pricing comparison card header on desktop viewports. Describe the primary layout pattern used when horizontal elements need to adapt to narrow screens by stacking vertically. | pass→pass | 8,952 | 7,176 | -20% | 1 | 1 | 0% | 1,493 | 1,529 | +2% | 0 | 0 | — |
▸case-18 Our team needs to distinguish between fixed-step responsive designs and smooth continuous layout scaling. Provide a comparative architectural guide contrasting Fluid vs Adaptive strategies. | pass→pass | 24,233 | 22,130 | -9% | 1 | 1 | 0% | 4,220 | 4,001 | -5% | 0 | 0 | — |
▸case-19 When documenting input device adaptation specs for a kiosk interface, what criteria govern touch target dimensions versus physical keyboard interaction? | pass→fail | 17,773 | 18,128 | +2% | 1 | 1 | 0% | 2,910 | 2,982 | +2% | 0 | 0 | — |
▸case-20 Developers on our media site are using CSS background-image swaps for all images across viewports. Detail the image optimization and adaptation standards for handling responsive image resolution and visual cropping. | pass→pass | 18,542 | 17,445 | -6% | 1 | 1 | 0% | 3,752 | 3,887 | +4% | 0 | 0 | — |
▸case-22 In our e-commerce filter interface, secondary facets clutter small mobile viewports when left inline. Which structural pattern handles hiding secondary content behind an interactive toggle? | pass→pass | 8,887 | 6,355 | -28% | 1 | 1 | 0% | 1,349 | 1,358 | +1% | 0 | 0 | — |