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

{
  "context": "Tests whether the agent builds a form field component that integrates correctly with the project's TanStack Form system using useFieldContext and FormFieldWrapper, registers the field in form-hooks, and writes stories with the required form context wrapper and naming conventions.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "useFieldContext used",
      "description": "The component imports and calls `useFieldContext` (from `~/lib/form/form-hooks`) to connect to the form state — not a plain React prop for value/onChange",
      "max_score": 10
    },
    {
      "name": "FormFieldWrapper used",
      "description": "The component wraps its input in `FormFieldWrapper` (imported from a local path) to provide consistent label, error, and helper text rendering",
      "max_score": 10
    },
    {
      "name": "field.handleChange wired",
      "description": "The input element's change handler calls `field.handleChange` — not a local state setter or a custom prop",
      "max_score": 8
    },
    {
      "name": "field.handleBlur wired",
      "description": "The input element's blur handler calls `field.handleBlur`",
      "max_score": 7
    },
    {
      "name": "Registered in form-hooks",
      "description": "The new field is registered in the form-hooks file so it can be accessed as a property on the field object (e.g. `field.RatingField`)",
      "max_score": 9
    },
    {
      "name": "File in form/ directory",
      "description": "The component file is placed inside `src/components/form/RatingField/` — not in `src/components/` directly or elsewhere",
      "max_score": 7
    },
    {
      "name": "Stories use Form context",
      "description": "Each story renders the field inside a minimal form using `useTesslForm` and `Form`, accessing the field via `form.AppField` — not rendering RatingField directly as a standalone component",
      "max_score": 10
    },
    {
      "name": "Components/Form/ title prefix",
      "description": "The Storybook meta title begins with `Components/Form/` (e.g. `Components/Form/RatingField`)",
      "max_score": 8
    },
    {
      "name": "Required story exported",
      "description": "A story named `Required` (or equivalent) is exported showing the required state",
      "max_score": 7
    },
    {
      "name": "Disabled story exported",
      "description": "A story named `Disabled` (or equivalent) is exported showing the disabled state",
      "max_score": 7
    },
    {
      "name": "WithHelper story exported",
      "description": "A story showing the field with helper text is exported",
      "max_score": 7
    },
    {
      "name": "No file extensions in imports",
      "description": "None of the local import statements in any produced file include a `.tsx` or `.ts` extension",
      "max_score": 5
    },
    {
      "name": "Tilde alias used",
      "description": "All project-internal imports use the `~/` alias prefix rather than relative paths (e.g. `~/lib/form/form-hooks` not `../../lib/form/form-hooks`)",
      "max_score": 5
    }
  ]
}

evals

README.md

tile.json