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 74 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, list_files 55 46 $0.0000 2 read_file 488 63 $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 export default function SepaTransferPage() {
10 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
11 const [beneficiaryName, setBeneficiaryName] = useState("");
12 const [beneficiaryIban, setBeneficiaryIban] = useState("");
13 const [amount, setAmount] = useState("");
14 const [reference, setReference] = useState("");
15 const [touched, setTouched] = useState(false);
16 const [submitted, setSubmitted] = useState<{ amount: string; beneficiary: string } | null>(null);
17
18 const account = data.accounts.find((a) => a.id === accountId) ?? data.accounts[0];
19
20 const numericAmount = Number(amount);
21 const amountValid =
22 amount.trim() !== "" &&
23 !Number.isNaN(numericAmount) &&
24 numericAmount > 0 &&
25 numericAmount <= account.available;
26 const exceedsBalance =
27 amount.trim() !== "" && !Number.isNaN(numericAmount) && numericAmount > account.available;
28
29 const canSubmit =
30 accountId !== "" &&
31 beneficiaryName.trim() !== "" &&
32 beneficiaryIban.trim() !== "" &&
33 amountValid;
34
35 function handleSubmit(e: React.FormEvent) {
36 e.preventDefault();
37 if (!canSubmit) return;
38 setSubmitted({ amount: amount.trim(), beneficiary: beneficiaryName.trim() });
39 }
40
41 return (
42 <main
43 className={css({
44 maxWidth: "560px",
45 margin: "0 auto",
46 padding: "2rem 1rem",
47 fontFamily: "sans-serif",
48 })}
49 >
50 <h1 className={css({ fontSize: "1.5rem", fontWeight: "bold", marginBottom: "1.5rem" })}>
51 SEPA Transfer
52 </h1>
53
54 {submitted && (
55 <div
56 role="status"
57 className={css({
58 marginBottom: "1.5rem",
59 padding: "1rem",
60 borderRadius: "8px",
61 backgroundColor: "#e6f4ea",
62 color: "#1e4620",
63 })}
64 >
65 Transfer of {submitted.amount} {data.currency} to {submitted.beneficiary} sent successfully.
66 </div>
67 )}
68
69 <form onSubmit={handleSubmit} noValidate>
70 <div className={css({ marginBottom: "1rem" })}>
71 <label htmlFor="account" className={css({ display: "block", marginBottom: "0.25rem", fontWeight: "600" })}>
72 Pay from account
73 </label>
74 <select
75 id="account"
76 value={accountId}
77 onChange={(e) => setAccountId(e.target.value)}
78 className={css({ width: "100%", padding: "0.5rem", fontSize: "1rem" })}
79 >
80 {data.accounts.map((a: Account) => (
81 <option key={a.id} value={a.id}>
82 {a.name} ({a.iban})
83 </option>
84 ))}
85 </select>
86 <p className={css({ marginTop: "0.25rem", fontSize: "0.875rem", color: "#555" })}>
87 Available balance: {account.available} {data.currency}
88 </p>
89 </div>
90
91 <div className={css({ marginBottom: "1rem" })}>
92 <label htmlFor="beneficiaryName" className={css({ display: "block", marginBottom: "0.25rem", fontWeight: "600" })}>
93 Beneficiary name
94 </label>
95 <input
96 id="beneficiaryName"
97 type="text"
98 value={beneficiaryName}
99 onChange={(e) => setBeneficiaryName(e.target.value)}
100 className={css({ width: "100%", padding: "0.5rem", fontSize: "1rem" })}
101 required
102 />
103 </div>
104
105 <div className={css({ marginBottom: "1rem" })}>
106 <label htmlFor="beneficiaryIban" className={css({ display: "block", marginBottom: "0.25rem", fontWeight: "600" })}>
107 Beneficiary IBAN
108 </label>
109 <input
110 id="beneficiaryIban"
111 type="text"
112 value={beneficiaryIban}
113 onChange={(e) => setBeneficiaryIban(e.target.value)}
114 className={css({ width: "100%", padding: "0.5rem", fontSize: "1rem" })}
115 required
116 />
117 </div>
118
119 <div className={css({ marginBottom: "1rem" })}>
120 <label htmlFor="amount" className={css({ display: "block", marginBottom: "0.25rem", fontWeight: "600" })}>
121 Amount
122 </label>
123 <input
124 id="amount"
125 type="number"
126 step="0.01"
127 min="0"
128 value={amount}
129 onChange={(e) => {
130 setAmount(e.target.value);
131 setTouched(true);
132 }}
133 onBlur={() => setTouched(true)}
134 className={css({ width: "100%", padding: "0.5rem", fontSize: "1rem" })}
135 required
136 aria-invalid={exceedsBalance}
137 />
138 {touched && amount.trim() !== "" && !amountValid && (
139 <p role="alert" className={css({ marginTop: "0.25rem", fontSize: "0.875rem", color: "#c00" })}>
140 {exceedsBalance
141 ? "Amount cannot exceed available balance."
142 : "Enter a valid amount greater than 0."}
143 </p>
144 )}
145 </div>
146
147 <div className={css({ marginBottom: "1rem" })}>
148 <label htmlFor="reference" className={css({ display: "block", marginBottom: "0.25rem", fontWeight: "600" })}>
149 Reference (optional)
150 </label>
151 <input
152 id="reference"
153 type="text"
154 value={reference}
155 onChange={(e) => setReference(e.target.value)}
156 className={css({ width: "100%", padding: "0.5rem", fontSize: "1rem" })}
157 />
158 </div>
159
160 <button
161 type="submit"
162 disabled={!canSubmit}
163 className={css({
164 padding: "0.6rem 1.2rem",
165 fontSize: "1rem",
166 fontWeight: "600",
167 color: "#fff",
168 backgroundColor: canSubmit ? "#1a73e8" : "#9bbcf5",
169 border: "none",
170 borderRadius: "6px",
171 cursor: canSubmit ? "pointer" : "not-allowed",
172 })}
173 >
174 Send transfer
175 </button>
176 </form>
177 </main>
178 );
179 }
180
`1rem` is a raw length. Use a token.
page.tsx:164:22 · 0.6rem 1.2rem `0.6rem 1.2rem` is a raw length. Use a token. lint/@pandacss(no-physical-properties) 14 quality page.tsx:50:68 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:58:13 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:70:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:71:71 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:86:31 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:91:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:92:79 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:105:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:106:79 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:119:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:120:70 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:139:46 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:147:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:148:73 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". Every run that broke lint/@pandacss(no-physical-properties) token-names/unknown-token 8 design-system page.tsx:47:21 · sans-serif `fontFamily: "sans-serif"`: `sans-serif` is not a fonts token. Use one of: sans, mono. page.tsx:50:60 · bold `fontWeight: "bold"`: `bold` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:71:108 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:92:116 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:106:116 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:120:107 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:148:110 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:166: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:74:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:95: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:123: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:160:9 · <button> `<button>` has a design-system equivalent: use `Button` from `@vektos/ds`. Every run that broke components/native-element typecheck/TS18048 3 quality lint/jsx-a11y(prefer-tag-over-role) 1 quality typecheck/TS2769 0 quality 7 write_file 788 2,528 $0.0000