diff --git a/.changeset/design-motion-a11y-rules.md b/.changeset/design-motion-a11y-rules.md
new file mode 100644
index 000000000..e15e02102
--- /dev/null
+++ b/.changeset/design-motion-a11y-rules.md
@@ -0,0 +1,34 @@
+---
+"oxlint-plugin-react-doctor": patch
+"@react-doctor/core": patch
+"react-doctor": patch
+---
+
+Add 10 design-quality lint rules distilled from a cross-resource design reference, spanning motion performance, accessibility, and Tailwind/JSX hygiene.
+
+**Motion**
+
+- **`no-transition-all`** (extended) — now also flags the Tailwind `transition-all` class (was inline-`style`-only). Animating every property that changes includes expensive layout properties and instant ones like focus rings; name the properties (`transition-colors`, `transition-transform`).
+- **`no-tailwind-layout-transition`** — Tailwind arbitrary `transition-[width|height|top|left|right|bottom|margin|padding]`, which animates layout properties the browser recomputes every frame. Animate `transform`/`opacity` instead.
+
+**Accessibility**
+
+- **`no-autoplay-without-muted`** — `<video autoPlay>` / `<audio autoPlay>` missing `muted` (sound-on autoplay is hostile to users and browser-blocked). Skips dynamic `autoPlay`, spreads, and truthy/dynamic `muted`.
+- **`no-uninformative-aria-label`** — an `aria-label` whose value is a content-free element-type word (`"icon"`, `"button"`, `"image"`, `"link"`, …) that tells screen-reader users nothing about the action.
+- **`no-target-blank-without-rel`** — `<a target="_blank">` (and `<area>`) missing `rel="noopener"`/`noreferrer` (reverse tabnabbing). Skips spreads and dynamic `rel`.
+- **`no-low-contrast-inline-style`** — computes the real WCAG 2.1 contrast ratio from a co-located inline `color` + `backgroundColor` and flags pairs below 4.5:1 (3:1 for large/bold text). Only fires on opaque, statically-resolvable colors (skips alpha, `var()`, gradients).
+
+**Design / Tailwind hygiene**
+
+- **`no-redundant-display-class`** — a display utility matching the element's default (`block` on a `<div>`, `inline` on a `<span>`); skips variant-prefixed and meaningful displays (`flex`, `grid`, `hidden`).
+- **`prefer-truncate-shorthand`** — `overflow-hidden text-ellipsis whitespace-nowrap` collapses to the single `truncate` utility.
+- **`no-full-viewport-width`** — `w-screen` / `w-[100vw]` / inline `100vw`, which overflows horizontally when a scrollbar is visible; prefer `w-full` / `width: 100%`.
+- **`no-svg-currentcolor-with-fill-class`** — `fill="currentColor"` / `stroke="currentColor"` fighting a `fill-*` / `stroke-*` color class (the class silently wins); keep one, or use `fill-current`.
+
+**Tailwind canonicalization** (distilled from ui.sh's canonicalize-tailwind guidance)
+
+- **`no-deprecated-tailwind-class`** — Tailwind v4 renamed/removed `bg-gradient-*` → `bg-linear-*`, `flex-shrink-*` → `shrink-*`, `flex-grow-*` → `grow-*`, `overflow-ellipsis` → `text-ellipsis`. Gated on a new `tailwind:4` capability so v3 projects are unaffected.
+- **`no-arbitrary-px-font-size`** — `text-[13px]` doesn't scale with the user's root font size; use rem (`text-[0.8125rem]`). Pixels stay fine for `border-*`/`outline-*`.
+- **`prefer-dvh-over-vh`** — `h-screen`/`min-h-screen`/`h-[100vh]` overflow under mobile browser chrome; prefer `dvh` (`h-dvh`/`min-h-dvh`). Gated on `tailwind:3.4`.
+
+Also adds a `tailwind:4` project capability to `@react-doctor/core` for version-gated Tailwind rules.
diff --git a/packages/core/src/runners/oxlint/capabilities.ts b/packages/core/src/runners/oxlint/capabilities.ts
index 99c4d6492..174ca04e2 100644
--- a/packages/core/src/runners/oxlint/capabilities.ts
+++ b/packages/core/src/runners/oxlint/capabilities.ts
@@ -83,11 +83,21 @@ export const buildCapabilities = (project: ProjectInfo): ReadonlySet<string> =>
   if (project.tailwindVersion !== null) {
     capabilities.add("tailwind");
     const tailwind = parseTailwindMajorMinor(project.tailwindVersion);
-    // HACK: when version is unparseable (dist-tag, workspace protocol),
-    // assume latest so version-gated rules still fire.
+    // HACK: when the version is unparseable (dist-tag, workspace protocol),
+    // `isTailwindAtLeast` optimistically assumes latest so the suggestion rule
+    // behind `tailwind:3.4` (prefer-dvh-over-vh) still fires.
     if (isTailwindAtLeast(tailwind, { major: 3, minor: 4 })) {
       capabilities.add("tailwind:3.4");
     }
+    // `tailwind:4` gates `no-deprecated-tailwind-class`, which tells users a
+    // class was renamed/removed in v4. On an unparseable spec we can't prove
+    // the project is on v4, and a confidently-wrong "deprecated" warning on a
+    // v3 codebase (where `flex-shrink-0` etc. are still correct) is worse than
+    // staying silent — so require a CONFIRMED major >= 4 here, deliberately
+    // stricter than the optimistic gate above.
+    if (tailwind !== null && isTailwindAtLeast(tailwind, { major: 4, minor: 0 })) {
+      capabilities.add("tailwind:4");
+    }
   }
 
   if (project.zodVersion !== null) {
diff --git a/packages/core/tests/build-capabilities.test.ts b/packages/core/tests/build-capabilities.test.ts
index a451542c1..edfc05918 100644
--- a/packages/core/tests/build-capabilities.test.ts
+++ b/packages/core/tests/build-capabilities.test.ts
@@ -198,6 +198,28 @@ describe("buildCapabilities", () => {
     expect(capabilities.has("zod:4")).toBe(false);
   });
 
+  it("emits `tailwind`, `tailwind:3.4`, and `tailwind:4` for a Tailwind 4 project", () => {
+    const capabilities = buildCapabilities({ ...baseProject, tailwindVersion: "^4.0.0" });
+    expect(capabilities.has("tailwind")).toBe(true);
+    expect(capabilities.has("tailwind:3.4")).toBe(true);
+    expect(capabilities.has("tailwind:4")).toBe(true);
+  });
+
+  it("emits `tailwind:3.4` but not `tailwind:4` for a Tailwind 3.4 project", () => {
+    const capabilities = buildCapabilities({ ...baseProject, tailwindVersion: "^3.4.1" });
+    expect(capabilities.has("tailwind:3.4")).toBe(true);
+    expect(capabilities.has("tailwind:4")).toBe(false);
+  });
+
+  it("stays optimistic for `tailwind:3.4` but withholds `tailwind:4` when the version is unparseable", () => {
+    const capabilities = buildCapabilities({ ...baseProject, tailwindVersion: "workspace:*" });
+    expect(capabilities.has("tailwind")).toBe(true);
+    expect(capabilities.has("tailwind:3.4")).toBe(true);
+    // A deprecation rule must not fire on an unprovable version — a v3 project
+    // would otherwise get confidently-wrong "renamed in v4" warnings.
+    expect(capabilities.has("tailwind:4")).toBe(false);
+  });
+
   it("emits `nextjs:15` capability for Next.js 15+ projects", () => {
     const capabilities = buildCapabilities({
       ...baseProject,
diff --git a/packages/oxlint-plugin-react-doctor/scripts/generate-rule-registry.mjs b/packages/oxlint-plugin-react-doctor/scripts/generate-rule-registry.mjs
index 7cf5a4ffb..cee6a035c 100644
--- a/packages/oxlint-plugin-react-doctor/scripts/generate-rule-registry.mjs
+++ b/packages/oxlint-plugin-react-doctor/scripts/generate-rule-registry.mjs
@@ -91,6 +91,9 @@ const EFFECT_RULES_PORTED_FROM_EXTERNAL = new Set([
 // into `a11y/` would silently disappear for users who narrow scope.
 const RULES_NOT_PORTED_FROM_EXTERNAL = new Set([
   "prefer-html-dialog",
+  "no-autoplay-without-muted",
+  "no-uninformative-aria-label",
+  "no-target-blank-without-rel",
   "dialog-has-accessible-name",
   "no-create-ref-in-function-component",
   "no-call-component-as-function",
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/constants/design.ts b/packages/oxlint-plugin-react-doctor/src/plugin/constants/design.ts
index 47c39c2d1..ccb0288b0 100644
--- a/packages/oxlint-plugin-react-doctor/src/plugin/constants/design.ts
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/constants/design.ts
@@ -21,6 +21,18 @@ export const COLOR_CHROMA_THRESHOLD = 30;
 
 export const TINY_TEXT_THRESHOLD_PX = 12;
 
+// WCAG 2.1 contrast minimums. Normal text needs 4.5:1; "large" text
+// (>=24px regular, or >=18.66px / 14pt bold) and icons need 3:1.
+export const WCAG_CONTRAST_NORMAL_MIN = 4.5;
+export const WCAG_CONTRAST_LARGE_MIN = 3;
+export const LARGE_TEXT_MIN_PX = 24;
+export const LARGE_BOLD_TEXT_MIN_PX = 18.66;
+export const BOLD_FONT_WEIGHT_MIN = 700;
+
+// Browser default root font size — the px-per-rem divisor for converting
+// arbitrary `px` font sizes and `rem` lengths to and from pixels.
+export const ROOT_FONT_SIZE_PX = 16;
+
 export const WIDE_TRACKING_THRESHOLD_EM = 0.05;
 
 export const LONG_TRANSITION_DURATION_THRESHOLD_MS = 1000;
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rule-registry.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rule-registry.ts
index 081d204e6..04948f06e 100644
--- a/packages/oxlint-plugin-react-doctor/src/plugin/rule-registry.ts
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rule-registry.ts
@@ -144,11 +144,13 @@ import { nextjsNoUseSearchParamsWithoutSuspense } from "./rules/nextjs/nextjs-no
 import { nextjsNoVercelOgImport } from "./rules/nextjs/nextjs-no-vercel-og-import.js";
 import { noAccessKey } from "./rules/a11y/no-access-key.js";
 import { noAdjustStateOnPropChange } from "./rules/state-and-effects/no-adjust-state-on-prop-change.js";
+import { noArbitraryPxFontSize } from "./rules/design/no-arbitrary-px-font-size.js";
 import { noAriaHiddenOnFocusable } from "./rules/a11y/no-aria-hidden-on-focusable.js";
 import { noArrayIndexAsKey } from "./rules/correctness/no-array-index-as-key.js";
 import { noArrayIndexKey } from "./rules/react-builtins/no-array-index-key.js";
 import { noAsyncEffectCallback } from "./rules/state-and-effects/no-async-effect-callback.js";
 import { noAutofocus } from "./rules/a11y/no-autofocus.js";
+import { noAutoplayWithoutMuted } from "./rules/a11y/no-autoplay-without-muted.js";
 import { noBarrelImport } from "./rules/bundle-size/no-barrel-import.js";
 import { noCallComponentAsFunction } from "./rules/react-builtins/no-call-component-as-function.js";
 import { noCascadingSetState } from "./rules/state-and-effects/no-cascading-set-state.js";
@@ -162,6 +164,7 @@ import { noDanger } from "./rules/react-builtins/no-danger.js";
 import { noDangerWithChildren } from "./rules/react-builtins/no-danger-with-children.js";
 import { noDarkModeGlow } from "./rules/design/no-dark-mode-glow.js";
 import { noDefaultProps } from "./rules/architecture/no-default-props.js";
+import { noDeprecatedTailwindClass } from "./rules/design/no-deprecated-tailwind-class.js";
 import { noDerivedState } from "./rules/state-and-effects/no-derived-state.js";
 import { noDerivedStateEffect } from "./rules/state-and-effects/no-derived-state-effect.js";
 import { noDerivedUseState } from "./rules/state-and-effects/no-derived-use-state.js";
@@ -185,6 +188,7 @@ import { noFetchInEffect } from "./rules/state-and-effects/no-fetch-in-effect.js
 import { noFindDomNode } from "./rules/react-builtins/no-find-dom-node.js";
 import { noFlushSync } from "./rules/view-transitions/no-flush-sync.js";
 import { noFullLodashImport } from "./rules/bundle-size/no-full-lodash-import.js";
+import { noFullViewportWidth } from "./rules/design/no-full-viewport-width.js";
 import { noGenericHandlerNames } from "./rules/architecture/no-generic-handler-names.js";
 import { noGiantComponent } from "./rules/architecture/no-giant-component.js";
 import { noGlobalCssVariableAnimation } from "./rules/performance/no-global-css-variable-animation.js";
@@ -206,6 +210,7 @@ import { noLayoutTransitionInline } from "./rules/design/no-layout-transition-in
 import { noLegacyClassLifecycles } from "./rules/architecture/no-legacy-class-lifecycles.js";
 import { noLegacyContextApi } from "./rules/architecture/no-legacy-context-api.js";
 import { noLongTransitionDuration } from "./rules/design/no-long-transition-duration.js";
+import { noLowContrastInlineStyle } from "./rules/design/no-low-contrast-inline-style.js";
 import { noManyBooleanProps } from "./rules/architecture/no-many-boolean-props.js";
 import { noMirrorPropEffect } from "./rules/state-and-effects/no-mirror-prop-effect.js";
 import { noMoment } from "./rules/bundle-size/no-moment.js";
@@ -230,6 +235,7 @@ import { noRandomKey } from "./rules/correctness/no-random-key.js";
 import { noReactChildren } from "./rules/react-builtins/no-react-children.js";
 import { noReactDomDeprecatedApis } from "./rules/architecture/no-react-dom-deprecated-apis.js";
 import { noReact19DeprecatedApis } from "./rules/architecture/no-react19-deprecated-apis.js";
+import { noRedundantDisplayClass } from "./rules/design/no-redundant-display-class.js";
 import { noRedundantRoles } from "./rules/a11y/no-redundant-roles.js";
 import { noRedundantShouldComponentUpdate } from "./rules/react-builtins/no-redundant-should-component-update.js";
 import { noRenderInRender } from "./rules/architecture/no-render-in-render.js";
@@ -245,13 +251,17 @@ import { noSideTabBorder } from "./rules/design/no-side-tab-border.js";
 import { noStaticElementInteractions } from "./rules/a11y/no-static-element-interactions.js";
 import { noStringFalseOnBooleanAttribute } from "./rules/react-builtins/no-string-false-on-boolean-attribute.js";
 import { noStringRefs } from "./rules/react-builtins/no-string-refs.js";
+import { noSvgCurrentcolorWithFillClass } from "./rules/design/no-svg-currentcolor-with-fill-class.js";
 import { noSyncXhr } from "./rules/js-performance/no-sync-xhr.js";
+import { noTailwindLayoutTransition } from "./rules/design/no-tailwind-layout-transition.js";
+import { noTargetBlankWithoutRel } from "./rules/a11y/no-target-blank-without-rel.js";
 import { noThisInSfc } from "./rules/react-builtins/no-this-in-sfc.js";
 import { noTinyText } from "./rules/design/no-tiny-text.js";
 import { noTransitionAll } from "./rules/performance/no-transition-all.js";
 import { noUncontrolledInput } from "./rules/correctness/no-uncontrolled-input.js";
 import { noUndeferredThirdParty } from "./rules/bundle-size/no-undeferred-third-party.js";
 import { noUnescapedEntities } from "./rules/react-builtins/no-unescaped-entities.js";
+import { noUninformativeAriaLabel } from "./rules/a11y/no-uninformative-aria-label.js";
 import { noUnknownProperty } from "./rules/react-builtins/no-unknown-property.js";
 import { noUnsafe } from "./rules/react-builtins/no-unsafe.js";
 import { noUnstableNestedComponents } from "./rules/react-builtins/no-unstable-nested-components.js";
@@ -270,6 +280,7 @@ import { preactNoReactHooksImport } from "./rules/preact/preact-no-react-hooks-i
 import { preactNoRenderArguments } from "./rules/preact/preact-no-render-arguments.js";
 import { preactPreferOndblclick } from "./rules/preact/preact-prefer-ondblclick.js";
 import { preactPreferOninput } from "./rules/preact/preact-prefer-oninput.js";
+import { preferDvhOverVh } from "./rules/design/prefer-dvh-over-vh.js";
 import { preferDynamicImport } from "./rules/bundle-size/prefer-dynamic-import.js";
 import { preferEs6Class } from "./rules/react-builtins/prefer-es6-class.js";
 import { preferExplicitVariants } from "./rules/architecture/prefer-explicit-variants.js";
@@ -279,6 +290,7 @@ import { preferModuleScopePureFunction } from "./rules/architecture/prefer-modul
 import { preferModuleScopeStaticValue } from "./rules/architecture/prefer-module-scope-static-value.js";
 import { preferStableEmptyFallback } from "./rules/performance/prefer-stable-empty-fallback.js";
 import { preferTagOverRole } from "./rules/a11y/prefer-tag-over-role.js";
+import { preferTruncateShorthand } from "./rules/design/prefer-truncate-shorthand.js";
 import { preferUseEffectEvent } from "./rules/state-and-effects/prefer-use-effect-event.js";
 import { preferUseSyncExternalStore } from "./rules/state-and-effects/prefer-use-sync-external-store.js";
 import { preferUseReducer } from "./rules/state-and-effects/prefer-use-reducer.js";
@@ -1988,6 +2000,17 @@ export const reactDoctorRules = [
       requires: [...new Set(["react", ...(noAdjustStateOnPropChange.requires ?? [])])],
     },
   },
+  {
+    key: "react-doctor/no-arbitrary-px-font-size",
+    id: "no-arbitrary-px-font-size",
+    source: "react-doctor",
+    originallyExternal: false,
+    rule: {
+      ...noArbitraryPxFontSize,
+      framework: "global",
+      category: "Accessibility",
+    },
+  },
   {
     key: "react-doctor/no-aria-hidden-on-focusable",
     id: "no-aria-hidden-on-focusable",
@@ -2047,6 +2070,18 @@ export const reactDoctorRules = [
       requires: [...new Set(["react", ...(noAutofocus.requires ?? [])])],
     },
   },
+  {
+    key: "react-doctor/no-autoplay-without-muted",
+    id: "no-autoplay-without-muted",
+    source: "react-doctor",
+    originallyExternal: false,
+    rule: {
+      ...noAutoplayWithoutMuted,
+      framework: "global",
+      category: "Accessibility",
+      requires: [...new Set(["react", ...(noAutoplayWithoutMuted.requires ?? [])])],
+    },
+  },
   {
     key: "react-doctor/no-barrel-import",
     id: "no-barrel-import",
@@ -2200,6 +2235,17 @@ export const reactDoctorRules = [
       category: "Maintainability",
     },
   },
+  {
+    key: "react-doctor/no-deprecated-tailwind-class",
+    id: "no-deprecated-tailwind-class",
+    source: "react-doctor",
+    originallyExternal: false,
+    rule: {
+      ...noDeprecatedTailwindClass,
+      framework: "global",
+      category: "Maintainability",
+    },
+  },
   {
     key: "react-doctor/no-derived-state",
     id: "no-derived-state",
@@ -2471,6 +2517,17 @@ export const reactDoctorRules = [
       category: "Performance",
     },
   },
+  {
+    key: "react-doctor/no-full-viewport-width",
+    id: "no-full-viewport-width",
+    source: "react-doctor",
+    originallyExternal: false,
+    rule: {
+      ...noFullViewportWidth,
+      framework: "global",
+      category: "Maintainability",
+    },
+  },
   {
     key: "react-doctor/no-generic-handler-names",
     id: "no-generic-handler-names",
@@ -2712,6 +2769,17 @@ export const reactDoctorRules = [
       category: "Performance",
     },
   },
+  {
+    key: "react-doctor/no-low-contrast-inline-style",
+    id: "no-low-contrast-inline-style",
+    source: "react-doctor",
+    originallyExternal: false,
+    rule: {
+      ...noLowContrastInlineStyle,
+      framework: "global",
+      category: "Accessibility",
+    },
+  },
   {
     key: "react-doctor/no-many-boolean-props",
     id: "no-many-boolean-props",
@@ -2991,6 +3059,17 @@ export const reactDoctorRules = [
       category: "Maintainability",
     },
   },
+  {
+    key: "react-doctor/no-redundant-display-class",
+    id: "no-redundant-display-class",
+    source: "react-doctor",
+    originallyExternal: false,
+    rule: {
+      ...noRedundantDisplayClass,
+      framework: "global",
+      category: "Maintainability",
+    },
+  },
   {
     key: "react-doctor/no-redundant-roles",
     id: "no-redundant-roles",
@@ -3167,6 +3246,17 @@ export const reactDoctorRules = [
       requires: [...new Set(["react", ...(noStringRefs.requires ?? [])])],
     },
   },
+  {
+    key: "react-doctor/no-svg-currentcolor-with-fill-class",
+    id: "no-svg-currentcolor-with-fill-class",
+    source: "react-doctor",
+    originallyExternal: false,
+    rule: {
+      ...noSvgCurrentcolorWithFillClass,
+      framework: "global",
+      category: "Maintainability",
+    },
+  },
   {
     key: "react-doctor/no-sync-xhr",
     id: "no-sync-xhr",
@@ -3178,6 +3268,29 @@ export const reactDoctorRules = [
       category: "Performance",
     },
   },
+  {
+    key: "react-doctor/no-tailwind-layout-transition",
+    id: "no-tailwind-layout-transition",
+    source: "react-doctor",
+    originallyExternal: false,
+    rule: {
+      ...noTailwindLayoutTransition,
+      framework: "global",
+      category: "Performance",
+    },
+  },
+  {
+    key: "react-doctor/no-target-blank-without-rel",
+    id: "no-target-blank-without-rel",
+    source: "react-doctor",
+    originallyExternal: false,
+    rule: {
+      ...noTargetBlankWithoutRel,
+      framework: "global",
+      category: "Accessibility",
+      requires: [...new Set(["react", ...(noTargetBlankWithoutRel.requires ?? [])])],
+    },
+  },
   {
     key: "react-doctor/no-this-in-sfc",
     id: "no-this-in-sfc",
@@ -3247,6 +3360,18 @@ export const reactDoctorRules = [
       requires: [...new Set(["react", ...(noUnescapedEntities.requires ?? [])])],
     },
   },
+  {
+    key: "react-doctor/no-uninformative-aria-label",
+    id: "no-uninformative-aria-label",
+    source: "react-doctor",
+    originallyExternal: false,
+    rule: {
+      ...noUninformativeAriaLabel,
+      framework: "global",
+      category: "Accessibility",
+      requires: [...new Set(["react", ...(noUninformativeAriaLabel.requires ?? [])])],
+    },
+  },
   {
     key: "react-doctor/no-unknown-property",
     id: "no-unknown-property",
@@ -3456,6 +3581,17 @@ export const reactDoctorRules = [
       category: "Bugs",
     },
   },
+  {
+    key: "react-doctor/prefer-dvh-over-vh",
+    id: "prefer-dvh-over-vh",
+    source: "react-doctor",
+    originallyExternal: false,
+    rule: {
+      ...preferDvhOverVh,
+      framework: "global",
+      category: "Maintainability",
+    },
+  },
   {
     key: "react-doctor/prefer-dynamic-import",
     id: "prefer-dynamic-import",
@@ -3560,6 +3696,17 @@ export const reactDoctorRules = [
       requires: [...new Set(["react", ...(preferTagOverRole.requires ?? [])])],
     },
   },
+  {
+    key: "react-doctor/prefer-truncate-shorthand",
+    id: "prefer-truncate-shorthand",
+    source: "react-doctor",
+    originallyExternal: false,
+    rule: {
+      ...preferTruncateShorthand,
+      framework: "global",
+      category: "Maintainability",
+    },
+  },
   {
     key: "react-doctor/prefer-use-effect-event",
     id: "prefer-use-effect-event",
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-autoplay-without-muted.test.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-autoplay-without-muted.test.ts
new file mode 100644
index 000000000..919338240
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-autoplay-without-muted.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vite-plus/test";
+import { runRule } from "../../../test-utils/run-rule.js";
+import { noAutoplayWithoutMuted } from "./no-autoplay-without-muted.js";
+
+describe("no-autoplay-without-muted", () => {
+  it("flags `<video autoPlay>` without muted", () => {
+    const code = `const A = () => <video autoPlay loop src="hero.mp4" />;`;
+    const result = runRule(noAutoplayWithoutMuted, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("flags `<audio autoPlay>` without muted", () => {
+    const code = `const A = () => <audio autoPlay src="clip.mp3" />;`;
+    const result = runRule(noAutoplayWithoutMuted, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("flags `autoPlay` with `muted={false}`", () => {
+    const code = `const A = () => <video autoPlay muted={false} src="x.mp4" />;`;
+    const result = runRule(noAutoplayWithoutMuted, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag `<video autoPlay muted>`", () => {
+    const code = `const A = () => <video autoPlay muted loop playsInline src="hero.mp4" />;`;
+    const result = runRule(noAutoplayWithoutMuted, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag `<video autoPlay muted={true}>`", () => {
+    const code = `const A = () => <video autoPlay muted={true} src="hero.mp4" />;`;
+    const result = runRule(noAutoplayWithoutMuted, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag a `<video>` with no autoPlay", () => {
+    const code = `const A = () => <video controls src="hero.mp4" />;`;
+    const result = runRule(noAutoplayWithoutMuted, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag `autoPlay={false}`", () => {
+    const code = `const A = () => <video autoPlay={false} src="hero.mp4" />;`;
+    const result = runRule(noAutoplayWithoutMuted, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag when a spread could supply muted", () => {
+    const code = `const A = (props) => <video autoPlay {...props} src="hero.mp4" />;`;
+    const result = runRule(noAutoplayWithoutMuted, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag dynamic `autoPlay={shouldPlay}`", () => {
+    const code = `const A = ({ shouldPlay }) => <video autoPlay={shouldPlay} src="hero.mp4" />;`;
+    const result = runRule(noAutoplayWithoutMuted, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag a custom `<Video autoPlay>` component", () => {
+    const code = `const A = () => <Video autoPlay src="hero.mp4" />;`;
+    const result = runRule(noAutoplayWithoutMuted, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-autoplay-without-muted.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-autoplay-without-muted.ts
new file mode 100644
index 000000000..5eaf47c24
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-autoplay-without-muted.ts
@@ -0,0 +1,52 @@
+import { defineRule } from "../../utils/define-rule.js";
+import type { EsTreeNode } from "../../utils/es-tree-node.js";
+import type { EsTreeNodeOfType } from "../../utils/es-tree-node-of-type.js";
+import { hasJsxPropIgnoreCase } from "../../utils/has-jsx-prop-ignore-case.js";
+import { hasJsxSpreadAttribute } from "../../utils/has-jsx-spread-attribute.js";
+import { isNodeOfType } from "../../utils/is-node-of-type.js";
+
+const MESSAGE =
+  "Autoplaying media with sound is hostile to your users (and browsers block it). Add `muted` (with `playsInline`) to the autoplaying `<video>` / `<audio>`, or drop `autoPlay`.";
+
+// Resolve a boolean JSX attribute to its static value, or null when it's
+// dynamic: a bare attr (`autoPlay`) is true; `={true}`/`="true"` is true;
+// `={false}`/`="false"` is false; anything else (`={shouldPlay}`) is null.
+const resolveStaticBoolean = (attribute: EsTreeNodeOfType<"JSXAttribute">): boolean | null => {
+  const value = attribute.value as EsTreeNode | null;
+  if (!value) return true;
+  const literal = isNodeOfType(value, "JSXExpressionContainer") ? value.expression : value;
+  if (isNodeOfType(literal, "Literal")) {
+    if (literal.value === true || literal.value === "true") return true;
+    if (literal.value === false || literal.value === "false") return false;
+  }
+  return null;
+};
+
+export const noAutoplayWithoutMuted = defineRule({
+  id: "no-autoplay-without-muted",
+  title: "Autoplaying media without muted",
+  severity: "warn",
+  recommendation:
+    "Always pair `autoPlay` with `muted` (and `playsInline`): `<video autoPlay muted loop playsInline />`. If the sound matters, drop `autoPlay` and let users start it.",
+  create: (context) => ({
+    JSXOpeningElement(node: EsTreeNodeOfType<"JSXOpeningElement">) {
+      if (!isNodeOfType(node.name, "JSXIdentifier")) return;
+      const tagName = node.name.name;
+      if (tagName !== "video" && tagName !== "audio") return;
+
+      // A spread (`{...props}`) could supply `muted`; don't risk a false positive.
+      if (hasJsxSpreadAttribute(node.attributes)) return;
+
+      const autoPlay = hasJsxPropIgnoreCase(node.attributes, "autoplay");
+      // Only flag autoplay we can prove is on; dynamic `autoPlay={cond}` is skipped.
+      if (!autoPlay || resolveStaticBoolean(autoPlay) !== true) return;
+
+      const muted = hasJsxPropIgnoreCase(node.attributes, "muted");
+      // muted absent → flag. muted present: only flag when it is provably
+      // false; a truthy or dynamic `muted` gets the benefit of the doubt.
+      if (muted && resolveStaticBoolean(muted) !== false) return;
+
+      context.report({ node: node.name, message: MESSAGE });
+    },
+  }),
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-target-blank-without-rel.test.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-target-blank-without-rel.test.ts
new file mode 100644
index 000000000..c3559be51
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-target-blank-without-rel.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vite-plus/test";
+import { runRule } from "../../../test-utils/run-rule.js";
+import { noTargetBlankWithoutRel } from "./no-target-blank-without-rel.js";
+
+describe("no-target-blank-without-rel", () => {
+  it('flags `<a target="_blank">` with no rel', () => {
+    const code = `const A = () => <a href="/x" target="_blank">Docs</a>;`;
+    const result = runRule(noTargetBlankWithoutRel, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("flags `target={'_blank'}` (literal in expression)", () => {
+    const code = `const A = () => <a href="/x" target={'_blank'}>Docs</a>;`;
+    const result = runRule(noTargetBlankWithoutRel, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it('flags `target="_blank"` with a rel missing noopener/noreferrer', () => {
+    const code = `const A = () => <a href="/x" target="_blank" rel="nofollow">Docs</a>;`;
+    const result = runRule(noTargetBlankWithoutRel, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it('does NOT flag with rel="noopener"', () => {
+    const code = `const A = () => <a href="/x" target="_blank" rel="noopener noreferrer">Docs</a>;`;
+    const result = runRule(noTargetBlankWithoutRel, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it('does NOT flag with rel="noreferrer" alone', () => {
+    const code = `const A = () => <a href="/x" target="_blank" rel="noreferrer">Docs</a>;`;
+    const result = runRule(noTargetBlankWithoutRel, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("flags a rel expression-container literal missing noopener (`rel={'nofollow'}`)", () => {
+    const code = `const A = () => <a href="/x" target="_blank" rel={'nofollow'}>Docs</a>;`;
+    const result = runRule(noTargetBlankWithoutRel, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag a rel expression-container literal with noopener (`rel={'noopener'}`)", () => {
+    const code = `const A = () => <a href="/x" target="_blank" rel={'noopener'}>Docs</a>;`;
+    const result = runRule(noTargetBlankWithoutRel, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag same-tab links", () => {
+    const code = `const A = () => <a href="/x">Docs</a>;`;
+    const result = runRule(noTargetBlankWithoutRel, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it('does NOT flag `target="_self"`', () => {
+    const code = `const A = () => <a href="/x" target="_self">Docs</a>;`;
+    const result = runRule(noTargetBlankWithoutRel, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag dynamic rel", () => {
+    const code = `const A = ({ rel }) => <a href="/x" target="_blank" rel={rel}>Docs</a>;`;
+    const result = runRule(noTargetBlankWithoutRel, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag when a spread could supply rel", () => {
+    const code = `const A = (props) => <a href="/x" target="_blank" {...props}>Docs</a>;`;
+    const result = runRule(noTargetBlankWithoutRel, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it('does NOT flag a custom `<Link target="_blank">` component', () => {
+    const code = `const A = () => <Link href="/x" target="_blank">Docs</Link>;`;
+    const result = runRule(noTargetBlankWithoutRel, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-target-blank-without-rel.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-target-blank-without-rel.ts
new file mode 100644
index 000000000..eefa87ba1
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-target-blank-without-rel.ts
@@ -0,0 +1,41 @@
+import { defineRule } from "../../utils/define-rule.js";
+import type { EsTreeNodeOfType } from "../../utils/es-tree-node-of-type.js";
+import { findJsxAttribute } from "../../utils/find-jsx-attribute.js";
+import { getStringLiteralAttributeValue } from "../../utils/get-string-literal-attribute-value.js";
+import { hasJsxSpreadAttribute } from "../../utils/has-jsx-spread-attribute.js";
+import { isNodeOfType } from "../../utils/is-node-of-type.js";
+
+const MESSAGE =
+  '`<a target="_blank">` without `rel="noopener"` lets the opened page script your tab via `window.opener` (reverse tabnabbing). Add `rel="noopener noreferrer"`.';
+
+export const noTargetBlankWithoutRel = defineRule({
+  id: "no-target-blank-without-rel",
+  title: "target=_blank without rel=noopener",
+  severity: "warn",
+  recommendation:
+    'Add `rel="noopener noreferrer"` to every `target="_blank"` link. `noopener` blocks reverse tabnabbing; `noreferrer` also strips the `Referer` header.',
+  create: (context) => ({
+    JSXOpeningElement(node: EsTreeNodeOfType<"JSXOpeningElement">) {
+      if (!isNodeOfType(node.name, "JSXIdentifier")) return;
+      const tagName = node.name.name;
+      if (tagName !== "a" && tagName !== "area") return;
+
+      // A spread (`{...props}`) could supply `rel`; don't risk a false positive.
+      if (hasJsxSpreadAttribute(node.attributes)) return;
+
+      const targetAttribute = findJsxAttribute(node.attributes, "target");
+      if (!targetAttribute || getStringLiteralAttributeValue(targetAttribute) !== "_blank") return;
+
+      const relAttribute = findJsxAttribute(node.attributes, "rel");
+      if (relAttribute) {
+        const relValue = getStringLiteralAttributeValue(relAttribute);
+        // Dynamic rel (`rel={rel}`) — assume it's handled; don't flag.
+        if (relValue === null) return;
+        const tokens = relValue.toLowerCase().split(/\s+/);
+        if (tokens.includes("noopener") || tokens.includes("noreferrer")) return;
+      }
+
+      context.report({ node: node.name, message: MESSAGE });
+    },
+  }),
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-uninformative-aria-label.test.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-uninformative-aria-label.test.ts
new file mode 100644
index 000000000..a779aade8
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-uninformative-aria-label.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vite-plus/test";
+import { runRule } from "../../../test-utils/run-rule.js";
+import { noUninformativeAriaLabel } from "./no-uninformative-aria-label.js";
+
+describe("no-uninformative-aria-label", () => {
+  it('flags `aria-label="icon"`', () => {
+    const code = `const A = () => <button aria-label="icon"><Svg /></button>;`;
+    const result = runRule(noUninformativeAriaLabel, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it('flags `aria-label="button"` (case-insensitive, trimmed)', () => {
+    const code = `const A = () => <button aria-label="  Button "><X /></button>;`;
+    const result = runRule(noUninformativeAriaLabel, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it('flags `aria-label="image"` on an svg', () => {
+    const code = `const A = () => <svg aria-label="image" />;`;
+    const result = runRule(noUninformativeAriaLabel, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag a descriptive action label", () => {
+    const code = `const A = () => <button aria-label="Search"><Svg /></button>;`;
+    const result = runRule(noUninformativeAriaLabel, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag a descriptive destination label", () => {
+    const code = `const A = () => <a aria-label="Close dialog" href="#">x</a>;`;
+    const result = runRule(noUninformativeAriaLabel, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag a multi-word label containing a type word", () => {
+    const code = `const A = () => <button aria-label="Download icon set" />;`;
+    const result = runRule(noUninformativeAriaLabel, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("flags a braced string literal `aria-label={'icon'}`", () => {
+    const code = `const A = () => <button aria-label={'icon'}><Svg /></button>;`;
+    const result = runRule(noUninformativeAriaLabel, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag a braced descriptive label `aria-label={'Search'}`", () => {
+    const code = `const A = () => <button aria-label={'Search'}><Svg /></button>;`;
+    const result = runRule(noUninformativeAriaLabel, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag a dynamic aria-label", () => {
+    const code = `const A = ({ label }) => <button aria-label={label} />;`;
+    const result = runRule(noUninformativeAriaLabel, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag elements without aria-label", () => {
+    const code = `const A = () => <button>Save</button>;`;
+    const result = runRule(noUninformativeAriaLabel, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-uninformative-aria-label.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-uninformative-aria-label.ts
new file mode 100644
index 000000000..784a3b482
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/a11y/no-uninformative-aria-label.ts
@@ -0,0 +1,44 @@
+import { defineRule } from "../../utils/define-rule.js";
+import type { EsTreeNodeOfType } from "../../utils/es-tree-node-of-type.js";
+import { findJsxAttribute } from "../../utils/find-jsx-attribute.js";
+import { getStringLiteralAttributeValue } from "../../utils/get-string-literal-attribute-value.js";
+
+// Values that name the *element type* instead of the action/destination.
+// A screen-reader user hearing "icon" or "button" learns nothing about
+// what the control does. (Kept tight to unambiguous type words to stay
+// low-noise — "Menu", "logo", "close" can be legitimate labels.)
+const UNINFORMATIVE_LABELS = new Set([
+  "icon",
+  "button",
+  "image",
+  "img",
+  "link",
+  "graphic",
+  "svg",
+  "picture",
+  "element",
+  "field",
+  "input",
+]);
+
+const MESSAGE =
+  'An `aria-label` should name the action or destination, not the element type — this value tells screen-reader users nothing. Use something like `aria-label="Search"` or `aria-label="Close dialog"`.';
+
+export const noUninformativeAriaLabel = defineRule({
+  id: "no-uninformative-aria-label",
+  title: "Uninformative aria-label",
+  severity: "warn",
+  recommendation:
+    'Name the action, not the element type: `aria-label="Search"`, not `aria-label="icon"` or `aria-label="button"`.',
+  create: (context) => ({
+    JSXOpeningElement(node: EsTreeNodeOfType<"JSXOpeningElement">) {
+      const ariaLabel = findJsxAttribute(node.attributes, "aria-label");
+      if (!ariaLabel) return;
+      const labelValue = getStringLiteralAttributeValue(ariaLabel);
+      if (labelValue === null) return;
+      if (UNINFORMATIVE_LABELS.has(labelValue.trim().toLowerCase())) {
+        context.report({ node: ariaLabel, message: MESSAGE });
+      }
+    },
+  }),
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/correctness/no-uncontrolled-input.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/correctness/no-uncontrolled-input.ts
index 092a3371e..4861613a7 100644
--- a/packages/oxlint-plugin-react-doctor/src/plugin/rules/correctness/no-uncontrolled-input.ts
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/correctness/no-uncontrolled-input.ts
@@ -1,5 +1,6 @@
 import { defineRule } from "../../utils/define-rule.js";
 import { findJsxAttribute } from "../../utils/find-jsx-attribute.js";
+import { hasJsxSpreadAttribute } from "../../utils/has-jsx-spread-attribute.js";
 import { isComponentAssignment } from "../../utils/is-component-assignment.js";
 import { isHookCall } from "../../utils/is-hook-call.js";
 import { isInlineFunctionExpression } from "../../utils/is-inline-function-expression.js";
@@ -54,9 +55,6 @@ const collectUndefinedInitialStateNames = (componentBody: EsTreeNode): Set<strin
   return stateNames;
 };
 
-const hasJsxSpreadAttribute = (attributes: EsTreeNode[]): boolean =>
-  attributes.some((attribute) => isNodeOfType(attribute, "JSXSpreadAttribute"));
-
 // HACK: catches three uncontrolled-input mistakes that React's static
 // rule set misses:
 //   1. `value={...}` without `onChange` / `readOnly` — React renders
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-arbitrary-px-font-size.test.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-arbitrary-px-font-size.test.ts
new file mode 100644
index 000000000..3c1ed00c2
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-arbitrary-px-font-size.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vite-plus/test";
+import { runRule } from "../../../test-utils/run-rule.js";
+import { noArbitraryPxFontSize } from "./no-arbitrary-px-font-size.js";
+
+describe("no-arbitrary-px-font-size", () => {
+  it("flags `text-[13px]` and suggests rem", () => {
+    const code = `const A = () => <p className="text-[13px]">x</p>;`;
+    const result = runRule(noArbitraryPxFontSize, code);
+    expect(result.diagnostics).toHaveLength(1);
+    expect(result.diagnostics[0].message).toContain("0.8125rem");
+  });
+
+  it("flags `text-[13px]/5` (with line-height suffix)", () => {
+    const code = `const A = () => <p className="text-[13px]/5">x</p>;`;
+    const result = runRule(noArbitraryPxFontSize, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("flags a variant-prefixed `sm:text-[15px]`", () => {
+    const code = `const A = () => <p className="sm:text-[15px]">x</p>;`;
+    const result = runRule(noArbitraryPxFontSize, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag `text-[0.8125rem]`", () => {
+    const code = `const A = () => <p className="text-[0.8125rem]">x</p>;`;
+    const result = runRule(noArbitraryPxFontSize, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag named sizes like `text-sm`", () => {
+    const code = `const A = () => <p className="text-sm">x</p>;`;
+    const result = runRule(noArbitraryPxFontSize, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag pixel borders/outlines (`border-[1px]`)", () => {
+    const code = `const A = () => <div className="border-[1px] outline-[2px]" />;`;
+    const result = runRule(noArbitraryPxFontSize, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-arbitrary-px-font-size.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-arbitrary-px-font-size.ts
new file mode 100644
index 000000000..92f19cc67
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-arbitrary-px-font-size.ts
@@ -0,0 +1,34 @@
+import { ROOT_FONT_SIZE_PX } from "../../constants/design.js";
+import { defineRule } from "../../utils/define-rule.js";
+import type { RuleContext } from "../../utils/rule-context.js";
+import { getStringFromClassNameAttr } from "./utils/get-string-from-class-name-attr.js";
+import type { EsTreeNodeOfType } from "../../utils/es-tree-node-of-type.js";
+
+// `text-[13px]` / `text-[13.5px]`, optionally with a `/line-height` suffix
+// (`text-[13px]/5`). Only `text-[...]` — `px` stays correct for `border-*` /
+// `outline-*`, which use pixels natively.
+const ARBITRARY_PX_FONT_SIZE = /(?:^|\s)(?:\w+:)*text-\[(\d+(?:\.\d+)?)px\]/g;
+
+export const noArbitraryPxFontSize = defineRule({
+  id: "no-arbitrary-px-font-size",
+  title: "Pixel arbitrary font size",
+  tags: ["design", "test-noise"],
+  severity: "warn",
+  category: "Accessibility",
+  recommendation:
+    "Use `rem` for arbitrary font sizes (`text-[0.8125rem]`, not `text-[13px]`) so text scales with the user's root font-size preference. Pixels stay fine for `border-*` / `outline-*`.",
+  create: (context: RuleContext) => ({
+    JSXOpeningElement(node: EsTreeNodeOfType<"JSXOpeningElement">) {
+      const classNameValue = getStringFromClassNameAttr(node);
+      if (!classNameValue) return;
+      for (const match of classNameValue.matchAll(ARBITRARY_PX_FONT_SIZE)) {
+        const pixels = parseFloat(match[1]);
+        const rem = pixels / ROOT_FONT_SIZE_PX;
+        context.report({
+          node,
+          message: `\`text-[${match[1]}px]\` doesn't scale with the user's font-size preference — use rem, e.g. \`text-[${rem}rem]\`.`,
+        });
+      }
+    },
+  }),
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-deprecated-tailwind-class.test.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-deprecated-tailwind-class.test.ts
new file mode 100644
index 000000000..2b759fe7c
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-deprecated-tailwind-class.test.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vite-plus/test";
+import { runRule } from "../../../test-utils/run-rule.js";
+import { noDeprecatedTailwindClass } from "./no-deprecated-tailwind-class.js";
+
+describe("no-deprecated-tailwind-class", () => {
+  it("flags `bg-gradient-to-r` (renamed to bg-linear-to-r)", () => {
+    const code = `const A = () => <div className="bg-gradient-to-r from-black to-white" />;`;
+    const result = runRule(noDeprecatedTailwindClass, code);
+    expect(result.diagnostics).toHaveLength(1);
+    expect(result.diagnostics[0].message).toContain("bg-linear-to-r");
+  });
+
+  it("flags `flex-shrink-0` (renamed to shrink-0)", () => {
+    const code = `const A = () => <div className="flex-shrink-0" />;`;
+    const result = runRule(noDeprecatedTailwindClass, code);
+    expect(result.diagnostics).toHaveLength(1);
+    expect(result.diagnostics[0].message).toContain("shrink-0");
+  });
+
+  it("flags `flex-grow` and `overflow-ellipsis`", () => {
+    const code = `const A = () => <div className="flex-grow overflow-ellipsis" />;`;
+    const result = runRule(noDeprecatedTailwindClass, code);
+    expect(result.diagnostics).toHaveLength(2);
+  });
+
+  it("flags a deprecated class behind a variant prefix", () => {
+    const code = `const A = () => <div className="md:flex-shrink-0" />;`;
+    const result = runRule(noDeprecatedTailwindClass, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag the canonical replacements", () => {
+    const code = `const A = () => <div className="bg-linear-to-r shrink-0 grow text-ellipsis" />;`;
+    const result = runRule(noDeprecatedTailwindClass, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag `overflow-clip` (a current `overflow: clip` utility, not `text-clip`)", () => {
+    const code = `const A = () => <div className="overflow-clip" />;`;
+    const result = runRule(noDeprecatedTailwindClass, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT mis-suggest for `bg-gradient-radial` (v4 is `bg-radial`, not `bg-linear-radial`)", () => {
+    const code = `const A = () => <div className="bg-gradient-radial" />;`;
+    const result = runRule(noDeprecatedTailwindClass, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag `flex`, `flex-1`, or `flex-col` (not the deprecated names)", () => {
+    const code = `const A = () => <div className="flex flex-1 flex-col" />;`;
+    const result = runRule(noDeprecatedTailwindClass, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-deprecated-tailwind-class.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-deprecated-tailwind-class.ts
new file mode 100644
index 000000000..70fe8ee94
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-deprecated-tailwind-class.ts
@@ -0,0 +1,43 @@
+import { defineRule } from "../../utils/define-rule.js";
+import type { RuleContext } from "../../utils/rule-context.js";
+import { getClassNameTokens } from "../../utils/get-class-name-tokens.js";
+import { getStringFromClassNameAttr } from "./utils/get-string-from-class-name-attr.js";
+import type { EsTreeNodeOfType } from "../../utils/es-tree-node-of-type.js";
+
+// Tailwind v4 renamed/removed these utilities. Map each deprecated base token
+// to its canonical v4 replacement. Gated on `tailwind:4` so v3 projects, where
+// these are still the correct names, are never flagged.
+const renameDeprecatedToken = (token: string): string | null => {
+  if (token === "overflow-ellipsis") return "text-ellipsis";
+  if (token.startsWith("flex-shrink")) return token.replace("flex-shrink", "shrink");
+  if (token.startsWith("flex-grow")) return token.replace("flex-grow", "grow");
+  // Only the directional gradients were renamed to `bg-linear-to-*`; v4's
+  // radial/conic are `bg-radial`/`bg-conic`, so don't touch `bg-gradient-radial`.
+  if (token.startsWith("bg-gradient-to-")) return token.replace("bg-gradient-to-", "bg-linear-to-");
+  return null;
+};
+
+export const noDeprecatedTailwindClass = defineRule({
+  id: "no-deprecated-tailwind-class",
+  title: "Deprecated Tailwind v4 utility",
+  tags: ["design", "test-noise"],
+  severity: "warn",
+  requires: ["tailwind:4"],
+  recommendation:
+    "Tailwind v4 renamed these utilities: `bg-gradient-*` → `bg-linear-*`, `flex-shrink-*` → `shrink-*`, `flex-grow-*` → `grow-*`, `overflow-ellipsis` → `text-ellipsis`. Use the new names.",
+  create: (context: RuleContext) => ({
+    JSXOpeningElement(node: EsTreeNodeOfType<"JSXOpeningElement">) {
+      const classNameValue = getStringFromClassNameAttr(node);
+      if (!classNameValue) return;
+      for (const token of getClassNameTokens(classNameValue)) {
+        const replacement = renameDeprecatedToken(token);
+        if (replacement) {
+          context.report({
+            node,
+            message: `\`${token}\` was renamed in Tailwind v4 and no longer applies — use \`${replacement}\`.`,
+          });
+        }
+      }
+    },
+  }),
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-full-viewport-width.test.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-full-viewport-width.test.ts
new file mode 100644
index 000000000..51d174b73
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-full-viewport-width.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vite-plus/test";
+import { runRule } from "../../../test-utils/run-rule.js";
+import { noFullViewportWidth } from "./no-full-viewport-width.js";
+
+describe("no-full-viewport-width", () => {
+  it("flags the `w-screen` class", () => {
+    const code = `const A = () => <div className="w-screen bg-black" />;`;
+    const result = runRule(noFullViewportWidth, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("flags arbitrary `w-[100vw]`", () => {
+    const code = `const A = () => <div className="w-[100vw]" />;`;
+    const result = runRule(noFullViewportWidth, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("flags variant-prefixed `md:w-screen` (overflow happens at every breakpoint)", () => {
+    const code = `const A = () => <div className="md:w-screen" />;`;
+    const result = runRule(noFullViewportWidth, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("flags variant-prefixed `lg:min-w-screen`", () => {
+    const code = `const A = () => <div className="lg:min-w-screen" />;`;
+    const result = runRule(noFullViewportWidth, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag variant-prefixed `md:max-w-screen` (still a defensive cap)", () => {
+    const code = `const A = () => <div className="md:max-w-screen" />;`;
+    const result = runRule(noFullViewportWidth, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("flags inline `width: '100vw'`", () => {
+    const code = `const A = () => <div style={{ width: "100vw" }} />;`;
+    const result = runRule(noFullViewportWidth, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag `max-w-[100vw]` (a defensive cap, not the footgun)", () => {
+    const code = `const A = () => <div className="max-w-[100vw]" />;`;
+    const result = runRule(noFullViewportWidth, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag inline `maxWidth: '100vw'`", () => {
+    const code = `const A = () => <div style={{ maxWidth: "100vw" }} />;`;
+    const result = runRule(noFullViewportWidth, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag `max-w-screen-lg` (a breakpoint max-width)", () => {
+    const code = `const A = () => <div className="max-w-screen-lg" />;`;
+    const result = runRule(noFullViewportWidth, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag `w-full`", () => {
+    const code = `const A = () => <div className="w-full" />;`;
+    const result = runRule(noFullViewportWidth, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag `h-screen` (height, different concern)", () => {
+    const code = `const A = () => <div className="h-screen" />;`;
+    const result = runRule(noFullViewportWidth, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag inline `width: '100%'`", () => {
+    const code = `const A = () => <div style={{ width: "100%" }} />;`;
+    const result = runRule(noFullViewportWidth, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-full-viewport-width.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-full-viewport-width.ts
new file mode 100644
index 000000000..d506c1c11
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-full-viewport-width.ts
@@ -0,0 +1,47 @@
+import { defineRule } from "../../utils/define-rule.js";
+import type { RuleContext } from "../../utils/rule-context.js";
+import { getInlineStyleExpression } from "./utils/get-inline-style-expression.js";
+import { getStylePropertyKey } from "./utils/get-style-property-key.js";
+import { getStylePropertyStringValue } from "./utils/get-style-property-string-value.js";
+import { getStringFromClassNameAttr } from "./utils/get-string-from-class-name-attr.js";
+import type { EsTreeNodeOfType } from "../../utils/es-tree-node-of-type.js";
+
+// `w-screen`, `min-w-screen`, or arbitrary `w-[100vw]`, including behind a
+// variant prefix (`md:w-screen`) — the overflow happens at every breakpoint.
+// Mirrors the sibling `prefer-dvh-over-vh` pattern. `max-w-*` is excluded —
+// `max-width: 100vw` is a defensive cap, not the overflow footgun.
+const FULL_VIEWPORT_WIDTH_CLASS = /(?:^|\s)(?:\w+:)*(?:min-)?w-(?:screen|\[100vw\])(?=$|[\s])/;
+const WIDTH_KEYS = new Set(["width", "minWidth"]);
+
+const MESSAGE =
+  "`100vw` is wider than the viewport whenever a scrollbar is visible, so it triggers horizontal scroll on most desktops. Use `w-full` / `width: 100%` (with the parent's padding) for a full-bleed element.";
+
+export const noFullViewportWidth = defineRule({
+  id: "no-full-viewport-width",
+  title: "Full viewport width causes overflow",
+  tags: ["design", "test-noise"],
+  severity: "warn",
+  recommendation:
+    "Prefer `w-full` (`width: 100%`) over `w-screen` / `100vw`. `100vw` ignores the scrollbar gutter and overflows horizontally.",
+  create: (context: RuleContext) => ({
+    JSXAttribute(node: EsTreeNodeOfType<"JSXAttribute">) {
+      const expression = getInlineStyleExpression(node);
+      if (!expression) return;
+      for (const property of expression.properties ?? []) {
+        const key = getStylePropertyKey(property);
+        if (!key || !WIDTH_KEYS.has(key)) continue;
+        const value = getStylePropertyStringValue(property);
+        if (value && value.trim().toLowerCase() === "100vw") {
+          context.report({ node: property, message: MESSAGE });
+        }
+      }
+    },
+    JSXOpeningElement(node: EsTreeNodeOfType<"JSXOpeningElement">) {
+      const classNameValue = getStringFromClassNameAttr(node);
+      if (!classNameValue) return;
+      if (FULL_VIEWPORT_WIDTH_CLASS.test(classNameValue)) {
+        context.report({ node, message: MESSAGE });
+      }
+    },
+  }),
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-low-contrast-inline-style.test.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-low-contrast-inline-style.test.ts
new file mode 100644
index 000000000..e13561ef2
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-low-contrast-inline-style.test.ts
@@ -0,0 +1,115 @@
+import { describe, expect, it } from "vite-plus/test";
+import { runRule } from "../../../test-utils/run-rule.js";
+import { noLowContrastInlineStyle } from "./no-low-contrast-inline-style.js";
+
+describe("no-low-contrast-inline-style", () => {
+  it("flags gray-400 text on white at normal size (≈2.5:1 < 4.5)", () => {
+    const code = `const A = () => <span style={{ color: "#9ca3af", backgroundColor: "#ffffff", fontSize: 16 }}>Balance</span>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(1);
+    expect(result.diagnostics[0].message).toContain("4.5:1");
+  });
+
+  it("flags gray-400 on white even when size is unknown (fails the 3:1 floor too)", () => {
+    const code = `const A = () => <span style={{ color: "#9ca3af", backgroundColor: "#ffffff" }}>Balance</span>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(1);
+    expect(result.diagnostics[0].message).toContain("3:1");
+  });
+
+  it("flags near-invisible white-on-light text", () => {
+    const code = `const A = () => <div style={{ color: "white", backgroundColor: "#f3f4f6" }}>Saved</div>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("flags #808080 on white at an explicit normal size (≈3.95:1 < 4.5)", () => {
+    const code = `const A = () => <p style={{ color: "#808080", backgroundColor: "#fff", fontSize: 14 }}>body</p>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag #808080 on white at large size (≈3.95:1 ≥ 3 large threshold)", () => {
+    const code = `const A = () => <h1 style={{ color: "#808080", backgroundColor: "#fff", fontSize: 32 }}>Title</h1>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag a 3–4.5 band pair when size is unknown (could be large text via a class)", () => {
+    const code = `const A = () => <h1 className="text-5xl" style={{ color: "#808080", backgroundColor: "#fff" }}>Title</h1>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag accessible gray-700 on white", () => {
+    const code = `const A = () => <span style={{ color: "#374151", backgroundColor: "#ffffff" }}>OK</span>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag when only color is set (background unknown)", () => {
+    const code = `const A = () => <span style={{ color: "#9ca3af" }}>x</span>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag when background is transparent", () => {
+    const code = `const A = () => <span style={{ color: "#9ca3af", backgroundColor: "transparent" }}>x</span>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag when a `background` shorthand gradient/image is present", () => {
+    const code = `const A = () => <span style={{ color: "#999999", background: "linear-gradient(#000,#fff)" }}>x</span>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("DOES flag a solid `background` shorthand color (Bugbot: background shorthand skips contrast)", () => {
+    const code = `const A = () => <span style={{ color: "#9ca3af", background: "#ffffff", fontSize: 16 }}>x</span>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag when both backgroundColor and background shorthand are present (ambiguous)", () => {
+    const code = `const A = () => <span style={{ color: "#9ca3af", backgroundColor: "#fff", background: "#000", fontSize: 16 }}>x</span>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag large + string `fontWeight: '700'` (Bugbot: string weight ignored)", () => {
+    const code = `const A = () => <span style={{ color: "#808080", backgroundColor: "#fff", fontSize: 20, fontWeight: "700" }}>x</span>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag CSS-variable colors (unresolvable)", () => {
+    const code = `const A = () => <span style={{ color: "var(--muted)", backgroundColor: "var(--card)" }}>x</span>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag colors carrying alpha (can't composite)", () => {
+    const code = `const A = () => <span style={{ color: "rgba(0,0,0,0.4)", backgroundColor: "#ffffff" }}>x</span>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag 4-arg `rgb(0,0,0,0.5)` (carries alpha)", () => {
+    const code = `const A = () => <span style={{ color: "rgb(0,0,0,0.5)", backgroundColor: "#ffffff" }}>x</span>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("DOES flag opaque comma `rgb()` colors", () => {
+    const code = `const A = () => <span style={{ color: "rgb(156,163,175)", backgroundColor: "rgb(255,255,255)", fontSize: 16 }}>x</span>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag when the style object has a spread (could override colors)", () => {
+    const code = `const A = (rest) => <span style={{ color: "#9ca3af", backgroundColor: "#fff", ...rest }}>x</span>;`;
+    const result = runRule(noLowContrastInlineStyle, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-low-contrast-inline-style.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-low-contrast-inline-style.ts
new file mode 100644
index 000000000..084aa919a
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-low-contrast-inline-style.ts
@@ -0,0 +1,159 @@
+import {
+  BOLD_FONT_WEIGHT_MIN,
+  LARGE_BOLD_TEXT_MIN_PX,
+  LARGE_TEXT_MIN_PX,
+  ROOT_FONT_SIZE_PX,
+  WCAG_CONTRAST_LARGE_MIN,
+  WCAG_CONTRAST_NORMAL_MIN,
+} from "../../constants/design.js";
+import { defineRule } from "../../utils/define-rule.js";
+import type { ParsedRgb } from "../../utils/parsed-rgb.js";
+import type { RuleContext } from "../../utils/rule-context.js";
+import type { EsTreeNodeOfType } from "../../utils/es-tree-node-of-type.js";
+import { getInlineStyleExpression } from "./utils/get-inline-style-expression.js";
+import { getStylePropertyKey } from "./utils/get-style-property-key.js";
+import { getStylePropertyNumberValue } from "./utils/get-style-property-number-value.js";
+import { getStylePropertyStringValue } from "./utils/get-style-property-string-value.js";
+import { getWcagContrastRatio } from "./utils/get-wcag-contrast-ratio.js";
+import { parseColorToRgb } from "./utils/parse-color-to-rgb.js";
+
+const UNRESOLVABLE = new Set([
+  "transparent",
+  "currentcolor",
+  "inherit",
+  "initial",
+  "unset",
+  "revert",
+  "none",
+]);
+
+// Resolve a style color string to an OPAQUE rgb, or null when it can't be
+// soundly resolved (alpha, keywords, CSS variables, hsl/oklch). We only
+// flag pairs we can compute with certainty.
+const resolveOpaqueColor = (raw: string): ParsedRgb | null => {
+  const value = raw.trim().toLowerCase();
+  if (UNRESOLVABLE.has(value)) return null;
+  if (value === "white") return { red: 255, green: 255, blue: 255 };
+  if (value === "black") return { red: 0, green: 0, blue: 0 };
+  if (value.startsWith("var(")) return null;
+  // Colors carrying alpha can't be judged without compositing — skip.
+  if (/^#(?:[0-9a-f]{4}|[0-9a-f]{8})$/.test(value)) return null;
+  if (value.startsWith("hsl") || value.startsWith("oklch")) return null;
+  // `rgb()`/`rgba()` with an alpha channel — the slash form (`rgb(0 0 0 / 50%)`)
+  // or a 4th comma component (`rgb(0,0,0,0.5)` / `rgba(0,0,0,0.5)`).
+  if (value.startsWith("rgb")) {
+    const inner = value.slice(value.indexOf("(") + 1, value.lastIndexOf(")"));
+    if (inner.includes("/") || inner.split(",").length >= 4) return null;
+  }
+  return parseColorToRgb(value);
+};
+
+const toPx = (property: EsTreeNodeOfType<"Property">): number | null => {
+  const numberValue = getStylePropertyNumberValue(property);
+  if (numberValue !== null) return numberValue;
+  const stringValue = getStylePropertyStringValue(property);
+  if (stringValue === null) return null;
+  const pxMatch = stringValue.match(/^([\d.]+)px$/);
+  if (pxMatch) return parseFloat(pxMatch[1]);
+  const remMatch = stringValue.match(/^([\d.]+)rem$/);
+  if (remMatch) return parseFloat(remMatch[1]) * ROOT_FONT_SIZE_PX;
+  return null;
+};
+
+const isBoldWeight = (property: EsTreeNodeOfType<"Property">): boolean => {
+  const numberValue = getStylePropertyNumberValue(property);
+  if (numberValue !== null) return numberValue >= BOLD_FONT_WEIGHT_MIN;
+  const stringValue = getStylePropertyStringValue(property);
+  if (stringValue === null) return false;
+  if (stringValue === "bold" || stringValue === "bolder") return true;
+  // Numeric weight written as a string, e.g. `fontWeight: "700"`.
+  const numericWeight = Number(stringValue);
+  return Number.isFinite(numericWeight) && numericWeight >= BOLD_FONT_WEIGHT_MIN;
+};
+
+export const noLowContrastInlineStyle = defineRule({
+  id: "no-low-contrast-inline-style",
+  title: "Low-contrast text in inline style",
+  tags: ["test-noise"],
+  severity: "warn",
+  category: "Accessibility",
+  recommendation:
+    "Text needs a WCAG contrast ratio of at least 4.5:1 (3:1 for large/bold text) against its background. Darken or lighten one of the colors until it passes.",
+  create: (context: RuleContext) => ({
+    JSXAttribute(node: EsTreeNodeOfType<"JSXAttribute">) {
+      const expression = getInlineStyleExpression(node);
+      if (!expression) return;
+      const properties = expression.properties ?? [];
+      // A `{...spread}` in the style object can override color/backgroundColor
+      // at runtime, so we can't judge the static literals — bail.
+      if (properties.some((property) => property.type === "SpreadElement")) {
+        return;
+      }
+
+      let foreground: ParsedRgb | null = null;
+      let backgroundColorRaw: string | null = null;
+      let backgroundShorthandRaw: string | null = null;
+      let backgroundIsUnknown = false;
+      let fontSizePx: number | null = null;
+      let isBold = false;
+
+      for (const property of properties) {
+        const key = getStylePropertyKey(property);
+        if (!key) continue;
+        if (key === "backgroundImage") {
+          backgroundIsUnknown = true;
+          continue;
+        }
+        if (key === "fontSize" && property.type === "Property") {
+          fontSizePx = toPx(property);
+          continue;
+        }
+        if (key === "fontWeight" && property.type === "Property") {
+          isBold = isBoldWeight(property);
+          continue;
+        }
+        const stringValue = getStylePropertyStringValue(property);
+        if (key === "color") {
+          if (stringValue !== null) foreground = resolveOpaqueColor(stringValue);
+        } else if (key === "backgroundColor") {
+          backgroundColorRaw = stringValue;
+        } else if (key === "background") {
+          // A non-string `background` (a CSS var, a gradient bound to an
+          // expression, etc.) can't be judged — treat the surface as unknown.
+          if (stringValue === null) backgroundIsUnknown = true;
+          else backgroundShorthandRaw = stringValue;
+        }
+      }
+
+      if (backgroundIsUnknown) return;
+      // Both `backgroundColor` and the `background` shorthand on one element is
+      // ambiguous about which actually paints behind the text — bail.
+      if (backgroundColorRaw !== null && backgroundShorthandRaw !== null) return;
+
+      // A `background` shorthand that doesn't resolve to a single opaque color
+      // (gradient, image, multi-layer) paints the real background — `resolveOpaqueColor`
+      // returns null for those, so `background` stays null and we skip below.
+      const backgroundRaw = backgroundColorRaw ?? backgroundShorthandRaw;
+      const background = backgroundRaw === null ? null : resolveOpaqueColor(backgroundRaw);
+      if (!foreground || !background) return;
+
+      // When the font size isn't in the inline style it may be set via a
+      // class (`text-5xl`) — i.e. the text could be "large". To avoid false
+      // positives on large text (which only needs 3:1), fall back to the
+      // lenient large-text threshold whenever the size is unknown; only
+      // apply the stricter 4.5:1 when we can see the size is normal.
+      const couldBeLargeText =
+        fontSizePx === null ||
+        fontSizePx >= LARGE_TEXT_MIN_PX ||
+        (isBold && fontSizePx >= LARGE_BOLD_TEXT_MIN_PX);
+      const threshold = couldBeLargeText ? WCAG_CONTRAST_LARGE_MIN : WCAG_CONTRAST_NORMAL_MIN;
+      const ratio = getWcagContrastRatio(foreground, background);
+      if (ratio < threshold) {
+        context.report({
+          node,
+          message: `Your users struggle to read this text: its contrast against the background is ${ratio.toFixed(2)}:1, below the ${threshold}:1 WCAG minimum, so darken or lighten one of the colors.`,
+        });
+      }
+    },
+  }),
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-redundant-display-class.test.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-redundant-display-class.test.ts
new file mode 100644
index 000000000..801081169
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-redundant-display-class.test.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it } from "vite-plus/test";
+import { runRule } from "../../../test-utils/run-rule.js";
+import { noRedundantDisplayClass } from "./no-redundant-display-class.js";
+
+describe("no-redundant-display-class", () => {
+  it("flags `block` on a `<div>`", () => {
+    const code = `const A = () => <div className="block rounded-lg p-4" />;`;
+    const result = runRule(noRedundantDisplayClass, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("flags `inline` on a `<span>`", () => {
+    const code = `const A = () => <span className="inline text-sm" />;`;
+    const result = runRule(noRedundantDisplayClass, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag `inline-block` on a span (different display)", () => {
+    const code = `const A = () => <span className="inline-block" />;`;
+    const result = runRule(noRedundantDisplayClass, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag `block` on an `<a>` (a is inline by default)", () => {
+    const code = `const A = () => <a className="block" href="/x">x</a>;`;
+    const result = runRule(noRedundantDisplayClass, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag a breakpoint-prefixed `md:block`", () => {
+    const code = `const A = () => <div className="hidden md:block" />;`;
+    const result = runRule(noRedundantDisplayClass, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag `flex`/`grid`/`hidden` (meaningful displays)", () => {
+    const code = `const A = () => <div className="flex items-center" />;`;
+    const result = runRule(noRedundantDisplayClass, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag `block` on an `<li>` (li defaults to list-item, so block is meaningful)", () => {
+    const code = `const A = () => <li className="block">x</li>;`;
+    const result = runRule(noRedundantDisplayClass, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-redundant-display-class.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-redundant-display-class.ts
new file mode 100644
index 000000000..fcc79224a
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-redundant-display-class.ts
@@ -0,0 +1,97 @@
+import { defineRule } from "../../utils/define-rule.js";
+import type { RuleContext } from "../../utils/rule-context.js";
+import { isNodeOfType } from "../../utils/is-node-of-type.js";
+import { getStringFromClassNameAttr } from "./utils/get-string-from-class-name-attr.js";
+import type { EsTreeNodeOfType } from "../../utils/es-tree-node-of-type.js";
+
+// Host elements whose default `display` is already `block`.
+const BLOCK_DEFAULT_TAGS = new Set([
+  "div",
+  "p",
+  "section",
+  "article",
+  "main",
+  "header",
+  "footer",
+  "nav",
+  "aside",
+  "figure",
+  "figcaption",
+  "blockquote",
+  "form",
+  "fieldset",
+  "address",
+  "pre",
+  "ul",
+  "ol",
+  "dl",
+  "dt",
+  "dd",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+]);
+
+// Host elements whose default `display` is already `inline`.
+const INLINE_DEFAULT_TAGS = new Set([
+  "span",
+  "a",
+  "b",
+  "i",
+  "em",
+  "strong",
+  "small",
+  "code",
+  "abbr",
+  "cite",
+  "label",
+  "mark",
+  "q",
+  "s",
+  "u",
+  "sub",
+  "sup",
+  "kbd",
+  "samp",
+  "var",
+  "time",
+]);
+
+// Standalone, unprefixed tokens. A breakpoint-prefixed `md:block` is a
+// deliberate per-breakpoint override, so it's never flagged.
+const STANDALONE_BLOCK = /(?:^|\s)block(?:$|\s)/;
+const STANDALONE_INLINE = /(?:^|\s)inline(?:$|\s)/;
+
+export const noRedundantDisplayClass = defineRule({
+  id: "no-redundant-display-class",
+  title: "Redundant display utility",
+  tags: ["design", "test-noise"],
+  severity: "warn",
+  recommendation:
+    "Drop the display class that matches the element's default (`block` on a `<div>`, `inline` on a `<span>`). It is pure noise; keep only display changes like `flex`, `grid`, or `hidden`.",
+  create: (context: RuleContext) => ({
+    JSXOpeningElement(node: EsTreeNodeOfType<"JSXOpeningElement">) {
+      if (!isNodeOfType(node.name, "JSXIdentifier")) return;
+      const tagName = node.name.name;
+      const classNameValue = getStringFromClassNameAttr(node);
+      if (!classNameValue) return;
+
+      if (BLOCK_DEFAULT_TAGS.has(tagName) && STANDALONE_BLOCK.test(classNameValue)) {
+        context.report({
+          node,
+          message: `\`block\` is the default display of \`<${tagName}>\`, so the class does nothing — remove it.`,
+        });
+        return;
+      }
+      if (INLINE_DEFAULT_TAGS.has(tagName) && STANDALONE_INLINE.test(classNameValue)) {
+        context.report({
+          node,
+          message: `\`inline\` is the default display of \`<${tagName}>\`, so the class does nothing — remove it.`,
+        });
+      }
+    },
+  }),
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-svg-currentcolor-with-fill-class.test.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-svg-currentcolor-with-fill-class.test.ts
new file mode 100644
index 000000000..b31a7a18a
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-svg-currentcolor-with-fill-class.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vite-plus/test";
+import { runRule } from "../../../test-utils/run-rule.js";
+import { noSvgCurrentcolorWithFillClass } from "./no-svg-currentcolor-with-fill-class.js";
+
+describe("no-svg-currentcolor-with-fill-class", () => {
+  it('flags `fill="currentColor"` with a `fill-zinc-400` class', () => {
+    const code = `const A = () => <svg fill="currentColor" className="fill-zinc-400" />;`;
+    const result = runRule(noSvgCurrentcolorWithFillClass, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it('flags `stroke="currentColor"` with a `stroke-blue-500` class', () => {
+    const code = `const A = () => <svg stroke="currentColor" className="stroke-blue-500" />;`;
+    const result = runRule(noSvgCurrentcolorWithFillClass, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag stroke-width utilities like `stroke-2` (Bugbot: width is not color)", () => {
+    const code = `const A = () => <svg stroke="currentColor" className="stroke-2" />;`;
+    const result = runRule(noSvgCurrentcolorWithFillClass, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag arbitrary stroke width `stroke-[1.5]`", () => {
+    const code = `const A = () => <svg stroke="currentColor" className="stroke-[1.5]" />;`;
+    const result = runRule(noSvgCurrentcolorWithFillClass, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("still flags a stroke COLOR alongside a width (`stroke-2 stroke-red-500`)", () => {
+    const code = `const A = () => <svg stroke="currentColor" className="stroke-2 stroke-red-500" />;`;
+    const result = runRule(noSvgCurrentcolorWithFillClass, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag a variant-prefixed `hover:fill-blue-600` (no static base conflict)", () => {
+    const code = `const A = () => <svg fill="currentColor" className="hover:fill-blue-600" />;`;
+    const result = runRule(noSvgCurrentcolorWithFillClass, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag `dark:fill-white` with currentColor (state-gated)", () => {
+    const code = `const A = () => <svg fill="currentColor" className="dark:fill-white" />;`;
+    const result = runRule(noSvgCurrentcolorWithFillClass, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag `fill-current` (intended to inherit)", () => {
+    const code = `const A = () => <svg fill="currentColor" className="fill-current" />;`;
+    const result = runRule(noSvgCurrentcolorWithFillClass, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag a `fill-*` class with no currentColor attribute", () => {
+    const code = `const A = () => <svg className="fill-zinc-400" />;`;
+    const result = runRule(noSvgCurrentcolorWithFillClass, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it('does NOT flag `fill="currentColor"` with no color class', () => {
+    const code = `const A = () => <svg fill="currentColor" className="size-4 shrink-0" />;`;
+    const result = runRule(noSvgCurrentcolorWithFillClass, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-svg-currentcolor-with-fill-class.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-svg-currentcolor-with-fill-class.ts
new file mode 100644
index 000000000..d6fd5b9ab
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-svg-currentcolor-with-fill-class.ts
@@ -0,0 +1,59 @@
+import { defineRule } from "../../utils/define-rule.js";
+import type { RuleContext } from "../../utils/rule-context.js";
+import { findJsxAttribute } from "../../utils/find-jsx-attribute.js";
+import { getJsxPropStringValue } from "../../utils/get-jsx-prop-string-value.js";
+import { getStringFromClassNameAttr } from "./utils/get-string-from-class-name-attr.js";
+import type { EsTreeNodeOfType } from "../../utils/es-tree-node-of-type.js";
+
+// An UNPREFIXED `fill-*` / `stroke-*` utility that sets an explicit COLOR (so
+// it fights an inline `fill="currentColor"` / `stroke="currentColor"`).
+// Excludes:
+//   - variant-prefixed tokens (`hover:fill-blue-600`, `dark:fill-white`) — the
+//     attribute paints the base color; the class only applies in that state, so
+//     there's no static conflict;
+//   - `*-current` (inherits the text color — the intended pairing);
+//   - stroke-WIDTH utilities (`stroke-2`, `stroke-[1.5]`), which set thickness.
+const hasColorUtility = (classNameValue: string, prefix: "fill-" | "stroke-"): boolean =>
+  classNameValue.split(/\s+/).some((token) => {
+    if (token.includes(":")) return false;
+    if (!token.startsWith(prefix)) return false;
+    const value = token.slice(prefix.length);
+    if (value === "" || value === "current") return false;
+    if (/^\d/.test(value) || /^\[\d/.test(value)) return false;
+    return true;
+  });
+
+const isCurrentColor = (attribute: EsTreeNodeOfType<"JSXAttribute">): boolean => {
+  const value = getJsxPropStringValue(attribute);
+  return value !== null && value.trim().toLowerCase() === "currentcolor";
+};
+
+export const noSvgCurrentcolorWithFillClass = defineRule({
+  id: "no-svg-currentcolor-with-fill-class",
+  title: "currentColor fights a fill/stroke class",
+  tags: ["design", "test-noise"],
+  severity: "warn",
+  recommendation:
+    'Pick one source of truth: drop the `fill="currentColor"` attribute and keep the `fill-*` class, or use `fill-current` to inherit the text color. Having both means the class silently wins.',
+  create: (context: RuleContext) => ({
+    JSXOpeningElement(node: EsTreeNodeOfType<"JSXOpeningElement">) {
+      const classNameValue = getStringFromClassNameAttr(node);
+      if (!classNameValue) return;
+
+      for (const paint of ["fill", "stroke"] as const) {
+        const attribute = findJsxAttribute(node.attributes, paint);
+        if (
+          attribute &&
+          isCurrentColor(attribute) &&
+          hasColorUtility(classNameValue, `${paint}-`)
+        ) {
+          context.report({
+            node: attribute,
+            message: `\`${paint}="currentColor"\` and a \`${paint}-*\` color class on the same element conflict — the class wins. Remove one, or use \`${paint}-current\` to inherit the text color.`,
+          });
+          return;
+        }
+      }
+    },
+  }),
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-tailwind-layout-transition.test.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-tailwind-layout-transition.test.ts
new file mode 100644
index 000000000..025f513f8
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-tailwind-layout-transition.test.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vite-plus/test";
+import { runRule } from "../../../test-utils/run-rule.js";
+import { noTailwindLayoutTransition } from "./no-tailwind-layout-transition.js";
+
+describe("no-tailwind-layout-transition", () => {
+  it("flags `transition-[height]`", () => {
+    const code = `const A = () => <div className="transition-[height] duration-300" />;`;
+    const result = runRule(noTailwindLayoutTransition, code);
+    expect(result.diagnostics).toHaveLength(1);
+    expect(result.diagnostics[0].message).toContain("height");
+  });
+
+  it("flags `transition-[margin-top]`", () => {
+    const code = `const A = () => <div className="transition-[margin-top]" />;`;
+    const result = runRule(noTailwindLayoutTransition, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("flags a layout property mixed with a safe one (`transition-[width,opacity]`)", () => {
+    const code = `const A = () => <div className="transition-[width,opacity]" />;`;
+    const result = runRule(noTailwindLayoutTransition, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag SVG `transition-[stroke-width]` (not HTML layout)", () => {
+    const code = `const A = () => <circle className="transition-[stroke-width]" />;`;
+    const result = runRule(noTailwindLayoutTransition, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag `transition-[border-width]` (substring of a non-layout prop)", () => {
+    const code = `const A = () => <div className="transition-[border-width]" />;`;
+    const result = runRule(noTailwindLayoutTransition, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("flags `transition-[max-height]` (a real layout property)", () => {
+    const code = `const A = () => <div className="transition-[max-height]" />;`;
+    const result = runRule(noTailwindLayoutTransition, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag `transition-[transform]`", () => {
+    const code = `const A = () => <div className="transition-[transform] duration-300" />;`;
+    const result = runRule(noTailwindLayoutTransition, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag `transition-[opacity,filter]`", () => {
+    const code = `const A = () => <div className="transition-[opacity,filter]" />;`;
+    const result = runRule(noTailwindLayoutTransition, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag the named `transition-transform` utility", () => {
+    const code = `const A = () => <div className="transition-transform" />;`;
+    const result = runRule(noTailwindLayoutTransition, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-tailwind-layout-transition.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-tailwind-layout-transition.ts
new file mode 100644
index 000000000..f92d020c0
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/no-tailwind-layout-transition.ts
@@ -0,0 +1,73 @@
+import { defineRule } from "../../utils/define-rule.js";
+import type { RuleContext } from "../../utils/rule-context.js";
+import { getStringFromClassNameAttr } from "./utils/get-string-from-class-name-attr.js";
+import type { EsTreeNodeOfType } from "../../utils/es-tree-node-of-type.js";
+
+// Tailwind arbitrary transition-property utilities: `transition-[height]`,
+// `transition-[width,opacity]`, `transition-[margin-top]`, etc.
+const ARBITRARY_TRANSITION_PROPERTY = /transition-\[([^\]]+)\]/g;
+
+// Layout-triggering properties: animating any of these forces the browser to
+// recompute geometry every frame. Matched as EXACT property names (not
+// substrings) so SVG `stroke-width` / `border-width` — which contain "width"
+// but are not HTML layout — are not falsely flagged. transform/opacity are
+// absent on purpose: they are the cheap, compositor-only properties to use.
+const LAYOUT_PROPERTIES = new Set([
+  "width",
+  "height",
+  "min-width",
+  "max-width",
+  "min-height",
+  "max-height",
+  "top",
+  "left",
+  "right",
+  "bottom",
+  "inset",
+  "inset-block",
+  "inset-inline",
+  "margin",
+  "margin-top",
+  "margin-right",
+  "margin-bottom",
+  "margin-left",
+  "margin-block",
+  "margin-inline",
+  "padding",
+  "padding-top",
+  "padding-right",
+  "padding-bottom",
+  "padding-left",
+  "padding-block",
+  "padding-inline",
+]);
+
+export const noTailwindLayoutTransition = defineRule({
+  id: "no-tailwind-layout-transition",
+  title: "Animating a layout property",
+  tags: ["design", "test-noise"],
+  severity: "warn",
+  category: "Performance",
+  recommendation:
+    "Animate `transform` and `opacity` instead, since they skip layout and run on the compositor. For height, animate `grid-template-rows` from `0fr` to `1fr`.",
+  create: (context: RuleContext) => ({
+    JSXOpeningElement(node: EsTreeNodeOfType<"JSXOpeningElement">) {
+      const classNameValue = getStringFromClassNameAttr(node);
+      if (!classNameValue) return;
+
+      for (const transitionMatch of classNameValue.matchAll(ARBITRARY_TRANSITION_PROPERTY)) {
+        const animatedProperties = transitionMatch[1];
+        const layoutProperty = animatedProperties
+          .split(",")
+          .map((property) => property.trim())
+          .find((property) => LAYOUT_PROPERTIES.has(property));
+        if (layoutProperty) {
+          context.report({
+            node,
+            message: `Your users see janky animation because \`transition-[${animatedProperties}]\` animates "${layoutProperty}", a layout property the browser recomputes every frame, so animate transform & opacity instead.`,
+          });
+        }
+      }
+    },
+  }),
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/prefer-dvh-over-vh.test.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/prefer-dvh-over-vh.test.ts
new file mode 100644
index 000000000..3b0ec3a13
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/prefer-dvh-over-vh.test.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it } from "vite-plus/test";
+import { runRule } from "../../../test-utils/run-rule.js";
+import { preferDvhOverVh } from "./prefer-dvh-over-vh.js";
+
+describe("prefer-dvh-over-vh", () => {
+  it("flags `min-h-screen`", () => {
+    const code = `const A = () => <main className="min-h-screen" />;`;
+    const result = runRule(preferDvhOverVh, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("flags `h-screen` behind a variant", () => {
+    const code = `const A = () => <div className="md:h-screen" />;`;
+    const result = runRule(preferDvhOverVh, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("flags arbitrary `h-[100vh]`", () => {
+    const code = `const A = () => <div className="h-[100vh]" />;`;
+    const result = runRule(preferDvhOverVh, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("flags inline `minHeight: '100vh'`", () => {
+    const code = `const A = () => <div style={{ minHeight: "100vh" }} />;`;
+    const result = runRule(preferDvhOverVh, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag `max-h-screen` (a valid height cap, e.g. scrollable modal)", () => {
+    const code = `const A = () => <div className="max-h-screen overflow-auto" />;`;
+    const result = runRule(preferDvhOverVh, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag inline `maxHeight: '100vh'`", () => {
+    const code = `const A = () => <div style={{ maxHeight: "100vh" }} />;`;
+    const result = runRule(preferDvhOverVh, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag `min-h-dvh`", () => {
+    const code = `const A = () => <main className="min-h-dvh" />;`;
+    const result = runRule(preferDvhOverVh, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag `w-screen` (width is a separate concern)", () => {
+    const code = `const A = () => <div className="w-screen" />;`;
+    const result = runRule(preferDvhOverVh, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag inline `height: '100dvh'`", () => {
+    const code = `const A = () => <div style={{ height: "100dvh" }} />;`;
+    const result = runRule(preferDvhOverVh, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/prefer-dvh-over-vh.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/prefer-dvh-over-vh.ts
new file mode 100644
index 000000000..1cb667a3f
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/prefer-dvh-over-vh.ts
@@ -0,0 +1,47 @@
+import { defineRule } from "../../utils/define-rule.js";
+import type { RuleContext } from "../../utils/rule-context.js";
+import { getInlineStyleExpression } from "./utils/get-inline-style-expression.js";
+import { getStylePropertyKey } from "./utils/get-style-property-key.js";
+import { getStylePropertyStringValue } from "./utils/get-style-property-string-value.js";
+import { getStringFromClassNameAttr } from "./utils/get-string-from-class-name-attr.js";
+import type { EsTreeNodeOfType } from "../../utils/es-tree-node-of-type.js";
+
+// `h-screen`, `min-h-screen`, or arbitrary `h-[100vh]` — height only
+// (`w-screen` is handled by `no-full-viewport-width`). `max-h-*` is excluded:
+// `max-height: 100vh` is a common, valid cap (e.g. a scrollable modal).
+const FULL_VIEWPORT_HEIGHT_CLASS = /(?:^|\s)(?:\w+:)*(?:min-)?h-(?:screen|\[100vh\])(?=$|[\s])/;
+const HEIGHT_KEYS = new Set(["height", "minHeight"]);
+
+const MESSAGE =
+  "`100vh` is taller than the visible viewport on mobile (it ignores the browser's dynamic toolbars), so full-height layouts get clipped. Use the dynamic-viewport unit: `h-dvh` / `min-h-dvh` (or `100dvh`).";
+
+export const preferDvhOverVh = defineRule({
+  id: "prefer-dvh-over-vh",
+  title: "Use dvh instead of vh for full height",
+  tags: ["design", "test-noise"],
+  severity: "warn",
+  requires: ["tailwind:3.4"],
+  recommendation:
+    "Prefer `dvh` over `vh` for full-height elements. `100vh` overflows under mobile browser chrome; `100dvh` tracks the visible viewport. (`h-dvh`/`min-h-dvh` need Tailwind 3.4+.)",
+  create: (context: RuleContext) => ({
+    JSXAttribute(node: EsTreeNodeOfType<"JSXAttribute">) {
+      const expression = getInlineStyleExpression(node);
+      if (!expression) return;
+      for (const property of expression.properties ?? []) {
+        const key = getStylePropertyKey(property);
+        if (!key || !HEIGHT_KEYS.has(key)) continue;
+        const value = getStylePropertyStringValue(property);
+        if (value && value.trim().toLowerCase() === "100vh") {
+          context.report({ node: property, message: MESSAGE });
+        }
+      }
+    },
+    JSXOpeningElement(node: EsTreeNodeOfType<"JSXOpeningElement">) {
+      const classNameValue = getStringFromClassNameAttr(node);
+      if (!classNameValue) return;
+      if (FULL_VIEWPORT_HEIGHT_CLASS.test(classNameValue)) {
+        context.report({ node, message: MESSAGE });
+      }
+    },
+  }),
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/prefer-truncate-shorthand.test.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/prefer-truncate-shorthand.test.ts
new file mode 100644
index 000000000..a58f1dd49
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/prefer-truncate-shorthand.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vite-plus/test";
+import { runRule } from "../../../test-utils/run-rule.js";
+import { preferTruncateShorthand } from "./prefer-truncate-shorthand.js";
+
+describe("prefer-truncate-shorthand", () => {
+  it("flags the three-class combo", () => {
+    const code = `const A = () => <span className="overflow-hidden text-ellipsis whitespace-nowrap">{name}</span>;`;
+    const result = runRule(preferTruncateShorthand, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("flags regardless of order/extra classes", () => {
+    const code = `const A = () => <span className="max-w-40 whitespace-nowrap text-sm overflow-hidden text-ellipsis">{name}</span>;`;
+    const result = runRule(preferTruncateShorthand, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag when only two of the three are present", () => {
+    const code = `const A = () => <span className="overflow-hidden whitespace-nowrap">{name}</span>;`;
+    const result = runRule(preferTruncateShorthand, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag a line-clamp pattern", () => {
+    const code = `const A = () => <p className="overflow-hidden line-clamp-2">{body}</p>;`;
+    const result = runRule(preferTruncateShorthand, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag an already-truncate element", () => {
+    const code = `const A = () => <span className="truncate max-w-40">{name}</span>;`;
+    const result = runRule(preferTruncateShorthand, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/prefer-truncate-shorthand.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/prefer-truncate-shorthand.ts
new file mode 100644
index 000000000..4fdec7456
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/prefer-truncate-shorthand.ts
@@ -0,0 +1,34 @@
+import { defineRule } from "../../utils/define-rule.js";
+import type { RuleContext } from "../../utils/rule-context.js";
+import { getStringFromClassNameAttr } from "./utils/get-string-from-class-name-attr.js";
+import type { EsTreeNodeOfType } from "../../utils/es-tree-node-of-type.js";
+
+const HAS_OVERFLOW_HIDDEN = /(?:^|\s)overflow-hidden(?:$|\s)/;
+const HAS_TEXT_ELLIPSIS = /(?:^|\s)text-ellipsis(?:$|\s)/;
+const HAS_WHITESPACE_NOWRAP = /(?:^|\s)whitespace-nowrap(?:$|\s)/;
+
+export const preferTruncateShorthand = defineRule({
+  id: "prefer-truncate-shorthand",
+  title: "Use truncate shorthand",
+  tags: ["design", "test-noise"],
+  severity: "warn",
+  recommendation:
+    "Replace `overflow-hidden text-ellipsis whitespace-nowrap` with the single Tailwind `truncate` utility, which sets all three.",
+  create: (context: RuleContext) => ({
+    JSXOpeningElement(node: EsTreeNodeOfType<"JSXOpeningElement">) {
+      const classNameValue = getStringFromClassNameAttr(node);
+      if (!classNameValue) return;
+      if (
+        HAS_OVERFLOW_HIDDEN.test(classNameValue) &&
+        HAS_TEXT_ELLIPSIS.test(classNameValue) &&
+        HAS_WHITESPACE_NOWRAP.test(classNameValue)
+      ) {
+        context.report({
+          node,
+          message:
+            "`overflow-hidden text-ellipsis whitespace-nowrap` is exactly what the `truncate` utility does — collapse the three classes into `truncate`.",
+        });
+      }
+    },
+  }),
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/utils/get-wcag-contrast-ratio.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/utils/get-wcag-contrast-ratio.ts
new file mode 100644
index 000000000..dca1d0207
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/design/utils/get-wcag-contrast-ratio.ts
@@ -0,0 +1,21 @@
+import type { ParsedRgb } from "../../../utils/parsed-rgb.js";
+
+// WCAG 2.1 relative luminance: linearize each sRGB channel, then weight.
+const linearizeChannel = (channel: number): number => {
+  const normalized = channel / 255;
+  return normalized <= 0.03928 ? normalized / 12.92 : Math.pow((normalized + 0.055) / 1.055, 2.4);
+};
+
+const relativeLuminance = (color: ParsedRgb): number =>
+  0.2126 * linearizeChannel(color.red) +
+  0.7152 * linearizeChannel(color.green) +
+  0.0722 * linearizeChannel(color.blue);
+
+// WCAG 2.1 contrast ratio between two opaque colors, in [1, 21].
+export const getWcagContrastRatio = (foreground: ParsedRgb, background: ParsedRgb): number => {
+  const foregroundLuminance = relativeLuminance(foreground);
+  const backgroundLuminance = relativeLuminance(background);
+  const lighter = Math.max(foregroundLuminance, backgroundLuminance);
+  const darker = Math.min(foregroundLuminance, backgroundLuminance);
+  return (lighter + 0.05) / (darker + 0.05);
+};
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/performance/no-transition-all.test.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/performance/no-transition-all.test.ts
new file mode 100644
index 000000000..55a8c4cc4
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/performance/no-transition-all.test.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vite-plus/test";
+import { runRule } from "../../../test-utils/run-rule.js";
+import { noTransitionAll } from "./no-transition-all.js";
+
+describe("no-transition-all", () => {
+  it('flags inline transition: "all ..."', () => {
+    const code = `const A = () => <div style={{ transition: "all 200ms ease" }} />;`;
+    const result = runRule(noTransitionAll, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("flags inline transitionProperty: 'all'", () => {
+    const code = `const A = () => <div style={{ transitionProperty: "all" }} />;`;
+    const result = runRule(noTransitionAll, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("flags the Tailwind `transition-all` class", () => {
+    const code = `const A = () => <div className="transition-all duration-200 hover:translate-y-1" />;`;
+    const result = runRule(noTransitionAll, code);
+    expect(result.diagnostics).toHaveLength(1);
+    expect(result.diagnostics[0].message).toContain("transition-all");
+  });
+
+  it("flags `transition-all` behind a variant prefix", () => {
+    const code = `const A = () => <div className="md:hover:transition-all" />;`;
+    const result = runRule(noTransitionAll, code);
+    expect(result.diagnostics).toHaveLength(1);
+  });
+
+  it("does NOT flag a compound token containing `transition-all` (Bugbot: substring match)", () => {
+    const code = `const A = () => <div className="transition-all-custom" />;`;
+    const result = runRule(noTransitionAll, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag the bare `transition` class (curated property list, not `all`)", () => {
+    const code = `const A = () => <div className="transition duration-200" />;`;
+    const result = runRule(noTransitionAll, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag specific transition utilities", () => {
+    const code = `const A = () => <div className="transition-transform transition-colors" />;`;
+    const result = runRule(noTransitionAll, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+
+  it("does NOT flag a specific inline transition", () => {
+    const code = `const A = () => <div style={{ transition: "transform 200ms, opacity 200ms" }} />;`;
+    const result = runRule(noTransitionAll, code);
+    expect(result.diagnostics).toHaveLength(0);
+  });
+});
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/rules/performance/no-transition-all.ts b/packages/oxlint-plugin-react-doctor/src/plugin/rules/performance/no-transition-all.ts
index 746f68383..f0ca102bd 100644
--- a/packages/oxlint-plugin-react-doctor/src/plugin/rules/performance/no-transition-all.ts
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/rules/performance/no-transition-all.ts
@@ -2,6 +2,19 @@ import { defineRule } from "../../utils/define-rule.js";
 import type { RuleContext } from "../../utils/rule-context.js";
 import { isNodeOfType } from "../../utils/is-node-of-type.js";
 import type { EsTreeNodeOfType } from "../../utils/es-tree-node-of-type.js";
+import { getClassNameTokens } from "../../utils/get-class-name-tokens.js";
+import { getStringFromClassNameAttr } from "../design/utils/get-string-from-class-name-attr.js";
+
+// `transition-all` as a whole Tailwind token (the segment after any
+// variant prefixes), so `hover:transition-all` / `md:transition-all` match
+// but compound classes like `transition-all-custom` do not. Tailwind's bare
+// `transition` maps to a curated property list (color/bg/border/opacity/
+// shadow/transform/filter) — NOT `all` — so it is intentionally not flagged.
+const hasTransitionAllClass = (classNameValue: string): boolean =>
+  getClassNameTokens(classNameValue).some((token) => token === "transition-all");
+
+const TAILWIND_MESSAGE =
+  "Your users see janky animation because `transition-all` animates every property that changes, including expensive layout ones and instant ones like focus rings. Name the properties: `transition-colors`, `transition-opacity`, or `transition-transform`.";
 
 export const noTransitionAll = defineRule({
   id: "no-transition-all",
@@ -21,12 +34,12 @@ export const noTransitionAll = defineRule({
       for (const property of expression.properties ?? []) {
         if (!isNodeOfType(property, "Property")) continue;
         const key = isNodeOfType(property.key, "Identifier") ? property.key.name : null;
-        if (key !== "transition") continue;
+        if (key !== "transition" && key !== "transitionProperty") continue;
 
         if (
           isNodeOfType(property.value, "Literal") &&
           typeof property.value.value === "string" &&
-          property.value.value.startsWith("all")
+          property.value.value.trim().startsWith("all")
         ) {
           context.report({
             node: property,
@@ -36,5 +49,12 @@ export const noTransitionAll = defineRule({
         }
       }
     },
+    JSXOpeningElement(node: EsTreeNodeOfType<"JSXOpeningElement">) {
+      const classNameValue = getStringFromClassNameAttr(node);
+      if (!classNameValue) return;
+      if (hasTransitionAllClass(classNameValue)) {
+        context.report({ node, message: TAILWIND_MESSAGE });
+      }
+    },
   }),
 });
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/utils/get-class-name-tokens.ts b/packages/oxlint-plugin-react-doctor/src/plugin/utils/get-class-name-tokens.ts
new file mode 100644
index 000000000..db9aa97c5
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/utils/get-class-name-tokens.ts
@@ -0,0 +1,11 @@
+// Split a `className` string into its whitespace-separated classes, each
+// reduced to its base utility — the segment after any variant prefixes
+// (`hover:`, `md:`, `group-data-open:`). So `md:hover:transition-all` → the
+// base `transition-all`, while `transition-all-custom` stays distinct. This is
+// the token-accurate way to test for a specific Tailwind utility (vs a regex
+// that can match a substring inside a larger class name).
+export const getClassNameTokens = (classNameValue: string): string[] =>
+  classNameValue
+    .split(/\s+/)
+    .filter((token) => token.length > 0)
+    .map((token) => token.split(":").pop() ?? token);
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/utils/get-string-literal-attribute-value.ts b/packages/oxlint-plugin-react-doctor/src/plugin/utils/get-string-literal-attribute-value.ts
new file mode 100644
index 000000000..214f3a401
--- /dev/null
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/utils/get-string-literal-attribute-value.ts
@@ -0,0 +1,24 @@
+import type { EsTreeNode } from "./es-tree-node.js";
+import type { EsTreeNodeOfType } from "./es-tree-node-of-type.js";
+import { getJsxPropStringValue } from "./get-jsx-prop-string-value.js";
+import { isNodeOfType } from "./is-node-of-type.js";
+
+// Resolve an attribute to its string value from a plain literal (`x="y"`) or a
+// string literal inside an expression container (`x={'y'}`). Returns null for a
+// dynamic value (`x={y}`) or boolean shorthand. Use this (not
+// `getJsxPropStringValue` directly) when a brace-wrapped literal is statically
+// known and should be judged, not silently skipped.
+export const getStringLiteralAttributeValue = (
+  attribute: EsTreeNodeOfType<"JSXAttribute">,
+): string | null => {
+  const stringValue = getJsxPropStringValue(attribute);
+  if (stringValue !== null) return stringValue;
+  const value = attribute.value as EsTreeNode | null;
+  if (value && isNodeOfType(value, "JSXExpressionContainer")) {
+    const expression = value.expression;
+    if (isNodeOfType(expression, "Literal") && typeof expression.value === "string") {
+      return expression.value;
+    }
+  }
+  return null;
+};
diff --git a/packages/oxlint-plugin-react-doctor/src/plugin/utils/has-jsx-spread-attribute.ts b/packages/oxlint-plugin-react-doctor/src/plugin/utils/has-jsx-spread-attribute.ts
index 18789f91b..1d53d0769 100644
--- a/packages/oxlint-plugin-react-doctor/src/plugin/utils/has-jsx-spread-attribute.ts
+++ b/packages/oxlint-plugin-react-doctor/src/plugin/utils/has-jsx-spread-attribute.ts
@@ -1,9 +1,8 @@
 import type { EsTreeNode } from "./es-tree-node.js";
 import { isNodeOfType } from "./is-node-of-type.js";
 
-// True when a JSX element carries a spread (`{...props}`). Rules that prove
-// the ABSENCE of an attribute must bail on a spread, since the spread could
-// supply that attribute at runtime and a confident report would be a false
-// positive.
+// True when a JSX element has a `{...spread}` attribute. Rules that decide
+// based on the presence/absence of a specific prop should bail when a spread
+// is present, since it can supply (or override) that prop at runtime.
 export const hasJsxSpreadAttribute = (attributes: ReadonlyArray<EsTreeNode>): boolean =>
   attributes.some((attribute) => isNodeOfType(attribute, "JSXSpreadAttribute"));