react-doctor: design-system audit (~638 warnings across 11 design rules)

[bntvllnt]

Source

`npx react-doctor . --json` — 638 warnings tagged design-system.

Breakdown

Rule	Count
`design-no-redundant-size-axes`	515
`design-no-bold-heading`	31
`design-no-redundant-padding-axes`	23
`design-no-default-tailwind-palette`	16
`design-no-space-on-flex-children`	13
`no-side-tab-border`	11
`no-pure-black-background`	8
`design-no-em-dash-in-jsx-text`	7
`design-no-vague-button-label`	6
`design-no-three-period-ellipsis`	5
`no-inline-bounce-easing`	3

Why this matters

Codifies brand consistency. Pairs with #250 DESIGN.md + tokens.json — once tokens land, these rules enforce them automatically.

Sample

• `app/docs/page.tsx:37` — `design-no-bold-heading` — use `font-semibold` (600) on display `

  `

• `app/docs/page.tsx:44` — `no-side-tab-border`, `no-pure-black-background`
• `registry/default/horizontal-scroll-row/horizontal-scroll-row.tsx:42,50,54,62` — `design-no-redundant-size-axes`

Acceptance criteria

• Bulk-fix the dominant rule `design-no-redundant-size-axes` (515) first — codemod via `npx jscodeshift` or scripted Tailwind class collapse (e.g., `w-4 h-4` → `size-4`).
• Replace `bg-black` / `#000` with semantic token `bg-background` (after feat: add DESIGN.md + /design page + design.tokens.json (agent-consumable brand guide) #250 lands).
• Replace `font-bold` on `

  `/`

  ` with `font-semibold`.

• Action-named buttons: replace "Submit" / "OK" / "Click" with the actual action.
• Replace `...` literal with `…` glyph; em-dashes per design voice.
• `pnpm doctor` reports < 50 design warnings after sweep.

Depends on

• feat: add DESIGN.md + /design page + design.tokens.json (agent-consumable brand guide) #250 (DESIGN.md + tokens.json — these rules enforce that doc)

Run

```bash
pnpm doctor --explain registry/default/horizontal-scroll-row/horizontal-scroll-row.tsx:42
```