react-doctor 0.0.35 → 0.0.36

package/dist/index.js

@@ -1050,6 +1050,21 @@ const createOxlintConfig = ({ pluginPath, framework, hasReactCompiler, customRul
 		"react-doctor/query-no-query-in-effect": "warn",
 		"react-doctor/query-mutation-missing-invalidation": "warn",
 		"react-doctor/query-no-usequery-for-mutation": "warn",
+		"react-doctor/no-inline-bounce-easing": "warn",
+		"react-doctor/no-z-index-9999": "warn",
+		"react-doctor/no-inline-exhaustive-style": "warn",
+		"react-doctor/no-side-tab-border": "warn",
+		"react-doctor/no-pure-black-background": "warn",
+		"react-doctor/no-gradient-text": "warn",
+		"react-doctor/no-dark-mode-glow": "warn",
+		"react-doctor/no-justified-text": "warn",
+		"react-doctor/no-tiny-text": "warn",
+		"react-doctor/no-wide-letter-spacing": "warn",
+		"react-doctor/no-gray-on-colored-background": "warn",
+		"react-doctor/no-layout-transition-inline": "warn",
+		"react-doctor/no-disabled-zoom": "error",
+		"react-doctor/no-outline-none": "warn",
+		"react-doctor/no-long-transition-duration": "warn",
 		"react-doctor/async-parallel": "warn",
 		...framework === "nextjs" ? NEXTJS_RULES : {},
 		...framework === "expo" || framework === "react-native" ? REACT_NATIVE_RULES : {},
@@ -1171,6 +1186,21 @@ const RULE_CATEGORY_MAP = {
 	"react-doctor/query-no-query-in-effect": "TanStack Query",
 	"react-doctor/query-mutation-missing-invalidation": "TanStack Query",
 	"react-doctor/query-no-usequery-for-mutation": "TanStack Query",
+	"react-doctor/no-inline-bounce-easing": "Performance",
+	"react-doctor/no-z-index-9999": "Architecture",
+	"react-doctor/no-inline-exhaustive-style": "Architecture",
+	"react-doctor/no-side-tab-border": "Architecture",
+	"react-doctor/no-pure-black-background": "Architecture",
+	"react-doctor/no-gradient-text": "Architecture",
+	"react-doctor/no-dark-mode-glow": "Architecture",
+	"react-doctor/no-justified-text": "Accessibility",
+	"react-doctor/no-tiny-text": "Accessibility",
+	"react-doctor/no-wide-letter-spacing": "Architecture",
+	"react-doctor/no-gray-on-colored-background": "Accessibility",
+	"react-doctor/no-layout-transition-inline": "Performance",
+	"react-doctor/no-disabled-zoom": "Accessibility",
+	"react-doctor/no-outline-none": "Accessibility",
+	"react-doctor/no-long-transition-duration": "Performance",
 	"react-doctor/js-flatmap-filter": "Performance",
 	"react-doctor/async-parallel": "Performance",
 	"react-doctor/rn-no-raw-text": "React Native",
@@ -1229,6 +1259,21 @@ const RULE_HELP_MAP = {
 	"prefer-dynamic-import": "Use `const Component = dynamic(() => import('library'), { ssr: false })` from next/dynamic or React.lazy()",
 	"use-lazy-motion": "Use `import { LazyMotion, m } from \"framer-motion\"` with `domAnimation` features — saves ~30kb",
 	"no-undeferred-third-party": "Use `next/script` with `strategy=\"lazyOnload\"` or add the `defer` attribute",
+	"no-inline-bounce-easing": "Use `cubic-bezier(0.16, 1, 0.3, 1)` (ease-out-expo) for natural deceleration — objects in the real world don't bounce",
+	"no-z-index-9999": "Define a z-index scale in your design tokens (e.g. dropdown: 10, modal: 20, toast: 30). Create a new stacking context with `isolation: isolate` instead of escalating values",
+	"no-inline-exhaustive-style": "Move styles to a CSS class, CSS module, Tailwind utilities, or a styled component — inline objects with many properties hurt readability and create new references every render",
+	"no-side-tab-border": "Use a subtler accent (box-shadow inset, background gradient, or border-bottom) instead of a thick one-sided border",
+	"no-pure-black-background": "Tint the background slightly toward your brand hue — e.g. `#0a0a0f` or Tailwind's `bg-gray-950`. Pure black looks harsh on modern displays",
+	"no-gradient-text": "Use solid text colors for readability. If you need emphasis, use font weight, size, or a distinct color instead of gradients",
+	"no-dark-mode-glow": "Use a subtle `box-shadow` with neutral colors for depth, or `border` with low opacity. Colored glows on dark backgrounds are the default AI-generated aesthetic",
+	"no-justified-text": "Use `text-align: left` for body text, or add `hyphens: auto` and `overflow-wrap: break-word` if you must justify",
+	"no-tiny-text": "Use at least 12px for body content, 16px is ideal. Small text is hard to read, especially on high-DPI mobile screens",
+	"no-wide-letter-spacing": "Reserve wide tracking (letter-spacing > 0.05em) for short uppercase labels, navigation items, and buttons — not body text",
+	"no-gray-on-colored-background": "Use a darker shade of the background color for text, or white/near-white for contrast. Gray text on colored backgrounds looks washed out",
+	"no-layout-transition-inline": "Use `transform` and `opacity` for transitions — they run on the compositor thread. For height animations, use `grid-template-rows: 0fr → 1fr`",
+	"no-disabled-zoom": "Remove `user-scalable=no` and `maximum-scale` from the viewport meta tag. If your layout breaks at 200% zoom, fix the layout — don't punish users with disabilities",
+	"no-outline-none": "Use `:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px }` to show focus only for keyboard users while hiding it for mouse clicks",
+	"no-long-transition-duration": "Keep UI transitions under 1s — 100-150ms for instant feedback, 200-300ms for state changes, 300-500ms for layout changes. Use longer durations only for page-load hero animations",
 	"no-array-index-as-key": "Use a stable unique identifier: `key={item.id}` or `key={item.slug}` — index keys break on reorder/filter",
 	"rendering-conditional-render": "Change to `{items.length > 0 && <List />}` or use a ternary: `{items.length ? <List /> : null}`",
 	"no-prevent-default": "Use `<form action={serverAction}>` (works without JS) or `<button>` instead of `<a>` with preventDefault",