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 36 counted, under 7 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, read_file 1,091 146 $0.0002 1 read_file 1,619 160 $0.0002 2 write_file 1,808 4,309 $0.0023 3
Output cap The provider's default 3
4 import { css } from "styled-system/css";
5 import data from "./fixture.json";
6
7 type FieldName =
8 | "dateOfBirth"
9 | "nationality"
10 | "countryOfResidence"
11 | "taxId"
12 | "documentType"
13 | "documentNumber"
14 | "isPep";
15
16 type FormValues = Record<FieldName, string>;
17
18 const EMPTY_VALUES: FormValues = {
19 dateOfBirth: "",
20 nationality: "",
21 countryOfResidence: "",
22 taxId: "",
23 documentType: "",
24 documentNumber: "",
25 isPep: "",
26 };
27
28 const FIELD_LABELS: Record<FieldName, string> = {
29 dateOfBirth: "Date of birth",
30 nationality: "Nationality",
31 countryOfResidence: "Country of residence",
32 taxId: "Tax identification number",
33 documentType: "Type of identity document",
34 documentNumber: "Document number",
35 isPep: "Are you a politically exposed person (PEP)?",
36 };
37
38 const FIELD_ORDER: FieldName[] = [
39 "dateOfBirth",
40 "nationality",
41 "countryOfResidence",
42 "taxId",
43 "documentType",
44 "documentNumber",
45 "isPep",
46 ];
47
48 const countries = data.countries;
49 const documentTypes = data.documentTypes;
50
51 const pageStyles = css({
52 maxWidth: "560px",
53 margin: "0 auto",
54 padding: "32px 16px",
55 fontFamily: "inherit",
56 });
57
58 const titleStyles = css({
59 fontSize: "24px",
60 fontWeight: "semibold",
61 marginBottom: "16px",
62 });
63
64 const summaryStyles = css({
65 marginBottom: "24px",
66 padding: "12px 16px",
67 borderRadius: "8px",
68 background: "neutral.2",
69 });
70
71 const formStyles = css({
72 display: "flex",
73 flexDirection: "column",
74 gap: "16px",
75 });
76
77 const fieldStyles = css({
78 display: "flex",
79 flexDirection: "column",
80 gap: "4px",
81 });
82
83 const labelStyles = css({
84 fontSize: "14px",
85 fontWeight: "medium",
86 });
87
88 const inputStyles = css({
89 padding: "8px 12px",
90 borderRadius: "6px",
91 border: "1px solid",
92 borderColor: "neutral.6",
93 fontSize: "16px",
94 });
95
96 const inputErrorStyles = css({
97 borderColor: "red.9",
98 });
99
100 const errorTextStyles = css({
101 fontSize: "13px",
102 color: "red.9",
103 });
104
105 const radioGroupStyles = css({
106 display: "flex",
107 gap: "16px",
108 });
109
110 const buttonStyles = css({
111 padding: "10px 16px",
112 borderRadius: "6px",
113 border: "none",
114 background: "accent.9",
115 color: "white",
116 fontWeight: "semibold",
117 cursor: "pointer",
118 alignSelf: "flex-start",
119 });
120
121 const messageStyles = css({
122 padding: "16px",
123 borderRadius: "8px",
124 background: "neutral.2",
125 fontSize: "16px",
126 });
127
128 export default function IdentityVerificationPage() {
129 const [values, setValues] = useState<FormValues>(EMPTY_VALUES);
130 const [errors, setErrors] = useState<Partial<Record<FieldName, string>>>({});
131 const [submitted, setSubmitted] = useState(false);
132
133 const { firstName, lastName, email } = data.customer;
134
135 function setValue(name: FieldName, value: string) {
136 setValues((prev) => ({ ...prev, [name]: value }));
137 if (errors[name]) {
138 setErrors((prev) => {
139 const next = { ...prev };
140 delete next[name];
141 return next;
142 });
143 }
144 }
145
146 function handleSubmit(event: FormEvent<HTMLFormElement>) {
147 event.preventDefault();
148
149 const nextErrors: Partial<Record<FieldName, string>> = {};
150 for (const name of FIELD_ORDER) {
151 if (values[name].trim() === "") {
152 nextErrors[name] = `${FIELD_LABELS[name]} is required.`;
153 }
154 }
155
156 setErrors(nextErrors);
157 if (Object.keys(nextErrors).length === 0) {
158 setSubmitted(true);
159 }
160 }
161
162 if (submitted) {
163 return (
164 <main className={pageStyles}>
165 <h1 className={titleStyles}>Identity verification</h1>
166 <p className={messageStyles}>
167 Thank you, {firstName}. Your identity details are being reviewed. We will
168 be in touch at {email} once the review is complete.
169 </p>
170 </main>
171 );
172 }
173
174 return (
175 <main className={pageStyles}>
176 <h1 className={titleStyles}>Identity verification</h1>
177
178 <section className={summaryStyles} aria-label="Customer details">
179 <div>
180 <strong>Name:</strong> {firstName} {lastName}
181 </div>
182 <div>
183 <strong>Email:</strong> {email}
184 </div>
185 </section>
186
187 <form className={formStyles} onSubmit={handleSubmit} noValidate>
188 <div className={fieldStyles}>
189 <label className={labelStyles} htmlFor="dateOfBirth">
190 {FIELD_LABELS.dateOfBirth}
191 </label>
192 <input
193 id="dateOfBirth"
194 name="dateOfBirth"
195 type="date"
196 value={values.dateOfBirth}
197 onChange={(e) => setValue("dateOfBirth", e.target.value)}
198 aria-invalid={!!errors.dateOfBirth}
199 aria-describedby={errors.dateOfBirth ? "dateOfBirth-error" : undefined}
200 className={`${inputStyles} ${errors.dateOfBirth ? inputErrorStyles : ""}`}
201 />
202 {errors.dateOfBirth && (
203 <span id="dateOfBirth-error" className={errorTextStyles}>
204 {errors.dateOfBirth}
205 </span>
206 )}
207 </div>
208
209 <div className={fieldStyles}>
210 <label className={labelStyles} htmlFor="nationality">
211 {FIELD_LABELS.nationality}
212 </label>
213 <select
214 id="nationality"
215 name="nationality"
216 value={values.nationality}
217 onChange={(e) => setValue("nationality", e.target.value)}
218 aria-invalid={!!errors.nationality}
219 aria-describedby={errors.nationality ? "nationality-error" : undefined}
220 className={`${inputStyles} ${errors.nationality ? inputErrorStyles : ""}`}
221 >
222 <option value="">Select a country</option>
223 {countries.map((country) => (
224 <option key={country.code} value={country.code}>
225 {country.name}
226 </option>
227 ))}
228 </select>
229 {errors.nationality && (
230 <span id="nationality-error" className={errorTextStyles}>
231 {errors.nationality}
232 </span>
233 )}
234 </div>
235
236 <div className={fieldStyles}>
237 <label className={labelStyles} htmlFor="countryOfResidence">
238 {FIELD_LABELS.countryOfResidence}
239 </label>
240 <select
241 id="countryOfResidence"
242 name="countryOfResidence"
243 value={values.countryOfResidence}
244 onChange={(e) => setValue("countryOfResidence", e.target.value)}
245 aria-invalid={!!errors.countryOfResidence}
246 aria-describedby={
247 errors.countryOfResidence ? "countryOfResidence-error" : undefined
248 }
249 className={`${inputStyles} ${errors.countryOfResidence ? inputErrorStyles : ""}`}
250 >
251 <option value="">Select a country</option>
252 {countries.map((country) => (
253 <option key={country.code} value={country.code}>
254 {country.name}
255 </option>
256 ))}
257 </select>
258 {errors.countryOfResidence && (
259 <span id="countryOfResidence-error" className={errorTextStyles}>
260 {errors.countryOfResidence}
261 </span>
262 )}
263 </div>
264
265 <div className={fieldStyles}>
266 <label className={labelStyles} htmlFor="taxId">
267 {FIELD_LABELS.taxId}
268 </label>
269 <input
270 id="taxId"
271 name="taxId"
272 type="text"
273 value={values.taxId}
274 onChange={(e) => setValue("taxId", e.target.value)}
275 aria-invalid={!!errors.taxId}
276 aria-describedby={errors.taxId ? "taxId-error" : undefined}
277 className={`${inputStyles} ${errors.taxId ? inputErrorStyles : ""}`}
278 />
279 {errors.taxId && (
280 <span id="taxId-error" className={errorTextStyles}>
281 {errors.taxId}
282 </span>
283 )}
284 </div>
285
286 <div className={fieldStyles}>
287 <label className={labelStyles} htmlFor="documentType">
288 {FIELD_LABELS.documentType}
289 </label>
290 <select
291 id="documentType"
292 name="documentType"
293 value={values.documentType}
294 onChange={(e) => setValue("documentType", e.target.value)}
295 aria-invalid={!!errors.documentType}
296 aria-describedby={errors.documentType ? "documentType-error" : undefined}
297 className={`${inputStyles} ${errors.documentType ? inputErrorStyles : ""}`}
298 >
299 <option value="">Select a document type</option>
300 {documentTypes.map((type) => (
301 <option key={type.value} value={type.value}>
302 {type.label}
303 </option>
304 ))}
305 </select>
306 {errors.documentType && (
307 <span id="documentType-error" className={errorTextStyles}>
308 {errors.documentType}
309 </span>
310 )}
311 </div>
312
313 <div className={fieldStyles}>
314 <label className={labelStyles} htmlFor="documentNumber">
315 {FIELD_LABELS.documentNumber}
316 </label>
317 <input
318 id="documentNumber"
319 name="documentNumber"
320 type="text"
321 value={values.documentNumber}
322 onChange={(e) => setValue("documentNumber", e.target.value)}
323 aria-invalid={!!errors.documentNumber}
324 aria-describedby={errors.documentNumber ? "documentNumber-error" : undefined}
325 className={`${inputStyles} ${errors.documentNumber ? inputErrorStyles : ""}`}
326 />
327 {errors.documentNumber && (
328 <span id="documentNumber-error" className={errorTextStyles}>
329 {errors.documentNumber}
330 </span>
331 )}
332 </div>
333
334 <fieldset className={fieldStyles} style={{ border: "none", padding: 0, margin: 0 }}>
335 <legend className={labelStyles}>{FIELD_LABELS.isPep}</legend>
336 <div className={radioGroupStyles}>
337 <label>
338 <input
339 type="radio"
340 name="isPep"
341 value="yes"
342 checked={values.isPep === "yes"}
343 onChange={() => setValue("isPep", "yes")}
344 />{" "}
345 Yes
346 </label>
347 <label>
348 <input
349 type="radio"
350 name="isPep"
351 value="no"
352 checked={values.isPep === "no"}
353 onChange={() => setValue("isPep", "no")}
354 />{" "}
355 No
356 </label>
357 </div>
358 {errors.isPep && (
359 <span id="isPep-error" className={errorTextStyles}>
360 {errors.isPep}
361 </span>
362 )}
363 </fieldset>
364
365 <button type="submit" className={buttonStyles}>
366 Submit
367 </button>
368 </form>
369 </main>
370 );
371 }
372
`16px` is a raw length. Use a token.
components/native-element 9 design-system page.tsx:192: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:240:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:269:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:290:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:317:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:338:15 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:348:15 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:365:9 · <button> `<button>` has a design-system equivalent: use `Button` from `@vektos/ds`. Every run that broke components/native-element a11y/color-contrast 1 quality page.tsx:1:1 · <button type="submit" class="p_10px_16px bdr_6px bd_none bg_accent.9 c_white fw_semibold cursor_pointer as_flex-start">S Elements must meet minimum color contrast ratio thresholds (1 element, light theme) Every run that broke a11y/color-contrast raw-values/raw-color 1 design-system typecheck/TS2769 1 quality