react-doctor/design-no-bold-heading

Use `font-semibold` (600) or `font-medium` (500) on headings — 700+ crushes letter counter shapes at display sizes

• Category: Architecture
• Severity: warn
• Source: oxlint-plugin-react-doctor
• Framework: global
• Enabled when: always

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires on h1-h6 JSX elements when className contains the bare token font-bold, font-extrabold, or font-black (matched with whitespace/start before and whitespace/colon/end after), OR inline style has a numeric fontWeight at or above 700. False positive: a small heading (text-xs/text-sm) where the heavier weight doesn't actually crush counters.

Fix prompt

Use this once validation confirms the diagnostic is real.

Swap to font-semibold (600) or font-medium (500), or set style.fontWeight to 500-600. At display sizes the 700+ range tightens internal counter shapes in e, a, o, g and reads as design-by-default — headings get visual weight from size, not stroke thickness. https://tailwindcss.com/docs/font-weight

Related rules

More Architecture rules from the rules reference:

• react-doctor/design-no-default-tailwind-palette: Replace `indigo-*` / `gray-*` / `slate-*` with project tokens, your brand color, or a less-default neutral (`zinc`, `neutral`, `stone`)
• react-doctor/design-no-em-dash-in-jsx-text: Replace em dashes in JSX prose with commas, colons, semicolons, or parentheses so UI copy reads less like generated text.
• react-doctor/design-no-redundant-padding-axes: Collapse `px-N py-N` to `p-N` when both axes match. Keep them split only when one axis varies at a breakpoint (`py-2 md:py-3`)
• react-doctor/design-no-redundant-size-axes: Collapse `w-N h-N` to `size-N` (Tailwind v3.4+) when both axes match
• react-doctor/design-no-space-on-flex-children: Use `gap-*` on the flex/grid parent. `space-x-*` / `space-y-*` produce phantom gaps when a sibling is conditionally rendered, lose vertical spacing on wrapped lines, and don't mirror in RTL