docs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10
{
"context": "This evaluation assesses the engineer's proficiency in using @material/layout-grid's advanced Sass mixins and functions, specifically the fixed-column-width mixin for creating custom grid layouts and the breakpoint-min/breakpoint-max functions for building responsive utilities.",
"type": "weighted_checklist",
"checklist": [
{
"name": "breakpoint-min usage",
"description": "Uses the breakpoint-min() function from @material/layout-grid to retrieve the minimum viewport width for device sizes (desktop, tablet, phone) in media queries or responsive utility classes.",
"max_score": 25
},
{
"name": "breakpoint-max usage",
"description": "Uses the breakpoint-max() function from @material/layout-grid to retrieve the maximum viewport width for device sizes when defining breakpoint-specific styles or utility classes.",
"max_score": 25
},
{
"name": "fixed-column-width mixin",
"description": "Uses the fixed-column-width($size, $margin, $gutter, $column-width) mixin from @material/layout-grid to generate fixed-width grid styles with specified column widths (80px desktop, 60px tablet, 50px phone) instead of implementing custom percentage-based widths.",
"max_score": 40
},
{
"name": "Responsive implementation",
"description": "Correctly implements responsive behavior across all three device sizes (desktop, tablet, phone) using the package's breakpoint system, ensuring utility classes and grid variants respond appropriately at the correct viewport thresholds.",
"max_score": 10
}
]
}