The rules agents break most, over every real run. Design-system rules come from the graders that read the code; quality from the compiler, the linter and axe; completeness from the rendered page.
| Rule | Group | Violations | Runs | One of them |
|---|---|---|---|---|
| raw-values/raw-length | design-system | 3313 | 164 | `-.3px` is a raw length. Use a token. |
| raw-values/raw-color | design-system | 1704 | 105 | `#000000` is a raw color. Use a semantic color token. |
| lint/@pandacss(no-physical-properties) | quality | 1061 | 126 | Use the logical property "borderBlockEnd" instead of the physical "borderBottom". |
| typecheck/TS2769 | quality | 468 | 102 | No overload matches this call. |
| components/native-element | design-system | 393 | 105 | `<a>` has a design-system equivalent: use `Link` from `@vektos/ds`. |
| typecheck/TS2322 | quality | 338 | 82 | Type '"1200"' is not assignable to type 'ConditionalValue<"0" | "1/12" | "1/2" | "1/3" | "1/4" | "1/5" | "1/6" | "10" | "10/12" | "11/12" | "12" | "16" | "2" | "2/12" | "2/3" | "2/4" | "2/5" | "2/6" | "3" | "3/12" | "3/4" | "3/5" | "3/6" | ... 331 more ... | (`var(--${string})/${string}` & { ...; })>'. |
| typecheck/TS2339 | quality | 295 | 30 | Property 'Content' does not exist on type '({ options, value, defaultValue, onValueChange, placeholder, size, name, disabled, "aria-label": ariaLabel, UNSAFE_className, UNSAFE_style, ...rest }: SelectProps) => Element'. |
| token-roles/palette | design-system | 282 | 26 | `amber.100` is a palette shade: it ignores the theme. Use a semantic color token. |
| raw-values/raw-number | design-system | 214 | 33 | `borderRadius: 4` becomes 4px. Use a token through `css()`. |
| typecheck/TS1005 | quality | 204 | 43 | ')' expected. |
| token-names/unknown-token | design-system | 198 | 58 | `fontFamily: "monospace"`: `monospace` is not a fonts token. Use one of: sans, mono. |
| lint/typescript(no-unsafe-type-assertion) | quality | 131 | 97 | Unsafe assertion from `any` detected. |
| outside-styling/styled-from-outside | design-system | 128 | 41 | `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`…). |
| typecheck/TS18048 | quality | 110 | 33 | 'account' is possibly 'undefined'. |
| typecheck/TS2304 | quality | 94 | 17 | Cannot find name 'Badge'. |
| a11y/color-contrast | quality | 93 | 66 | Elements must meet minimum color contrast ratio thresholds (1 element, dark theme) |
| render/build-failed | completeness | 88 | 88 | "page" has already been declared |
| lint/eslint(no-unused-vars) | quality | 80 | 54 | Identifier 'Button' is imported but never used. |
| lint/syntax-error | quality | 80 | 72 | Adjacent JSX elements must be wrapped in an enclosing tag. |
| typecheck/TS1443 | quality | 68 | 21 | Module declaration names may only use ' or " quoted strings. |
| lint/jsx-a11y(prefer-tag-over-role) | quality | 58 | 55 | Prefer `address, details, fieldset, hgroup, optgroup` over `role` attribute `group`. |
| render/runtime-error | completeness | 58 | 58 | Cannot read properties of null (reading 'message') |
| typecheck/TS1003 | quality | 56 | 19 | Identifier expected. |
| typecheck/TS1381 | quality | 53 | 16 | Unexpected token. Did you mean `{'}'}` or `}`? |
| a11y/landmark-one-main | quality | 52 | 26 | Document should have one main landmark (1 element, dark theme) |
| typecheck/TS2559 | quality | 51 | 8 | Type 'string' has no properties in common with type 'Properties<string | number, string & {}>'. |
| lint/react(jsx-no-undef) | quality | 50 | 14 | 'Badge' is not defined. |
| typecheck/TS1128 | quality | 49 | 12 | Declaration or statement expected. |
| typecheck/TS2686 | quality | 45 | 12 | 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. |
| typecheck/TS1109 | quality | 44 | 14 | Expression expected. |
| typecheck/TS1351 | quality | 39 | 3 | An identifier or keyword cannot immediately follow a numeric literal. |
| typecheck/TS2345 | quality | 38 | 18 | Argument of type '"politicallyExpressed"' is not assignable to parameter of type 'keyof FormValues'. |
| lint/typescript(no-unnecessary-type-assertion) | quality | 35 | 28 | This assertion is unnecessary since it does not change the type of the expression. |
| a11y/page-has-heading-one | quality | 32 | 16 | Page should contain a level-one heading (1 element, dark theme) |
| typecheck/TS1382 | quality | 30 | 15 | Unexpected token. Did you mean `{'>'}` or `>`? |
| typecheck/TS2305 | quality | 30 | 16 | Module '"/Users/valeriomazza/www/workshop/__IMPORTANT__/ai-engineer-project/apps/web/.bench/ad1911de/fixture"' has no exported member 'Payment'. |
| typecheck/TS2375 | quality | 29 | 12 | Type '{ checked: boolean | undefined; onCheckedChange: (checked: boolean) => void; helperText: string; children: string; }' is not assignable to type 'SwitchProps' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties. |
| typecheck/TS7006 | quality | 28 | 13 | Parameter 'd' implicitly has an 'any' type. |
| lint/unicorn(no-array-sort) | quality | 27 | 27 | Use `Array#toSorted()` instead of `Array#sort()`. |
| render/console-error | completeness | 27 | 14 | <%s> cannot contain a nested %s. See this log for the ancestor stack trace. p <div> |
| typecheck/TS1160 | quality | 25 | 25 | Unterminated template literal. |
| typecheck/TS2657 | quality | 24 | 11 | JSX expressions must have one parent element. |
| lint/unicorn(consistent-function-scoping) | quality | 22 | 20 | Function `feeFor` does not capture any variables from its parent scope |
| typecheck/TS2532 | quality | 22 | 14 | Object is possibly 'undefined'. |
| typecheck/TS17002 | quality | 20 | 8 | Expected corresponding JSX closing tag for 'Select'. |
| typecheck/TS2741 | quality | 20 | 16 | Property 'children' is missing in type '{ checked: boolean | undefined; onCheckedChange: (enabled: boolean) => void; }' but required in type 'SwitchProps'. |
| typecheck/TS1434 | quality | 16 | 8 | Unexpected keyword or identifier. |
| typecheck/TS7053 | quality | 15 | 8 | Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ dateOfBirth: string; nationality: string; countryOfResidence: string; taxId: string; documentType: string; documentNumber: string; isPEP: string; }'. |
| lint/next(no-html-link-for-pages) | quality | 13 | 4 | Do not use `<a>` elements to navigate between Next.js pages. |
| render/missing-text | completeness | 13 | 12 | The page does not show "Business card ending 4417". |
| lint/jsx-a11y(label-has-associated-control) | quality | 12 | 4 | A form label must be associated with a control. |
| lint/typescript(consistent-return) | quality | 11 | 10 | Function expected a return value. |
| typecheck/TS2307 | quality | 10 | 3 | Cannot find module '@storybook/react-vite' or its corresponding type declarations. |
| a11y/scrollable-region-focusable | quality | 8 | 4 | Scrollable region must have keyboard access (1 element, dark theme) |
| lint/jsx-a11y(click-events-have-key-events) | quality | 7 | 4 | Enforce a clickable non-interactive element has at least one keyboard event listener. |
| lint/jsx-a11y(no-static-element-interactions) | quality | 7 | 6 | Static HTML elements with event handlers require a role. |
| lint/react(set-state-in-effect) | quality | 7 | 6 | Calling setState synchronously within an effect can trigger cascading renders |
| typecheck/TS1484 | quality | 7 | 7 | 'BreadcrumbItem' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled. |
| typecheck/TS2552 | quality | 7 | 4 | Cannot find name 'Strong'. Did you mean 'String'? |
| lint/@pandacss(extraction-diagnostics) | quality | 6 | 4 | `& dd` doesn't override `& dt` for `color`. Both have the same specificity, so Panda orders them by selector text and `& dt` comes last. |
| typecheck/TS17008 | quality | 6 | 6 | JSX element '' has no corresponding closing tag. |
| lint/jsx-a11y(control-has-associated-label) | quality | 5 | 3 | A control must be associated with a text label. |
| lint/typescript(no-unnecessary-boolean-literal-compare) | quality | 5 | 5 | This expression unnecessarily compares a boolean value to a boolean instead of using it directly. |
| lint/typescript(no-unnecessary-type-conversion) | quality | 5 | 3 | This type conversion does not change the type or value of the expression. |
| typecheck/TS1002 | quality | 5 | 3 | Unterminated string literal. |
| typecheck/TS2739 | quality | 5 | 1 | Type '{ children: Element[]; }' is missing the following properties from type 'StatProps': label, value |
| a11y/button-name | quality | 4 | 2 | Buttons must have discernible text (1 element, dark theme) |
| behaviour/empty-submit | completeness | 4 | 4 | Saving without a new quantity shows an error on it. Not done: the field "New quantity" is not marked invalid (aria-invalid, or the browser's own check). |
| typecheck/TS1136 | quality | 4 | 4 | Property assignment expected. |
| typecheck/TS2503 | quality | 4 | 4 | Cannot find namespace 'JSX'. |
| typecheck/TS2693 | quality | 4 | 1 | 'BreadcrumbItem' only refers to a type, but is being used as a value here. |
| behaviour/amount-above-balance | completeness | 3 | 3 | An amount above the available balance shows an error on the amount field. Not done: the field "Amount" is not marked invalid (aria-invalid, or the browser's own check). |
| behaviour/more-than-ordered | completeness | 3 | 3 | A quantity received above the quantity ordered shows an error on that field. Not done: a step could not run (fill: Timeout 2000ms exceeded.). |
| behaviour/shows-difference | completeness | 3 | 3 | Typing a new quantity shows the difference from the current one, with its sign. Not done: "+4" is not on screen. |
| lint/jsx-a11y(role-supports-aria-props) | quality | 3 | 2 | The attribute `aria-invalid` is not supported by the role `radio`. This role is implicit on the element `input`. |
| lint/react-hooks(exhaustive-deps) | quality | 3 | 3 | React Hook useEffect has a missing dependency: 'accounts' |
| lint/typescript(no-base-to-string) | quality | 3 | 1 | 'FormatNumber({ value: contract.monthlyPayment, format: "currency", currency: "EUR }` } }`, { label: "Start date", value: FormatDate({ value: contract.startDate, dateStyle: "long" }) }, { label: "Outstanding", value: `EUR ${FormatNumber({ value: contract.outstanding, format: "currency", currency: "EUR }` } }`,' will use Object's default stringification format ('[object Object]') when stringified. |
| lint/typescript(no-redundant-type-constituents) | quality | 3 | 2 | is overridden by string in this union type. |
| lint/typescript(restrict-template-expressions) | quality | 3 | 1 | Invalid type used in template literal expression. |
| token-roles/wrong-role | design-system | 3 | 2 | `border.default` used as background on `bg`: `border.*` is for borders. |
| typecheck/TS1145 | quality | 3 | 1 | '{' or JSX element expected. |
| typecheck/TS2412 | quality | 3 | 1 | Type 'undefined' is not assignable to type 'string' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the type of the target. |
| typecheck/TS2551 | quality | 3 | 1 | Property 'contractedMerchant' does not exist on type '{ reason?: string; description?: string; contactedMerchant?: string; }'. Did you mean 'contactedMerchant'? |
| a11y/definition-list | quality | 2 | 1 | <dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements (1 element, dark theme) |
| a11y/label | quality | 2 | 1 | Form elements must have labels (1 element, dark theme) |
| a11y/select-name | quality | 2 | 1 | Select element must have an accessible name (1 element, dark theme) |
| behaviour/confirms-transfer | completeness | 2 | 2 | A valid transfer shows a confirmation with the beneficiary. Not done: "Studio Legale Ferri" is not on screen. |
| behaviour/short-description | completeness | 2 | 2 | A description shorter than 30 characters shows an error under it when the user submits. Not done: the field "What happened" is not marked invalid (aria-invalid, or the browser's own check). |
| lint/@pandacss(no-dynamic-styling) | quality | 2 | 2 | Panda can't read this value at build time, so it generates no CSS for it. |
| lint/@pandacss(no-invalid-token-paths) | quality | 2 | 1 | Panda token "colors.gray.200" was not found. |
| lint/jsx-a11y(no-noninteractive-element-interactions) | quality | 2 | 2 | Non-interactive elements should not be assigned mouse or keyboard event listeners. |
| lint/react(exhaustive-effect-dependencies) | quality | 2 | 2 | Found extra effect dependencies |
| lint/react(purity) | quality | 2 | 2 | Cannot call impure function during render |
| typecheck/TS2451 | quality | 2 | 1 | Cannot redeclare block-scoped variable 'page'. |
| typecheck/TS2698 | quality | 2 | 2 | Spread types may only be created from object types. |
| typecheck/TS2774 | quality | 2 | 1 | This condition will always return true since this function is always defined. Did you mean to call it instead? |
| lint/TS(17000) | quality | 1 | 1 | JSX attributes must only be assigned a non-empty 'expression'. |
| lint/eslint(no-dupe-keys) | quality | 1 | 1 | Duplicate key 'th' |
| lint/eslint(no-irregular-whitespace) | quality | 1 | 1 | Unexpected irregular whitespace |
| lint/eslint(no-unused-expressions) | quality | 1 | 1 | Expected expression to be used |
| lint/jsx-a11y(anchor-is-valid) | quality | 1 | 1 | Use of incorrect `href` for the 'a' element. |
| lint/jsx-a11y(no-noninteractive-tabindex) | quality | 1 | 1 | `tabIndex` should only be declared on interactive elements. |
| lint/jsx-a11y(role-has-required-aria-props) | quality | 1 | 1 | `switch` role is missing required aria props `aria-checked`. |
| lint/react(memo-dependencies) | quality | 1 | 1 | Found missing memoization dependencies |
| lint/typescript(no-duplicate-type-constituents) | quality | 1 | 1 | Union type constituent is duplicated with HTMLInputElement. |
| lint/typescript(no-floating-promises) | quality | 1 | 1 | Promises must be awaited, add void operator to ignore. |
| lint/typescript(no-unnecessary-type-parameters) | quality | 1 | 1 | Type parameter K is used only once in the function signature. |
| outside-styling/unsafe-escape | design-system | 1 | 1 | `UNSAFE_className` on `Stack` is the design system's escape hatch: it may fight the component's own styles, and every use counts. |
| typecheck/TS1117 | quality | 1 | 1 | An object literal cannot have multiple properties with the same name. |
| typecheck/TS17000 | quality | 1 | 1 | JSX attributes must only be assigned a non-empty 'expression'. |
| typecheck/TS18004 | quality | 1 | 1 | No value exists in scope for the shorthand property 'th'. Either declare one or provide an initializer. |
| typecheck/TS18047 | quality | 1 | 1 | 'toast' is possibly 'null'. |
| typecheck/TS2554 | quality | 1 | 1 | Expected 2 arguments, but got 1. |
| typecheck/TS2724 | quality | 1 | 1 | '"@vektos/ds"' has no exported member named 'TableHeaderCell'. Did you mean 'TableHeader'? |
| typecheck/TS2740 | quality | 1 | 1 | Type 'EventTarget & HTMLInputElement' is missing the following properties from type 'ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, Element>': target, nativeEvent, currentTarget, bubbles, and 10 more. |
| typecheck/TS2786 | quality | 1 | 1 | 'Text' cannot be used as a JSX component. |
| typecheck/TS7031 | quality | 1 | 1 | Binding element 'canvasElement' implicitly has an 'any' type. |