Runs / notification-settings 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 64 counted, under 9 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 180 30 $0.0000 1 read_file, list_files 96 46 $0.0000 2 list_files 363 49 $0.0000 3
Output cap The provider's default 3
4 import data from "./fixture.json";
5 import { css } from "styled-system/css";
6
7 export default function NotificationSettingsPage() {
8 const [alerts, setAlerts] = useState(data.alerts);
9 const [frequency, setFrequency] = useState(data.summary.frequency);
10 const [productNews, setProductNews] = useState(data.productNews);
11 const [toast, setToast] = useState<string | null>(null);
12 const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
13
14 const showToast = (message: string) => {
15 setToast(message);
16 if (timerRef.current) clearTimeout(timerRef.current);
17 timerRef.current = setTimeout(() => setToast(null), 2500);
18 };
19
20 useEffect(() => {
21 return () => {
22 if (timerRef.current) clearTimeout(timerRef.current);
23 };
24 }, []);
25
26 const toggleAlert = (id: string) => {
27 setAlerts((prev) =>
28 prev.map((alert) => {
29 if (alert.id !== id) return alert;
30 const next = !alert.enabled;
31 showToast(`${alert.label} alerts ${next ? "on" : "off"}`);
32 return { ...alert, enabled: next };
33 })
34 );
35 };
36
37 const saveSummary = () => {
38 showToast("Settings saved");
39 };
40
41 return (
42 <main
43 className={css({
44 maxWidth: "720px",
45 margin: "0 auto",
46 padding: "2rem",
47 fontFamily: "system-ui, sans-serif",
48 })}
49 >
50 <h1 className={css({ fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" })}>
51 Notification settings
52 </h1>
53
54 <section className={css({ marginBottom: "2rem" })}>
55 <h2 className={css({ fontSize: "1.125rem", fontWeight: 600, marginBottom: "0.5rem" })}>
56 Who receives notifications
57 </h2>
58 <p className={css({ fontWeight: 500 })}>{data.account.name}</p>
59 <p className={css({ color: "#4b5563" })}>{data.account.email}</p>
60 </section>
61
62 <section className={css({ marginBottom: "2rem" })}>
63 <h2 className={css({ fontSize: "1.125rem", fontWeight: 600, marginBottom: "0.75rem" })}>
64 Alerts
65 </h2>
66 <ul className={css({ listStyle: "none", padding: 0, margin: 0 })}>
67 {alerts.map((alert) => (
68 <li
69 key={alert.id}
70 className={css({
71 display: "flex",
72 alignItems: "flex-start",
73 justifyContent: "space-between",
74 gap: "1rem",
75 padding: "0.75rem 0",
76 borderBottom: "1px solid #e5e7eb",
77 })}
78 >
79 <div>
80 <p className={css({ fontWeight: 500, marginBottom: "0.25rem" })}>
81 {alert.label}
82 </p>
83 <p className={css({ fontSize: "0.875rem", color: "#4b5563" })}>
84 {alert.description}
85 </p>
86 </div>
87 <input
88 type="checkbox"
89 role="switch"
90 aria-checked={alert.enabled}
91 checked={alert.enabled}
92 onChange={() => toggleAlert(alert.id)}
93 aria-label={alert.label}
94 className={css({ marginTop: "0.25rem" })}
95 />
96 </li>
97 ))}
98 </ul>
99 </section>
100
101 <section className={css({ marginBottom: "2rem" })}>
102 <h2 className={css({ fontSize: "1.125rem", fontWeight: 600, marginBottom: "0.75rem" })}>
103 Summary email
104 </h2>
105 <div className={css({ display: "flex", flexDirection: "column", gap: "0.75rem" })}>
106 <label className={css({ display: "flex", flexDirection: "column", gap: "0.25rem" })}>
107 <span>Frequency</span>
108 <select
109 value={frequency}
110 onChange={(e) => setFrequency(e.target.value)}
111 aria-label="Frequency"
112 className={css({ padding: "0.5rem", border: "1px solid #d1d5db", borderRadius: "0.375rem" })}
113 >
114 {data.summary.options.map((option) => (
115 <option key={option.value} value={option.value}>
116 {option.label}
117 </option>
118 ))}
119 </select>
120 </label>
121 <label className={css({ display: "flex", alignItems: "center", gap: "0.5rem" })}>
122 <input
123 type="checkbox"
124 checked={productNews}
125 onChange={(e) => setProductNews(e.target.checked)}
126 />
127 Send me product news
128 </label>
129 <button
130 onClick={saveSummary}
131 className={css({
132 alignSelf: "flex-start",
133 padding: "0.5rem 1rem",
134 backgroundColor: "#2563eb",
135 color: "#ffffff",
136 borderRadius: "0.375rem",
137 border: "none",
138 cursor: "pointer",
139 })}
140 >
141 Save
142 </button>
143 </div>
144 </section>
145
146 {toast && (
147 <div
148 role="status"
149 aria-live="polite"
150 className={css({
151 position: "fixed",
152 bottom: "1rem",
153 left: "50%",
154 transform: "translateX(-50%)",
155 padding: "0.75rem 1rem",
156 backgroundColor: "#111827",
157 color: "#ffffff",
158 borderRadius: "0.375rem",
159 boxShadow: "0 10px 15px -3px rgba(0,0,0,0.1)",
160 })}
161 >
162 {toast}
163 </div>
164 )}
165 </main>
166 );
167 }
168
`2rem` is a raw length. Use a token.
lint/@pandacss(no-physical-properties) 12 quality page.tsx:50:65 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:54:33 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:55:69 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:62:33 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:63:69 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:76:17 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:80:54 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:94:34 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:101:33 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:102:69 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:152:13 Use the logical property "insetBlockEnd" instead of the physical "bottom". page.tsx:153:13 Use the logical property "insetInlineStart" instead of the physical "left". Every run that broke lint/@pandacss(no-physical-properties) raw-values/raw-color 9 design-system page.tsx:59:36 · #4b5563 `#4b5563` is a raw color. Use a semantic color token. page.tsx:76:31 · 1px solid #e5e7eb `1px solid #e5e7eb` is a raw color. Use a semantic color token. page.tsx:83:66 · #4b5563 `#4b5563` is a raw color. Use a semantic color token. page.tsx:112:59 · 1px solid #d1d5db `1px solid #d1d5db` is a raw color. Use a semantic color token. page.tsx:134:32 · #2563eb `#2563eb` is a raw color. Use a semantic color token. page.tsx:135:22 · #ffffff `#ffffff` is a raw color. Use a semantic color token. page.tsx:156:30 · #111827 `#111827` is a raw color. Use a semantic color token. page.tsx:157:20 · #ffffff `#ffffff` is a raw color. Use a semantic color token. page.tsx:159:24 · 0 10px 15px -3px rgba(0,0,0,0.1) `0 10px 15px -3px rgba(0,0,0,0.1)` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color typecheck/TS2769 2 quality lint/jsx-a11y(prefer-tag-over-role) 1 quality 12 write_file 176 3,269 $0.0000
13 write_file 3,341 1,849 $0.0000