Enforce Emotion (@emotion/styled and @emotion/react) as the only styling library; forbid styled-components usage.
95
97%
Does it follow best practices?
Impact
92%
1.61xAverage score across 4 eval scenarios
Passed
No known issues
{
"context": "Tests whether the agent uses Emotion imports instead of styled-components, applies polished for hover/active color math, and uses the canonical darken deltas (0.03 hover, 0.05 active) when building an interactive button component.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Emotion styled import",
"description": "styled is imported from '@emotion/styled', not from 'styled-components'",
"max_score": 12
},
{
"name": "No styled-components import",
"description": "No import statement references the 'styled-components' package anywhere in the output files",
"max_score": 8
},
{
"name": "polished imported",
"description": "darken (or lighten/transparentize) is imported from 'polished'",
"max_score": 10
},
{
"name": "No chroma-js",
"description": "chroma-js is NOT imported or used for any color manipulation",
"max_score": 8
},
{
"name": "Hover darken delta 0.03",
"description": "The hover state uses darken(0.03, ...) — not a different numeric argument",
"max_score": 12
},
{
"name": "Active darken delta 0.05",
"description": "The active state uses darken(0.05, ...) — not a different numeric argument",
"max_score": 12
},
{
"name": "State math in helper function",
"description": "The hover/active color computation is extracted into a dedicated function (not inlined directly in the template literal string)",
"max_score": 8
},
{
"name": "css from @emotion/react",
"description": "css tagged template is imported from '@emotion/react' when used to return a composable CSS fragment",
"max_score": 10
},
{
"name": "&:hover selector present",
"description": "The output styled component CSS contains a '&:hover' selector rule",
"max_score": 10
},
{
"name": "&:active selector present",
"description": "The output styled component CSS contains a '&:active' selector rule",
"max_score": 10
}
]
}