1"use client";23import { useState, useEffect } from "react";4import data from "./fixture.json";5import { css } from "styled-system/css";67import {8 Card,9 Heading,10 Text, Toggle,
Violations
26 counted, under 10 rules. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment.
page.tsx:82:11 · <Card p>`p` is not a layout prop of `Card`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:83:16 · <Heading fontSize>`fontSize` is not a layout prop of `Heading`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:83:31 · <Heading mb>`mb` is not a layout prop of `Heading`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:88:29 · <Text mb>`mb` is not a layout prop of `Text`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:96:16 · <Heading fontSize>`fontSize` is not a layout prop of `Heading`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
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
853
40
$0.0000
1
write_file
1,177
1,704
$0.0000
2
stop
2,907
96
$0.0000
cdb5d9e77633
Output cap
The provider's default
11
12 Select,
13 Option,
14 Checkbox,
15 Button,
16} from "@vektos/ds";
17
18// transient message state
19const SHOW_DURATION = 3000; // ms
20
21export default function NotificationSettings() {
page.tsx:96:30 · <Heading mb>`mb` is not a layout prop of `Heading`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:109:17 · <Text fontSize>`fontSize` is not a layout prop of `Text`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:109:31 · <Text color>`color` is not a layout prop of `Text`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:116:16 · <Heading fontSize>`fontSize` is not a layout prop of `Heading`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:116:30 · <Heading mb>`mb` is not a layout prop of `Heading`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:139:36 · <Button mt>`mt` is not a layout prop of `Button`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:82:11Not countedType '{ p: number; children: ("" | false | Element[] | Element | null)[]; }' is not assignable to type 'IntrinsicAttributes & CardProps'.
page.tsx:83:16Not countedType '{ fontSize: string; mb: number; children: string; }' is not assignable to type 'IntrinsicAttributes & HeadingProps'.
page.tsx:88:29Not countedType '{ weight: "medium"; mb: number; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & TextProps'.
page.tsx:90:15Type '{ fontFamily: string; children: string[]; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'.
page.tsx:96:16Not countedType '{ fontSize: string; mb: number; children: string; }' is not assignable to type 'IntrinsicAttributes & HeadingProps'.
page.tsx:109:17Not countedType '{ fontSize: string; color: string; children: string; }' is not assignable to type 'IntrinsicAttributes & TextProps'.
page.tsx:116:16Not countedType '{ fontSize: string; mb: number; children: string; }' is not assignable to type 'IntrinsicAttributes & HeadingProps'.
page.tsx:121:9Type '{ value: string; onChange: (value: string) => void; sx: { mb: number; }; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & SelectProps'.
page.tsx:132:9Type '{ checked: boolean; onChange: (checked: boolean) => void; sx: { pr: number; }; children: string; }' is not assignable to type 'IntrinsicAttributes & CheckboxProps'.
page.tsx:139:36Not countedType '{ onClick: () => void; mt: number; children: string; }' is not assignable to type 'IntrinsicAttributes & ButtonProps'.
page.tsx:148:11Type '{ role: "alert"; "aria-live": "polite"; css: string; children: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>'.
page.tsx:157:11Type '{ role: "alert"; "aria-live": "polite"; css: string; children: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>'.