{
  "context": "This evaluation assesses the engineer's ability to use Storybook's Next.js integration features for creating stories that demonstrate optimized image handling. The focus is on proper usage of Next.js-specific image components and Storybook's story format to showcase image optimization, placeholder behavior, and loading priorities.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Next.js Image Component",
      "description": "Uses next/image component (or next/legacy/image for older versions) in the ProductCard component for optimized image rendering",
      "max_score": 25
    },
    {
      "name": "Story Format Structure",
      "description": "Implements proper Component Story Format (CSF) with default export containing title and component properties, and named exports for individual stories",
      "max_score": 15
    },
    {
      "name": "Blur Placeholder Configuration",
      "description": "Configures blur placeholder behavior using placeholder prop (e.g., placeholder='blur' or placeholder='empty') in at least one story to demonstrate loading states",
      "max_score": 20
    },
    {
      "name": "Priority Loading",
      "description": "Demonstrates priority prop usage with at least one story using priority={true} for above-the-fold images and another using default/standard priority loading",
      "max_score": 20
    },
    {
      "name": "Story Args Configuration",
      "description": "Uses Storybook args system to configure story variants, passing different props to demonstrate various image configurations",
      "max_score": 10
    },
    {
      "name": "Image Sizing Properties",
      "description": "Properly configures image dimensions using width/height props, fill prop, or sizes prop appropriate for responsive images",
      "max_score": 10
    }
  ]
}