Runs / transfer-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 9 counted, under 3 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 170 94 $0.0015 1 list_files, list_components, list_tokens 1,385 73 $0.0037 2 read_file, get_component, get_component, get_component, get_component, get_component 1,958 219 $0.0066
Output cap The provider's default 4 import {
5 Button,
6 Card,
7 CardBody,
8 CardDescription,
9 CardFooter,
10 CardHeader,
11 CardTitle,
12 FormField,
13 Input,
14 Select,
15 } from "@vektos/ds";
16 import { css } from "styled-system/css";
17 import data from "./fixture.json";
18
19 const currencyFormatter = new Intl.NumberFormat("en-IE", {
20 style: "currency",
21 currency: data.currency,
22 });
23
24 function formatCurrency(amount: number) {
25 return currencyFormatter.format(amount);
26 }
27
28 function parseAmount(value: string) {
29 const normalized = value.trim().replace(",", ".");
30
31 if (!/^\d+(?:\.\d{1,2})?$/.test(normalized)) {
32 return null;
33 }
34
35 const amount = Number(normalized);
36 return Number.isFinite(amount) && amount > 0 ? amount : null;
37 }
38
39 export default function SepaTransferPage() {
40 const [accountId, setAccountId] = useState(data.defaultAccountId);
41 const [beneficiaryName, setBeneficiaryName] = useState("");
42 const [beneficiaryIban, setBeneficiaryIban] = useState("");
43 const [amount, setAmount] = useState("");
44 const [reference, setReference] = useState("");
45 const [attemptedSubmit, setAttemptedSubmit] = useState(false);
46 const [confirmation, setConfirmation] = useState<{
47 amount: number;
48 beneficiary: string;
49 } | null>(null);
50
51 const selectedAccount =
52 data.accounts.find((account) => account.id === accountId) ?? data.accounts[0];
53 const parsedAmount = parseAmount(amount);
54 const exceedsBalance =
55 parsedAmount !== null && parsedAmount > selectedAccount.available;
56
57 const amountError = exceedsBalance
58 ? `The amount exceeds the available balance of ${formatCurrency(selectedAccount.available)}.`
59 : attemptedSubmit && parsedAmount === null
60 ? "Enter an amount greater than zero, using up to two decimal places."
61 : undefined;
62 const beneficiaryNameError =
63 attemptedSubmit && !beneficiaryName.trim()
64 ? "Enter the beneficiary’s name."
65 : undefined;
66 const beneficiaryIbanError =
67 attemptedSubmit && !beneficiaryIban.trim()
68 ? "Enter the beneficiary’s IBAN."
69 : undefined;
70
71 function handleSubmit(event: FormEvent<HTMLFormElement>) {
72 event.preventDefault();
73 setAttemptedSubmit(true);
74
75 const submittedAmount = parseAmount(amount);
76 if (
77 submittedAmount === null ||
78 submittedAmount > selectedAccount.available ||
79 !beneficiaryName.trim() ||
80 !beneficiaryIban.trim()
81 ) {
82 return;
83 }
84
85 setConfirmation({
86 amount: submittedAmount,
87 beneficiary: beneficiaryName.trim(),
88 });
89 }
90
91 function startAnotherTransfer() {
92 setBeneficiaryName("");
93 setBeneficiaryIban("");
94 setAmount("");
95 setReference("");
96 setAttemptedSubmit(false);
97 setConfirmation(null);
98 }
99
100 return (
101 <main
102 className={`vektos ${css({
103 bg: "bg.canvas",
104 color: "fg.default",
105 px: "4",
106 py: "8",
107 })}`}
108 >
109 <div className={css({ maxW: "md", mx: "auto" })}>
110 {confirmation ? (
111 <Card>
112 <CardHeader>
113 <CardTitle asChild>
114 <h1>Transfer sent</h1>
115 </CardTitle>
116 <CardDescription>
117 Your SEPA transfer was submitted successfully.
118 </CardDescription>
119 </CardHeader>
120 <CardBody>
121 <div
122 role="status"
123 className={css({
124 bg: "success.subtle",
125 color: "success.text",
126 p: "4",
127 rounded: "md",
128 })}
129 >
130 <p className={css({ fontWeight: "semibold" })}>
131 {formatCurrency(confirmation.amount)} has been sent to {confirmation.beneficiary}.
132 </p>
133 </div>
134 </CardBody>
135 <CardFooter>
136 <Button type="button" onClick={startAnotherTransfer}>
137 Send another transfer
138 </Button>
139 </CardFooter>
140 </Card>
141 ) : (
142 <Card>
143 <CardHeader>
144 <CardTitle asChild>
145 <h1>Send a SEPA transfer</h1>
146 </CardTitle>
147 <CardDescription>
148 Send euros from one of your accounts to a SEPA beneficiary.
149 </CardDescription>
150 </CardHeader>
151 <CardBody>
152 <form
153 id="sepa-transfer-form"
154 noValidate
155 onSubmit={handleSubmit}
156 className={css({
157 display: "flex",
158 flexDirection: "column",
159 gap: "6",
160 })}
161 >
162 <FormField label="Pay from">
163 <Select
164 name="account"
165 value={accountId}
166 onValueChange={setAccountId}
167 options={data.accounts.map((account) => ({
168 label: account.name,
169 value: account.id,
170 }))}
171 />
172 </FormField>
173
174 <div
175 aria-live="polite"
176 className={css({
177 bg: "bg.subtle",
178 p: "4",
179 rounded: "md",
180 display: "flex",
181 justifyContent: "space-between",
182 alignItems: "flex-start",
183 flexWrap: "wrap",
184 gap: "4",
185 })}
186 >
187 <div>
188 <p className={css({ fontSize: "xs", color: "fg.muted" })}>
189 {selectedAccount.name}
190 </p>
191 <p className={css({ fontSize: "sm", mt: "1" })}>
192 {selectedAccount.iban}
193 </p>
194 </div>
195 <div>
196 <p className={css({ fontSize: "xs", color: "fg.muted" })}>
197 Available balance
198 </p>
199 <p
200 className={css({
201 fontSize: "lg",
202 fontWeight: "semibold",
203 fontVariantNumeric: "tabular-nums",
204 mt: "1",
205 })}
206 >
207 {formatCurrency(selectedAccount.available)}
208 </p>
209 </div>
210 </div>
211
212 <FormField label="Beneficiary name" error={beneficiaryNameError}>
213 <Input
214 name="beneficiaryName"
215 value={beneficiaryName}
216 onChange={(event) => setBeneficiaryName(event.target.value)}
217 placeholder="e.g. Maria Rossi"
218 autoComplete="off"
219 required
220 />
221 </FormField>
222
223 <FormField
224 label="Beneficiary IBAN"
225 helperText="Enter the IBAN with or without spaces."
226 error={beneficiaryIbanError}
227 >
228 <Input
229 name="beneficiaryIban"
230 value={beneficiaryIban}
231 onChange={(event) =>
232 setBeneficiaryIban(event.target.value.toUpperCase())
233 }
234 placeholder="DE89 3704 0044 0532 0130 00"
235 autoCapitalize="characters"
236 autoComplete="off"
237 spellCheck={false}
238 required
239 />
240 </FormField>
241
242 <FormField
243 label={`Amount (${data.currency})`}
244 helperText="Use up to two decimal places."
245 error={amountError}
246 >
247 <Input
248 name="amount"
249 inputMode="decimal"
250 value={amount}
251 onChange={(event) => setAmount(event.target.value)}
252 placeholder="0.00"
253 autoComplete="off"
254 required
255 />
256 </FormField>
257
258 <FormField
259 label="Reference (optional)"
260 helperText="Add a note for the beneficiary, up to 140 characters."
261 >
262 <Input
263 name="reference"
264 value={reference}
265 onChange={(event) => setReference(event.target.value)}
266 placeholder="e.g. Invoice 2026-041"
267 maxLength={140}
268 />
269 </FormField>
270 </form>
271 </CardBody>
272 <CardFooter>
273 <Button
274 type="submit"
275 form="sepa-transfer-form"
276 disabled={exceedsBalance}
277 >
278 Send transfer
279 </Button>
280 </CardFooter>
281 </Card>
282 )}
283 </div>
284 </main>
285 );
286 }
287
Use the logical property "marginBlockStart" instead of the physical "marginTop".
page.tsx:204:25 Use the logical property "marginBlockStart" instead of the physical "marginTop". lint/jsx-a11y(prefer-tag-over-role) 1 quality 3 write_file 2,901 6,676 $0.0734
4 check_code 6,736 1,863 $0.0335