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 26 counted, under 6 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 794 36 $0.0000 1 read_file 850 43 $0.0000 2 write_file 1,731 2,135 $0.0000 3
Output cap The provider's default 3
4 import { css } from "styled-system/css";
5
6 export default function OctoberStatement() {
7 const { account, transactions } = data;
8
9 const base = css({
10 maxWidth: "600px",
11 margin: "0 auto",
12 padding: "2rem",
13 fontFamily: "system-ui, sans-serif",
14 });
15
16 const heading = css({
17 marginTop: 0,
18 fontSize: "1.75rem",
19 marginBottom: "1rem",
20 });
21
22 const subtitle = css({
23 marginBottom: "1.5rem",
24 color: "#555",
25 });
26
27 const transactionItem = css({
28 display: "flex",
29 justifyContent: "space-between",
30 alignItems: "center",
31 marginBottom: "0.75rem",
32 paddingBottom: "0.75rem",
33 borderBottom: "1px solid #e5e7eb",
34 });
35
36 const amount = css({
37 fontWeight: "600",
38 color: "#111827",
39 });
40
41 const pendingBadge = css({
42 marginLeft: "0.5rem",
43 fontSize: "0.75rem",
44 background: "#fef3c7",
45 color: "#b45309",
46 padding: "0.2rem 0.5rem",
47 borderRadius: "0.3rem",
48 whiteSpace: "nowrap",
49 });
50
51 return (
52 <div className={base}>
53 <h1 className={heading}>
54 {account.holder}'s account
55 </h1>
56 <p className={subtitle}>
57 IBAN{" "}{account.iban} • {account.currency}
58 </p>
59 <p className={subtitle}>
60 Balance: {account.balance} {account.currency}
61 </p>
62
63 <ul style={{ listStyle: "none", padding: 0 }}>
64 {transactions.map((tx) => (
65 <li
66 key={tx.id}
67 className={transactionItem}
68 >
69 <span>
70 {tx.date} — {tx.description}
71 </span>
72 <span>{tx.category}</span>
73 <span className={amount}>
74 {tx.amount} {account.currency}
75 </span>
76 {tx.status === "pending" && (
77 <span className={pendingBadge}>Pending</span>
78 )}
79 </li>
80 ))}
81 </ul>
82 </div>
83 );
84 }
`0.5rem` is a raw length. Use a token.
page.tsx:46:14 · 0.2rem 0.5rem `0.2rem 0.5rem` is a raw length. Use a token. lint/@pandacss(no-physical-properties) 7 quality page.tsx:17:5 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:19:5 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:23:5 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:31:5 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:32:5 Use the logical property "paddingBlockEnd" instead of the physical "paddingBottom". page.tsx:33:5 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:42:5 Use the logical property "marginInlineStart" instead of the physical "marginLeft". Every run that broke lint/@pandacss(no-physical-properties) typecheck/TS2769 0 quality