{
  "context": "Tests whether the agent creates component variants by extending a base styled component using styled(Base) rather than re-declaring each variant independently with styled.x, and whether files follow the .styles.js co-location convention.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Base uses styled.x",
      "description": "The base container component is declared using styled.div (or another HTML element) — e.g., styled.section, styled.article",
      "max_score": 10
    },
    {
      "name": "Variants use styled(Base)",
      "description": "At least two variant components are created using styled(BaseComponent) — extending the base, not re-declaring with styled.div",
      "max_score": 15
    },
    {
      "name": "No variant redeclares styled.x",
      "description": "No variant component (e.g., WideContainer, NarrowContainer) declares itself with styled.div or other styled.x — all variants extend the base",
      "max_score": 15
    },
    {
      "name": "@emotion/styled import",
      "description": "styled is imported from '@emotion/styled'",
      "max_score": 10
    },
    {
      "name": "No styled-components import",
      "description": "No file imports anything from 'styled-components'",
      "max_score": 8
    },
    {
      "name": ".styles.js file naming",
      "description": "Styled exports are placed in a file named <Component>.styles.js",
      "max_score": 10
    },
    {
      "name": "Modifier prefix naming",
      "description": "Variant names use a <Modifier><Base> pattern (e.g., WideContainer, NarrowContainer, BannerContainer)",
      "max_score": 12
    },
    {
      "name": "css from @emotion/react",
      "description": "If css template literals are used, css is imported from '@emotion/react' (not styled-components)",
      "max_score": 10
    },
    {
      "name": "At least 2 variants",
      "description": "At least two distinct variants are defined extending the same base component",
      "max_score": 10
    }
  ]
}