likethemammal/emotion-required
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
Evaluation results
100%
64%Call-to-Action Button Component
Button hover/active state color math
Emotion styled import
0%
100%
No styled-components import
0%
100%
polished imported
0%
100%
No chroma-js
100%
100%
Hover darken delta 0.03
0%
100%
Active darken delta 0.05
0%
100%
State math in helper function
100%
100%
css from @emotion/react
0%
100%
&:hover selector present
100%
100%
&:active selector present
100%
100%
73%
16%Theme-Aware Storybook Decorator
StylingProviders vs raw ThemeProvider
StylingProviders import
0%
0%
No Emotion ThemeProvider direct use
100%
53%
No styled-components ThemeProvider
100%
100%
No styled-components imports
100%
100%
StylingProviders as wrapper
0%
100%
styled from @emotion/styled
100%
100%
css from @emotion/react
100%
100%
No direct WebFontProvider
100%
100%
Theme passed to StylingProviders
0%
100%
100%
18%Page Layout Container Variants
styled(Base) variant extension pattern
Base uses styled.x
100%
100%
Variants use styled(Base)
100%
100%
No variant redeclares styled.x
100%
100%
@emotion/styled import
0%
100%
No styled-components import
0%
100%
.styles.js file naming
100%
100%
Modifier prefix naming
100%
100%
css from @emotion/react
100%
100%
At least 2 variants
100%
100%
96%
41%Loading Skeleton Component
keyframes animation via @emotion/react
keyframes from @emotion/react
0%
100%
No styled-components import
0%
100%
keyframes used as tagged template
100%
100%
Animation interpolated in styled block
100%
66%
styled from @emotion/styled
0%
100%
css from @emotion/react
100%
100%
No plain string animation
100%
100%
.styles.js file naming
100%
100%
No chroma-js
100%
100%
- Evaluated
- Agent
- Claude
- Model
- Claude Sonnet 4.6