Runs / statement 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 47 counted, under 7 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 read_file, list_files 1,035 74 $0.0001 1 write_file 2,073 2,207 $0.0013 2 stop 4,301 66 $0.0005
Output cap The provider's default 3
4 type Transaction = {
5 id: string;
6 date: string;
7 description: string;
8 category: string;
9 amount: number;
10 status: "booked" | "pending";
11 };
12
13 const { account } = data;
14 const transactions: Transaction[] = data.transactions as Transaction[];
15
16 const currencyFormatter = new Intl.NumberFormat("en-GB", {
17 style: "currency",
18 currency: account.currency,
19 });
20
21 const dateFormatter = new Intl.DateTimeFormat("en-GB", {
22 day: "2-digit",
23 month: "short",
24 year: "numeric",
25 timeZone: "UTC",
26 });
27
28 function formatDate(iso: string): string {
29 return dateFormatter.format(new Date(`${iso}T00:00:00Z`));
30 }
31
32 function formatAmount(amount: number): string {
33 return currencyFormatter.format(amount);
34 }
35
36 const page = css({
37 maxWidth: "960px",
38 margin: "0 auto",
39 padding: "32px 16px",
40 fontFamily: "sans-serif",
41 color: "#1a1a1a",
42 });
43
44 const header = css({
45 display: "flex",
46 flexWrap: "wrap",
47 justifyContent: "space-between",
48 alignItems: "flex-end",
49 gap: "16px",
50 borderBottom: "1px solid #d9d9d9",
51 paddingBottom: "16px",
52 marginBottom: "24px",
53 });
54
55 const title = css({
56 fontSize: "24px",
57 fontWeight: "bold",
58 margin: "0 0 4px 0",
59 });
60
61 const muted = css({
62 color: "#666",
63 fontSize: "14px",
64 margin: 0,
65 });
66
67 const balanceBlock = css({
68 textAlign: "right",
69 });
70
71 const balanceLabel = css({
72 color: "#666",
73 fontSize: "13px",
74 margin: 0,
75 });
76
77 const balanceValue = css({
78 fontSize: "28px",
79 fontWeight: "bold",
80 margin: "4px 0 0 0",
81 fontVariantNumeric: "tabular-nums",
82 });
83
84 const table = css({
85 width: "100%",
86 borderCollapse: "collapse",
87 fontSize: "14px",
88 });
89
90 const th = css({
91 textAlign: "left",
92 fontWeight: "600",
93 color: "#666",
94 borderBottom: "2px solid #d9d9d9",
95 padding: "8px",
96 });
97
98 const thRight = css({
99 textAlign: "right",
100 fontWeight: "600",
101 color: "#666",
102 borderBottom: "2px solid #d9d9d9",
103 padding: "8px",
104 });
105
106 const td = css({
107 borderBottom: "1px solid #eee",
108 padding: "10px 8px",
109 verticalAlign: "middle",
110 });
111
112 const tdRight = css({
113 borderBottom: "1px solid #eee",
114 padding: "10px 8px",
115 textAlign: "right",
116 fontVariantNumeric: "tabular-nums",
117 whiteSpace: "nowrap",
118 });
119
120 const amountOut = css({ color: "#b00020" });
121 const amountIn = css({ color: "#1b6e3a" });
122
123 const pendingBadge = css({
124 display: "inline-block",
125 marginLeft: "8px",
126 padding: "2px 8px",
127 borderRadius: "999px",
128 backgroundColor: "#fff4d6",
129 color: "#7a5300",
130 border: "1px solid #e6b800",
131 fontSize: "12px",
132 fontWeight: "600",
133 });
134
135 const pendingRow = css({
136 backgroundColor: "#fffdf5",
137 });
138
139 export default function StatementPage() {
140 return (
141 <main className={page}>
142 <header className={header}>
143 <div>
144 <h1 className={title}>Current account statement</h1>
145 <p className={muted}>{account.holder}</p>
146 <p className={muted}>IBAN {account.iban}</p>
147 <p className={muted}>
148 Period {formatDate(account.period.from)} – {formatDate(account.period.to)}
149 </p>
150 </div>
151 <div className={balanceBlock}>
152 <p className={balanceLabel}>Current balance</p>
153 <p className={balanceValue}>{formatAmount(account.balance)}</p>
154 </div>
155 </header>
156
157 <table className={table}>
158 <thead>
159 <tr>
160 <th className={th} scope="col">Date</th>
161 <th className={th} scope="col">Description</th>
162 <th className={th} scope="col">Category</th>
163 <th className={thRight} scope="col">Amount</th>
164 </tr>
165 </thead>
166 <tbody>
167 {transactions.map((tx) => {
168 const isPending = tx.status === "pending";
169 return (
170 <tr key={tx.id} className={isPending ? pendingRow : undefined}>
171 <td className={td}>{formatDate(tx.date)}</td>
172 <td className={td}>
173 {tx.description}
174 {isPending && (
175 <span className={pendingBadge} title="Not final yet">
176 Pending
177 </span>
178 )}
179 </td>
180 <td className={td}>{tx.category}</td>
181 <td className={`${tdRight} ${tx.amount < 0 ? amountOut : amountIn}`}>
182 {formatAmount(tx.amount)}
183 </td>
184 </tr>
185 );
186 })}
187 </tbody>
188 </table>
189 </main>
190 );
191 }
192
`14px` is a raw length. Use a token.
raw-values/raw-color 16 design-system page.tsx:41:10 · #1a1a1a `#1a1a1a` is a raw color. Use a semantic color token. page.tsx:50:17 · 1px solid #d9d9d9 `1px solid #d9d9d9` is a raw color. Use a semantic color token. page.tsx:62:10 · #666 `#666` is a raw color. Use a semantic color token. page.tsx:72:10 · #666 `#666` is a raw color. Use a semantic color token. page.tsx:93:10 · #666 `#666` is a raw color. Use a semantic color token. page.tsx:94:17 · 2px solid #d9d9d9 `2px solid #d9d9d9` is a raw color. Use a semantic color token. page.tsx:101:10 · #666 `#666` is a raw color. Use a semantic color token. page.tsx:102:17 · 2px solid #d9d9d9 `2px solid #d9d9d9` is a raw color. Use a semantic color token. page.tsx:107:17 · 1px solid #eee `1px solid #eee` is a raw color. Use a semantic color token. page.tsx:113:17 · 1px solid #eee `1px solid #eee` is a raw color. Use a semantic color token. page.tsx:120:32 · #b00020 `#b00020` is a raw color. Use a semantic color token. page.tsx:121:31 · #1b6e3a `#1b6e3a` is a raw color. Use a semantic color token. page.tsx:128:20 · #fff4d6 `#fff4d6` is a raw color. Use a semantic color token. page.tsx:129:10 · #7a5300 `#7a5300` is a raw color. Use a semantic color token. page.tsx:130:11 · 1px solid #e6b800 `1px solid #e6b800` is a raw color. Use a semantic color token. page.tsx:136:20 · #fffdf5 `#fffdf5` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color lint/@pandacss(no-physical-properties) 8 quality page.tsx:50:3 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:51:3 Use the logical property "paddingBlockEnd" instead of the physical "paddingBottom". page.tsx:52:3 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:94:3 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:102:3 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:107:3 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:113:3 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:125:3 Use the logical property "marginInlineStart" instead of the physical "marginLeft". Every run that broke lint/@pandacss(no-physical-properties) typecheck/TS2769 0 quality