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 32 counted, under 8 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 30 $0.0000 1 read_file, list_files 530 45 $0.0000 2 list_files 333 40 $0.0000 3
Output cap 20,000 tokens a step 4 import { css } from "styled-system/css";
5 import data from "./fixture.json";
6
7 type Errors = {
8 dateOfBirth?: string;
9 nationality?: string;
10 countryOfResidence?: string;
11 taxId?: string;
12 documentType?: string;
13 documentNumber?: string;
14 pep?: string;
15 };
16
17 export default function IdentityVerificationPage() {
18 const { customer, countries, documentTypes } = data;
19
20 const [dateOfBirth, setDateOfBirth] = useState("");
21 const [nationality, setNationality] = useState("");
22 const [countryOfResidence, setCountryOfResidence] = useState("");
23 const [taxId, setTaxId] = useState("");
24 const [documentType, setDocumentType] = useState("");
25 const [documentNumber, setDocumentNumber] = useState("");
26 const [pep, setPep] = useState("");
27
28 const [errors, setErrors] = useState<Errors>({});
29 const [submitted, setSubmitted] = useState(false);
30
31 function handleSubmit(event: FormEvent<HTMLFormElement>) {
32 event.preventDefault();
33 const nextErrors: Errors = {};
34 if (!dateOfBirth) nextErrors.dateOfBirth = "This field is required.";
35 if (!nationality) nextErrors.nationality = "This field is required.";
36 if (!countryOfResidence) nextErrors.countryOfResidence = "This field is required.";
37 if (!taxId) nextErrors.taxId = "This field is required.";
38 if (!documentType) nextErrors.documentType = "This field is required.";
39 if (!documentNumber) nextErrors.documentNumber = "This field is required.";
40 if (!pep) nextErrors.pep = "This field is required.";
41
42 if (Object.keys(nextErrors).length > 0) {
43 setErrors(nextErrors);
44 return;
45 }
46
47 setErrors({});
48 setSubmitted(true);
49 }
50
51 if (submitted) {
52 return (
53 <main
54 className={css({
55 maxWidth: "640px",
56 margin: "0 auto",
57 padding: "2rem",
58 })}
59 >
60 <p role="status" className={css({ fontSize: "lg" })}>
61 Your details are being reviewed.
62 </p>
63 </main>
64 );
65 }
66
67 const fieldError = (message?: string) =>
68 message ? (
69 <span role="alert" className={css({ color: "red.500", fontSize: "sm" })}>
70 {message}
71 </span>
72 ) : null;
73
74 return (
75 <main
76 className={css({
77 maxWidth: "640px",
78 margin: "0 auto",
79 padding: "2rem",
80 })}
81 >
82 <h1 className={css({ fontSize: "2xl", fontWeight: "bold", marginBottom: "1.5rem" })}>
83 Identity verification
84 </h1>
85
86 <form onSubmit={handleSubmit} noValidate className={css({ display: "flex", flexDirection: "column", gap: "1rem" })}>
87 <div className={css({ display: "flex", flexDirection: "column", gap: "0.25rem" })}>
88 <label htmlFor="fullName">Full name</label>
89 <input
90 id="fullName"
91 type="text"
92 value={`${customer.firstName} ${customer.lastName}`}
93 disabled
94 readOnly
95 />
96 </div>
97
98 <div className={css({ display: "flex", flexDirection: "column", gap: "0.25rem" })}>
99 <label htmlFor="email">Email</label>
100 <input id="email" type="email" value={customer.email} disabled readOnly />
101 </div>
102
103 <div className={css({ display: "flex", flexDirection: "column", gap: "0.25rem" })}>
104 <label htmlFor="dateOfBirth">Date of birth</label>
105 <input
106 id="dateOfBirth"
107 type="date"
108 value={dateOfBirth}
109 onChange={(e) => setDateOfBirth(e.target.value)}
110 aria-invalid={Boolean(errors.dateOfBirth)}
111 />
112 {fieldError(errors.dateOfBirth)}
113 </div>
114
115 <div className={css({ display: "flex", flexDirection: "column", gap: "0.25rem" })}>
116 <label htmlFor="nationality">Nationality</label>
117 <select
118 id="nationality"
119 value={nationality}
120 onChange={(e) => setNationality(e.target.value)}
121 aria-invalid={Boolean(errors.nationality)}
122 >
123 <option value="">Select nationality</option>
124 {countries.map((country) => (
125 <option key={country.code} value={country.code}>
126 {country.name}
127 </option>
128 ))}
129 </select>
130 {fieldError(errors.nationality)}
131 </div>
132
133 <div className={css({ display: "flex", flexDirection: "column", gap: "0.25rem" })}>
134 <label htmlFor="countryOfResidence">Country of residence</label>
135 <select
136 id="countryOfResidence"
137 value={countryOfResidence}
138 onChange={(e) => setCountryOfResidence(e.target.value)}
139 aria-invalid={Boolean(errors.countryOfResidence)}
140 >
141 <option value="">Select country of residence</option>
142 {countries.map((country) => (
143 <option key={country.code} value={country.code}>
144 {country.name}
145 </option>
146 ))}
147 </select>
148 {fieldError(errors.countryOfResidence)}
149 </div>
150
151 <div className={css({ display: "flex", flexDirection: "column", gap: "0.25rem" })}>
152 <label htmlFor="taxId">Tax identification number</label>
153 <input
154 id="taxId"
155 type="text"
156 value={taxId}
157 onChange={(e) => setTaxId(e.target.value)}
158 aria-invalid={Boolean(errors.taxId)}
159 />
160 {fieldError(errors.taxId)}
161 </div>
162
163 <div className={css({ display: "flex", flexDirection: "column", gap: "0.25rem" })}>
164 <label htmlFor="documentType">Type of identity document</label>
165 <select
166 id="documentType"
167 value={documentType}
168 onChange={(e) => setDocumentType(e.target.value)}
169 aria-invalid={Boolean(errors.documentType)}
170 >
171 <option value="">Select document type</option>
172 {documentTypes.map((doc) => (
173 <option key={doc.value} value={doc.value}>
174 {doc.label}
175 </option>
176 ))}
177 </select>
178 {fieldError(errors.documentType)}
179 </div>
180
181 <div className={css({ display: "flex", flexDirection: "column", gap: "0.25rem" })}>
182 <label htmlFor="documentNumber">Document number</label>
183 <input
184 id="documentNumber"
185 type="text"
186 value={documentNumber}
187 onChange={(e) => setDocumentNumber(e.target.value)}
188 aria-invalid={Boolean(errors.documentNumber)}
189 />
190 {fieldError(errors.documentNumber)}
191 </div>
192
193 <div className={css({ display: "flex", flexDirection: "column", gap: "0.25rem" })}>
194 <label htmlFor="pep">Politically exposed person</label>
195 <select
196 id="pep"
197 value={pep}
198 onChange={(e) => setPep(e.target.value)}
199 aria-invalid={Boolean(errors.pep)}
200 >
201 <option value="">Select</option>
202 <option value="yes">Yes</option>
203 <option value="no">No</option>
204 </select>
205 {fieldError(errors.pep)}
206 </div>
207
208 <button type="submit" className={css({ alignSelf: "flex-start", padding: "0.5rem 1rem" })}>
209 Submit and continue
210 </button>
211 </form>
212 </main>
213 );
214 }
`0.25rem` is a raw length. Use a token.
components/native-element 10 design-system page.tsx:89:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:100:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:105:11 · <input> `<input>` has a design-system equivalent: use `DatePicker` from `@vektos/ds`. page.tsx:117:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:135:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:153:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:165:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:183:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:195:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:208: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 lint/unicorn(consistent-function-scoping) 1 quality typecheck/TS2769 0 quality 6 read_file, read_file 99 63 $0.0000
10 write_file 281 3,326 $0.0000
11 write_file 3,503 1,914 $0.0000