▸case-03 Please write a CSS design token stylesheet covering typographic scale, spacing system, and color tokens, along with a pricing card component that utilizes those tokens. The card should include hover and focus states that feel responsive and visually dynamic. | fail→pass | 25,033 | 24,329 | -3% | 1 | 1 | 0% | 6,185 | 6,543 | +6% | 0 | 0 | — |
▸case-01 I'm building an interactive web dashboard for an AI analytics platform. Could you code a responsive hero header component in React and Tailwind CSS, complete with navigation links and KPI summary cards that include subtle hover animations and a refined color palette? | fail→fail | 27,082 | 26,232 | -3% | 1 | 1 | 0% | 6,166 | 6,546 | +6% | 0 | 0 | — |
▸case-02 Can you create the frontend code for a high-converting landing page hero section for a new financial management app? Deliver the HTML and CSS with responsive layout structures, custom typography styling, and smooth interactive visual feedback on the call-to-action buttons. | fail→fail | 27,362 | 26,399 | -4% | 1 | 1 | 0% | 6,191 | 6,549 | +6% | 0 | 0 | — |
▸case-04 Create a CLI node script for parsing CSV server logs and outputting summary metrics to stdout. How should this tool process arguments and format its console output? | pass→pass | 18,577 | 21,066 | +13% | 1 | 1 | 0% | 3,877 | 5,530 | +43% | 0 | 0 | — |
▸case-05 Design a Node.js Express REST API microservice for user authentication that handles JWT issuance, password hashing, and token refresh endpoints. How should the API endpoints and JSON response structures be designed? | pass→fail | 21,616 | 27,415 | +27% | 1 | 1 | 0% | 4,939 | 6,537 | +32% | 0 | 0 | — |
▸case-06 Write a Python background worker script using Celery that processes image uploads asynchronously, resizes them, and saves thumbnail files to an S3 bucket. What is the clean implementation structure? | pass→pass | 15,658 | 23,433 | +50% | 1 | 1 | 0% | 3,417 | 5,489 | +61% | 0 | 0 | — |
▸case-07 Design a high-contrast dark theme color palette and a metric card component in CSS for a web trading app. Common defaults use pure red (#FF0000) and pure green (#00FF00) for loss and gain indicators. Provide the CSS styles for the metric card. | pass→pass | 18,176 | 19,438 | +7% | 1 | 1 | 0% | 4,015 | 4,853 | +21% | 0 | 0 | — |
▸case-08 Create the CSS typography rules for a SaaS landing page header section. Standard developer templates usually rely on `font-family: system-ui, sans-serif` with standard medium font weights. Build the heading and subtitle styles. | pass→pass | 13,353 | 15,920 | +19% | 1 | 1 | 0% | 3,316 | 3,921 | +18% | 0 | 0 | — |
▸case-09 Design an interactive feature showcase section in HTML/CSS for an e-commerce platform. Standard grid layouts place 3 identical boxes side by side in a rigid symmetrical row (`grid-template-columns: 1fr 1fr 1fr`). Build the section layout. | fail→fail | 25,252 | 28,000 | +11% | 1 | 1 | 0% | 6,196 | 6,554 | +6% | 0 | 0 | — |
▸case-10 Build a modal dialog presentation component in Tailwind CSS for a confirmation prompt. Default UI toolkits frequently apply `transition-all duration-500 ease-in-out`. Write the animation and style classes for the modal container and trigger buttons. | fail→pass | 18,449 | 25,402 | +38% | 1 | 1 | 0% | 4,244 | 6,548 | +54% | 0 | 0 | — |
▸case-11 Write CSS code for a primary call-to-action button in an executive portal. Developers often add simple `transition: all 0.5s ease` for hover states, and use pure primary blue (#0000FF). Construct the interactive button styling. | fail→pass | 16,835 | 16,719 | -1% | 1 | 1 | 0% | 3,418 | 4,024 | +18% | 0 | 0 | — |
▸case-12 Build a CSS grid layout for a data analytics dashboard. Standard responsive designs only target mobile (640px) and desktop (1024px), leaving ultra-wide monitors (2560px+) with stretched out, broken full-width containers. Write the responsive layout rules. | fail→fail | 19,205 | 27,208 | +42% | 1 | 1 | 0% | 3,872 | 6,559 | +69% | 0 | 0 | — |
▸case-13 Create a glassmorphism card component for a dark mode weather application. Designers frequently drop background contrast too low (`rgba(255, 255, 255, 0.05)` with light grey text) failing legibility checks. Provide the HTML and CSS. | pass→pass | 20,225 | 23,742 | +17% | 1 | 1 | 0% | 4,624 | 6,559 | +42% | 0 | 0 | — |
▸case-14 Implement a desktop site header navigation bar with active state pill indicators in React and CSS. Standard implementations apply linear transitions with 400ms duration on hover. Write the component code. | fail→pass | 15,922 | 16,884 | +6% | 1 | 1 | 0% | 3,907 | 3,873 | -1% | 0 | 0 | — |
▸case-15 Design the hero section typography for a creative director's portfolio site. Many developers default to standard browser fonts like Arial or Roboto with uniform font weights. Write the HTML and CSS styling for the title and bio. | pass→pass | 14,989 | 22,481 | +50% | 1 | 1 | 0% | 2,963 | 5,539 | +87% | 0 | 0 | — |
▸case-16 Create a 3-tier pricing table section in HTML/CSS for a cloud platform. Standard templates align all three pricing cards in an identical symmetrical row with equal heights and padding. Write the layout structure and CSS. | fail→pass | 24,438 | 25,985 | +6% | 1 | 1 | 0% | 6,184 | 6,542 | +6% | 0 | 0 | — |
▸case-17 Build an animated toast notification component in Tailwind CSS. Standard libraries use `transition-all duration-400 ease-linear` for sliding notifications into view. Supply the component markup and transition configuration. | fail→fail | 11,362 | 17,987 | +58% | 1 | 1 | 0% | 2,546 | 4,356 | +71% | 0 | 0 | — |
▸case-18 Design an onboarding input form with custom floating labels and focus borders in CSS. Common bootstrap-style templates use bright raw blue (#0000FF) focus rings and generic sans-serif text. Produce the CSS rules. | pass→fail | 14,588 | 21,258 | +46% | 1 | 1 | 0% | 3,438 | 5,440 | +58% | 0 | 0 | — |
▸case-19 Develop an interactive tabbed content component in React and CSS for a settings page. Typical implementations use simple linear fade transitions taking 500ms. Provide the React component code and CSS. | fail→fail | 18,193 | 26,110 | +44% | 1 | 1 | 0% | 4,527 | 6,537 | +44% | 0 | 0 | — |
▸case-20 Create a set of status badge components (Success, Warning, Error) for an admin dashboard in CSS. Standard basic code uses raw pure green (#00FF00), pure yellow (#FFFF00), and pure red (#FF0000). Write the CSS design token classes. | fail→fail | 11,341 | 19,232 | +70% | 1 | 1 | 0% | 2,957 | 5,072 | +72% | 0 | 0 | — |
▸case-21 Design a mobile slide-out drawer menu in HTML, CSS, and JavaScript. Standard quick builds set drawer transitions to `transform 0.4s ease-in-out`. Supply the code for the drawer and backdrop. | fail→fail | 13,138 | 23,948 | +82% | 1 | 1 | 0% | 3,379 | 6,544 | +94% | 0 | 0 | — |
▸case-22 Design a video media card component with hover elevation in CSS. Common implementations use basic `box-shadow` on hover with linear 400ms transition. Provide the CSS code. | pass→fail | 12,338 | 23,107 | +87% | 1 | 1 | 0% | 3,001 | 6,108 | +104% | 0 | 0 | — |