Runs / goods-receipt 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 30 counted, under 8 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 523 25 $0.0000 1 list_files 562 23 $0.0000 2 read_file 87 32 $0.0000 3
Output cap 20,000 tokens a step 3 import { useState } from "react";
4 import { css } from "styled-system/css";
5 import data from "./fixture.json";
6
7 export default function Page() {
8 const po = data.purchaseOrder;
9
10 const [received, setReceived] = useState<number[]>(
11 data.lines.map((l) => l.ordered)
12 );
13 const [dock, setDock] = useState<string>("");
14 const [damaged, setDamaged] = useState<boolean>(false);
15 const [damageNote, setDamageNote] = useState<string>("");
16 const [submitted, setSubmitted] = useState<boolean>(false);
17
18 const receivedErrors = received.map((value, i) => {
19 const ordered = data.lines[i].ordered;
20 if (Number.isNaN(value)) return "Received quantity is required";
21 if (value < 0) return "Cannot be negative";
22 if (value > ordered) return `Cannot exceed ${ordered}`;
23 return null;
24 });
25
26 const dockError = dock === "" ? "Dock is required" : null;
27
28 const hasErrors =
29 receivedErrors.some((e) => e !== null) || dockError !== null;
30
31 const handleSubmit = (e: React.FormEvent) => {
32 e.preventDefault();
33 if (hasErrors) return;
34 setSubmitted(true);
35 };
36
37 if (submitted) {
38 return (
39 <main
40 className={css({
41 maxW: "720px",
42 mx: "auto",
43 p: "6",
44 })}
45 >
46 <p
47 className={css({
48 fontSize: "lg",
49 fontWeight: "semibold",
50 color: "#15803d",
51 })}
52 >
53 Receipt confirmed for purchase order {po.number}.
54 </p>
55 </main>
56 );
57 }
58
59 return (
60 <main
61 className={css({
62 maxW: "720px",
63 mx: "auto",
64 p: "6",
65 display: "flex",
66 flexDirection: "column",
67 gap: "6",
68 })}
69 >
70 <header>
71 <h1 className={css({ fontSize: "2xl", fontWeight: "bold" })}>
72 Confirm delivery receipt
73 </h1>
74 </header>
75
76 <section
77 className={css({
78 display: "grid",
79 gridTemplateColumns: "1fr 1fr",
80 gap: "4",
81 })}
82 >
83 <div>
84 <span className={css({ fontWeight: "semibold" })}>Purchase order</span>
85 <p>{po.number}</p>
86 </div>
87 <div>
88 <span className={css({ fontWeight: "semibold" })}>Supplier</span>
89 <p>{po.supplier}</p>
90 </div>
91 <div>
92 <span className={css({ fontWeight: "semibold" })}>Expected on</span>
93 <p>{po.expectedOn}</p>
94 </div>
95 </section>
96
97 <form onSubmit={handleSubmit} className={css({ display: "flex", flexDirection: "column", gap: "6" })}>
98 <table className={css({ width: "100%", borderCollapse: "collapse" })}>
99 <thead>
100 <tr>
101 <th className={css({ textAlign: "left", p: "2" })}>Product</th>
102 <th className={css({ textAlign: "left", p: "2" })}>Ordered</th>
103 <th className={css({ textAlign: "left", p: "2" })}>Received</th>
104 </tr>
105 </thead>
106 <tbody>
107 {data.lines.map((line, i) => (
108 <tr key={line.sku}>
109 <td className={css({ p: "2" })}>
110 {line.name}
111 <div className={css({ fontSize: "sm", color: "#6b7280" })}>
112 {line.sku}
113 </div>
114 </td>
115 <td className={css({ p: "2" })}>
116 {line.ordered} {line.unit}
117 </td>
118 <td className={css({ p: "2" })}>
119 <input
120 type="number"
121 min={0}
122 max={line.ordered}
123 value={received[i]}
124 onChange={(e) => {
125 const next = [...received];
126 const raw = e.target.value;
127 next[i] = raw === "" ? 0 : Number(raw);
128 setReceived(next);
129 }}
130 aria-label={`Received for ${line.name}`}
131 className={css({
132 w: "100%",
133 p: "2",
134 borderWidth: "1px",
135 borderRadius: "md",
136 borderColor: receivedErrors[i] ? "#dc2626" : "#d1d5db",
137 })}
138 />
139 {receivedErrors[i] && (
140 <p className={css({ color: "#dc2626", fontSize: "sm", mt: "1" })}>
141 {receivedErrors[i]}
142 </p>
143 )}
144 </td>
145 </tr>
146 ))}
147 </tbody>
148 </table>
149
150 <div className={css({ display: "flex", flexDirection: "column", gap: "2" })}>
151 <label htmlFor="dock" className={css({ fontWeight: "semibold" })}>
152 Dock
153 </label>
154 <select
155 id="dock"
156 value={dock}
157 onChange={(e) => setDock(e.target.value)}
158 required
159 className={css({
160 p: "2",
161 borderWidth: "1px",
162 borderRadius: "md",
163 borderColor: dockError ? "#dc2626" : "#d1d5db",
164 })}
165 >
166 <option value="">Select a dock</option>
167 {data.docks.map((d) => (
168 <option key={d} value={d}>
169 {d}
170 </option>
171 ))}
172 </select>
173 {dockError && (
174 <p className={css({ color: "#dc2626", fontSize: "sm" })}>{dockError}</p>
175 )}
176 </div>
177
178 <div className={css({ display: "flex", flexDirection: "column", gap: "2" })}>
179 <label className={css({ display: "flex", alignItems: "center", gap: "2" })}>
180 <input
181 type="checkbox"
182 checked={damaged}
183 onChange={(e) => setDamaged(e.target.checked)}
184 />
185 Some goods arrived damaged
186 </label>
187 {damaged && (
188 <textarea
189 value={damageNote}
190 onChange={(e) => setDamageNote(e.target.value)}
191 placeholder="What was damaged?"
192 aria-label="Damage note"
193 className={css({
194 p: "2",
195 borderWidth: "1px",
196 borderRadius: "md",
197 borderColor: "#d1d5db",
198 })}
199 />
200 )}
201 </div>
202
203 <button
204 type="submit"
205 disabled={hasErrors}
206 className={css({
207 alignSelf: "flex-start",
208 px: "4",
209 py: "2",
210 borderRadius: "md",
211 bg: hasErrors ? "#d1d5db" : "#2563eb",
212 color: "#ffffff",
213 fontWeight: "semibold",
214 cursor: hasErrors ? "not-allowed" : "pointer",
215 })}
216 >
217 Confirm receipt
218 </button>
219 </form>
220 </main>
221 );
222 }
223
`#d1d5db` is a raw color. Use a semantic color token.
page.tsx:174:40 · #dc2626 `#dc2626` is a raw color. Use a semantic color token. page.tsx:197:30 · #d1d5db `#d1d5db` is a raw color. Use a semantic color token. page.tsx:211:29 · #d1d5db `#d1d5db` is a raw color. Use a semantic color token. page.tsx:211:41 · #2563eb `#2563eb` is a raw color. Use a semantic color token. page.tsx:212:20 · #ffffff `#ffffff` is a raw color. Use a semantic color token. components/native-element 6 design-system page.tsx:98:9 · <table> `<table>` has a design-system equivalent: use `Table` from `@vektos/ds`. page.tsx:119:19 · <input> `<input>` has a design-system equivalent: use `NumberInput` from `@vektos/ds`. page.tsx:154:11 · <select> `<select>` has a design-system equivalent: use `Select` from `@vektos/ds`. page.tsx:180:13 · <input> `<input>` has a design-system equivalent: use `Checkbox` or `Switch` from `@vektos/ds`. page.tsx:188:13 · <textarea> `<textarea>` has a design-system equivalent: use `Textarea` from `@vektos/ds`. page.tsx:203:9 · <button> `<button>` has a design-system equivalent: use `Button` from `@vektos/ds`. Every run that broke components/native-element raw-values/raw-length 5 design-system a11y/color-contrast 2 quality page.tsx:1:1 · <div class="fs_sm c_#6b7280">BOX-40-30-20</div> Elements must meet minimum color contrast ratio thresholds (4 elements, dark theme) page.tsx:1:1 · <div class="fs_sm c_#6b7280">BOX-40-30-20</div> Elements must meet minimum color contrast ratio thresholds (4 elements, light theme) Every run that broke a11y/color-contrast typecheck/TS2532 1 quality typecheck/TS2769 1 quality 13 write_file 244 3,152 $0.0000
14 write_file 3,228 1,652 $0.0000
15 write_file 1,704 2,320 $0.0000