Runs / loan-contract 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 39 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 read_file 840 40 $0.0000 1 write_file 1,650 2,014 $0.0000 2 stop 1,595 24 $0.0000
Output cap The provider's default 2 import data from "./fixture.json";
3 import { css } from "styled-system/css";
4
5 const container = css({
6 maxWidth: "800px",
7 margin: "0 auto",
8 padding: "2rem",
9 fontFamily: "system-ui, sans-serif",
10 });
11
12 const heading = css({
13 marginBottom: "1rem",
14 });
15
16 const termList = css({
17 margin: "1.5rem 0",
18 });
19
20 const termItem = css({
21 marginBottom: "0.5rem",
22 });
23
24 const termLabel = css({
25 fontWeight: "600",
26 display: "block",
27 marginBottom: "0.25rem",
28 });
29
30 export default function Page() {
31 const { contract, schedule, documents } = data;
32
33 return (
34 <div className={container}>
35 <h1 className={heading}>{contract.product}</h1>
36 <p><strong>Contract number:</strong> {contract.number}</p>
37 <p><strong>Status:</strong> {contract.status}</p>
38
39 <dl className={termList}>
40 <div className={termItem}>
41 <span className={termLabel}>Amount borrowed</span>
42 <dd>{contract.principal} {contract.currency}</dd>
43 </div>
44 <div className={termItem}>
45 <span className={termLabel}>Nominal interest rate</span>
46 <dd>{(contract.nominalRate * 100).toFixed(2)}%</dd>
47 </div>
48 <div className={termItem}>
49 <span className={termLabel}>APR</span>
50 <dd>{(contract.apr * 100).toFixed(2)}%</dd>
51 </div>
52 <div className={termItem}>
53 <span className={termLabel}>Term</span>
54 <dd>{contract.termMonths} months</dd>
55 </div>
56 <div className={termItem}>
57 <span className={termLabel}>Monthly payment</span>
58 <dd>{contract.monthlyPayment} {contract.currency}</dd>
59 </div>
60 <div className={termItem}>
61 <span className={termLabel}>Start date</span>
62 <dd>{contract.startDate}</dd>
63 </div>
64 <div className={termItem}>
65 <span className={termLabel}>Outstanding</span>
66 <dd>{contract.outstanding} {contract.currency}</dd>
67 </div>
68 </dl>
69
70 <h2 className={heading}>Repayment schedule</h2>
71 <table style={{ width: "100%", borderCollapse: "collapse" }}>
72 <thead>
73 <tr>
74 <th style={{ padding: "0.5rem", border: "1px solid #ddd", textAlign: "left" }}>Due date</th>
75 <th style={{ padding: "0.5rem", border: "1px solid #ddd", textAlign: "left" }}>Payment</th>
76 <th style={{ padding: "0.5rem", border: "1px solid #ddd", textAlign: "left" }}>Principal</th>
77 <th style={{ padding: "0.5rem", border: "1px solid #ddd", textAlign: "left" }}>Interest</th>
78 <th style={{ padding: "0.5rem", border: "1px solid #ddd", textAlign: "left" }}>Balance</th>
79 <th style={{ padding: "0.5rem", border: "1px solid #ddd", textAlign: "left" }}>Status</th>
80 </tr>
81 </thead>
82 <tbody>
83 {schedule.map((inst) => (
84 <tr key={inst.number} style={{ borderBottom: "1px solid #eee" }}>
85 <td style={{ padding: "0.5rem", border: "1px solid #ddd" }}>{inst.dueDate}</td>
86 <td style={{ padding: "0.5rem", border: "1px solid #ddd" }}>
87 {inst.payment} {contract.currency}
88 </td>
89 <td style={{ padding: "0.5rem", border: "1px solid #ddd" }}>{inst.principal}</td>
90 <td style={{ padding: "0.5rem", border: "1px solid #ddd" }}>{inst.interest}</td>
91 <td style={{ padding: "0.5rem", border: "1px solid #ddd" }}>{inst.remaining}</td>
92 <td style={{ padding: "0.5rem", border: "1px solid #ddd" }}>{inst.status}</td>
93 </tr>
94 ))}
95 </tbody>
96 </table>
97
98 <h2 className={heading}>Signed documents</h2>
99 <ul>
100 {documents.map((doc) => (
101 <li key={doc.name}>
102 {doc.name}: signed {doc.signedAt}
103 </li>
104 ))}
105 </ul>
106 </div>
107 );
108 }
`0.5rem` is a raw length. Use a token.
raw-values/raw-color 13 design-system page.tsx:74:53 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:75:53 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:76:53 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:77:53 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:78:53 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:79:53 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:84:58 · 1px solid #eee `1px solid #eee` is a raw color. Use a semantic color token. page.tsx:85:55 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:86:55 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:89:55 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:90:55 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:91:55 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:92:55 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color a11y/definition-list 2 quality page.tsx:1:1 · <dl class="m_1.5rem_0"> <dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements (1 element, dark theme) page.tsx:1:1 · <dl class="m_1.5rem_0"> <dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements (1 element, light theme) Every run that broke a11y/definition-list typecheck/TS2769 0 quality