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 29 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 get_guidelines, list_components, list_tokens, list_files 624 69 $0.0001 1 read_file, get_component, get_component, get_component, get_component, get_component 3 119 $0.0004 2 list_tokens 3 150 $0.0004
Output cap
The provider's default 4 import {
5 Button,
6 Card,
7 CardBody,
8 CardDescription,
9 CardHeader,
10 CardTitle,
11 FormField,
12 Input,
13 Select,
14 } from "@vektos/ds";
15 import { css } from "styled-system/css";
16 import data from "./fixture.json";
17
18 type Details = {
19 dateOfBirth: string;
20 nationality: string;
21 residence: string;
22 taxId: string;
23 documentType: string;
24 documentNumber: string;
25 pep: string;
26 };
27
28 type FieldName = keyof Details;
29
30 const emptyDetails: Details = {
31 dateOfBirth: "",
32 nationality: "",
33 residence: "",
34 taxId: "",
35 documentType: "",
36 documentNumber: "",
37 pep: "",
38 };
39
40 const countryOptions = data.countries.map((country) => ({
41 label: country.name,
42 value: country.code,
43 }));
44
45 const countryName = (code: string) =>
46 data.countries.find((country) => country.code === code)?.name ?? "";
47
48 export default function IdentityVerificationPage() {
49 const [details, setDetails] = useState<Details>(emptyDetails);
50 const [errors, setErrors] = useState<Partial<Record<FieldName, string>>>({});
51 const [submitted, setSubmitted] = useState(false);
52
53 const update = (field: FieldName, value: string) => {
54 setDetails((current) => ({ ...current, [field]: value }));
55 if (errors[field]) {
56 setErrors((current) => ({ ...current, [field]: undefined }));
57 }
58 };
59
60 const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
61 event.preventDefault();
62 const nextErrors: Partial<Record<FieldName, string>> = {};
63 (Object.keys(details) as FieldName[]).forEach((field) => {
64 if (!details[field].trim()) nextErrors[field] = "This field is required.";
65 });
66 setErrors(nextErrors);
67 if (Object.keys(nextErrors).length === 0) setSubmitted(true);
68 };
69
70 return (
71 <div className={css({ minH: "full", bg: "bg.canvas", color: "fg.default" })}>
72 <header
73 className={css({
74 bg: "bg.surface",
75 borderBottomWidth: "1px",
76 borderColor: "border.default",
77 })}
78 >
79 <div
80 className={css({
81 maxW: "lg",
82 mx: "auto",
83 px: "6",
84 py: "4",
85 display: "flex",
86 alignItems: "center",
87 justifyContent: "space-between",
88 gap: "4",
89 })}
90 >
91 <div className={css({ display: "flex", alignItems: "center", gap: "3" })}>
92 <span
93 aria-hidden="true"
94 className={css({
95 display: "grid",
96 placeItems: "center",
97 width: "8",
98 height: "8",
99 rounded: "md",
100 bg: "accent.default",
101 color: "accent.fg",
102 fontWeight: "bold",
103 fontSize: "sm",
104 })}
105 >
106 V
107 </span>
108 <span className={css({ fontWeight: "semibold", letterSpacing: "tight" })}>
109 Vektos
110 </span>
111 </div>
112 <span className={css({ color: "fg.muted", fontSize: "sm" })}>
113 Account opening
114 </span>
115 </div>
116 </header>
117
118 <main className={css({ maxW: "lg", mx: "auto", px: "6", py: "8" })}>
119 <div className={css({ mb: "6" })}>
120 <div className={css({ display: "flex", justifyContent: "space-between", mb: "2" })}>
121 <span className={css({ color: "accent.default", fontSize: "sm", fontWeight: "semibold" })}>
122 STEP 2 OF 3
123 </span>
124 <span className={css({ color: "fg.muted", fontSize: "sm" })}>Identity verification</span>
125 </div>
126 <div
127 aria-label="Step 2 of 3"
128 role="progressbar"
129 aria-valuemin={1}
130 aria-valuemax={3}
131 aria-valuenow={2}
132 className={css({ h: "1", bg: "bg.subtle", rounded: "full", overflow: "hidden" })}
133 >
134 <div className={css({ h: "full", width: "2/3", bg: "accent.default", rounded: "full" })} />
135 </div>
136 </div>
137
138 {submitted ? (
139 <Card>
140 <CardHeader>
141 <div
142 className={css({
143 mb: "2",
144 width: "10",
145 height: "10",
146 display: "grid",
147 placeItems: "center",
148 rounded: "full",
149 bg: "warning.subtle",
150 color: "warning.text",
151 fontSize: "lg",
152 fontWeight: "bold",
153 })}
154 aria-hidden="true"
155 >
156 …
157 </div>
158 <CardTitle>Details are being reviewed</CardTitle>
159 <CardDescription>
160 Thanks, {data.customer.firstName}. We’ll review your identity details and let you know when there’s an update.
161 </CardDescription>
162 </CardHeader>
163 <CardBody>
164 <div
165 className={css({
166 rounded: "md",
167 bg: "bg.subtle",
168 px: "4",
169 py: "3",
170 color: "fg.muted",
171 fontSize: "sm",
172 })}
173 >
174 Your application is still in progress. You can safely close this page.
175 </div>
176 </CardBody>
177 </Card>
178 ) : (
179 <>
180 <div className={css({ mb: "6" })}>
181 <h1 className={css({ fontSize: "2xl", fontWeight: "bold", letterSpacing: "tight", mb: "2" })}>
182 Verify your identity
183 </h1>
184 <p className={css({ color: "fg.muted", lineHeight: "relaxed" })}>
185 We need a few details to meet our verification requirements. Please enter them as they appear on your documents.
186 </p>
187 </div>
188
189 <Card>
190 <CardHeader>
191 <CardTitle>Your personal details</CardTitle>
192 <CardDescription>Fields marked with * are required.</CardDescription>
193 </CardHeader>
194 <CardBody>
195 <section
196 aria-label="Details already on file"
197 className={css({
198 bg: "bg.subtle",
199 rounded: "md",
200 p: "4",
201 mb: "6",
202 display: "grid",
203 gridTemplateColumns: { base: "1fr", md: "1fr 1fr" },
204 gap: "4",
205 })}
206 >
207 <div>
208 <p className={css({ color: "fg.muted", fontSize: "sm", mb: "1" })}>Full name</p>
209 <p className={css({ fontWeight: "medium" })}>
210 {data.customer.firstName} {data.customer.lastName}
211 </p>
212 </div>
213 <div>
214 <p className={css({ color: "fg.muted", fontSize: "sm", mb: "1" })}>Email address</p>
215 <p className={css({ fontWeight: "medium", overflowWrap: "anywhere" })}>
216 {data.customer.email}
217 </p>
218 </div>
219 </section>
220
221 <form onSubmit={handleSubmit} noValidate>
222 <div
223 className={css({
224 display: "grid",
225 gridTemplateColumns: { base: "1fr", md: "1fr 1fr" },
226 gap: "5",
227 })}
228 >
229 <FormField label="Date of birth *" error={errors.dateOfBirth}>
230 <Input
231 type="date"
232 value={details.dateOfBirth}
233 onChange={(event) => update("dateOfBirth", event.target.value)}
234 autoComplete="bday"
235 />
236 </FormField>
237
238 <FormField label="Nationality *" error={errors.nationality}>
239 <Select
240 options={countryOptions}
241 placeholder="Choose nationality"
242 value={details.nationality}
243 onValueChange={(value) => update("nationality", value)}
244 />
245 </FormField>
246
247 <FormField label="Country of residence *" error={errors.residence}>
248 <Select
249 options={countryOptions}
250 placeholder="Choose country"
251 value={details.residence}
252 onValueChange={(value) => update("residence", value)}
253 />
254 </FormField>
255
256 <FormField label="Tax identification number *" error={errors.taxId}>
257 <Input
258 value={details.taxId}
259 onChange={(event) => update("taxId", event.target.value)}
260 autoComplete="off"
261 placeholder="Enter your tax ID"
262 />
263 </FormField>
264
265 <FormField label="Type of identity document *" error={errors.documentType}>
266 <Select
267 options={data.documentTypes}
268 placeholder="Choose document type"
269 value={details.documentType}
270 onValueChange={(value) => update("documentType", value)}
271 />
272 </FormField>
273
274 <FormField label="Document number *" error={errors.documentNumber}>
275 <Input
276 value={details.documentNumber}
277 onChange={(event) => update("documentNumber", event.target.value)}
278 autoComplete="off"
279 placeholder="Enter document number"
280 />
281 </FormField>
282
283 <div className={css({ gridColumn: { base: "auto", md: "1 / -1" } })}>
284 <FormField label="Are you a politically exposed person (PEP)? *" error={errors.pep}>
285 <Select
286 options={[
287 { label: "No", value: "no" },
288 { label: "Yes", value: "yes" },
289 ]}
290 placeholder="Select yes or no"
291 value={details.pep}
292 onValueChange={(value) => update("pep", value)}
293 />
294 </FormField>
295 </div>
296 </div>
297
298 <div className={css({ mt: "6", pt: "5", borderTopWidth: "1px", borderColor: "border.default" })}>
299 <p className={css({ color: "fg.muted", fontSize: "sm", lineHeight: "relaxed", mb: "4" })}>
300 Your information is encrypted and used only to verify your identity and meet regulatory requirements.
301 </p>
302 <div className={css({ display: "flex", justifyContent: "flex-end" })}>
303 <Button type="submit" variant="solid" size="md">
304 Submit for review
305 </Button>
306 </div>
307 </div>
308 </form>
309 </CardBody>
310 </Card>
311 </>
312 )}
313 </main>
314 </div>
315 );
316 }
317
Use the logical property "marginBlockEnd" instead of the physical "marginBottom".
page.tsx:214:76 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:298:41 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:298:50 Use the logical property "paddingBlockStart" instead of the physical "paddingTop". page.tsx:298:59 Use the logical property "borderBlockStartWidth" instead of the physical "borderTopWidth". page.tsx:299:99 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". typecheck/TS2769 11 quality raw-values/raw-length 2 design-system lint/jsx-a11y(prefer-tag-over-role) 1 quality