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 57 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 38 32 $0.0000 1 read_file 340 29 $0.0000 2 list_files 371 29 $0.0000 3
Output cap 20,000 tokens a step 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 isPep: string;
15 };
16
17 const initialValues: FormValues = {
18 dateOfBirth: "",
19 nationality: "",
20 countryOfResidence: "",
21 taxId: "",
22 documentType: "",
23 documentNumber: "",
24 isPep: "",
25 };
26
27 export default function IdentityVerificationPage() {
28 const { customer, countries, documentTypes } = data;
29
30 const [values, setValues] = useState<FormValues>(initialValues);
31 const [errors, setErrors] = useState<Partial<Record<keyof FormValues, string>>>({});
32 const [isSubmitted, setIsSubmitted] = useState(false);
33
34 const setField = (field: keyof FormValues, value: string) => {
35 setValues((prev) => ({ ...prev, [field]: value }));
36 if (errors[field]) {
37 setErrors((prev) => {
38 const next = { ...prev };
39 delete next[field];
40 return next;
41 });
42 }
43 };
44
45 const validate = (): Partial<Record<keyof FormValues, string>> => {
46 const next: Partial<Record<keyof FormValues, string>> = {};
47 (Object.keys(values) as (keyof FormValues)[]).forEach((key) => {
48 if (!values[key].trim()) {
49 next[key] = "This field is required.";
50 }
51 });
52 return next;
53 };
54
55 const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
56 event.preventDefault();
57 const nextErrors = validate();
58 setErrors(nextErrors);
59 if (Object.keys(nextErrors).length === 0) {
60 setIsSubmitted(true);
61 }
62 };
63
64 if (isSubmitted) {
65 return (
66 <main
67 className={css({
68 maxWidth: "640px",
69 margin: "0 auto",
70 padding: "2rem",
71 })}
72 >
73 <p className={css({ fontSize: "lg", fontWeight: "medium" })}>
74 Your details are being reviewed.
75 </p>
76 </main>
77 );
78 }
79
80 const fieldError = (field: keyof FormValues) =>
81 errors[field] ? (
82 <p
83 id={`${field}-error`}
84 role="alert"
85 className={css({ color: "red.600", fontSize: "sm", marginTop: "0.25rem" })}
86 >
87 {errors[field]}
88 </p>
89 ) : null;
90
91 const inputClass = (field: keyof FormValues) =>
92 css({
93 width: "100%",
94 padding: "0.5rem 0.75rem",
95 border: "1px solid",
96 borderColor: errors[field] ? "red.500" : "gray.300",
97 borderRadius: "md",
98 fontSize: "md",
99 });
100
101 return (
102 <main
103 className={css({
104 maxWidth: "640px",
105 margin: "0 auto",
106 padding: "2rem",
107 })}
108 >
109 <h1 className={css({ fontSize: "2xl", fontWeight: "bold", marginBottom: "1.5rem" })}>
110 Identity verification
111 </h1>
112
113 <form onSubmit={handleSubmit} noValidate className={css({ display: "flex", flexDirection: "column", gap: "1rem" })}>
114 <div>
115 <label
116 htmlFor="fullName"
117 className={css({ display: "block", marginBottom: "0.25rem", fontWeight: "medium" })}
118 >
119 Full name
120 </label>
121 <input
122 id="fullName"
123 type="text"
124 value={`${customer.firstName} ${customer.lastName}`}
125 readOnly
126 className={css({
127 width: "100%",
128 padding: "0.5rem 0.75rem",
129 border: "1px solid",
130 borderColor: "gray.300",
131 borderRadius: "md",
132 fontSize: "md",
133 backgroundColor: "gray.100",
134 })}
135 />
136 </div>
137
138 <div>
139 <label
140 htmlFor="email"
141 className={css({ display: "block", marginBottom: "0.25rem", fontWeight: "medium" })}
142 >
143 Email
144 </label>
145 <input
146 id="email"
147 type="email"
148 value={customer.email}
149 readOnly
150 className={css({
151 width: "100%",
152 padding: "0.5rem 0.75rem",
153 border: "1px solid",
154 borderColor: "gray.300",
155 borderRadius: "md",
156 fontSize: "md",
157 backgroundColor: "gray.100",
158 })}
159 />
160 </div>
161
162 <div>
163 <label
164 htmlFor="dateOfBirth"
165 className={css({ display: "block", marginBottom: "0.25rem", fontWeight: "medium" })}
166 >
167 Date of birth
168 </label>
169 <input
170 id="dateOfBirth"
171 type="date"
172 value={values.dateOfBirth}
173 onChange={(e) => setField("dateOfBirth", e.target.value)}
174 aria-invalid={!!errors.dateOfBirth}
175 aria-describedby={errors.dateOfBirth ? "dateOfBirth-error" : undefined}
176 className={inputClass("dateOfBirth")}
177 />
178 {fieldError("dateOfBirth")}
179 </div>
180
181 <div>
182 <label
183 htmlFor="nationality"
184 className={css({ display: "block", marginBottom: "0.25rem", fontWeight: "medium" })}
185 >
186 Nationality
187 </label>
188 <select
189 id="nationality"
190 value={values.nationality}
191 onChange={(e) => setField("nationality", e.target.value)}
192 aria-invalid={!!errors.nationality}
193 aria-describedby={errors.nationality ? "nationality-error" : undefined}
194 className={inputClass("nationality")}
195 >
196 <option value="">Select a country</option>
197 {countries.map((country) => (
198 <option key={country.code} value={country.code}>
199 {country.name}
200 </option>
201 ))}
202 </select>
203 {fieldError("nationality")}
204 </div>
205
206 <div>
207 <label
208 htmlFor="countryOfResidence"
209 className={css({ display: "block", marginBottom: "0.25rem", fontWeight: "medium" })}
210 >
211 Country of residence
212 </label>
213 <select
214 id="countryOfResidence"
215 value={values.countryOfResidence}
216 onChange={(e) => setField("countryOfResidence", e.target.value)}
217 aria-invalid={!!errors.countryOfResidence}
218 aria-describedby={errors.countryOfResidence ? "countryOfResidence-error" : undefined}
219 className={inputClass("countryOfResidence")}
220 >
221 <option value="">Select a country</option>
222 {countries.map((country) => (
223 <option key={country.code} value={country.code}>
224 {country.name}
225 </option>
226 ))}
227 </select>
228 {fieldError("countryOfResidence")}
229 </div>
230
231 <div>
232 <label
233 htmlFor="taxId"
234 className={css({ display: "block", marginBottom: "0.25rem", fontWeight: "medium" })}
235 >
236 Tax identification number
237 </label>
238 <input
239 id="taxId"
240 type="text"
241 value={values.taxId}
242 onChange={(e) => setField("taxId", e.target.value)}
243 aria-invalid={!!errors.taxId}
244 aria-describedby={errors.taxId ? "taxId-error" : undefined}
245 className={inputClass("taxId")}
246 />
247 {fieldError("taxId")}
248 </div>
249
250 <div>
251 <label
252 htmlFor="documentType"
253 className={css({ display: "block", marginBottom: "0.25rem", fontWeight: "medium" })}
254 >
255 Type of identity document
256 </label>
257 <select
258 id="documentType"
259 value={values.documentType}
260 onChange={(e) => setField("documentType", e.target.value)}
261 aria-invalid={!!errors.documentType}
262 aria-describedby={errors.documentType ? "documentType-error" : undefined}
263 className={inputClass("documentType")}
264 >
265 <option value="">Select a document type</option>
266 {documentTypes.map((doc) => (
267 <option key={doc.value} value={doc.value}>
268 {doc.label}
269 </option>
270 ))}
271 </select>
272 {fieldError("documentType")}
273 </div>
274
275 <div>
276 <label
277 htmlFor="documentNumber"
278 className={css({ display: "block", marginBottom: "0.25rem", fontWeight: "medium" })}
279 >
280 Document number
281 </label>
282 <input
283 id="documentNumber"
284 type="text"
285 value={values.documentNumber}
286 onChange={(e) => setField("documentNumber", e.target.value)}
287 aria-invalid={!!errors.documentNumber}
288 aria-describedby={errors.documentNumber ? "documentNumber-error" : undefined}
289 className={inputClass("documentNumber")}
290 />
291 {fieldError("documentNumber")}
292 </div>
293
294 <div>
295 <label
296 htmlFor="isPep"
297 className={css({ display: "block", marginBottom: "0.25rem", fontWeight: "medium" })}
298 >
299 Politically exposed person
300 </label>
301 <select
302 id="isPep"
303 value={values.isPep}
304 onChange={(e) => setField("isPep", e.target.value)}
305 aria-invalid={!!errors.isPep}
306 aria-describedby={errors.isPep ? "isPep-error" : undefined}
307 className={inputClass("isPep")}
308 >
309 <option value="">Select an option</option>
310 <option value="yes">Yes</option>
311 <option value="no">No</option>
312 </select>
313 {fieldError("isPep")}
314 </div>
315
316 <button
317 type="submit"
318 className={css({
319 alignSelf: "flex-start",
320 padding: "0.5rem 1.5rem",
321 backgroundColor: "blue.600",
322 color: "white",
323 borderRadius: "md",
324 fontWeight: "medium",
325 cursor: "pointer",
326 })}
327 >
328 Submit
329 </button>
330 </form>
331 </main>
332 );
333 }
334
page.tsx:128:24 · 0.5rem 0.75rem `0.5rem 0.75rem` is a raw length. Use a token. page.tsx:152:24 · 0.5rem 0.75rem `0.5rem 0.75rem` is a raw length. Use a token. page.tsx:320:22 · 0.5rem 1.5rem `0.5rem 1.5rem` is a raw length. Use a token. lint/@pandacss(no-physical-properties) 11 quality page.tsx:85:60 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:109:65 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:117:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:141:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:165:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:184:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:209:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:234:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:253:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:278:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:297:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". Every run that broke lint/@pandacss(no-physical-properties) components/native-element 10 design-system page.tsx:121:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:145:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:169:11 · <input> `<input>` has a design-system equivalent: use `DatePicker` from `@vektos/ds`. page.tsx:188:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:213:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:238:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:257:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:282:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:301:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:316:9 · <button> `<button>` has a design-system equivalent: use `Button` from `@vektos/ds`. Every run that broke components/native-element token-roles/palette 8 design-system page.tsx:85:33 · red.600 `red.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:96:36 · red.500 `red.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:96:48 · gray.300 `gray.300` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:130:28 · gray.300 `gray.300` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:133:32 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:154:28 · gray.300 `gray.300` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:157:32 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:321:30 · blue.600 `blue.600` is a palette shade: it ignores the theme. Use a semantic color token. Every run that broke token-roles/palette a11y/color-contrast 1 quality page.tsx:1:1 · <button type="submit" class="as_flex-start p_0.5rem_1.5rem bg-c_blue.600 c_white bdr_md fw_medium cursor_pointer">Submit 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 0 quality 14 write_file 124 4,077 $0.0000
15 write_file 4,162 2,823 $0.0000