Runs / kyc-form Batch Runs from different design-system versions should not be compared.
The page A screenshot in each theme, as the benchmark took it.
page.tsx As the agent left it; marked lines broke a rule.
Violations 47 counted, under 9 rules. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment.
Steps One row per model call, with the tools it asked for. An agent that reads the guidelines before writing shows it here; what a checker or submit_view answered is under its call.
Step Tools Tokens in Tokens out Cost 0 list_files 166 32 $0.0000 1 read_file 84 34 $0.0000 2 list_files 504 28 $0.0000 3
Output cap The provider's default 3
4 import { css } from "styled-system/css";
5 import data from "./fixture.json";
6
7 type FormValues = {
8 dateOfBirth: string;
9 nationality: string;
10 countryOfResidence: string;
11 taxId: string;
12 documentType: string;
13 documentNumber: string;
14 pep: string;
15 };
16
17 const initialValues: FormValues = {
18 dateOfBirth: "",
19 nationality: "",
20 countryOfResidence: "",
21 taxId: "",
22 documentType: "",
23 documentNumber: "",
24 pep: "",
25 };
26
27 export default function Page() {
28 const [values, setValues] = useState<FormValues>(initialValues);
29 const [errors, setErrors] = useState<Partial<Record<keyof FormValues, string>>>({});
30 const [reviewing, setReviewing] = useState(false);
31
32 function handleChange<K extends keyof FormValues>(key: K, value: string) {
33 setValues((prev) => ({ ...prev, [key]: value }));
34 if (errors[key]) {
35 setErrors((prev) => ({ ...prev, [key]: undefined }));
36 }
37 }
38
39 function validate() {
40 const next: Partial<Record<keyof FormValues, string>> = {};
41 if (!values.dateOfBirth) next.dateOfBirth = "This field is required.";
42 if (!values.nationality) next.nationality = "This field is required.";
43 if (!values.countryOfResidence) next.countryOfResidence = "This field is required.";
44 if (!values.taxId) next.taxId = "This field is required.";
45 if (!values.documentType) next.documentType = "This field is required.";
46 if (!values.documentNumber) next.documentNumber = "This field is required.";
47 if (!values.pep) next.pep = "This field is required.";
48 setErrors(next);
49 return Object.keys(next).length === 0;
50 }
51
52 function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
53 e.preventDefault();
54 if (validate()) setReviewing(true);
55 }
56
57 const customer = data.customer;
58
59 if (reviewing) {
60 return (
61 <main
62 className={css({
63 maxW: "640px",
64 mx: "auto",
65 p: "8",
66 })}
67 >
68 <p className={css({ fontSize: "lg", fontWeight: "medium" })}>
69 Your details are being reviewed.
70 </p>
71 </main>
72 );
73 }
74
75 const fieldError = (key: keyof FormValues) =>
76 errors[key] ? (
77 <span
78 className={css({ color: "red.600", fontSize: "sm", mt: "1" })}
79 role="alert"
80 >
81 {errors[key]}
82 </span>
83 ) : null;
84
85 return (
86 <main
87 className={css({
88 maxW: "640px",
89 mx: "auto",
90 p: "8",
91 })}
92 >
93 <h1 className={css({ fontSize: "2xl", fontWeight: "bold", mb: "6" })}>
94 Identity verification
95 </h1>
96
97 <section className={css({ mb: "6" })}>
98 <p className={css({ mb: "1" })}>
99 <strong>Name:</strong> {customer.firstName} {customer.lastName}
100 </p>
101 <p className={css({ mb: "1" })}>
102 <strong>Email:</strong> {customer.email}
103 </p>
104 </section>
105
106 <form onSubmit={handleSubmit} noValidate className={css({ display: "flex", flexDirection: "column", gap: "4" })}>
107 <div className={css({ display: "flex", flexDirection: "column" })}>
108 <label htmlFor="dateOfBirth" className={css({ mb: "1", fontWeight: "medium" })}>
109 Date of birth
110 </label>
111 <input
112 id="dateOfBirth"
113 type="date"
114 value={values.dateOfBirth}
115 onChange={(e) => handleChange("dateOfBirth", e.target.value)}
116 className={css({ border: "1px solid", borderColor: "gray.300", p: "2", rounded: "md" })}
117 />
118 {fieldError("dateOfBirth")}
119 </div>
120
121 <div className={css({ display: "flex", flexDirection: "column" })}>
122 <label htmlFor="nationality" className={css({ mb: "1", fontWeight: "medium" })}>
123 Nationality
124 </label>
125 <select
126 id="nationality"
127 value={values.nationality}
128 onChange={(e) => handleChange("nationality", e.target.value)}
129 className={css({ border: "1px solid", borderColor: "gray.300", p: "2", rounded: "md" })}
130 >
131 <option value="">Select nationality</option>
132 {data.countries.map((c) => (
133 <option key={c.code} value={c.code}>
134 {c.name}
135 </option>
136 ))}
137 </select>
138 {fieldError("nationality")}
139 </div>
140
141 <div className={css({ display: "flex", flexDirection: "column" })}>
142 <label htmlFor="countryOfResidence" className={css({ mb: "1", fontWeight: "medium" })}>
143 Country of residence
144 </label>
145 <select
146 id="countryOfResidence"
147 value={values.countryOfResidence}
148 onChange={(e) => handleChange("countryOfResidence", e.target.value)}
149 className={css({ border: "1px solid", borderColor: "gray.300", p: "2", rounded: "md" })}
150 >
151 <option value="">Select country</option>
152 {data.countries.map((c) => (
153 <option key={c.code} value={c.code}>
154 {c.name}
155 </option>
156 ))}
157 </select>
158 {fieldError("countryOfResidence")}
159 </div>
160
161 <div className={css({ display: "flex", flexDirection: "column" })}>
162 <label htmlFor="taxId" className={css({ mb: "1", fontWeight: "medium" })}>
163 Tax identification number
164 </label>
165 <input
166 id="taxId"
167 type="text"
168 value={values.taxId}
169 onChange={(e) => handleChange("taxId", e.target.value)}
170 className={css({ border: "1px solid", borderColor: "gray.300", p: "2", rounded: "md" })}
171 />
172 {fieldError("taxId")}
173 </div>
174
175 <div className={css({ display: "flex", flexDirection: "column" })}>
176 <label htmlFor="documentType" className={css({ mb: "1", fontWeight: "medium" })}>
177 Type of identity document
178 </label>
179 <select
180 id="documentType"
181 value={values.documentType}
182 onChange={(e) => handleChange("documentType", e.target.value)}
183 className={css({ border: "1px solid", borderColor: "gray.300", p: "2", rounded: "md" })}
184 >
185 <option value="">Select document type</option>
186 {data.documentTypes.map((d) => (
187 <option key={d.value} value={d.value}>
188 {d.label}
189 </option>
190 ))}
191 </select>
192 {fieldError("documentType")}
193 </div>
194
195 <div className={css({ display: "flex", flexDirection: "column" })}>
196 <label htmlFor="documentNumber" className={css({ mb: "1", fontWeight: "medium" })}>
197 Document number
198 </label>
199 <input
200 id="documentNumber"
201 type="text"
202 value={values.documentNumber}
203 onChange={(e) => handleChange("documentNumber", e.target.value)}
204 className={css({ border: "1px solid", borderColor: "gray.300", p: "2", rounded: "md" })}
205 />
206 {fieldError("documentNumber")}
207 </div>
208
209 <div className={css({ display: "flex", flexDirection: "column" })}>
210 <label htmlFor="pep" className={css({ mb: "1", fontWeight: "medium" })}>
211 Politically exposed person
212 </label>
213 <select
214 id="pep"
215 value={values.pep}
216 onChange={(e) => handleChange("pep", e.target.value)}
217 className={css({ border: "1px solid", borderColor: "gray.300", p: "2", rounded: "md" })}
218 >
219 <option value="">Select</option>
220 <option value="yes">Yes</option>
221 <option value="no">No</option>
222 </select>
223 <div className={css({ display: "flex", gap: "4", mt: "2" })}>
224 <label className={css({ display: "flex", alignItems: "center", gap: "1" })}>
225 <input
226 type="radio"
227 name="pep-radio"
228 value="yes"
229 checked={values.pep === "yes"}
230 onChange={() => handleChange("pep", "yes")}
231 />
232 Yes
233 </label>
234 <label className={css({ display: "flex", alignItems: "center", gap: "1" })}>
235 <input
236 type="radio"
237 name="pep-radio"
238 value="no"
239 checked={values.pep === "no"}
240 onChange={() => handleChange("pep", "no")}
241 />
242 No
243 </label>
244 </div>
245 {fieldError("pep")}
246 </div>
247
248 <button
249 type="submit"
250 className={css({
251 bg: "blue.600",
252 color: "white",
253 p: "2",
254 rounded: "md",
255 fontWeight: "medium",
256 cursor: "pointer",
257 _hover: { bg: "blue.700" },
258 })}
259 >
260 Submit
261 </button>
262 </form>
263 </main>
264 );
265 }
266
Use the logical property "marginBlockEnd" instead of the physical "marginBottom".
page.tsx:162:51 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:176:58 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:196:60 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:210:49 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:223:60 Use the logical property "marginBlockStart" instead of the physical "marginTop". components/native-element 10 design-system page.tsx:111:11 · <input> `<input>` has a design-system equivalent: use `DatePicker` from `@vektos/ds`. page.tsx:125:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:145:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:165:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:179:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:199:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:213:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:225:15 · <input> `<input>` has a design-system equivalent: use `RadioGroup` from `@vektos/ds`. page.tsx:235:15 · <input> `<input>` has a design-system equivalent: use `RadioGroup` from `@vektos/ds`. page.tsx:248:9 · <button> `<button>` has a design-system equivalent: use `Button` from `@vektos/ds`. Every run that broke components/native-element token-roles/palette 10 design-system page.tsx:78:33 · red.600 `red.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:116:64 · gray.300 `gray.300` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:129:64 · gray.300 `gray.300` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:149:64 · gray.300 `gray.300` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:170:64 · gray.300 `gray.300` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:183:64 · gray.300 `gray.300` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:204:64 · gray.300 `gray.300` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:217:64 · gray.300 `gray.300` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:251:17 · blue.600 `blue.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:257:27 · blue.700 `blue.700` is a palette shade: it ignores the theme. Use a semantic color token. Every run that broke token-roles/palette raw-values/raw-length 9 design-system a11y/color-contrast 1 quality page.tsx:1:1 · <button type="submit" class="bg_blue.600 c_white p_2 bdr_md fw_medium cursor_pointer hover:bg_blue.700">Submit</button> Elements must meet minimum color contrast ratio thresholds (1 element, light theme) Every run that broke a11y/color-contrast lint/typescript(no-unnecessary-type-parameters) 1 quality raw-values/raw-color 1 design-system typecheck/TS2769 0 quality 6 list_files 1,005 27 $0.0000
18 write_file 1,763 3,857 $0.0000
19 write_file 3,980 3,691 $0.0000