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-1/

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

evals

scenario-1

criteria.json

task.md

SKILL.md

tile.json