{
  "context": "Evaluates how the solution leverages @fortawesome/vue-fontawesome to apply transform strings/objects, incremental rotation, and auto-width behavior on Vue icon components. Scoring checks for proper use of the library props and classes instead of reimplementing transforms with custom CSS or SVG logic.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Icon component",
      "description": "Both primary and secondary icons render through the package's FontAwesomeIcon component (no hand-built SVG) so library transforms and classes apply.",
      "max_score": 15
    },
    {
      "name": "String transform",
      "description": "Primary icon passes the provided string into the FontAwesomeIcon transform prop (letting @fortawesome/vue-fontawesome parse values like \"shrink-4 right-6\") instead of applying equivalent CSS manually.",
      "max_score": 20
    },
    {
      "name": "Object transform",
      "description": "Secondary icon feeds an object into the transform prop (fields such as rotate/x/y/size) and relies on the library's transform parsing rather than custom math or inline styles.",
      "max_score": 25
    },
    {
      "name": "Incremental rotation",
      "description": "Cumulative rotation steps are implemented by updating the transform.rotate value and enabling the rotateBy flag (so the fa-rotate-by class is emitted) instead of using CSS rotate or the fixed rotation prop alone.",
      "max_score": 20
    },
    {
      "name": "Auto width toggle",
      "description": "Auto-width behavior switches via the widthAuto prop on FontAwesomeIcon (expecting the fa-width-auto class) rather than custom width styles or manual class names.",
      "max_score": 20
    }
  ]
}