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 23 counted, under 3 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 get_guidelines, list_components, list_files 580 55 $0.0001 1 read_file, list_tokens, list_tokens, get_component, get_component, get_component 3 117 $0.0003 2 list_tokens 3 137 $0.0005
Output cap
The provider's default 4 CardBody,
5 CardDescription,
6 CardHeader,
7 CardTitle,
8 Table,
9 TableBody,
10 TableCell,
11 TableHead,
12 TableHeader,
13 TableRow,
14 } from "@vektos/ds";
15 import { css } from "styled-system/css";
16 import data from "./fixture.json";
17
18 const currency = new Intl.NumberFormat("en-IE", {
19 style: "currency",
20 currency: data.account.currency,
21 });
22
23 const dateFormat = new Intl.DateTimeFormat("en-GB", {
24 day: "2-digit",
25 month: "short",
26 year: "numeric",
27 });
28
29 function formatDate(value: string) {
30 return dateFormat.format(new Date(`${value}T12:00:00`));
31 }
32
33 function formatAmount(amount: number) {
34 const formatted = currency.format(amount);
35 return amount > 0 ? `+${formatted}` : formatted;
36 }
37
38 export default function Page() {
39 return (
40 <main
41 className={`vektos ${css({
42 minHeight: "100vh",
43 bg: "bg.canvas",
44 color: "fg.default",
45 px: { base: "4", md: "8" },
46 py: { base: "8", md: "12" },
47 })}`}
48 >
49 <div
50 className={css({
51 width: "full",
52 maxWidth: "5xl",
53 marginX: "auto",
54 })}
55 >
56 <header
57 className={css({
58 display: "flex",
59 flexDirection: { base: "column", sm: "row" },
60 alignItems: { sm: "end" },
61 justifyContent: "space-between",
62 gap: "4",
63 marginBottom: "8",
64 })}
65 >
66 <div>
67 <p
68 className={css({
69 color: "accent.default",
70 fontSize: "sm",
71 fontWeight: "semibold",
72 letterSpacing: "wide",
73 textTransform: "uppercase",
74 marginBottom: "2",
75 })}
76 >
77 Current account
78 </p>
79 <h1
80 className={css({
81 fontSize: { base: "2xl", md: "3xl" },
82 fontWeight: "bold",
83 lineHeight: "tight",
84 margin: "0",
85 })}
86 >
87 October statement
88 </h1>
89 </div>
90 <p
91 className={css({
92 color: "fg.muted",
93 fontSize: "md",
94 margin: "0",
95 })}
96 >
97 {formatDate(data.account.period.from)} – {formatDate(data.account.period.to)}
98 </p>
99 </header>
100
101 <Card>
102 <CardHeader>
103 <CardTitle>Account overview</CardTitle>
104 <CardDescription>Your account details and available balance</CardDescription>
105 </CardHeader>
106 <CardBody>
107 <div
108 className={css({
109 display: "grid",
110 gridTemplateColumns: { base: "1fr", md: "1fr 1fr auto" },
111 alignItems: { md: "center" },
112 gap: { base: "5", md: "8" },
113 })}
114 >
115 <div>
116 <p className={css({ color: "fg.muted", fontSize: "sm", margin: "0 0 1" })}>
117 Account holder
118 </p>
119 <p className={css({ fontSize: "lg", fontWeight: "semibold", margin: "0" })}>
120 {data.account.holder}
121 </p>
122 </div>
123 <div>
124 <p className={css({ color: "fg.muted", fontSize: "sm", margin: "0 0 1" })}>
125 IBAN
126 </p>
127 <p
128 className={css({
129 fontSize: "md",
130 fontWeight: "medium",
131 fontVariantNumeric: "tabular-nums",
132 margin: "0",
133 overflowWrap: "anywhere",
134 })}
135 >
136 {data.account.iban}
137 </p>
138 </div>
139 <div
140 className={css({
141 borderLeftWidth: { md: "1px" },
142 borderColor: "border.default",
143 paddingLeft: { md: "8" },
144 })}
145 >
146 <p className={css({ color: "fg.muted", fontSize: "sm", margin: "0 0 1" })}>
147 Current balance
148 </p>
149 <p
150 className={css({
151 fontSize: { base: "2xl", md: "3xl" },
152 fontWeight: "bold",
153 fontVariantNumeric: "tabular-nums",
154 letterSpacing: "tight",
155 margin: "0",
156 whiteSpace: "nowrap",
157 })}
158 >
159 {currency.format(data.account.balance)}
160 </p>
161 </div>
162 </div>
163 </CardBody>
164 </Card>
165
166 <section className={css({ marginTop: "8" })} aria-labelledby="transactions-heading">
167 <div
168 className={css({
169 display: "flex",
170 alignItems: "end",
171 justifyContent: "space-between",
172 gap: "4",
173 marginBottom: "4",
174 })}
175 >
176 <div>
177 <h2
178 id="transactions-heading"
179 className={css({ fontSize: "xl", fontWeight: "semibold", margin: "0 0 1" })}
180 >
181 Transactions
182 </h2>
183 <p className={css({ color: "fg.muted", fontSize: "sm", margin: "0" })}>
184 {data.transactions.length} transactions this period
185 </p>
186 </div>
187 <div className={css({ display: "flex", alignItems: "center", gap: "2" })}>
188 <Badge tone="warning">Pending</Badge>
189 <span className={css({ color: "fg.muted", fontSize: "sm" })}>
190 Not final
191 </span>
192 </div>
193 </div>
194
195 <Card>
196 <div className={css({ overflowX: "auto", rounded: "lg" })}>
197 <Table aria-label="October account transactions">
198 <TableHead>
199 <TableRow>
200 <TableHeader>Date</TableHeader>
201 <TableHeader>Description</TableHeader>
202 <TableHeader>Category</TableHeader>
203 <TableHeader>Status</TableHeader>
204 <TableHeader numeric>Amount ({data.account.currency})</TableHeader>
205 </TableRow>
206 </TableHead>
207 <TableBody>
208 {data.transactions.map((transaction) => (
209 <TableRow key={transaction.id}>
210 <TableCell>
211 <time dateTime={transaction.date} className={css({ whiteSpace: "nowrap" })}>
212 {formatDate(transaction.date)}
213 </time>
214 </TableCell>
215 <TableCell>
216 <span className={css({ fontWeight: "medium" })}>
217 {transaction.description}
218 </span>
219 </TableCell>
220 <TableCell>
221 <span className={css({ color: "fg.muted" })}>{transaction.category}</span>
222 </TableCell>
223 <TableCell>
224 {transaction.status === "pending" ? (
225 <Badge tone="warning">Pending</Badge>
226 ) : (
227 <span className={css({ color: "fg.muted", fontSize: "sm" })}>
228 Booked
229 </span>
230 )}
231 </TableCell>
232 <TableCell
233 numeric
234 className={css({
235 fontWeight: "semibold",
236 color: transaction.amount > 0 ? "success.text" : "fg.default",
237 whiteSpace: "nowrap",
238 })}
239 >
240 {formatAmount(transaction.amount)}
241 </TableCell>
242 </TableRow>
243 ))}
244 </TableBody>
245 </Table>
246 </div>
247 </Card>
248 </section>
249 </div>
250 </main>
251 );
252 }
253
No overload matches this call.
raw-values/raw-length 2 design-system