Implement frontend designs from figma using Chakra UI v3 and Storybook
92
92%
Does it follow best practices?
Impact
92%
1.64xAverage score across 6 eval scenarios
Advisory
Suggest reviewing before use
{
"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
}
]
}