1"use client";23import React, { useState } from "react";4import data from "./fixture.json";5import { css } from "styled-system/css";67// Assume @vektos/ds components are available; we import the typical ones.8import { Box, Text, Input, Select, Button, FormError, FormLabel } from "@vektos/ds";
Violations
31 counted, under 8 rules. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment.
page.tsx:75:12 · <Box py>`py` is not a layout prop of `Box`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:75:19 · <Box textAlign>`textAlign` is not a layout prop of `Box`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:76:15 · <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:76:29 · <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:84:10 · <Box padding>`padding` is not a layout prop of `Box`: 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.
page.tsx:85:12 · <Box mb>`mb` is not a layout prop of `Box`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:86:15 · <Text fontWeight>`fontWeight` 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:86:33 · <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:94:12 · <Box mb>`mb` is not a layout prop of `Box`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:97:31 · <Box mb>`mb` is not a layout prop of `Box`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:97:38 · <Box borderBottom>`borderBottom` is not a layout prop of `Box`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:99:18 · <Box mt>`mt` is not a layout prop of `Box`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:99:25 · <Box direction>`direction` is not a layout prop of `Box`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:99:41 · <Box justifyContent>`justifyContent` is not a layout prop of `Box`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:99:72 · <Box alignItems>`alignItems` is not a layout prop of `Box`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:144:14 · <Box mt>`mt` is not a layout prop of `Box`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:76:15Not countedType '{ fontSize: string; color: string; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & TextProps'.
page.tsx:86:15Not countedType '{ fontWeight: string; fontSize: string; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & TextProps'.
page.tsx:110:17Type '{ type: "number"; min: number; max: number; value: number | undefined; onChange: (e: ChangeEvent<HTMLInputElement, HTMLInputElement>) => void; disabled: false; error: boolean; helperText: string | undefined; }' is not assignable to type 'IntrinsicAttributes & InputProps'.
page.tsx:121:9Type '{ value: string; onChange: (e: ChangeEvent<HTMLSelectElement, Element>) => void; required: true; disabled: false; children: (Element[] | Element)[]; }' is not assignable to type 'IntrinsicAttributes & SelectProps'.
page.tsx:156:29Type 'number | true' is not assignable to type 'boolean | undefined'.