{
  "context": "This criteria evaluates how well the engineer uses Slidev's component auto-import feature to create and use custom Vue components in a presentation without explicit imports.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Component file location",
      "description": "The HighlightBox.vue component file is placed in the components/ directory at the root of the project, which enables Slidev's auto-import mechanism.",
      "max_score": 25
    },
    {
      "name": "Vue component structure",
      "description": "The HighlightBox component is properly structured as a Vue 3 component using <script setup> (or Options API), <template>, and optionally <style>.",
      "max_score": 15
    },
    {
      "name": "Props definition",
      "description": "The component uses defineProps() (Composition API) or props option (Options API) to define a 'title' prop of type string.",
      "max_score": 15
    },
    {
      "name": "Slot usage",
      "description": "The component uses <slot> or <slot /> in the template to render default slot content passed by parent slides.",
      "max_score": 15
    },
    {
      "name": "Component usage in slides",
      "description": "The slides.md file uses <HighlightBox> component directly without any import statements, demonstrating understanding of Slidev's auto-import feature.",
      "max_score": 20
    },
    {
      "name": "Multiple slide usage",
      "description": "At least two separate slides use the HighlightBox component, showing that auto-imported components are available throughout the presentation.",
      "max_score": 10
    }
  ]
}