CtrlK
BlogDocsLog inGet started
Tessl Logo

tessleng/ui

Implement frontend designs from figma using Chakra UI v3 and Storybook

92

1.64x
Quality

92%

Does it follow best practices?

Impact

92%

1.64x

Average score across 6 eval scenarios

SecuritybySnyk

Advisory

Suggest reviewing before use

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-3/

{
  "context": "Tests whether the agent writes a Storybook stories file that follows the project's required story conventions: correct meta structure using 'satisfies', the right title prefix, the specified default backgrounds, correct use of Chakra Box in decorators, and a sufficient set of story variants covering meaningful states.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "satisfies Meta pattern",
      "description": "The meta object uses `satisfies Meta<typeof ComponentName>` syntax — not a plain type annotation or type cast",
      "max_score": 10
    },
    {
      "name": "Components/ title prefix",
      "description": "The story title begins with 'Components/' (e.g., 'Components/Feedback/AlertBanner') matching the folder structure",
      "max_score": 8
    },
    {
      "name": "Dark background default",
      "description": "The story parameters include `backgrounds: { default: 'dark' }`",
      "max_score": 8
    },
    {
      "name": "Box in decorator, not div",
      "description": "Story decorators use Chakra's `Box` component for layout wrapping — no raw HTML `<div>` elements in decorator JSX",
      "max_score": 10
    },
    {
      "name": "Default story exported",
      "description": "A story named `Default` is exported with representative args",
      "max_score": 8
    },
    {
      "name": "Loading story exported",
      "description": "A story named `Loading` (or similar loading state) is exported",
      "max_score": 7
    },
    {
      "name": "Empty/null story exported",
      "description": "A story representing an empty, null, or no-data state is exported",
      "max_score": 7
    },
    {
      "name": "Error or edge case story exported",
      "description": "A story representing an error state or edge case (long text, boundary values, missing data) is exported",
      "max_score": 7
    },
    {
      "name": "Args for prop variations",
      "description": "Story variations use `args` to pass different props — `render` is used sparingly and only when custom JSX wrapping is required",
      "max_score": 8
    },
    {
      "name": "Story file co-located",
      "description": "The .stories.tsx file is placed in the same directory as the component file it tests",
      "max_score": 8
    },
    {
      "name": "Correct storybook-react-vite import",
      "description": "Meta and StoryObj types are imported from '@storybook/react-vite' (not '@storybook/react' or other variants)",
      "max_score": 9
    },
    {
      "name": "Type Story alias defined",
      "description": "A `type Story = StoryObj<typeof meta>` alias is defined and used for all story exports",
      "max_score": 10
    }
  ]
}

evals

README.md

tile.json