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 83 counted, under 10 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 267 31 $0.0000 1 read_file 56 37 $0.0000 2 list_files 340 33 $0.0000 3
Output cap 20,000 tokens a step 3
4 import { css } from "styled-system/css";
5 import data from "./fixture.json";
6
7 type Account = (typeof data.accounts)[number];
8
9 function formatMoney(value: number) {
10 return new Intl.NumberFormat("en-US", {
11 style: "currency",
12 currency: data.currency,
13 }).format(value);
14 }
15
16 export default function Page() {
17 const accounts = data.accounts;
18 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
19 const [beneficiary, setBeneficiary] = useState("");
20 const [iban, setIban] = useState("");
21 const [amount, setAmount] = useState("");
22 const [reference, setReference] = useState("");
23 const [submitted, setSubmitted] = useState<{
24 amount: number;
25 beneficiary: string;
26 } | null>(null);
27
28 const selected = accounts.find((a) => a.id === accountId) ?? accounts[0];
29 const parsedAmount = Number(amount);
30 const amountError =
31 amount.trim() !== "" &&
32 (Number.isNaN(parsedAmount) ||
33 parsedAmount <= 0 ||
34 parsedAmount > selected.available);
35
36 const amountErrorMessage =
37 amount.trim() === ""
38 ? ""
39 : Number.isNaN(parsedAmount)
40 ? "Enter a valid amount"
41 : parsedAmount <= 0
42 ? "Amount must be greater than 0"
43 : parsedAmount > selected.available
44 ? "Amount exceeds available balance"
45 : "";
46
47 const canSubmit =
48 beneficiary.trim() !== "" &&
49 iban.trim() !== "" &&
50 amount.trim() !== "" &&
51 !amountError;
52
53 function handleSubmit(e: React.FormEvent) {
54 e.preventDefault();
55 if (!canSubmit) return;
56 setSubmitted({ amount: parsedAmount, beneficiary: beneficiary.trim() });
57 setBeneficiary("");
58 setIban("");
59 setAmount("");
60 setReference("");
61 }
62
63 return (
64 <main
65 className={css({
66 maxWidth: "560px",
67 margin: "0 auto",
68 padding: "2rem 1.5rem",
69 fontFamily: "system-ui, sans-serif",
70 })}
71 >
72 <h1 className={css({ fontSize: "1.5rem", fontWeight: "700", mb: "1.5rem" })}>
73 SEPA transfer
74 </h1>
75
76 {submitted && (
77 <div
78 role="status"
79 className={css({
80 mb: "1.5rem",
81 padding: "1rem",
82 borderRadius: "0.5rem",
83 background: "#ecfdf5",
84 border: "1px solid #10b981",
85 color: "#065f46",
86 })}
87 >
88 Transfer of {formatMoney(submitted.amount)} (
89 {submitted.amount.toFixed(2)} {data.currency}) to{" "}
90 {submitted.beneficiary} has been sent successfully.
91 </div>
92 )}
93
94 <form onSubmit={handleSubmit} noValidate>
95 <div className={css({ mb: "1rem" })}>
96 <label
97 htmlFor="account"
98 className={css({ display: "block", mb: "0.25rem", fontWeight: "600" })}
99 >
100 Pay from
101 </label>
102 <select
103 id="account"
104 value={accountId}
105 onChange={(e) => setAccountId(e.target.value)}
106 className={css({
107 width: "100%",
108 padding: "0.5rem",
109 border: "1px solid #d1d5db",
110 borderRadius: "0.375rem",
111 })}
112 >
113 {accounts.map((a) => (
114 <option key={a.id} value={a.id}>
115 {a.name} — {a.iban}
116 </option>
117 ))}
118 </select>
119 <p
120 className={css({ mt: "0.25rem", fontSize: "0.875rem", color: "#374151" })}
121 data-available-balance={selected.available}
122 >
123 Available balance: {formatMoney(selected.available)} (
124 {selected.available.toFixed(2)} {data.currency})
125 </p>
126 </div>
127
128 <div className={css({ mb: "1rem" })}>
129 <label
130 htmlFor="beneficiary"
131 className={css({ display: "block", mb: "0.25rem", fontWeight: "600" })}
132 >
133 Beneficiary name
134 </label>
135 <input
136 id="beneficiary"
137 type="text"
138 value={beneficiary}
139 onChange={(e) => setBeneficiary(e.target.value)}
140 required
141 className={css({
142 width: "100%",
143 padding: "0.5rem",
144 border: "1px solid #d1d5db",
145 borderRadius: "0.375rem",
146 })}
147 />
148 </div>
149
150 <div className={css({ mb: "1rem" })}>
151 <label
152 htmlFor="iban"
153 className={css({ display: "block", mb: "0.25rem", fontWeight: "600" })}
154 >
155 Beneficiary IBAN
156 </label>
157 <input
158 id="iban"
159 type="text"
160 value={iban}
161 onChange={(e) => setIban(e.target.value)}
162 required
163 className={css({
164 width: "100%",
165 padding: "0.5rem",
166 border: "1px solid #d1d5db",
167 borderRadius: "0.375rem",
168 })}
169 />
170 </div>
171
172 <div className={css({ mb: "1rem" })}>
173 <label
174 htmlFor="amount"
175 className={css({ display: "block", mb: "0.25rem", fontWeight: "600" })}
176 >
177 Amount ({data.currency})
178 </label>
179 <input
180 id="amount"
181 type="number"
182 step="0.01"
183 min="0.01"
184 value={amount}
185 onChange={(e) => setAmount(e.target.value)}
186 required
187 aria-invalid={amountError}
188 className={css({
189 width: "100%",
190 padding: "0.5rem",
191 border: amountError ? "1px solid #dc2626" : "1px solid #d1d5db",
192 borderRadius: "0.375rem",
193 })}
194 />
195 {amountErrorMessage && (
196 <p
197 className={css({ mt: "0.25rem", fontSize: "0.875rem", color: "#dc2626" })}
198 role="alert"
199 >
200 {amountErrorMessage}
201 </p>
202 )}
203 </div>
204
205 <div className={css({ mb: "1.5rem" })}>
206 <label
207 htmlFor="reference"
208 className={css({ display: "block", mb: "0.25rem", fontWeight: "600" })}
209 >
210 Reference (optional)
211 </label>
212 <input
213 id="reference"
214 type="text"
215 value={reference}
216 onChange={(e) => setReference(e.target.value)}
217 className={css({
218 width: "100%",
219 padding: "0.5rem",
220 border: "1px solid #d1d5db",
221 borderRadius: "0.375rem",
222 })}
223 />
224 </div>
225
226 <button
227 type="submit"
228 disabled={!canSubmit}
229 className={css({
230 width: "100%",
231 padding: "0.75rem",
232 fontWeight: "600",
233 color: "white",
234 background: canSubmit ? "#2563eb" : "#9ca3af",
235 border: "none",
236 borderRadius: "0.375rem",
237 cursor: canSubmit ? "pointer" : "not-allowed",
238 })}
239 >
240 Submit
241 </button>
242 </form>
243 </main>
244 );
245 }
246
lint/@pandacss(no-physical-properties) 14 quality page.tsx:72:67 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:80:13 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:95:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:98:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:120:30 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:128:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:131:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:150:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:153:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:172:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:175:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:197:32 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:205:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:208:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". Every run that broke lint/@pandacss(no-physical-properties) raw-values/raw-color 14 design-system page.tsx:83:25 · #ecfdf5 `#ecfdf5` is a raw color. Use a semantic color token. page.tsx:84:21 · 1px solid #10b981 `1px solid #10b981` is a raw color. Use a semantic color token. page.tsx:85:20 · #065f46 `#065f46` is a raw color. Use a semantic color token. page.tsx:109:23 · 1px solid #d1d5db `1px solid #d1d5db` is a raw color. Use a semantic color token. page.tsx:120:74 · #374151 `#374151` is a raw color. Use a semantic color token. page.tsx:144:23 · 1px solid #d1d5db `1px solid #d1d5db` is a raw color. Use a semantic color token. page.tsx:166:23 · 1px solid #d1d5db `1px solid #d1d5db` is a raw color. Use a semantic color token. page.tsx:191:37 · 1px solid #dc2626 `1px solid #dc2626` is a raw color. Use a semantic color token. page.tsx:191:59 · 1px solid #d1d5db `1px solid #d1d5db` is a raw color. Use a semantic color token. page.tsx:197:76 · #dc2626 `#dc2626` is a raw color. Use a semantic color token. page.tsx:220:23 · 1px solid #d1d5db `1px solid #d1d5db` is a raw color. Use a semantic color token. page.tsx:233:20 · white `white` is a raw color. Use a semantic color token. page.tsx:234:37 · #2563eb `#2563eb` is a raw color. Use a semantic color token. page.tsx:234:49 · #9ca3af `#9ca3af` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color token-names/unknown-token 8 design-system page.tsx:69:21 · system-ui, sans-serif `fontFamily: "system-ui, sans-serif"`: `system-ui, sans-serif` is not a fonts token. Use one of: sans, mono. page.tsx:72:60 · 700 `fontWeight: "700"`: `700` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:98:75 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:131:75 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:153:75 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:175:75 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:208:75 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:232:25 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. Every run that broke token-names/unknown-token components/native-element 6 design-system page.tsx:102:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:135:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:157:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:179:11 · <input> `<input>` has a design-system equivalent: use `NumberInput` from `@vektos/ds`. page.tsx:212:11 · <input> `<input>` has a design-system equivalent: use `Input` from `@vektos/ds`. page.tsx:226:9 · <button> `<button>` has a design-system equivalent: use `Button` from `@vektos/ds`. Every run that broke components/native-element typecheck/TS18048 5 quality a11y/color-contrast 1 quality page.tsx:1:1 · <p class="mt_0.25rem fs_0.875rem c_#374151" data-available-balance="4821.37">Available balance: €4,821.37 (4821.37 EUR)< Elements must meet minimum color contrast ratio thresholds (1 element, dark theme) Every run that broke a11y/color-contrast lint/eslint(no-unused-vars) 1 quality lint/jsx-a11y(prefer-tag-over-role) 1 quality typecheck/TS2769 0 quality 9 write_file 958 4,555 $0.0000
10 write_file 4,641 1,790 $0.0000