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