{
  "context": "This evaluation assesses how well the engineer uses Stencil's decorator system to create a web component. The focus is on correct usage of decorators for component definition, properties, state, events, methods, and reactivity patterns.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Component decorator usage",
      "description": "Uses @Component decorator with correct tag name 'user-profile' and shadow: true configuration",
      "max_score": 15
    },
    {
      "name": "Property decorators",
      "description": "Uses @Prop decorator for userId with { reflect: true } option, and @Prop for displayMode with correct type and default value",
      "max_score": 20
    },
    {
      "name": "State decorator",
      "description": "Uses @State decorator for internal isLoading state that triggers re-renders without being exposed as a public property",
      "max_score": 10
    },
    {
      "name": "Event decorator",
      "description": "Uses @Event decorator to define profileLoaded event emitter with correct type EventEmitter<{userId: string}>",
      "max_score": 15
    },
    {
      "name": "Method decorator",
      "description": "Uses @Method decorator on the loadProfile method to expose it as a public async method on the custom element",
      "max_score": 10
    },
    {
      "name": "Watch decorator",
      "description": "Uses @Watch decorator on a handler method with 'userId' parameter to automatically call loadProfile when userId changes",
      "max_score": 15
    },
    {
      "name": "Listen decorator",
      "description": "Uses @Listen decorator with 'refresh' event name to handle refresh events on the host element",
      "max_score": 10
    },
    {
      "name": "Event emission",
      "description": "Correctly emits the profileLoaded event using the EventEmitter's emit() method in the loadProfile method",
      "max_score": 5
    }
  ]
}