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 48 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 121 30 $0.0000 1 read_file 101 31 $0.0000 2 list_files 901 36 $0.0000 3
Output cap
The provider's default 3
4 const { account, transactions } = data;
5
6 function formatAmount(value: number): string {
7 return value.toFixed(2);
8 }
9
10 export default function OctoberStatementPage() {
11 return (
12 <main
13 className={css({
14 minHeight: "100vh",
15 bg: "gray.50",
16 color: "gray.900",
17 p: { base: "4", md: "8" },
18 })}
19 >
20 <div className={css({ maxW: "960px", mx: "auto" })}>
21 <header className={css({ mb: "6" })}>
22 <h1 className={css({ fontSize: "2xl", fontWeight: "bold", mb: "1" })}>
23 October statement
24 </h1>
25 <p className={css({ color: "gray.600" })}>
26 {account.period.from} – {account.period.to}
27 </p>
28 </header>
29
30 <section
31 className={css({
32 bg: "white",
33 borderRadius: "lg",
34 p: "6",
35 mb: "6",
36 boxShadow: "sm",
37 })}
38 >
39 <dl
40 className={css({
41 display: "grid",
42 gridTemplateColumns: "max-content 1fr",
43 gap: "2",
44 })}
45 >
46 <dt className={css({ fontWeight: "semibold" })}>Account holder</dt>
47 <dd>{account.holder}</dd>
48 <dt className={css({ fontWeight: "semibold" })}>IBAN</dt>
49 <dd>{account.iban}</dd>
50 <dt className={css({ fontWeight: "semibold" })}>Current balance</dt>
51 <dd>
52 {formatAmount(account.balance)} {account.currency}
53 </dd>
54 </dl>
55 </section>
56
57 <section
58 className={css({
59 bg: "white",
60 borderRadius: "lg",
61 p: "6",
62 boxShadow: "sm",
63 })}
64 >
65 <h2 className={css({ fontSize: "xl", fontWeight: "semibold", mb: "4" })}>
66 Transactions
67 </h2>
68 <table className={css({ width: "100%", borderCollapse: "collapse" })}>
69 <thead>
70 <tr>
71 <th className={css({ textAlign: "left", p: "2", borderBottom: "1px solid", borderColor: "gray.200" })}>
72 Date
73 </th>
74 <th className={css({ textAlign: "left", p: "2", borderBottom: "1px solid", borderColor: "gray.200" })}>
75 Description
76 </th>
77 <th className={css({ textAlign: "left", p: "2", borderBottom: "1px solid", borderColor: "gray.200" })}>
78 Category
79 </th>
80 <th className={css({ textAlign: "right", p: "2", borderBottom: "1px solid", borderColor: "gray.200" })}>
81 Amount ({account.currency})
82 </th>
83 <th className={css({ textAlign: "left", p: "2", borderBottom: "1px solid", borderColor: "gray.200" })}>
84 Status
85 </th>
86 </tr>
87 </thead>
88 <tbody>
89 {transactions.map((tx) => (
90 <tr key={tx.id}>
91 <td className={css({ p: "2", borderBottom: "1px solid", borderColor: "gray.100" })}>
92 <time dateTime={tx.date}>{tx.date}</time>
93 </td>
94 <td className={css({ p: "2", borderBottom: "1px solid", borderColor: "gray.100" })}>
95 {tx.description}
96 </td>
97 <td className={css({ p: "2", borderBottom: "1px solid", borderColor: "gray.100" })}>
98 {tx.category}
99 </td>
100 <td
101 className={css({
102 p: "2",
103 borderBottom: "1px solid",
104 borderColor: "gray.100",
105 textAlign: "right",
106 })}
107 >
108 {formatAmount(tx.amount)}
109 </td>
110 <td className={css({ p: "2", borderBottom: "1px solid", borderColor: "gray.100" })}>
111 {tx.status === "pending" ? (
112 <span
113 className={css({
114 display: "inline-block",
115 px: "2",
116 py: "0.5",
117 borderRadius: "full",
118 bg: "yellow.100",
119 color: "yellow.800",
120 fontSize: "sm",
121 fontWeight: "medium",
122 })}
123 >
124 Pending
125 </span>
126 ) : (
127 "Booked"
128 )}
129 </td>
130 </tr>
131 ))}
132 </tbody>
133 </table>
134 </section>
135 </div>
136 </main>
137 );
138 }
`gray.200` is a palette shade: it ignores the theme. Use a semantic color token.
page.tsx:83:105 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:91:88 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:94:88 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:97:88 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:104:36 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:110:88 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:118:31 · yellow.100 `yellow.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:119:34 · yellow.800 `yellow.800` is a palette shade: it ignores the theme. Use a semantic color token. lint/@pandacss(no-physical-properties) 14 quality page.tsx:21:34 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:22:69 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:35:13 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:65:72 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:71:65 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:74:65 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:77:65 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:80:66 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:83:65 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:91:48 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:94:48 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:97:48 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:103:23 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:110:48 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". Every run that broke lint/@pandacss(no-physical-properties) raw-values/raw-length 12 design-system typecheck/TS2769 1 quality 6 write_file 219 4,624 $0.0000