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 37 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_files, list_tokens 624 66 $0.0001 1 read_file, get_component, get_component, get_component, get_component, get_component 3 106 $0.0005 2 write_file 3 3,709 $0.0022
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 const countries = data.countries.map((country) => ({
19 label: country.name,
20 value: country.code,
21 }));
22
23 const documentTypes = data.documentTypes.map((document) => ({
24 label: document.label,
25 value: document.value,
26 }));
27
28 type FormValues = {
29 dateOfBirth: string;
30 nationality: string;
31 residence: string;
32 taxId: string;
33 documentType: string;
34 documentNumber: string;
35 pep: string;
36 };
37
38 type FieldErrors = Partial<Record<keyof FormValues, string>>;
39
40 const emptyValues: FormValues = {
41 dateOfBirth: "",
42 nationality: "",
43 residence: "",
44 taxId: "",
45 documentType: "",
46 documentNumber: "",
47 pep: "",
48 };
49
50 const fieldLabels: Record<keyof FormValues, string> = {
51 dateOfBirth: "Date of birth",
52 nationality: "Nationality",
53 residence: "Country of residence",
54 taxId: "Tax identification number",
55 documentType: "Identity document type",
56 documentNumber: "Document number",
57 pep: "Politically exposed person",
58 };
59
60 export default function IdentityVerificationPage() {
61 const [values, setValues] = useState<FormValues>(emptyValues);
62 const [errors, setErrors] = useState<FieldErrors>({});
63 const [submitted, setSubmitted] = useState(false);
64
65 function updateField(field: keyof FormValues, value: string) {
66 setValues((current) => ({ ...current, [field]: value }));
67 setErrors((current) => ({ ...current, [field]: undefined }));
68 }
69
70 function handleSubmit(event: FormEvent<HTMLFormElement>) {
71 event.preventDefault();
72 const nextErrors: FieldErrors = {};
73 (Object.keys(fieldLabels) as (keyof FormValues)[]).forEach((field) => {
74 if (!values[field].trim()) nextErrors[field] = "This field is required.";
75 });
76 setErrors(nextErrors);
77 if (Object.keys(nextErrors).length === 0) setSubmitted(true);
78 }
79
80 const customerName = `${data.customer.firstName} ${data.customer.lastName}`;
81
82 return (
83 <main className={css({ minHeight: "100vh", bg: "bg.canvas", color: "fg.default" })}>
84 <header className={css({ bg: "bg.surface", borderBottomWidth: "thin", borderColor: "border.default" })}>
85 <div className={css({ maxWidth: "lg", mx: "auto", px: "4", py: "4", display: "flex", alignItems: "center", justifyContent: "space-between" })}>
86 <div className={css({ display: "flex", alignItems: "center", gap: "2" })}>
87 <span className={css({ width: "8", height: "8", borderRadius: "md", bg: "accent.default", color: "accent.fg", display: "grid", placeItems: "center", fontWeight: "semibold", fontSize: "sm" })} aria-hidden="true">V</span>
88 <span className={css({ fontWeight: "semibold", fontSize: "md" })}>Vektos</span>
89 </div>
90 <span className={css({ fontSize: "sm", color: "fg.muted" })}>Account opening</span>
91 </div>
92 </header>
93
94 <div className={css({ maxWidth: "lg", mx: "auto", px: "4", pt: "8", pb: "8" })}>
95 <nav aria-label="Account opening progress" className={css({ mb: "6" })}>
96 <ol className={css({ display: "flex", alignItems: "center", gap: "3", fontSize: "xs", color: "fg.muted", listStyle: "none", p: "0" })}>
97 <li className={css({ display: "flex", alignItems: "center", gap: "2" })}>
98 <span className={css({ width: "6", height: "6", borderRadius: "full", bg: "success.subtle", color: "success.text", display: "grid", placeItems: "center", fontWeight: "semibold" })} aria-hidden="true">✓</span>
99 Personal details
100 </li>
101 <span aria-hidden="true" className={css({ flex: "1", height: "thin", bg: "border.default" })} />
102 <li aria-current="step" className={css({ display: "flex", alignItems: "center", gap: "2", color: "accent.default", fontWeight: "semibold" })}>
103 <span className={css({ width: "6", height: "6", borderRadius: "full", bg: "accent.default", color: "accent.fg", display: "grid", placeItems: "center", fontSize: "xs" })}>2</span>
104 Identity verification
105 </li>
106 <span aria-hidden="true" className={css({ flex: "1", height: "thin", bg: "border.default" })} />
107 <li className={css({ display: "flex", alignItems: "center", gap: "2" })}>
108 <span className={css({ width: "6", height: "6", borderRadius: "full", bg: "bg.subtle", display: "grid", placeItems: "center" })}>3</span>
109 Review
110 </li>
111 </ol>
112 </nav>
113
114 <div className={css({ mb: "6" })}>
115 <p className={css({ color: "accent.default", fontSize: "xs", fontWeight: "semibold", textTransform: "uppercase", letterSpacing: "0.08em", mb: "2" })}>Step 2 of 3</p>
116 <h1 className={css({ fontSize: "lg", lineHeight: "tight", fontWeight: "semibold", mb: "2" })}>Verify your identity</h1>
117 <p className={css({ color: "fg.muted", fontSize: "sm", lineHeight: "normal" })}>We need a few details to meet our regulatory requirements and keep your account secure.</p>
118 </div>
119
120 {submitted ? (
121 <Card>
122 <CardBody>
123 <div className={css({ width: "10", height: "10", borderRadius: "full", bg: "success.subtle", color: "success.text", display: "grid", placeItems: "center", fontSize: "lg", fontWeight: "semibold", mb: "4" })} aria-hidden="true">✓</div>
124 <h2 className={css({ fontSize: "lg", fontWeight: "semibold", mb: "2" })}>Your details are being reviewed</h2>
125 <p className={css({ color: "fg.muted", fontSize: "sm", lineHeight: "normal" })}>We’ve received your identity information. We’ll let you know when the review is complete.</p>
126 </CardBody>
127 </Card>
128 ) : (
129 <Card>
130 <CardHeader>
131 <CardTitle>Your identity details</CardTitle>
132 <CardDescription>Enter the information exactly as it appears on your official documents.</CardDescription>
133 </CardHeader>
134 <CardBody>
135 <section aria-label="Known customer details" className={css({ display: "grid", gridTemplateColumns: { base: "1fr", md: "1fr 1fr" }, gap: "3", p: "4", mb: "6", bg: "bg.subtle", borderRadius: "md" })}>
136 <div>
137 <p className={css({ color: "fg.muted", fontSize: "xs", mb: "1" })}>Full name</p>
138 <p className={css({ fontSize: "sm", fontWeight: "medium" })}>{customerName}</p>
139 </div>
140 <div>
141 <p className={css({ color: "fg.muted", fontSize: "xs", mb: "1" })}>Email address</p>
142 <p className={css({ fontSize: "sm", fontWeight: "medium", overflowWrap: "anywhere" })}>{data.customer.email}</p>
143 </div>
144 <p className={css({ gridColumn: { base: "auto", md: "1 / -1" }, color: "fg.muted", fontSize: "xs", mb: "0" })}>These details are already verified and can’t be edited here.</p>
145 </section>
146
147 <form onSubmit={handleSubmit} noValidate>
148 <div className={css({ display: "grid", gridTemplateColumns: { base: "1fr", md: "1fr 1fr" }, gap: "4" })}>
149 <FormField label={fieldLabels.dateOfBirth} error={errors.dateOfBirth}>
150 <Input type="date" value={values.dateOfBirth} onChange={(event) => updateField("dateOfBirth", event.target.value)} />
151 </FormField>
152 <FormField label={fieldLabels.nationality} error={errors.nationality}>
153 <Select options={countries} value={values.nationality} onValueChange={(value) => updateField("nationality", value)} placeholder="Select nationality" />
154 </FormField>
155 <FormField label={fieldLabels.residence} error={errors.residence}>
156 <Select options={countries} value={values.residence} onValueChange={(value) => updateField("residence", value)} placeholder="Select country" />
157 </FormField>
158 <FormField label={fieldLabels.taxId} error={errors.taxId}>
159 <Input value={values.taxId} onChange={(event) => updateField("taxId", event.target.value)} placeholder="Enter your tax ID" autoComplete="off" />
160 </FormField>
161 <FormField label={fieldLabels.documentType} error={errors.documentType}>
162 <Select options={documentTypes} value={values.documentType} onValueChange={(value) => updateField("documentType", value)} placeholder="Select document type" />
163 </FormField>
164 <FormField label={fieldLabels.documentNumber} error={errors.documentNumber}>
165 <Input value={values.documentNumber} onChange={(event) => updateField("documentNumber", event.target.value)} placeholder="Enter document number" autoComplete="off" />
166 </FormField>
167 </div>
168
169 <fieldset className={css({ border: "none", p: "0", m: "0", mt: "6" })} aria-invalid={Boolean(errors.pep)}>
170 <legend className={css({ fontSize: "sm", fontWeight: "medium", mb: "2" })}>{fieldLabels.pep} <span className={css({ color: "danger.text" })} aria-hidden="true">*</span></legend>
171 <p className={css({ color: "fg.muted", fontSize: "xs", mb: "3" })}>A politically exposed person (PEP) is someone entrusted with a prominent public function.</p>
172 <div className={css({ display: "flex", gap: "3" })}>
173 {[{ label: "Yes", value: "yes" }, { label: "No", value: "no" }].map((option) => (
174 <label key={option.value} className={css({ display: "flex", alignItems: "center", gap: "2", borderWidth: "thin", borderColor: "border.strong", borderRadius: "md", px: "4", py: "3", fontSize: "sm", cursor: "pointer" })}>
175 <input type="radio" name="pep" value={option.value} checked={values.pep === option.value} onChange={(event) => updateField("pep", event.target.value)} />
176 {option.label}
177 </label>
178 ))}
179 </div>
180 {errors.pep && <p role="alert" className={css({ color: "danger.text", fontSize: "xs", mt: "2" })}>{errors.pep}</p>}
181 </fieldset>
182
183 <div className={css({ mt: "6", pt: "5", borderTopWidth: "thin", borderColor: "border.default", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "4", flexWrap: "wrap" })}>
184 <p className={css({ color: "fg.muted", fontSize: "xs" })}><span className={css({ color: "danger.text" })}>*</span> All fields are required.</p>
185 <Button type="submit" variant="solid" size="md">Submit for review</Button>
186 </div>
187 </form>
188 </CardBody>
189 </Card>
190 )}
191 <p className={css({ mt: "4", textAlign: "center", color: "fg.muted", fontSize: "xs" })}>Your information is encrypted and handled securely.</p>
192 </div>
193 </main>
194 );
195 }
196
Use the logical property "marginBlockEnd" instead of the physical "marginBottom".
page.tsx:124:76 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:135:165 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:137:74 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:141:74 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:144:116 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:169:76 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:170:82 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:171:74 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:180:105 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:183:39 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:183:48 Use the logical property "paddingBlockStart" instead of the physical "paddingTop". page.tsx:183:57 Use the logical property "borderBlockStartWidth" instead of the physical "borderTopWidth". page.tsx:191:29 Use the logical property "marginBlockStart" instead of the physical "marginTop". typecheck/TS2769 10 quality raw-values/raw-length 2 design-system