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 55 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 list_files 121 30 $0.0000 1 read_file 293 35 $0.0000 2 list_files 969 39 $0.0000 3
Output cap The provider's default 3
4 export default function OctoberStatementPage() {
5 const { account, transactions } = data;
6
7 return (
8 <main
9 className={css({
10 maxWidth: "960px",
11 margin: "0 auto",
12 padding: "24px",
13 color: "#111827",
14 })}
15 >
16 <header className={css({ marginBottom: "24px" })}>
17 <h1 className={css({ fontSize: "1.5rem", fontWeight: "700", marginBottom: "12px" })}>
18 October statement
19 </h1>
20 <p className={css({ fontSize: "1.125rem", fontWeight: "600" })}>{account.holder}</p>
21 <p className={css({ fontFamily: "monospace", color: "#6b7280" })}>{account.iban}</p>
22 <p className={css({ fontSize: "1.125rem", fontWeight: "700", marginTop: "8px" })}>
23 {account.balance} {account.currency}
24 </p>
25 </header>
26
27 <section>
28 <table
29 className={css({
30 width: "100%",
31 borderCollapse: "collapse",
32 fontSize: "0.875rem",
33 })}
34 >
35 <thead>
36 <tr>
37 <th className={css({ textAlign: "left", padding: "8px", borderBottom: "1px solid #e5e7eb" })}>
38 Date
39 </th>
40 <th className={css({ textAlign: "left", padding: "8px", borderBottom: "1px solid #e5e7eb" })}>
41 Description
42 </th>
43 <th className={css({ textAlign: "left", padding: "8px", borderBottom: "1px solid #e5e7eb" })}>
44 Category
45 </th>
46 <th className={css({ textAlign: "right", padding: "8px", borderBottom: "1px solid #e5e7eb" })}>
47 Amount ({account.currency})
48 </th>
49 <th className={css({ textAlign: "left", padding: "8px", borderBottom: "1px solid #e5e7eb" })}>
50 Status
51 </th>
52 </tr>
53 </thead>
54 <tbody>
55 {transactions.map((tx) => (
56 <tr key={tx.id}>
57 <td className={css({ padding: "8px", borderBottom: "1px solid #f3f4f6" })}>
58 {tx.date}
59 </td>
60 <td className={css({ padding: "8px", borderBottom: "1px solid #f3f4f6" })}>
61 {tx.description}
62 </td>
63 <td className={css({ padding: "8px", borderBottom: "1px solid #f3f4f6" })}>
64 {tx.category}
65 </td>
66 <td
67 className={css({
68 padding: "8px",
69 borderBottom: "1px solid #f3f4f6",
70 textAlign: "right",
71 color: tx.amount < 0 ? "#dc2626" : "#16a34a",
72 })}
73 >
74 {tx.amount}
75 </td>
76 <td className={css({ padding: "8px", borderBottom: "1px solid #f3f4f6" })}>
77 {tx.status === "pending" ? (
78 <span
79 className={css({
80 color: "#d97706",
81 fontWeight: "600",
82 })}
83 >
84 Pending
85 </span>
86 ) : null}
87 </td>
88 </tr>
89 ))}
90 </tbody>
91 </table>
92 </section>
93 </main>
94 );
95 }
96
`8px` is a raw length. Use a token.
raw-values/raw-color 15 design-system page.tsx:13:16 · #111827 `#111827` is a raw color. Use a semantic color token. page.tsx:21:61 · #6b7280 `#6b7280` is a raw color. Use a semantic color token. page.tsx:37:85 · 1px solid #e5e7eb `1px solid #e5e7eb` is a raw color. Use a semantic color token. page.tsx:40:85 · 1px solid #e5e7eb `1px solid #e5e7eb` is a raw color. Use a semantic color token. page.tsx:43:85 · 1px solid #e5e7eb `1px solid #e5e7eb` is a raw color. Use a semantic color token. page.tsx:46:86 · 1px solid #e5e7eb `1px solid #e5e7eb` is a raw color. Use a semantic color token. page.tsx:49:85 · 1px solid #e5e7eb `1px solid #e5e7eb` is a raw color. Use a semantic color token. page.tsx:57:68 · 1px solid #f3f4f6 `1px solid #f3f4f6` is a raw color. Use a semantic color token. page.tsx:60:68 · 1px solid #f3f4f6 `1px solid #f3f4f6` is a raw color. Use a semantic color token. page.tsx:63:68 · 1px solid #f3f4f6 `1px solid #f3f4f6` is a raw color. Use a semantic color token. page.tsx:69:35 · 1px solid #f3f4f6 `1px solid #f3f4f6` is a raw color. Use a semantic color token. page.tsx:71:44 · #dc2626 `#dc2626` is a raw color. Use a semantic color token. page.tsx:71:56 · #16a34a `#16a34a` is a raw color. Use a semantic color token. page.tsx:76:68 · 1px solid #f3f4f6 `1px solid #f3f4f6` is a raw color. Use a semantic color token. page.tsx:80:32 · #d97706 `#d97706` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color lint/@pandacss(no-physical-properties) 13 quality page.tsx:16:32 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:17:69 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:22:70 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:37:71 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:40:71 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:43:71 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:46:72 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:49:71 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:57:54 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:60:54 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:63:54 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:69:21 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:76:54 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". Every run that broke lint/@pandacss(no-physical-properties) token-names/unknown-token 5 design-system page.tsx:17:62 · 700 `fontWeight: "700"`: `700` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:20:63 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:21:41 · monospace `fontFamily: "monospace"`: `monospace` is not a fonts token. Use one of: sans, mono. page.tsx:22:63 · 700 `fontWeight: "700"`: `700` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:81:37 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. Every run that broke token-names/unknown-token a11y/color-contrast 2 quality page.tsx:1:1 · <p class="ff_monospace c_#6b7280">IT60 X054 2811 1010 0000 0123 456</p> Elements must meet minimum color contrast ratio thresholds (13 elements, light theme) page.tsx:1:1 · <h1 class="fs_1.5rem fw_700 mb_12px">October statement</h1> Elements must meet minimum color contrast ratio thresholds (47 elements, dark theme) Every run that broke a11y/color-contrast typecheck/TS2769 0 quality 8 write_file 244 3,733 $0.0000
9 write_file 4,257 1,032 $0.0000