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