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 46 counted, under 9 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 11 32 $0.0000 1 read_file 57 32 $0.0000 2 list_files 336 28 $0.0000 3
Output cap The provider's default 3
4 import { css } from "styled-system/css";
5 import data from "./fixture.json";
6
7 type Account = (typeof data.accounts)[number];
8
9 export default function SepaTransferPage() {
10 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
11 const account = data.accounts.find((a) => a.id === accountId) as Account;
12
13 const [beneficiaryName, setBeneficiaryName] = useState("");
14 const [iban, setIban] = useState("");
15 const [amount, setAmount] = useState("");
16 const [reference, setReference] = useState("");
17
18 const [confirmation, setConfirmation] = useState<{
19 amount: string;
20 beneficiary: string;
21 } | null>(null);
22
23 const amountNumber = parseFloat(amount);
24 const isAmountOverBalance =
25 amount.trim() !== "" &&
26 !Number.isNaN(amountNumber) &&
27 amountNumber > account.available;
28 const isAmountInvalid =
29 amount.trim() === "" ||
30 Number.isNaN(amountNumber) ||
31 amountNumber <= 0;
32 const canSubmit =
33 beneficiaryName.trim() !== "" &&
34 iban.trim() !== "" &&
35 !isAmountInvalid &&
36 !isAmountOverBalance;
37
38 function handleSubmit(e: FormEvent) {
39 e.preventDefault();
40 if (!canSubmit) return;
41 setConfirmation({
42 amount: amountNumber.toFixed(2),
43 beneficiary: beneficiaryName.trim(),
44 });
45 }
46
47 return (
48 <main
49 className={css({
50 maxWidth: "480px",
51 margin: "0 auto",
52 padding: "2rem 1rem",
53 fontFamily: "system-ui, sans-serif",
54 })}
55 >
56 <h1 className={css({ fontSize: "1.5rem", marginBottom: "1rem" })}>
57 SEPA transfer
58 </h1>
59
60 {confirmation && (
61 <div
62 role="status"
63 className={css({
64 padding: "0.75rem 1rem",
65 marginBottom: "1rem",
66 borderRadius: "0.5rem",
67 backgroundColor: "#e6f4ea",
68 color: "#1e6b3a",
69 })}
70 >
71 Transfer of {confirmation.amount} {data.currency} to{" "}
72 {confirmation.beneficiary} sent successfully.
73 </div>
74 )}
75
76 <form onSubmit={handleSubmit} className={css({ display: "grid", gap: "1rem" })}>
77 <div className={css({ display: "grid", gap: "0.25rem" })}>
78 <label htmlFor="account">From account</label>
79 <select
80 id="account"
81 value={accountId}
82 onChange={(e) => setAccountId(e.target.value)}
83 className={css({ padding: "0.5rem", fontSize: "1rem" })}
84 >
85 {data.accounts.map((a) => (
86 <option key={a.id} value={a.id}>
87 {a.name} — {a.iban}
88 </option>
89 ))}
90 </select>
91 <span className={css({ fontSize: "0.875rem", color: "#555" })}>
92 Available balance: {account.available.toFixed(2)} {data.currency}
93 </span>
94 </div>
95
96 <div className={css({ display: "grid", gap: "0.25rem" })}>
97 <label htmlFor="beneficiary">Beneficiary name</label>
98 <input
99 id="beneficiary"
100 type="text"
101 value={beneficiaryName}
102 onChange={(e) => setBeneficiaryName(e.target.value)}
103 className={css({ padding: "0.5rem", fontSize: "1rem" })}
104 />
105 </div>
106
107 <div className={css({ display: "grid", gap: "0.25rem" })}>
108 <label htmlFor="iban">Beneficiary IBAN</label>
109 <input
110 id="iban"
111 type="text"
112 value={iban}
113 onChange={(e) => setIban(e.target.value)}
114 className={css({ padding: "0.5rem", fontSize: "1rem" })}
115 />
116 </div>
117
118 <div className={css({ display: "grid", gap: "0.25rem" })}>
119 <label htmlFor="amount">Amount</label>
120 <input
121 id="amount"
122 type="number"
123 step="0.01"
124 value={amount}
125 onChange={(e) => setAmount(e.target.value)}
126 className={css({ padding: "0.5rem", fontSize: "1rem" })}
127 aria-invalid={isAmountOverBalance}
128 />
129 {isAmountOverBalance && (
130 <span
131 role="alert"
132 className={css({ fontSize: "0.875rem", color: "#c00" })}
133 >
134 Amount exceeds available balance
135 </span>
136 )}
137 </div>
138
139 <div className={css({ display: "grid", gap: "0.25rem" })}>
140 <label htmlFor="reference">Reference (optional)</label>
141 <input
142 id="reference"
143 type="text"
144 value={reference}
145 onChange={(e) => setReference(e.target.value)}
146 className={css({ padding: "0.5rem", fontSize: "1rem" })}
147 />
148 </div>
149
150 <button
151 type="submit"
152 disabled={!canSubmit}
153 className={css({
154 padding: "0.75rem 1rem",
155 fontSize: "1rem",
156 backgroundColor: "#1a73e8",
157 color: "white",
158 border: "none",
159 borderRadius: "0.5rem",
160 cursor: "pointer",
161 opacity: canSubmit ? 1 : 0.5,
162 })}
163 >
164 Send transfer
165 </button>
166 </form>
167 </main>
168 );
169 }
170
components/native-element 6 design-system page.tsx:79:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:98:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:109:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:120:11 · <input> `<input>` has a design-system equivalent: use `NumberInput` from `@vektos/ds`. page.tsx:141:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:150: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 typecheck/TS2769 0 quality 9 write_file 360 2,370 $0.0000
10 write_file 2,434 1,310 $0.0000