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 52 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 139 30 $0.0000 1 read_file 183 34 $0.0000 2 list_files 464 35 $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 const currency = data.currency;
10
11 function formatMoney(value: number) {
12 return new Intl.NumberFormat("en-US", {
13 style: "currency",
14 currency,
15 minimumFractionDigits: 2,
16 }).format(value);
17 }
18
19 export default function Page() {
20 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
21 const [beneficiaryName, setBeneficiaryName] = useState("");
22 const [iban, setIban] = useState("");
23 const [amount, setAmount] = useState("");
24 const [reference, setReference] = useState("");
25 const [confirmation, setConfirmation] = useState<{
26 amount: string;
27 beneficiary: string;
28 } | null>(null);
29
30 const account: Account =
31 data.accounts.find((a) => a.id === accountId) ?? data.accounts[0];
32
33 const amountNumber = Number(amount);
34 const amountInvalid =
35 amount.trim() !== "" &&
36 (Number.isNaN(amountNumber) || amountNumber <= 0);
37 const exceedsBalance =
38 amount.trim() !== "" &&
39 !Number.isNaN(amountNumber) &&
40 amountNumber > account.available;
41
42 const canSubmit =
43 beneficiaryName.trim() !== "" &&
44 iban.trim() !== "" &&
45 amount.trim() !== "" &&
46 !amountInvalid &&
47 !exceedsBalance;
48
49 function handleSubmit(e: React.FormEvent) {
50 e.preventDefault();
51 if (!canSubmit) return;
52 setConfirmation({ amount, beneficiary: beneficiaryName.trim() });
53 // reset form
54 setBeneficiaryName("");
55 setIban("");
56 setAmount("");
57 setReference("");
58 }
59
60 return (
61 <main
62 className={css({
63 maxWidth: "480px",
64 margin: "0 auto",
65 padding: "24px",
66 fontFamily: "system-ui, sans-serif",
67 })}
68 >
69 <h1 className={css({ fontSize: "24px", marginBottom: "16px" })}>
70 SEPA transfer
71 </h1>
72
73 {confirmation && (
74 <div
75 role="status"
76 className={css({
77 marginBottom: "16px",
78 padding: "12px",
79 borderRadius: "8px",
80 background: "#e6f4ea",
81 color: "#1e4620",
82 })}
83 >
84 Transfer of {formatMoney(Number(confirmation.amount))} to{" "}
85 {confirmation.beneficiary} submitted successfully.
86 </div>
87 )}
88
89 <form onSubmit={handleSubmit} className={css({ display: "grid", gap: "12px" })}>
90 <label className={css({ display: "grid", gap: "4px" })}>
91 <span>From account</span>
92 <select
93 value={accountId}
94 onChange={(e) => setAccountId(e.target.value)}
95 className={css({ padding: "8px", borderRadius: "6px", border: "1px solid #ccc" })}
96 >
97 {data.accounts.map((a) => (
98 <option key={a.id} value={a.id}>
99 {a.name}
100 </option>
101 ))}
102 </select>
103 </label>
104
105 <div className={css({ fontSize: "14px", color: "#555" })}>
106 Available balance: {formatMoney(account.available)}
107 </div>
108
109 <label className={css({ display: "grid", gap: "4px" })}>
110 <span>Beneficiary name</span>
111 <input
112 value={beneficiaryName}
113 onChange={(e) => setBeneficiaryName(e.target.value)}
114 className={css({ padding: "8px", borderRadius: "6px", border: "1px solid #ccc" })}
115 />
116 </label>
117
118 <label className={css({ display: "grid", gap: "4px" })}>
119 <span>Beneficiary IBAN</span>
120 <input
121 value={iban}
122 onChange={(e) => setIban(e.target.value)}
123 className={css({ padding: "8px", borderRadius: "6px", border: "1px solid #ccc" })}
124 />
125 </label>
126
127 <label className={css({ display: "grid", gap: "4px" })}>
128 <span>Amount</span>
129 <input
130 type="number"
131 step="0.01"
132 value={amount}
133 onChange={(e) => setAmount(e.target.value)}
134 className={css({ padding: "8px", borderRadius: "6px", border: "1px solid #ccc" })}
135 aria-invalid={exceedsBalance || amountInvalid}
136 />
137 {exceedsBalance && (
138 <span className={css({ color: "#b00020", fontSize: "13px" })}>
139 Amount exceeds available balance
140 </span>
141 )}
142 {amountInvalid && !exceedsBalance && (
143 <span className={css({ color: "#b00020", fontSize: "13px" })}>
144 Enter a valid amount
145 </span>
146 )}
147 </label>
148
149 <label className={css({ display: "grid", gap: "4px" })}>
150 <span>Reference (optional)</span>
151 <input
152 value={reference}
153 onChange={(e) => setReference(e.target.value)}
154 className={css({ padding: "8px", borderRadius: "6px", border: "1px solid #ccc" })}
155 />
156 </label>
157
158 <button
159 type="submit"
160 disabled={!canSubmit}
161 className={css({
162 padding: "10px",
163 borderRadius: "6px",
164 border: "none",
165 background: "#1976d2",
166 color: "white",
167 cursor: "pointer",
168 opacity: canSubmit ? 1 : 0.5,
169 })}
170 >
171 Send transfer
172 </button>
173 </form>
174 </main>
175 );
176 }
177
`12px` is a raw length. Use a token.
components/native-element 6 design-system page.tsx:92:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:111: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 `Input` from `@vektos/ds`. page.tsx:129:11 · <input> `<input>` has a design-system equivalent: use `NumberInput` from `@vektos/ds`. page.tsx:151:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:158: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 10 write_file 125 2,298 $0.0000