CtrlK
BlogDocsLog inGet started
Tessl Logo

likethemammal/emotion-required

Enforce Emotion (@emotion/styled and @emotion/react) as the only styling library; forbid styled-components usage.

95

1.61x
Quality

97%

Does it follow best practices?

Impact

92%

1.61x

Average score across 4 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-2/

{
  "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
    }
  ]
}

evals

SKILL.md

tile.json