{
  "context": "Tests whether the agent imports keyframes from @emotion/react (not styled-components), uses it correctly to define CSS animations, and uses the rest of the Emotion stack for the styled components.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "keyframes from @emotion/react",
      "description": "keyframes is imported from '@emotion/react', not from 'styled-components' or any other package",
      "max_score": 20
    },
    {
      "name": "No styled-components import",
      "description": "No file imports anything from 'styled-components'",
      "max_score": 15
    },
    {
      "name": "keyframes used as tagged template",
      "description": "keyframes is called as a tagged template literal (keyframes`...`) to define the animation",
      "max_score": 12
    },
    {
      "name": "Animation interpolated in styled block",
      "description": "The keyframes result is interpolated into a styled component's template literal (e.g., animation: ${shimmer} 1.5s infinite)",
      "max_score": 12
    },
    {
      "name": "styled from @emotion/styled",
      "description": "styled is imported from '@emotion/styled'",
      "max_score": 10
    },
    {
      "name": "css from @emotion/react",
      "description": "If css template literals are used, css is imported from '@emotion/react'",
      "max_score": 8
    },
    {
      "name": "No plain string animation",
      "description": "The animation name is NOT written as a plain string in the CSS — the keyframes variable is used",
      "max_score": 10
    },
    {
      "name": ".styles.js file naming",
      "description": "Styled exports are in a file named with the .styles.js suffix",
      "max_score": 8
    },
    {
      "name": "No chroma-js",
      "description": "chroma-js is NOT imported or used anywhere in the output",
      "max_score": 5
    }
  ]
}