CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-material--layout-grid

The Material Components for the web layout grid component

94

1.16x
Quality

Pending

Does it follow best practices?

Impact

94%

1.16x

Average score across 10 eval scenarios

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

criteria.jsonevals/scenario-7/

{
  "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
    }
  ]
}

tile.json