react-doctor 0.0.34 → 0.0.36

package/dist/react-doctor-plugin.js

@@ -169,6 +169,56 @@ const SECRET_FALSE_POSITIVE_SUFFIXES = new Set([
 	"schema",
 	"constant"
 ]);
+const TANSTACK_ROUTE_FILE_PATTERN = /\/routes\//;
+const TANSTACK_ROOT_ROUTE_FILE_PATTERN = /__root\.(tsx?|jsx?)$/;
+const TANSTACK_ROUTE_PROPERTY_ORDER = [
+	"params",
+	"validateSearch",
+	"loaderDeps",
+	"search.middlewares",
+	"ssr",
+	"context",
+	"beforeLoad",
+	"loader",
+	"onEnter",
+	"onStay",
+	"onLeave",
+	"head",
+	"scripts",
+	"headers",
+	"remountDeps"
+];
+const TANSTACK_ROUTE_CREATION_FUNCTIONS = new Set([
+	"createFileRoute",
+	"createRoute",
+	"createRootRoute",
+	"createRootRouteWithContext"
+]);
+const TANSTACK_SERVER_FN_NAMES = new Set(["createServerFn"]);
+const TANSTACK_MIDDLEWARE_METHOD_ORDER = [
+	"middleware",
+	"inputValidator",
+	"client",
+	"server",
+	"handler"
+];
+const TANSTACK_REDIRECT_FUNCTIONS = new Set(["redirect", "notFound"]);
+const TANSTACK_SERVER_FN_FILE_PATTERN = /\.functions(\.[jt]sx?)?$/;
+const SEQUENTIAL_AWAIT_THRESHOLD_FOR_LOADER = 2;
+const TANSTACK_QUERY_HOOKS = new Set([
+	"useQuery",
+	"useInfiniteQuery",
+	"useSuspenseQuery",
+	"useSuspenseInfiniteQuery"
+]);
+const TANSTACK_MUTATION_HOOKS = new Set(["useMutation"]);
+const TANSTACK_QUERY_CLIENT_CLASS = "QueryClient";
+const STABLE_HOOK_WRAPPERS = new Set([
+	"useState",
+	"useMemo",
+	"useRef"
+]);
+const SCRIPT_LOADING_ATTRIBUTES = new Set(["defer", "async"]);
 const TRIVIAL_INITIALIZER_NAMES = new Set([
 	"Boolean",
 	"String",
@@ -312,6 +362,24 @@ const LEGACY_SHADOW_STYLE_PROPERTIES = new Set([
 	"shadowRadius",
 	"elevation"
 ]);
+const BOUNCE_ANIMATION_NAMES = new Set([
+	"bounce",
+	"elastic",
+	"wobble",
+	"jiggle",
+	"spring"
+]);
+const Z_INDEX_ABSURD_THRESHOLD = 100;
+const INLINE_STYLE_PROPERTY_THRESHOLD = 8;
+const SIDE_TAB_BORDER_WIDTH_WITHOUT_RADIUS_PX = 3;
+const SIDE_TAB_BORDER_WIDTH_WITH_RADIUS_PX = 1;
+const SIDE_TAB_TAILWIND_WIDTH_WITHOUT_RADIUS = 4;
+const DARK_GLOW_BLUR_THRESHOLD_PX = 4;
+const DARK_BACKGROUND_CHANNEL_MAX = 35;
+const COLOR_CHROMA_THRESHOLD = 30;
+const TINY_TEXT_THRESHOLD_PX = 12;
+const WIDE_TRACKING_THRESHOLD_EM = .05;
+const LONG_TRANSITION_DURATION_THRESHOLD_MS = 1e3;
 
 //#endregion
 //#region src/plugin/helpers.ts
@@ -355,7 +423,7 @@ const isSimpleExpression = (node) => {
 		case "TemplateLiteral": return true;
 		case "BinaryExpression": return isSimpleExpression(node.left) && isSimpleExpression(node.right);
 		case "UnaryExpression": return isSimpleExpression(node.argument);
-		case "MemberExpression": return !node.computed;
+		case "MemberExpression": return !node.computed && isSimpleExpression(node.object);
 		case "ConditionalExpression": return isSimpleExpression(node.test) && isSimpleExpression(node.consequent) && isSimpleExpression(node.alternate);
 		default: return false;
 	}
@@ -588,6 +656,521 @@ const clientPassiveEventListeners = { create: (context) => ({ CallExpression(nod
 	});
 } }) };
 
+//#endregion
+//#region src/plugin/rules/design.ts
+const isOvershootCubicBezier = (value) => {
+	const match = value.match(/cubic-bezier\(\s*([\d.-]+)\s*,\s*([\d.-]+)\s*,\s*([\d.-]+)\s*,\s*([\d.-]+)\s*\)/);
+	if (!match) return false;
+	const controlY1 = parseFloat(match[2]);
+	const controlY2 = parseFloat(match[4]);
+	return controlY1 < -.1 || controlY1 > 1.1 || controlY2 < -.1 || controlY2 > 1.1;
+};
+const hasBounceAnimationName = (value) => {
+	const lowerValue = value.toLowerCase();
+	for (const name of BOUNCE_ANIMATION_NAMES) if (lowerValue.includes(name)) return true;
+	return false;
+};
+const getStringFromClassNameAttr = (node) => {
+	const classAttr = findJsxAttribute(node.attributes ?? [], "className");
+	if (!classAttr?.value) return null;
+	if (classAttr.value.type === "Literal" && typeof classAttr.value.value === "string") return classAttr.value.value;
+	if (classAttr.value.type === "JSXExpressionContainer" && classAttr.value.expression?.type === "Literal" && typeof classAttr.value.expression.value === "string") return classAttr.value.expression.value;
+	if (classAttr.value.type === "JSXExpressionContainer" && classAttr.value.expression?.type === "TemplateLiteral" && classAttr.value.expression.quasis?.length === 1) return classAttr.value.expression.quasis[0].value?.raw ?? null;
+	return null;
+};
+const getInlineStyleExpression = (node) => {
+	if (node.name?.type !== "JSXIdentifier" || node.name.name !== "style") return null;
+	if (node.value?.type !== "JSXExpressionContainer") return null;
+	const expression = node.value.expression;
+	if (expression?.type !== "ObjectExpression") return null;
+	return expression;
+};
+const getStylePropertyStringValue = (property) => {
+	if (property.value?.type === "Literal" && typeof property.value.value === "string") return property.value.value;
+	return null;
+};
+const getStylePropertyNumberValue = (property) => {
+	if (property.value?.type === "Literal" && typeof property.value.value === "number") return property.value.value;
+	if (property.value?.type === "UnaryExpression" && property.value.operator === "-" && property.value.argument?.type === "Literal" && typeof property.value.argument.value === "number") return -property.value.argument.value;
+	return null;
+};
+const getStylePropertyKey = (property) => {
+	if (property.type !== "Property") return null;
+	if (property.key?.type === "Identifier") return property.key.name;
+	if (property.key?.type === "Literal" && typeof property.key.value === "string") return property.key.value;
+	return null;
+};
+const parseColorToRgb = (value) => {
+	const trimmed = value.trim().toLowerCase();
+	const hex6Match = trimmed.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/);
+	if (hex6Match) return {
+		red: parseInt(hex6Match[1], 16),
+		green: parseInt(hex6Match[2], 16),
+		blue: parseInt(hex6Match[3], 16)
+	};
+	const hex3Match = trimmed.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/);
+	if (hex3Match) return {
+		red: parseInt(hex3Match[1] + hex3Match[1], 16),
+		green: parseInt(hex3Match[2] + hex3Match[2], 16),
+		blue: parseInt(hex3Match[3] + hex3Match[3], 16)
+	};
+	const rgbMatch = trimmed.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+	if (rgbMatch) return {
+		red: parseInt(rgbMatch[1], 10),
+		green: parseInt(rgbMatch[2], 10),
+		blue: parseInt(rgbMatch[3], 10)
+	};
+	return null;
+};
+const hasColorChroma = (parsed) => Math.max(parsed.red, parsed.green, parsed.blue) - Math.min(parsed.red, parsed.green, parsed.blue) >= COLOR_CHROMA_THRESHOLD;
+const isNeutralBorderColor = (value) => {
+	const trimmed = value.trim().toLowerCase();
+	if ([
+		"gray",
+		"grey",
+		"silver",
+		"white",
+		"black",
+		"transparent",
+		"currentcolor"
+	].includes(trimmed)) return true;
+	const parsed = parseColorToRgb(trimmed);
+	if (parsed) return !hasColorChroma(parsed);
+	return false;
+};
+const extractBorderColorFromShorthand = (shorthandValue) => {
+	const afterSolid = shorthandValue.match(/solid\s+(.+)$/i);
+	if (!afterSolid) return null;
+	return afterSolid[1].trim();
+};
+const isPureBlackColor = (value) => {
+	const trimmed = value.trim().toLowerCase();
+	if (trimmed === "#000" || trimmed === "#000000") return true;
+	if (/^rgb\(\s*0\s*,\s*0\s*,\s*0\s*\)$/.test(trimmed)) return true;
+	return false;
+};
+const splitShadowLayers = (shadowValue) => shadowValue.split(/,(?![^(]*\))/);
+const extractColorFromShadowLayer = (layer) => {
+	const rgbMatch = layer.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+	if (rgbMatch) return {
+		red: parseInt(rgbMatch[1], 10),
+		green: parseInt(rgbMatch[2], 10),
+		blue: parseInt(rgbMatch[3], 10)
+	};
+	const hexMatch = layer.match(/#([0-9a-f]{3,6})\b/i);
+	if (hexMatch) return parseColorToRgb(`#${hexMatch[1]}`);
+	return null;
+};
+const parseShadowLayerBlur = (layer) => {
+	const numericTokens = [...layer.replace(/rgba?\([^)]*\)/g, "").replace(/#[0-9a-f]{3,8}\b/gi, "").matchAll(/(\d+(?:\.\d+)?)(px)?/g)].map((match) => parseFloat(match[1]));
+	return numericTokens.length >= 3 ? numericTokens[2] : 0;
+};
+const hasColoredGlowShadow = (shadowValue) => {
+	for (const layer of splitShadowLayers(shadowValue)) {
+		const color = extractColorFromShadowLayer(layer);
+		if (color && hasColorChroma(color) && parseShadowLayerBlur(layer) > DARK_GLOW_BLUR_THRESHOLD_PX) return true;
+	}
+	return false;
+};
+const isBackgroundDark = (bgValue) => {
+	const trimmed = bgValue.trim().toLowerCase();
+	if (isPureBlackColor(trimmed)) return true;
+	const parsed = parseColorToRgb(trimmed);
+	if (!parsed) return false;
+	return parsed.red <= DARK_BACKGROUND_CHANNEL_MAX && parsed.green <= DARK_BACKGROUND_CHANNEL_MAX && parsed.blue <= DARK_BACKGROUND_CHANNEL_MAX;
+};
+const BORDER_SIDE_KEYS = {
+	borderLeft: "left",
+	borderRight: "right",
+	borderInlineStart: "left",
+	borderInlineEnd: "right"
+};
+const BORDER_SIDE_WIDTH_KEYS = new Set([
+	"borderLeftWidth",
+	"borderRightWidth",
+	"borderInlineStartWidth",
+	"borderInlineEndWidth"
+]);
+const noInlineBounceEasing = { create: (context) => ({
+	JSXAttribute(node) {
+		const expression = getInlineStyleExpression(node);
+		if (!expression) return;
+		for (const property of expression.properties ?? []) {
+			const key = getStylePropertyKey(property);
+			if (!key) continue;
+			const value = getStylePropertyStringValue(property);
+			if (!value) continue;
+			if ((key === "transition" || key === "transitionTimingFunction" || key === "animation" || key === "animationTimingFunction") && isOvershootCubicBezier(value)) context.report({
+				node: property,
+				message: "Bounce/elastic easing feels dated — real objects decelerate smoothly. Use ease-out or cubic-bezier(0.16, 1, 0.3, 1) instead"
+			});
+			if ((key === "animation" || key === "animationName") && hasBounceAnimationName(value)) context.report({
+				node: property,
+				message: "Bounce/elastic animation name detected — these feel tacky. Use exponential easing (ease-out-quart/expo) for natural deceleration"
+			});
+		}
+	},
+	JSXOpeningElement(node) {
+		const classStr = getStringFromClassNameAttr(node);
+		if (!classStr) return;
+		if (/\banimate-bounce\b/.test(classStr)) context.report({
+			node,
+			message: "animate-bounce feels dated and tacky — use a subtle ease-out transform for natural deceleration"
+		});
+	}
+}) };
+const noZIndex9999 = { create: (context) => ({
+	JSXAttribute(node) {
+		const expression = getInlineStyleExpression(node);
+		if (!expression) return;
+		for (const property of expression.properties ?? []) {
+			if (getStylePropertyKey(property) !== "zIndex") continue;
+			const zValue = getStylePropertyNumberValue(property);
+			if (zValue !== null && Math.abs(zValue) >= Z_INDEX_ABSURD_THRESHOLD) context.report({
+				node: property,
+				message: `z-index: ${zValue} is arbitrarily high — use a deliberate z-index scale (1–50). Extreme values signal a stacking context problem, not a fix`
+			});
+		}
+	},
+	CallExpression(node) {
+		if (node.callee?.type !== "MemberExpression") return;
+		if (node.callee.property?.type !== "Identifier" || node.callee.property.name !== "create") return;
+		if (node.callee.object?.type !== "Identifier" || node.callee.object.name !== "StyleSheet") return;
+		const argument = node.arguments?.[0];
+		if (!argument || argument.type !== "ObjectExpression") return;
+		walkAst(argument, (child) => {
+			if (child.type !== "Property") return;
+			if (getStylePropertyKey(child) !== "zIndex") return;
+			if (child.value?.type === "Literal" && typeof child.value.value === "number") {
+				const zValue = child.value.value;
+				if (Math.abs(zValue) >= Z_INDEX_ABSURD_THRESHOLD) context.report({
+					node: child,
+					message: `z-index: ${zValue} is arbitrarily high — use a deliberate z-index scale (1–50). Extreme values signal a stacking context problem, not a fix`
+				});
+			}
+		});
+	}
+}) };
+const noInlineExhaustiveStyle = { create: (context) => ({ JSXAttribute(node) {
+	const expression = getInlineStyleExpression(node);
+	if (!expression) return;
+	const propertyCount = expression.properties?.filter((property) => property.type === "Property").length ?? 0;
+	if (propertyCount >= INLINE_STYLE_PROPERTY_THRESHOLD) context.report({
+		node: expression,
+		message: `${propertyCount} inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse`
+	});
+} }) };
+const noSideTabBorder = { create: (context) => ({
+	JSXAttribute(node) {
+		const expression = getInlineStyleExpression(node);
+		if (!expression) return;
+		let hasBorderRadius = false;
+		for (const property of expression.properties ?? []) if (getStylePropertyKey(property) === "borderRadius") {
+			const numValue = getStylePropertyNumberValue(property);
+			const strValue = getStylePropertyStringValue(property);
+			if (numValue !== null && numValue > 0 || strValue !== null && parseFloat(strValue) > 0) hasBorderRadius = true;
+		}
+		const threshold = hasBorderRadius ? SIDE_TAB_BORDER_WIDTH_WITH_RADIUS_PX : SIDE_TAB_BORDER_WIDTH_WITHOUT_RADIUS_PX;
+		for (const property of expression.properties ?? []) {
+			const key = getStylePropertyKey(property);
+			if (!key) continue;
+			if (key in BORDER_SIDE_KEYS) {
+				const value = getStylePropertyStringValue(property);
+				if (!value) continue;
+				const widthMatch = value.match(/^(\d+)px\s+solid/);
+				if (!widthMatch) continue;
+				const borderColor = extractBorderColorFromShorthand(value);
+				if (borderColor && isNeutralBorderColor(borderColor)) continue;
+				const width = parseInt(widthMatch[1], 10);
+				if (width >= threshold) context.report({
+					node: property,
+					message: `Thick one-sided border (${BORDER_SIDE_KEYS[key]}: ${width}px) — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it`
+				});
+			}
+			if (BORDER_SIDE_WIDTH_KEYS.has(key)) {
+				const numValue = getStylePropertyNumberValue(property);
+				const strValue = getStylePropertyStringValue(property);
+				const width = numValue ?? (strValue !== null ? parseFloat(strValue) : NaN);
+				if (isNaN(width)) continue;
+				const colorKey = key.replace("Width", "Color");
+				if (!expression.properties?.some((colorProperty) => {
+					if (getStylePropertyKey(colorProperty) !== colorKey) return false;
+					const colorValue = getStylePropertyStringValue(colorProperty);
+					return colorValue !== null && !isNeutralBorderColor(colorValue);
+				})) continue;
+				if (width >= threshold) context.report({
+					node: property,
+					message: `Thick one-sided border (${width}px) — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it`
+				});
+			}
+		}
+	},
+	JSXOpeningElement(node) {
+		const classStr = getStringFromClassNameAttr(node);
+		if (!classStr) return;
+		const sideMatch = classStr.match(/\bborder-[lrse]-(\d+)\b/);
+		if (!sideMatch) return;
+		if (/\bborder-(?:(?:gray|slate|zinc|neutral|stone)-\d+|white|black|transparent)\b/.test(classStr)) return;
+		if (parseInt(sideMatch[1], 10) >= (/\brounded(?:-(?!none\b)\w+)?\b/.test(classStr) && !/\brounded-none\b/.test(classStr) ? SIDE_TAB_BORDER_WIDTH_WITH_RADIUS_PX : SIDE_TAB_TAILWIND_WIDTH_WITHOUT_RADIUS)) context.report({
+			node,
+			message: `Thick one-sided border (${sideMatch[0]}) — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it`
+		});
+	}
+}) };
+const noPureBlackBackground = { create: (context) => ({
+	JSXAttribute(node) {
+		const expression = getInlineStyleExpression(node);
+		if (!expression) return;
+		for (const property of expression.properties ?? []) {
+			const key = getStylePropertyKey(property);
+			if (key !== "backgroundColor" && key !== "background") continue;
+			const value = getStylePropertyStringValue(property);
+			if (value && isPureBlackColor(value)) context.report({
+				node: property,
+				message: "Pure #000 background looks harsh — tint slightly toward your brand hue for a more refined feel (e.g. #0a0a0f)"
+			});
+		}
+	},
+	JSXOpeningElement(node) {
+		const classStr = getStringFromClassNameAttr(node);
+		if (!classStr) return;
+		if (/\bbg-black\b(?!\/)/.test(classStr)) context.report({
+			node,
+			message: "Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)"
+		});
+	}
+}) };
+const noGradientText = { create: (context) => ({
+	JSXAttribute(node) {
+		const expression = getInlineStyleExpression(node);
+		if (!expression) return;
+		let hasBackgroundClipText = false;
+		let hasGradientBackground = false;
+		for (const property of expression.properties ?? []) {
+			const key = getStylePropertyKey(property);
+			const value = getStylePropertyStringValue(property);
+			if (!key || !value) continue;
+			if ((key === "backgroundClip" || key === "WebkitBackgroundClip") && value === "text") hasBackgroundClipText = true;
+			if ((key === "backgroundImage" || key === "background") && value.includes("gradient")) hasGradientBackground = true;
+		}
+		if (hasBackgroundClipText && hasGradientBackground) context.report({
+			node,
+			message: "Gradient text (background-clip: text) is decorative rather than meaningful — a common AI tell. Use solid colors for text"
+		});
+	},
+	JSXOpeningElement(node) {
+		const classStr = getStringFromClassNameAttr(node);
+		if (!classStr) return;
+		if (/\bbg-clip-text\b/.test(classStr) && /\bbg-gradient-to-/.test(classStr)) context.report({
+			node,
+			message: "Gradient text (bg-clip-text + bg-gradient) is decorative rather than meaningful — a common AI tell. Use solid colors for text"
+		});
+	}
+}) };
+const noDarkModeGlow = { create: (context) => ({ JSXAttribute(node) {
+	const expression = getInlineStyleExpression(node);
+	if (!expression) return;
+	let hasDarkBackground = false;
+	let shadowProperty = null;
+	let shadowValue = null;
+	for (const property of expression.properties ?? []) {
+		const key = getStylePropertyKey(property);
+		if (!key) continue;
+		if (key === "backgroundColor" || key === "background") {
+			const value = getStylePropertyStringValue(property);
+			if (value && isBackgroundDark(value)) hasDarkBackground = true;
+		}
+		if (key === "boxShadow") {
+			shadowProperty = property;
+			shadowValue = getStylePropertyStringValue(property);
+		}
+	}
+	if (!hasDarkBackground || !shadowValue || !shadowProperty) return;
+	if (hasColoredGlowShadow(shadowValue)) context.report({
+		node: shadowProperty,
+		message: "Colored glow on dark background — the default AI-generated 'cool' look. Use subtle, purposeful lighting instead"
+	});
+} }) };
+const noJustifiedText = { create: (context) => ({ JSXAttribute(node) {
+	const expression = getInlineStyleExpression(node);
+	if (!expression) return;
+	let isJustified = false;
+	let hasHyphens = false;
+	for (const property of expression.properties ?? []) {
+		const key = getStylePropertyKey(property);
+		const value = getStylePropertyStringValue(property);
+		if (!key || !value) continue;
+		if (key === "textAlign" && value === "justify") isJustified = true;
+		if ((key === "hyphens" || key === "WebkitHyphens") && value === "auto") hasHyphens = true;
+	}
+	if (isJustified && !hasHyphens) context.report({
+		node,
+		message: "Justified text without hyphens creates uneven word spacing (\"rivers of white\"). Use text-align: left, or add hyphens: auto"
+	});
+} }) };
+const noTinyText = { create: (context) => ({ JSXAttribute(node) {
+	const expression = getInlineStyleExpression(node);
+	if (!expression) return;
+	for (const property of expression.properties ?? []) {
+		if (getStylePropertyKey(property) !== "fontSize") continue;
+		let pxValue = null;
+		const numValue = getStylePropertyNumberValue(property);
+		const strValue = getStylePropertyStringValue(property);
+		if (numValue !== null) pxValue = numValue;
+		else if (strValue !== null) {
+			const pxMatch = strValue.match(/^([\d.]+)px$/);
+			if (pxMatch) pxValue = parseFloat(pxMatch[1]);
+			const remMatch = strValue.match(/^([\d.]+)rem$/);
+			if (remMatch) pxValue = parseFloat(remMatch[1]) * 16;
+		}
+		if (pxValue !== null && pxValue > 0 && pxValue < TINY_TEXT_THRESHOLD_PX) context.report({
+			node: property,
+			message: `Font size ${pxValue}px is too small — body text should be at least ${TINY_TEXT_THRESHOLD_PX}px for readability, 16px is ideal`
+		});
+	}
+} }) };
+const noWideLetterSpacing = { create: (context) => ({ JSXAttribute(node) {
+	const expression = getInlineStyleExpression(node);
+	if (!expression) return;
+	let isUppercase = false;
+	let letterSpacingProperty = null;
+	let letterSpacingEm = null;
+	for (const property of expression.properties ?? []) {
+		const key = getStylePropertyKey(property);
+		if (!key) continue;
+		if (key === "textTransform") {
+			if (getStylePropertyStringValue(property) === "uppercase") isUppercase = true;
+		}
+		if (key === "letterSpacing") {
+			letterSpacingProperty = property;
+			const strValue = getStylePropertyStringValue(property);
+			const numValue = getStylePropertyNumberValue(property);
+			if (strValue) {
+				const emMatch = strValue.match(/^([\d.]+)em$/);
+				if (emMatch) letterSpacingEm = parseFloat(emMatch[1]);
+				const pxMatch = strValue.match(/^([\d.]+)px$/);
+				if (pxMatch) letterSpacingEm = parseFloat(pxMatch[1]) / 16;
+			}
+			if (numValue !== null && numValue > 0) letterSpacingEm = numValue / 16;
+		}
+	}
+	if (!isUppercase && letterSpacingProperty && letterSpacingEm !== null && letterSpacingEm > WIDE_TRACKING_THRESHOLD_EM) context.report({
+		node: letterSpacingProperty,
+		message: `Letter spacing ${letterSpacingEm.toFixed(2)}em on body text disrupts natural character groupings. Reserve wide tracking for short uppercase labels only`
+	});
+} }) };
+const noGrayOnColoredBackground = { create: (context) => ({ JSXOpeningElement(node) {
+	const classStr = getStringFromClassNameAttr(node);
+	if (!classStr) return;
+	const grayTextMatch = classStr.match(/\btext-(?:gray|slate|zinc|neutral|stone)-\d+\b/);
+	const coloredBgMatch = classStr.match(/\bbg-(?:red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-\d+\b/);
+	if (grayTextMatch && coloredBgMatch) context.report({
+		node,
+		message: `Gray text (${grayTextMatch[0]}) on colored background (${coloredBgMatch[0]}) looks washed out — use a darker shade of the background color or white`
+	});
+} }) };
+const noLayoutTransitionInline = { create: (context) => ({ JSXAttribute(node) {
+	const expression = getInlineStyleExpression(node);
+	if (!expression) return;
+	for (const property of expression.properties ?? []) {
+		const key = getStylePropertyKey(property);
+		if (key !== "transition" && key !== "transitionProperty") continue;
+		const value = getStylePropertyStringValue(property);
+		if (!value) continue;
+		const lower = value.toLowerCase();
+		if (/\ball\b/.test(lower)) continue;
+		const layoutMatch = lower.match(/\b(?:(?:max|min)-)?(?:width|height)\b|\bpadding(?:-(?:top|right|bottom|left))?\b|\bmargin(?:-(?:top|right|bottom|left))?\b/);
+		if (layoutMatch) context.report({
+			node: property,
+			message: `Transitioning layout property "${layoutMatch[0]}" causes layout thrash every frame — use transform and opacity instead`
+		});
+	}
+} }) };
+const noDisabledZoom = { create: (context) => ({ JSXOpeningElement(node) {
+	if (node.name?.type !== "JSXIdentifier" || node.name.name !== "meta") return;
+	const nameAttr = findJsxAttribute(node.attributes ?? [], "name");
+	if (!nameAttr?.value) return;
+	if ((nameAttr.value.type === "Literal" ? nameAttr.value.value : null) !== "viewport") return;
+	const contentAttr = findJsxAttribute(node.attributes ?? [], "content");
+	if (!contentAttr?.value) return;
+	const contentValue = contentAttr.value.type === "Literal" && typeof contentAttr.value.value === "string" ? contentAttr.value.value : null;
+	if (!contentValue) return;
+	const hasUserScalableNo = /user-scalable\s*=\s*no/i.test(contentValue);
+	const maxScaleMatch = contentValue.match(/maximum-scale\s*=\s*([\d.]+)/i);
+	const hasRestrictiveMaxScale = maxScaleMatch !== null && parseFloat(maxScaleMatch[1]) < 2;
+	if (hasUserScalableNo && hasRestrictiveMaxScale) context.report({
+		node,
+		message: `user-scalable=no and maximum-scale=${maxScaleMatch[1]} disable pinch-to-zoom — this is an accessibility violation (WCAG 1.4.4). Remove both and fix layout if it breaks at 200% zoom`
+	});
+	else if (hasUserScalableNo) context.report({
+		node,
+		message: "user-scalable=no disables pinch-to-zoom — this is an accessibility violation (WCAG 1.4.4). Remove it and fix layout if it breaks at 200% zoom"
+	});
+	else if (hasRestrictiveMaxScale) context.report({
+		node,
+		message: `maximum-scale=${maxScaleMatch[1]} restricts zoom below 200% — this is an accessibility violation (WCAG 1.4.4). Use maximum-scale=5 or remove it`
+	});
+} }) };
+const noOutlineNone = { create: (context) => ({ JSXAttribute(node) {
+	const expression = getInlineStyleExpression(node);
+	if (!expression) return;
+	let hasOutlineNone = false;
+	let outlineProperty = null;
+	for (const property of expression.properties ?? []) {
+		if (getStylePropertyKey(property) !== "outline") continue;
+		const strValue = getStylePropertyStringValue(property);
+		const numValue = getStylePropertyNumberValue(property);
+		if (strValue === "none" || strValue === "0" || numValue === 0) {
+			hasOutlineNone = true;
+			outlineProperty = property;
+		}
+	}
+	if (!hasOutlineNone || !outlineProperty) return;
+	if (!expression.properties?.some((property) => {
+		return getStylePropertyKey(property) === "boxShadow";
+	})) context.report({
+		node: outlineProperty,
+		message: "outline: none removes keyboard focus visibility — use :focus-visible styling instead, or provide a box-shadow focus ring"
+	});
+} }) };
+const noLongTransitionDuration = { create: (context) => ({ JSXAttribute(node) {
+	const expression = getInlineStyleExpression(node);
+	if (!expression) return;
+	for (const property of expression.properties ?? []) {
+		const key = getStylePropertyKey(property);
+		if (!key) continue;
+		const value = getStylePropertyStringValue(property);
+		if (!value) continue;
+		let durationMs = null;
+		if (key === "transitionDuration" || key === "animationDuration") {
+			let longestDurationPropertyMs = 0;
+			for (const segment of value.split(",")) {
+				const trimmedSegment = segment.trim();
+				const msMatch = trimmedSegment.match(/^([\d.]+)ms$/);
+				const secondsMatch = trimmedSegment.match(/^([\d.]+)s$/);
+				if (msMatch) longestDurationPropertyMs = Math.max(longestDurationPropertyMs, parseFloat(msMatch[1]));
+				else if (secondsMatch) longestDurationPropertyMs = Math.max(longestDurationPropertyMs, parseFloat(secondsMatch[1]) * 1e3);
+			}
+			if (longestDurationPropertyMs > 0) durationMs = longestDurationPropertyMs;
+		}
+		if (key === "transition" || key === "animation") {
+			let longestDurationMs = 0;
+			const segments = value.split(",");
+			for (const segment of segments) {
+				const firstTimeMatch = segment.match(/(?<![a-zA-Z\d])([\d.]+)(m?s)(?![a-zA-Z\d-])/);
+				if (!firstTimeMatch) continue;
+				const segmentDurationMs = firstTimeMatch[2] === "ms" ? parseFloat(firstTimeMatch[1]) : parseFloat(firstTimeMatch[1]) * 1e3;
+				longestDurationMs = Math.max(longestDurationMs, segmentDurationMs);
+			}
+			if (longestDurationMs > 0) durationMs = longestDurationMs;
+		}
+		if (durationMs !== null && durationMs > LONG_TRANSITION_DURATION_THRESHOLD_MS) context.report({
+			node: property,
+			message: `${durationMs}ms transition is too slow for UI feedback — keep transitions under ${LONG_TRANSITION_DURATION_THRESHOLD_MS}ms. Use longer durations only for page-load hero animations`
+		});
+	}
+} }) };
+
 //#endregion
 //#region src/plugin/rules/correctness.ts
 const extractIndexName = (node) => {
@@ -673,6 +1256,10 @@ const jsCombineIterations = { create: (context) => ({ CallExpression(node) {
 	if (innerCall?.type !== "CallExpression" || innerCall.callee?.type !== "MemberExpression" || innerCall.callee.property?.type !== "Identifier") return;
 	const innerMethod = innerCall.callee.property.name;
 	if (!CHAINABLE_ITERATION_METHODS.has(innerMethod)) return;
+	if (innerMethod === "map" && outerMethod === "filter") {
+		const filterArgument = node.arguments?.[0];
+		if (filterArgument?.type === "Identifier" && filterArgument.name === "Boolean" || filterArgument?.type === "ArrowFunctionExpression" && filterArgument.params?.length === 1 && filterArgument.body?.type === "Identifier" && filterArgument.params[0]?.type === "Identifier" && filterArgument.body.name === filterArgument.params[0].name) return;
+	}
 	context.report({
 		node,
 		message: `.${innerMethod}().${outerMethod}() iterates the array twice — combine into a single loop with .reduce() or for...of`
@@ -798,6 +1385,21 @@ const reportIfIndependent = (statements, context) => {
 		message: `${statements.length} sequential await statements that appear independent — use Promise.all() for parallel execution`
 	});
 };
+const jsFlatmapFilter = { create: (context) => ({ CallExpression(node) {
+	if (node.callee?.type !== "MemberExpression" || node.callee.property?.type !== "Identifier") return;
+	if (node.callee.property.name !== "filter") return;
+	const filterArgument = node.arguments?.[0];
+	if (!filterArgument) return;
+	const isIdentityArrow = filterArgument.type === "ArrowFunctionExpression" && filterArgument.params?.length === 1 && filterArgument.body?.type === "Identifier" && filterArgument.params[0]?.type === "Identifier" && filterArgument.body.name === filterArgument.params[0].name;
+	if (!(filterArgument.type === "Identifier" && filterArgument.name === "Boolean" || isIdentityArrow)) return;
+	const innerCall = node.callee.object;
+	if (innerCall?.type !== "CallExpression" || innerCall.callee?.type !== "MemberExpression" || innerCall.callee.property?.type !== "Identifier") return;
+	if (innerCall.callee.property.name !== "map") return;
+	context.report({
+		node,
+		message: ".map().filter(Boolean) iterates twice — use .flatMap() to transform and filter in a single pass"
+	});
+} }) };
 
 //#endregion
 //#region src/plugin/rules/nextjs.ts
@@ -888,32 +1490,37 @@ const nextjsMissingMetadata = { create: (context) => ({ Program(programNode) {
 		message: "Page without metadata or generateMetadata export — hurts SEO"
 	});
 } }) };
-const describeClientSideNavigation = (node) => {
+const describeClientSideNavigation = (node, isPagesRouterFile) => {
+	const redirectGuidance = isPagesRouterFile ? "handle navigation in an event handler, getServerSideProps redirect, or middleware" : "use redirect() from next/navigation or handle navigation in an event handler";
 	if (node.type === "CallExpression" && node.callee?.type === "MemberExpression") {
 		const objectName = node.callee.object?.type === "Identifier" ? node.callee.object.name : null;
 		const methodName = node.callee.property?.type === "Identifier" ? node.callee.property.name : null;
-		if (objectName === "router" && (methodName === "push" || methodName === "replace")) return `router.${methodName}() in useEffect — use redirect() from next/navigation or handle navigation in an event handler`;
+		if (objectName === "router" && (methodName === "push" || methodName === "replace")) return `router.${methodName}() in useEffect — ${redirectGuidance}`;
 	}
 	if (node.type === "AssignmentExpression" && node.left?.type === "MemberExpression") {
 		const objectName = node.left.object?.type === "Identifier" ? node.left.object.name : null;
 		const propertyName = node.left.property?.type === "Identifier" ? node.left.property.name : null;
-		if (objectName === "window" && propertyName === "location") return "window.location assignment in useEffect — use redirect() from next/navigation or handle in middleware instead";
-		if (objectName === "location" && propertyName === "href") return "location.href assignment in useEffect — use redirect() from next/navigation or handle in middleware instead";
+		if (objectName === "window" && propertyName === "location") return `window.location assignment in useEffect — ${redirectGuidance}`;
+		if (objectName === "location" && propertyName === "href") return `location.href assignment in useEffect — ${redirectGuidance}`;
 	}
 	return null;
 };
-const nextjsNoClientSideRedirect = { create: (context) => ({ CallExpression(node) {
-	if (!isHookCall(node, EFFECT_HOOK_NAMES)) return;
-	const callback = getEffectCallback(node);
-	if (!callback) return;
-	walkAst(callback, (child) => {
-		const navigationDescription = describeClientSideNavigation(child);
-		if (navigationDescription) context.report({
-			node: child,
-			message: navigationDescription
+const nextjsNoClientSideRedirect = { create: (context) => {
+	const filename = context.getFilename?.() ?? "";
+	const isPagesRouterFile = PAGES_DIRECTORY_PATTERN.test(filename);
+	return { CallExpression(node) {
+		if (!isHookCall(node, EFFECT_HOOK_NAMES)) return;
+		const callback = getEffectCallback(node);
+		if (!callback) return;
+		walkAst(callback, (child) => {
+			const navigationDescription = describeClientSideNavigation(child, isPagesRouterFile);
+			if (navigationDescription) context.report({
+				node: child,
+				message: navigationDescription
+			});
 		});
-	});
-} }) };
+	} };
+} };
 const nextjsNoRedirectInTryCatch = { create: (context) => {
 	let tryCatchDepth = 0;
 	return {
@@ -1260,6 +1867,19 @@ const renderingHydrationNoFlicker = { create: (context) => ({ CallExpression(nod
 		message: "useEffect(setState, []) on mount causes a flash — consider useSyncExternalStore or suppressHydrationWarning"
 	});
 } }) };
+const renderingScriptDeferAsync = { create: (context) => ({ JSXOpeningElement(node) {
+	if (node.name?.type !== "JSXIdentifier" || node.name.name !== "script") return;
+	const attributes = node.attributes ?? [];
+	if (!attributes.some((attr) => attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier" && attr.name.name === "src")) return;
+	const typeAttribute = attributes.find((attr) => attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier" && attr.name.name === "type");
+	const typeValue = typeAttribute?.value?.type === "Literal" ? typeAttribute.value.value : null;
+	if (typeof typeValue === "string" && !EXECUTABLE_SCRIPT_TYPES.has(typeValue)) return;
+	if (typeValue === "module") return;
+	if (!attributes.some((attr) => attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier" && SCRIPT_LOADING_ATTRIBUTES.has(attr.name.name))) context.report({
+		node,
+		message: "<script src> without defer or async — blocks HTML parsing and delays First Contentful Paint. Add defer for DOM-dependent scripts or async for independent ones"
+	});
+} }) };
 
 //#endregion
 //#region src/plugin/rules/react-native.ts
@@ -1424,6 +2044,119 @@ const rnNoSingleElementStyleArray = { create: (context) => ({ JSXAttribute(node)
 	});
 } }) };
 
+//#endregion
+//#region src/plugin/rules/tanstack-query.ts
+const queryStableQueryClient = { create: (context) => {
+	let componentDepth = 0;
+	let stableHookDepth = 0;
+	return {
+		FunctionDeclaration(node) {
+			if (node.id?.name && UPPERCASE_PATTERN.test(node.id.name)) componentDepth++;
+		},
+		"FunctionDeclaration:exit"(node) {
+			if (node.id?.name && UPPERCASE_PATTERN.test(node.id.name)) componentDepth--;
+		},
+		VariableDeclarator(node) {
+			if (node.id?.type === "Identifier" && UPPERCASE_PATTERN.test(node.id.name) && (node.init?.type === "ArrowFunctionExpression" || node.init?.type === "FunctionExpression")) componentDepth++;
+		},
+		"VariableDeclarator:exit"(node) {
+			if (node.id?.type === "Identifier" && UPPERCASE_PATTERN.test(node.id.name) && (node.init?.type === "ArrowFunctionExpression" || node.init?.type === "FunctionExpression")) componentDepth--;
+		},
+		CallExpression(node) {
+			if (node.callee?.type === "Identifier" && STABLE_HOOK_WRAPPERS.has(node.callee.name)) stableHookDepth++;
+		},
+		"CallExpression:exit"(node) {
+			if (node.callee?.type === "Identifier" && STABLE_HOOK_WRAPPERS.has(node.callee.name)) stableHookDepth--;
+		},
+		NewExpression(node) {
+			if (componentDepth <= 0) return;
+			if (stableHookDepth > 0) return;
+			if (node.callee?.type !== "Identifier" || node.callee.name !== TANSTACK_QUERY_CLIENT_CLASS) return;
+			context.report({
+				node,
+				message: "new QueryClient() inside a component — creates a new cache on every render. Move to module scope or wrap in useState(() => new QueryClient())"
+			});
+		}
+	};
+} };
+const queryNoRestDestructuring = { create: (context) => ({ VariableDeclarator(node) {
+	if (node.id?.type !== "ObjectPattern") return;
+	if (!node.init || node.init.type !== "CallExpression") return;
+	const calleeName = node.init.callee?.type === "Identifier" ? node.init.callee.name : null;
+	if (!calleeName || !TANSTACK_QUERY_HOOKS.has(calleeName)) return;
+	if (node.id.properties?.some((property) => property.type === "RestElement")) context.report({
+		node: node.id,
+		message: `Rest destructuring on ${calleeName}() result — subscribes to all fields and causes unnecessary re-renders. Destructure only the fields you need`
+	});
+} }) };
+const queryNoVoidQueryFn = { create: (context) => ({ CallExpression(node) {
+	const calleeName = node.callee?.type === "Identifier" ? node.callee.name : null;
+	if (!calleeName || !TANSTACK_QUERY_HOOKS.has(calleeName)) return;
+	const optionsArgument = node.arguments?.[0];
+	if (!optionsArgument || optionsArgument.type !== "ObjectExpression") return;
+	const queryFnProperty = optionsArgument.properties?.find((property) => property.type === "Property" && property.key?.type === "Identifier" && property.key.name === "queryFn");
+	if (!queryFnProperty?.value) return;
+	const queryFnValue = queryFnProperty.value;
+	if (queryFnValue.type === "ArrowFunctionExpression" && queryFnValue.body?.type !== "BlockStatement") return;
+	if (queryFnValue.type === "ArrowFunctionExpression" || queryFnValue.type === "FunctionExpression") {
+		const body = queryFnValue.body;
+		if (body?.type !== "BlockStatement") return;
+		if ((body.body ?? []).length === 0) context.report({
+			node: queryFnProperty,
+			message: "Empty queryFn — query functions must return a value. Use the enabled option to conditionally disable the query instead"
+		});
+	}
+} }) };
+const queryNoQueryInEffect = { create: (context) => ({ CallExpression(node) {
+	if (!isHookCall(node, EFFECT_HOOK_NAMES)) return;
+	const callback = getEffectCallback(node);
+	if (!callback) return;
+	walkAst(callback, (child) => {
+		if (child.type !== "CallExpression") return;
+		if ((child.callee?.type === "Identifier" ? child.callee.name : null) === "refetch") context.report({
+			node: child,
+			message: "refetch() inside useEffect — React Query manages refetching automatically. Use queryKey dependencies or the enabled option instead"
+		});
+	});
+} }) };
+const queryMutationMissingInvalidation = { create: (context) => ({ CallExpression(node) {
+	const calleeName = node.callee?.type === "Identifier" ? node.callee.name : null;
+	if (!calleeName || !TANSTACK_MUTATION_HOOKS.has(calleeName)) return;
+	const optionsArgument = node.arguments?.[0];
+	if (!optionsArgument || optionsArgument.type !== "ObjectExpression") return;
+	if (!optionsArgument.properties?.some((property) => property.type === "Property" && property.key?.type === "Identifier" && property.key.name === "mutationFn")) return;
+	let hasInvalidation = false;
+	walkAst(optionsArgument, (child) => {
+		if (hasInvalidation) return;
+		if (child.type === "CallExpression" && child.callee?.type === "MemberExpression" && child.callee.property?.type === "Identifier" && child.callee.property.name === "invalidateQueries") hasInvalidation = true;
+	});
+	if (!hasInvalidation) context.report({
+		node,
+		message: "useMutation without invalidateQueries — stale data may remain cached after the mutation. Add onSuccess with queryClient.invalidateQueries()"
+	});
+} }) };
+const queryNoUseQueryForMutation = { create: (context) => ({ CallExpression(node) {
+	const calleeName = node.callee?.type === "Identifier" ? node.callee.name : null;
+	if (!calleeName || !TANSTACK_QUERY_HOOKS.has(calleeName)) return;
+	const optionsArgument = node.arguments?.[0];
+	if (!optionsArgument || optionsArgument.type !== "ObjectExpression") return;
+	const queryFnProperty = optionsArgument.properties?.find((property) => property.type === "Property" && property.key?.type === "Identifier" && property.key.name === "queryFn");
+	if (!queryFnProperty?.value) return;
+	let hasMutatingFetch = false;
+	walkAst(queryFnProperty.value, (child) => {
+		if (hasMutatingFetch) return;
+		if (child.type !== "CallExpression") return;
+		if (child.callee?.type !== "Identifier" || child.callee.name !== "fetch") return;
+		const optionsArg = child.arguments?.[1];
+		if (!optionsArg || optionsArg.type !== "ObjectExpression") return;
+		if (optionsArg.properties?.find((property) => property.type === "Property" && property.key?.type === "Identifier" && property.key.name === "method" && property.value?.type === "Literal" && typeof property.value.value === "string" && MUTATING_HTTP_METHODS.has(property.value.value.toUpperCase()))) hasMutatingFetch = true;
+	});
+	if (hasMutatingFetch) context.report({
+		node,
+		message: `${calleeName}() with a mutating fetch (POST/PUT/DELETE) — use useMutation() instead, which provides onSuccess/onError callbacks and doesn't auto-refetch`
+	});
+} }) };
+
 //#endregion
 //#region src/plugin/rules/security.ts
 const noEval = { create: (context) => ({
@@ -1522,6 +2255,335 @@ const serverAfterNonblocking = { create: (context) => {
 	};
 } };
 
+//#endregion
+//#region src/plugin/rules/tanstack-start.ts
+const getRouteOptionsObject = (node) => {
+	if (node.type !== "CallExpression") return null;
+	const callee = node.callee;
+	if (callee?.type === "CallExpression" && callee.callee?.type === "Identifier") {
+		if (!TANSTACK_ROUTE_CREATION_FUNCTIONS.has(callee.callee.name)) return null;
+		const optionsArgument = node.arguments?.[0];
+		if (optionsArgument?.type === "ObjectExpression") return optionsArgument;
+		return null;
+	}
+	if (callee?.type === "Identifier") {
+		if (!TANSTACK_ROUTE_CREATION_FUNCTIONS.has(callee.name)) return null;
+		const optionsArgument = node.arguments?.[0];
+		if (optionsArgument?.type === "ObjectExpression") return optionsArgument;
+		return null;
+	}
+	return null;
+};
+const getPropertyKeyName = (property) => {
+	if (property.type !== "Property" && property.type !== "MethodDefinition") return null;
+	if (property.key?.type === "Identifier") return property.key.name;
+	if (property.key?.type === "Literal") return String(property.key.value);
+	return null;
+};
+const walkServerFnChain = (outerNode) => {
+	const result = {
+		isServerFnChain: false,
+		specifiedMethod: null,
+		hasInputValidator: false
+	};
+	let currentNode = outerNode.callee?.object;
+	while (currentNode?.type === "CallExpression") {
+		const calleeName = getCalleeName(currentNode);
+		if (calleeName && TANSTACK_SERVER_FN_NAMES.has(calleeName)) {
+			result.isServerFnChain = true;
+			const optionsArgument = currentNode.arguments?.[0];
+			if (optionsArgument?.type === "ObjectExpression") {
+				for (const property of optionsArgument.properties ?? []) if (property.key?.type === "Identifier" && property.key.name === "method" && property.value?.type === "Literal" && typeof property.value.value === "string") result.specifiedMethod = property.value.value;
+			}
+		}
+		if (calleeName === "inputValidator") result.hasInputValidator = true;
+		if (currentNode.callee?.type === "MemberExpression") currentNode = currentNode.callee.object;
+		else break;
+	}
+	return result;
+};
+const tanstackStartRoutePropertyOrder = { create: (context) => ({ CallExpression(node) {
+	const optionsObject = getRouteOptionsObject(node);
+	if (!optionsObject) return;
+	const properties = optionsObject.properties ?? [];
+	const orderedPropertyNames = [];
+	for (const property of properties) {
+		const propertyName = getPropertyKeyName(property);
+		if (propertyName !== null) orderedPropertyNames.push(propertyName);
+	}
+	const sensitiveProperties = orderedPropertyNames.filter((propertyName) => TANSTACK_ROUTE_PROPERTY_ORDER.includes(propertyName));
+	let lastIndex = -1;
+	for (const propertyName of sensitiveProperties) {
+		const currentIndex = TANSTACK_ROUTE_PROPERTY_ORDER.indexOf(propertyName);
+		if (currentIndex < lastIndex) {
+			const expectedBefore = TANSTACK_ROUTE_PROPERTY_ORDER[lastIndex];
+			context.report({
+				node: optionsObject,
+				message: `Route property "${propertyName}" must come before "${expectedBefore}" — wrong order breaks TypeScript type inference`
+			});
+			return;
+		}
+		lastIndex = currentIndex;
+	}
+} }) };
+const tanstackStartNoDirectFetchInLoader = { create: (context) => ({ CallExpression(node) {
+	const optionsObject = getRouteOptionsObject(node);
+	if (!optionsObject) return;
+	const properties = optionsObject.properties ?? [];
+	for (const property of properties) {
+		if (getPropertyKeyName(property) !== "loader") continue;
+		walkAst(property.value ?? property, (child) => {
+			if (child.type !== "CallExpression") return;
+			if (child.callee?.type === "Identifier" && child.callee.name === "fetch") context.report({
+				node: child,
+				message: "Direct fetch() in route loader — use createServerFn() for type-safe server logic with automatic RPC"
+			});
+		});
+	}
+} }) };
+const tanstackStartServerFnValidateInput = { create: (context) => ({ CallExpression(node) {
+	if (node.callee?.type !== "MemberExpression") return;
+	if (node.callee.property?.type !== "Identifier") return;
+	if (node.callee.property.name !== "handler") return;
+	const chainInfo = walkServerFnChain(node);
+	if (!chainInfo.isServerFnChain) return;
+	const handlerFunction = node.arguments?.[0];
+	if (!handlerFunction) return;
+	let accessesData = false;
+	walkAst(handlerFunction, (child) => {
+		if (child.type === "MemberExpression" && child.property?.type === "Identifier" && child.property.name === "data") accessesData = true;
+		if (child.type === "ObjectPattern" && child.properties?.some((property) => property.key?.type === "Identifier" && property.key.name === "data")) accessesData = true;
+	});
+	if (accessesData && !chainInfo.hasInputValidator) context.report({
+		node,
+		message: "Server function handler accesses data without inputValidator() — validate inputs crossing the network boundary"
+	});
+} }) };
+const tanstackStartNoUseEffectFetch = { create: (context) => ({ CallExpression(node) {
+	const filename = context.getFilename?.() ?? "";
+	if (!TANSTACK_ROUTE_FILE_PATTERN.test(filename)) return;
+	if (node.callee?.type !== "Identifier") return;
+	if (node.callee.name !== "useEffect" && node.callee.name !== "useLayoutEffect") return;
+	const callback = node.arguments?.[0];
+	if (!callback) return;
+	let hasFetchCall = false;
+	walkAst(callback, (child) => {
+		if (hasFetchCall) return;
+		if (child.type === "CallExpression" && child.callee?.type === "Identifier" && child.callee.name === "fetch") hasFetchCall = true;
+	});
+	if (hasFetchCall) context.report({
+		node,
+		message: "fetch() inside useEffect in a route file — use the route loader or createServerFn() instead"
+	});
+} }) };
+const tanstackStartMissingHeadContent = { create: (context) => {
+	let hasHeadContentElement = false;
+	return {
+		JSXOpeningElement(node) {
+			const filename = context.getFilename?.() ?? "";
+			if (!TANSTACK_ROOT_ROUTE_FILE_PATTERN.test(filename)) return;
+			if (node.name?.type === "JSXIdentifier" && node.name.name === "HeadContent") hasHeadContentElement = true;
+		},
+		"Program:exit"(programNode) {
+			const filename = context.getFilename?.() ?? "";
+			if (!TANSTACK_ROOT_ROUTE_FILE_PATTERN.test(filename)) return;
+			if (!hasHeadContentElement) context.report({
+				node: programNode,
+				message: "Root route (__root) without <HeadContent /> — route head() meta tags won't render"
+			});
+		}
+	};
+} };
+const tanstackStartNoAnchorElement = { create: (context) => ({ JSXOpeningElement(node) {
+	const filename = context.getFilename?.() ?? "";
+	if (!TANSTACK_ROUTE_FILE_PATTERN.test(filename)) return;
+	if (node.name?.type !== "JSXIdentifier" || node.name.name !== "a") return;
+	const hrefAttribute = (node.attributes ?? []).find((attribute) => attribute.type === "JSXAttribute" && attribute.name?.type === "JSXIdentifier" && attribute.name.name === "href");
+	if (!hrefAttribute?.value) return;
+	let hrefValue = null;
+	if (hrefAttribute.value.type === "Literal") hrefValue = hrefAttribute.value.value;
+	else if (hrefAttribute.value.type === "JSXExpressionContainer" && hrefAttribute.value.expression?.type === "Literal") hrefValue = hrefAttribute.value.expression.value;
+	if (typeof hrefValue === "string" && hrefValue.startsWith("/")) context.report({
+		node,
+		message: "Use <Link> from @tanstack/react-router instead of <a> for internal navigation — enables type-safe routing and preloading"
+	});
+} }) };
+const tanstackStartServerFnMethodOrder = { create: (context) => ({ CallExpression(node) {
+	if (node.callee?.type !== "MemberExpression") return;
+	const methodNames = [];
+	let currentNode = node;
+	while (currentNode?.type === "CallExpression" && currentNode.callee?.type === "MemberExpression") {
+		const methodName = currentNode.callee.property?.type === "Identifier" ? currentNode.callee.property.name : null;
+		if (methodName) methodNames.unshift(methodName);
+		currentNode = currentNode.callee.object;
+	}
+	if (currentNode?.type === "CallExpression" && currentNode.callee?.type === "Identifier") {
+		if (!TANSTACK_SERVER_FN_NAMES.has(currentNode.callee.name)) return;
+	} else return;
+	const ownMethodName = node.callee.property?.type === "Identifier" ? node.callee.property.name : null;
+	if (methodNames[methodNames.length - 1] !== ownMethodName) return;
+	const orderSensitiveMethods = methodNames.filter((name) => TANSTACK_MIDDLEWARE_METHOD_ORDER.includes(name));
+	let lastIndex = -1;
+	for (const methodName of orderSensitiveMethods) {
+		const currentIndex = TANSTACK_MIDDLEWARE_METHOD_ORDER.indexOf(methodName);
+		if (currentIndex < lastIndex) {
+			const expectedBefore = TANSTACK_MIDDLEWARE_METHOD_ORDER[lastIndex];
+			context.report({
+				node,
+				message: `Server function method .${methodName}() must come before .${expectedBefore}() — wrong order breaks type inference`
+			});
+			return;
+		}
+		lastIndex = currentIndex;
+	}
+} }) };
+const tanstackStartNoNavigateInRender = { create: (context) => {
+	let effectDepth = 0;
+	let eventHandlerDepth = 0;
+	return {
+		CallExpression(node) {
+			const filename = context.getFilename?.() ?? "";
+			if (!TANSTACK_ROUTE_FILE_PATTERN.test(filename)) return;
+			if (node.callee?.type === "Identifier" && (node.callee.name === "useEffect" || node.callee.name === "useLayoutEffect")) effectDepth++;
+			if (effectDepth > 0 || eventHandlerDepth > 0) return;
+			if (node.callee?.type === "Identifier" && node.callee.name === "navigate" && node.arguments?.length > 0) context.report({
+				node,
+				message: "navigate() called during render — use redirect() in beforeLoad/loader for route-level redirects"
+			});
+		},
+		"CallExpression:exit"(node) {
+			const filename = context.getFilename?.() ?? "";
+			if (!TANSTACK_ROUTE_FILE_PATTERN.test(filename)) return;
+			if (node.callee?.type === "Identifier" && (node.callee.name === "useEffect" || node.callee.name === "useLayoutEffect")) effectDepth--;
+		},
+		JSXAttribute(node) {
+			const filename = context.getFilename?.() ?? "";
+			if (!TANSTACK_ROUTE_FILE_PATTERN.test(filename)) return;
+			if (node.name?.type === "JSXIdentifier" && node.name.name.startsWith("on") && UPPERCASE_PATTERN.test(node.name.name.charAt(2))) eventHandlerDepth++;
+		},
+		"JSXAttribute:exit"(node) {
+			const filename = context.getFilename?.() ?? "";
+			if (!TANSTACK_ROUTE_FILE_PATTERN.test(filename)) return;
+			if (node.name?.type === "JSXIdentifier" && node.name.name.startsWith("on") && UPPERCASE_PATTERN.test(node.name.name.charAt(2))) eventHandlerDepth--;
+		}
+	};
+} };
+const tanstackStartNoDynamicServerFnImport = { create: (context) => ({ ImportExpression(node) {
+	const source = node.source;
+	if (!source) return;
+	let importPath = null;
+	if (source.type === "Literal" && typeof source.value === "string") importPath = source.value;
+	else if (source.type === "TemplateLiteral" && source.quasis?.length === 1) importPath = source.quasis[0].value?.raw ?? null;
+	if (importPath && TANSTACK_SERVER_FN_FILE_PATTERN.test(importPath)) context.report({
+		node,
+		message: "Dynamic import of server functions file — use static imports so the bundler can replace server code with RPC stubs"
+	});
+} }) };
+const tanstackStartNoUseServerInHandler = { create: (context) => ({ CallExpression(node) {
+	if (node.callee?.type !== "MemberExpression") return;
+	if (node.callee.property?.type !== "Identifier" || node.callee.property.name !== "handler") return;
+	const handlerFunction = node.arguments?.[0];
+	if (!handlerFunction || handlerFunction.type !== "ArrowFunctionExpression" && handlerFunction.type !== "FunctionExpression") return;
+	const body = handlerFunction.body;
+	if (body?.type !== "BlockStatement") return;
+	if (body.body?.some((statement) => statement.type === "ExpressionStatement" && (statement.directive === "use server" || statement.expression?.type === "Literal" && statement.expression.value === "use server"))) context.report({
+		node: handlerFunction,
+		message: "\"use server\" inside createServerFn handler — TanStack Start handles this automatically, remove the directive"
+	});
+} }) };
+const tanstackStartNoSecretsInLoader = { create: (context) => ({ CallExpression(node) {
+	const optionsObject = getRouteOptionsObject(node);
+	if (!optionsObject) return;
+	const properties = optionsObject.properties ?? [];
+	for (const property of properties) {
+		const keyName = getPropertyKeyName(property);
+		if (keyName !== "loader" && keyName !== "beforeLoad") continue;
+		walkAst(property.value ?? property, (child) => {
+			if (child.type !== "MemberExpression") return;
+			if (child.object?.type === "MemberExpression" && child.object.object?.type === "Identifier" && child.object.object.name === "process" && child.object.property?.type === "Identifier" && child.object.property.name === "env") {
+				const envVarName = child.property?.type === "Identifier" ? child.property.name : null;
+				if (envVarName && !envVarName.startsWith("VITE_")) context.report({
+					node: child,
+					message: `process.env.${envVarName} in ${keyName} — loaders are isomorphic and may leak secrets to the client. Move to a createServerFn()`
+				});
+			}
+		});
+	}
+} }) };
+const tanstackStartGetMutation = { create: (context) => ({ CallExpression(node) {
+	if (node.callee?.type !== "MemberExpression") return;
+	if (node.callee.property?.type !== "Identifier" || node.callee.property.name !== "handler") return;
+	const chainInfo = walkServerFnChain(node);
+	if (!chainInfo.isServerFnChain) return;
+	if (chainInfo.specifiedMethod && MUTATING_HTTP_METHODS.has(chainInfo.specifiedMethod.toUpperCase())) return;
+	const handlerFunction = node.arguments?.[0];
+	if (!handlerFunction) return;
+	const sideEffect = findSideEffect(handlerFunction);
+	if (sideEffect) context.report({
+		node,
+		message: `GET server function has side effects (${sideEffect}) — use createServerFn({ method: 'POST' }) for mutations`
+	});
+} }) };
+const tanstackStartRedirectInTryCatch = { create: (context) => {
+	let tryBlockDepth = 0;
+	let catchClauseDepth = 0;
+	return {
+		TryStatement() {
+			tryBlockDepth++;
+		},
+		"TryStatement:exit"() {
+			tryBlockDepth--;
+		},
+		CatchClause() {
+			catchClauseDepth++;
+		},
+		"CatchClause:exit"() {
+			catchClauseDepth--;
+		},
+		ThrowStatement(node) {
+			if (tryBlockDepth === 0) return;
+			if (catchClauseDepth > 0) return;
+			const argument = node.argument;
+			if (argument?.type !== "CallExpression") return;
+			if (argument.callee?.type !== "Identifier") return;
+			if (!TANSTACK_REDIRECT_FUNCTIONS.has(argument.callee.name)) return;
+			context.report({
+				node,
+				message: `throw ${argument.callee.name}() inside try block — the router catches this internally. Move it outside the try block or re-throw in the catch`
+			});
+		}
+	};
+} };
+const hasTopLevelAwait = (statement) => {
+	if (statement.type === "VariableDeclaration") return statement.declarations?.some((declarator) => declarator.init?.type === "AwaitExpression");
+	if (statement.type === "ExpressionStatement") return statement.expression?.type === "AwaitExpression" || statement.expression?.type === "AssignmentExpression" && statement.expression.right?.type === "AwaitExpression";
+	if (statement.type === "ReturnStatement") return statement.argument?.type === "AwaitExpression";
+	return false;
+};
+const tanstackStartLoaderParallelFetch = { create: (context) => ({ CallExpression(node) {
+	const optionsObject = getRouteOptionsObject(node);
+	if (!optionsObject) return;
+	const properties = optionsObject.properties ?? [];
+	for (const property of properties) {
+		if (getPropertyKeyName(property) !== "loader") continue;
+		const loaderValue = property.value;
+		if (!loaderValue || loaderValue.type !== "ArrowFunctionExpression" && loaderValue.type !== "FunctionExpression") continue;
+		const functionBody = loaderValue.body;
+		if (!functionBody || functionBody.type !== "BlockStatement") continue;
+		let sequentialAwaitCount = 0;
+		for (const statement of functionBody.body ?? []) {
+			if (hasTopLevelAwait(statement)) sequentialAwaitCount++;
+			if (sequentialAwaitCount >= SEQUENTIAL_AWAIT_THRESHOLD_FOR_LOADER) {
+				context.report({
+					node: property,
+					message: "Multiple sequential awaits in loader — use Promise.all() to fetch data in parallel and avoid waterfalls"
+				});
+				break;
+			}
+		}
+	}
+} }) };
+
 //#endregion
 //#region src/plugin/rules/state-and-effects.ts
 const noDerivedStateEffect = { create: (context) => ({ CallExpression(node) {
@@ -1700,6 +2762,7 @@ const plugin = {
 		"rendering-animate-svg-wrapper": renderingAnimateSvgWrapper,
 		"no-inline-prop-on-memo-component": noInlinePropOnMemoComponent,
 		"rendering-hydration-no-flicker": renderingHydrationNoFlicker,
+		"rendering-script-defer-async": renderingScriptDeferAsync,
 		"no-transition-all": noTransitionAll,
 		"no-global-css-variable-animation": noGlobalCssVariableAnimation,
 		"no-large-animated-blur": noLargeAnimatedBlur,
@@ -1744,6 +2807,7 @@ const plugin = {
 		"js-index-maps": jsIndexMaps,
 		"js-cache-storage": jsCacheStorage,
 		"js-early-exit": jsEarlyExit,
+		"js-flatmap-filter": jsFlatmapFilter,
 		"async-parallel": asyncParallel,
 		"rn-no-raw-text": rnNoRawText,
 		"rn-no-deprecated-modules": rnNoDeprecatedModules,
@@ -1752,7 +2816,42 @@ const plugin = {
 		"rn-no-inline-flatlist-renderitem": rnNoInlineFlatlistRenderitem,
 		"rn-no-legacy-shadow-styles": rnNoLegacyShadowStyles,
 		"rn-prefer-reanimated": rnPreferReanimated,
-		"rn-no-single-element-style-array": rnNoSingleElementStyleArray
+		"rn-no-single-element-style-array": rnNoSingleElementStyleArray,
+		"tanstack-start-route-property-order": tanstackStartRoutePropertyOrder,
+		"tanstack-start-no-direct-fetch-in-loader": tanstackStartNoDirectFetchInLoader,
+		"tanstack-start-server-fn-validate-input": tanstackStartServerFnValidateInput,
+		"tanstack-start-no-useeffect-fetch": tanstackStartNoUseEffectFetch,
+		"tanstack-start-missing-head-content": tanstackStartMissingHeadContent,
+		"tanstack-start-no-anchor-element": tanstackStartNoAnchorElement,
+		"tanstack-start-server-fn-method-order": tanstackStartServerFnMethodOrder,
+		"tanstack-start-no-navigate-in-render": tanstackStartNoNavigateInRender,
+		"tanstack-start-no-dynamic-server-fn-import": tanstackStartNoDynamicServerFnImport,
+		"tanstack-start-no-use-server-in-handler": tanstackStartNoUseServerInHandler,
+		"tanstack-start-no-secrets-in-loader": tanstackStartNoSecretsInLoader,
+		"tanstack-start-get-mutation": tanstackStartGetMutation,
+		"tanstack-start-redirect-in-try-catch": tanstackStartRedirectInTryCatch,
+		"tanstack-start-loader-parallel-fetch": tanstackStartLoaderParallelFetch,
+		"query-stable-query-client": queryStableQueryClient,
+		"query-no-rest-destructuring": queryNoRestDestructuring,
+		"query-no-void-query-fn": queryNoVoidQueryFn,
+		"query-no-query-in-effect": queryNoQueryInEffect,
+		"query-mutation-missing-invalidation": queryMutationMissingInvalidation,
+		"query-no-usequery-for-mutation": queryNoUseQueryForMutation,
+		"no-inline-bounce-easing": noInlineBounceEasing,
+		"no-z-index-9999": noZIndex9999,
+		"no-inline-exhaustive-style": noInlineExhaustiveStyle,
+		"no-side-tab-border": noSideTabBorder,
+		"no-pure-black-background": noPureBlackBackground,
+		"no-gradient-text": noGradientText,
+		"no-dark-mode-glow": noDarkModeGlow,
+		"no-justified-text": noJustifiedText,
+		"no-tiny-text": noTinyText,
+		"no-wide-letter-spacing": noWideLetterSpacing,
+		"no-gray-on-colored-background": noGrayOnColoredBackground,
+		"no-layout-transition-inline": noLayoutTransitionInline,
+		"no-disabled-zoom": noDisabledZoom,
+		"no-outline-none": noOutlineNone,
+		"no-long-transition-duration": noLongTransitionDuration
 	}
 };