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 the project-wrapped StylingProviders for theme injection rather than importing and using ThemeProvider directly from Emotion or styled-components.",
"type": "weighted_checklist",
"checklist": [
{
"name": "StylingProviders import",
"description": "StylingProviders is imported from '@codebase/core/components/providers/StylingProviders'",
"max_score": 20
},
{
"name": "No Emotion ThemeProvider direct use",
"description": "ThemeProvider is NOT imported directly from '@emotion/react' and used as a standalone wrapper",
"max_score": 15
},
{
"name": "No styled-components ThemeProvider",
"description": "ThemeProvider is NOT imported from 'styled-components'",
"max_score": 12
},
{
"name": "No styled-components imports",
"description": "No file imports anything from the 'styled-components' package",
"max_score": 8
},
{
"name": "StylingProviders as wrapper",
"description": "StylingProviders is used as the outer JSX wrapper around children (not ThemeProvider or any other provider)",
"max_score": 15
},
{
"name": "styled from @emotion/styled",
"description": "If any styled components are created, styled is imported from '@emotion/styled'",
"max_score": 8
},
{
"name": "css from @emotion/react",
"description": "If any css template literals are used, css is imported from '@emotion/react'",
"max_score": 8
},
{
"name": "No direct WebFontProvider",
"description": "WebFontProvider and GlobalStyles are NOT imported directly — StylingProviders composes them",
"max_score": 7
},
{
"name": "Theme passed to StylingProviders",
"description": "Any theme configuration is passed as a prop to StylingProviders, not to a raw ThemeProvider",
"max_score": 7
}
]
}