@vadimcomanescu/nadicode-design-system 2.0.0

package/eslint-rules/nadicode/__tests__/rules.test.js

@@ -0,0 +1,2143 @@
+import { describe } from "vitest";
+import { RuleTester } from "eslint";
+
+import noAdminArbitraryTextSize from "../rules/no-admin-arbitrary-text-size.js";
+import noAdminManualChartBars from "../rules/no-admin-manual-chart-bars.js";
+import noAppPrimitiveComposition from "../rules/no-app-primitive-composition.js";
+import noBarrelImports from "../rules/no-barrel-imports.js";
+import noDerivedStateViaUseeffect from "../rules/no-derived-state-via-useeffect.js";
+import noDirectLucideImport from "../rules/no-direct-lucide-import.js";
+import noExternalUiLibrary from "../rules/no-external-ui-library.js";
+import noFalsyAndRender from "../rules/no-falsy-and-render.js";
+import noForbiddenBespokeChatPrimitive from "../rules/no-forbidden-bespoke-chat-primitive.js";
+import noForbiddenChatClassUsage from "../rules/no-forbidden-chat-class-usage.js";
+import noForbiddenTokens from "../rules/no-forbidden-tokens.js";
+import noForwardRef from "../rules/no-forward-ref.js";
+import noHardcodedInlineColor from "../rules/no-hardcoded-inline-color.js";
+import noHardcodedInlineDuration from "../rules/no-hardcoded-inline-duration.js";
+import noHardcodedInlineSpacing from "../rules/no-hardcoded-inline-spacing.js";
+import noHardcodedInlineZindex from "../rules/no-hardcoded-inline-zindex.js";
+import noInlineDefaultNonprimitiveProps from "../rules/no-inline-default-nonprimitive-props.js";
+import noMutatingSortOnState from "../rules/no-mutating-sort-on-state.js";
+import noNestedGlass from "../rules/no-nested-glass.js";
+import noUnregisteredGlass from "../rules/no-unregistered-glass.js";
+import noObjectInEffectDeps from "../rules/no-object-in-effect-deps.js";
+import noHasSvgSelector from "../rules/no-has-svg-selector.js";
+import noOffGridSpacing from "../rules/no-off-grid-spacing.js";
+import noRawTailwindPalette from "../rules/no-raw-tailwind-palette.js";
+import noScreenHeightClasses from "../rules/no-screen-height-classes.js";
+import noRegexpInRender from "../rules/no-regexp-in-render.js";
+import requireActionSchema from "../rules/require-action-schema.js";
+import requireAdminSidebarGroupLabel from "../rules/require-admin-sidebar-group-label.js";
+import requireFormAction from "../rules/require-form-action.js";
+import requireInputName from "../rules/require-input-name.js";
+import requireLazyStateInit from "../rules/require-lazy-state-init.js";
+import requireLoadingFallbackOnDynamic from "../rules/require-loading-fallback-on-dynamic.js";
+import requireOverflowXOnTableWrapper from "../rules/require-overflow-x-on-table-wrapper.js";
+import requireReducedMotionOnMotionImport from "../rules/require-reduced-motion-on-motion-import.js";
+import requireScrollContainmentOnOverlay from "../rules/require-scroll-containment-on-overlay.js";
+import requireTouchTargetOnInteractive from "../rules/require-touch-target-on-interactive.js";
+import requireUsememoForRenderFilterSort from "../rules/require-usememo-for-render-filter-sort.js";
+import requireUsesyncexternalstoreForSubscriptions from "../rules/require-usesyncexternalstore-for-subscriptions.js";
+import noRedirectInTryCatch from "../rules/no-redirect-in-try-catch.js";
+import noFramerMotionImport from "../rules/no-framer-motion-import.js";
+import requireSizesOnFillImage from "../rules/require-sizes-on-fill-image.js";
+import requireEffectCleanup from "../rules/require-effect-cleanup.js";
+import requirePassiveEventListener from "../rules/require-passive-event-listener.js";
+import noLayoutPropertyAnimation from "../rules/no-layout-property-animation.js";
+import noUnstableCache from "../rules/no-unstable-cache.js";
+import noDeprecatedSegmentConfig from "../rules/no-deprecated-segment-config.js";
+import noRuntimeApiInUseCache from "../rules/no-runtime-api-in-use-cache.js";
+import requireAuthInServerAction from "../rules/require-auth-in-server-action.js";
+import noRawRechartsImport from "../rules/no-raw-recharts-import.js";
+import requireChartEmptyHandler from "../rules/require-chart-empty-handler.js";
+import noArbitraryChartColor from "../rules/no-arbitrary-chart-color.js";
+import requireDashboardLoadingSkeleton from "../rules/require-dashboard-loading-skeleton.js";
+import noLowContrastTextOpacity from "../rules/no-low-contrast-text-opacity.js";
+import requireSidebarTrigger from "../rules/require-sidebar-trigger.js";
+import requireStaggerOnMetricGrid from "../rules/require-stagger-on-metric-grid.js";
+
+const tester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    parserOptions: {
+      ecmaFeatures: { jsx: true },
+    },
+  },
+});
+
+// ── Design system rules ──────────────────────────────────────────────
+
+describe("nadicode design system rules", () => {
+  tester.run("no-raw-tailwind-palette", noRawTailwindPalette, {
+    valid: [{ code: "const x = <div className='bg-surface text-text-primary' />;" }],
+    invalid: [
+      {
+        code: "const x = <div className='bg-zinc-950 text-blue-500' />;",
+        errors: [{ message: /semantic token classes/i }, { message: /semantic token classes/i }],
+      },
+    ],
+  });
+
+  tester.run("no-direct-lucide-import", noDirectLucideImport, {
+    valid: [
+      {
+        filename: "/repo/src/components/ui/icons/home.tsx",
+        code: "import { Home } from 'lucide-react'; export const x = Home;",
+      },
+    ],
+    invalid: [
+      {
+        filename: "/repo/src/components/ui/Button.tsx",
+        code: "import { Home } from 'lucide-react'; export const x = Home;",
+        errors: [{ message: /animated icons/i }],
+      },
+    ],
+  });
+
+  tester.run("no-forbidden-tokens", noForbiddenTokens, {
+    valid: [{ code: "const x = <div className='text-text-primary bg-overlay/80' />;" }],
+    invalid: [
+      {
+        code: "const x = <div className='text-foreground border-error bg-black/80' />;",
+        output: "const x = <div className='text-text-primary border-destructive bg-overlay/80' />;",
+        errors: [
+          { message: /text-text-primary or text-text-secondary/ },
+          { message: /border-destructive/ },
+          { message: /bg-overlay\/80/ },
+        ],
+      },
+    ],
+  });
+
+  tester.run("no-screen-height-classes", noScreenHeightClasses, {
+    valid: [
+      { code: "const x = <div className='min-h-dvh h-full' />;" },
+      { code: "const x = <div className={cn('max-h-dvh', className)} />;" },
+      { code: "const classes = cva('min-h-dvh bg-surface');" },
+    ],
+    invalid: [
+      {
+        code: "const x = <div className='h-screen w-full' />;",
+        errors: [{ message: /h-dvh/ }],
+      },
+      {
+        code: "const x = <div className={cn('min-h-screen bg-surface')} />;",
+        errors: [{ message: /min-h-dvh/ }],
+      },
+      {
+        code: "const classes = cva('max-h-screen overflow-y-auto');",
+        errors: [{ message: /max-h-dvh/ }],
+      },
+    ],
+  });
+
+  tester.run("no-external-ui-library", noExternalUiLibrary, {
+    valid: [{ code: "import { Button } from '@/components/ui/Button';" }],
+    invalid: [
+      {
+        code: "import { Button } from '@mui/material';",
+        errors: [{ message: /External UI library/i }],
+      },
+    ],
+  });
+
+  tester.run("no-hardcoded-inline-color", noHardcodedInlineColor, {
+    valid: [
+      { code: "const x = <div style={{ color: 'var(--color-text-primary)' }} />;" },
+      { code: "const x = <div style={{ color: 'inherit' }} />;" },
+      { code: "const x = <div style={{ color: 'transparent' }} />;" },
+      { code: "const x = <div style={{ color: 'currentColor' }} />;" },
+    ],
+    invalid: [
+      {
+        code: "const x = <div style={{ color: '#fff' }} />;",
+        errors: [{ message: /hardcoded inline colors/i }],
+      },
+      {
+        code: "const x = <div style={{ boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)' }} />;",
+        errors: [{ message: /hardcoded inline colors/i }],
+      },
+      {
+        code: "const x = <div style={{ textShadow: '1px 1px 2px #000' }} />;",
+        errors: [{ message: /hardcoded inline colors/i }],
+      },
+      {
+        code: "const x = <div style={{ backgroundColor: 'rgb(255, 0, 0)' }} />;",
+        errors: [{ message: /hardcoded inline colors/i }],
+      },
+      {
+        code: "const x = <div style={{ borderColor: 'hsl(210, 50%, 50%)' }} />;",
+        errors: [{ message: /hardcoded inline colors/i }],
+      },
+    ],
+  });
+
+  tester.run("no-hardcoded-inline-spacing", noHardcodedInlineSpacing, {
+    valid: [
+      { code: "const x = <div style={{ marginTop: tokenSpacing }} />;" },
+      { code: "const x = <div style={{ padding: 'var(--spacing-md)' }} />;" },
+    ],
+    invalid: [
+      {
+        code: "const x = <div style={{ padding: '16px' }} />;",
+        errors: [{ message: /hardcoded inline spacing/i }],
+      },
+      {
+        code: "const x = <div style={{ marginTop: '1.5rem' }} />;",
+        errors: [{ message: /hardcoded inline spacing/i }],
+      },
+      {
+        code: "const x = <div style={{ gap: 8 }} />;",
+        errors: [{ message: /hardcoded inline spacing/i }],
+      },
+      {
+        code: "const x = <div style={{ width: '200px' }} />;",
+        errors: [{ message: /hardcoded inline spacing/i }],
+      },
+    ],
+  });
+
+  tester.run("no-hardcoded-inline-duration", noHardcodedInlineDuration, {
+    valid: [
+      { code: "const x = <div style={{ transitionDuration: 'var(--motion-fast)' }} />;" },
+      { code: "const x = <div style={{ animation: 'float var(--duration-normal) ease-in-out infinite' }} />;" },
+      { code: "const x = <div style={{ transition: 'opacity var(--duration-fast) ease-out' }} />;" },
+      { code: "const x = <div style={{ animation: 'spin infinite linear' }} />;" },
+    ],
+    invalid: [
+      {
+        code: "const x = <div style={{ transitionDuration: '120ms' }} />;",
+        errors: [{ message: /hardcoded inline duration/i }],
+      },
+      {
+        code: "const x = <div style={{ animation: 'float 2s ease-in-out infinite' }} />;",
+        errors: [{ message: /hardcoded inline duration/i }],
+      },
+      {
+        code: "const x = <div style={{ transition: 'opacity 120ms ease-out, transform 200ms ease-in' }} />;",
+        errors: [{ message: /hardcoded inline duration/i }],
+      },
+      {
+        code: "const x = <div style={{ transition: 'opacity 120ms var(--ease-out)' }} />;",
+        errors: [{ message: /hardcoded inline duration/i }],
+      },
+    ],
+  });
+
+  tester.run("no-hardcoded-inline-zindex", noHardcodedInlineZindex, {
+    valid: [{ code: "const x = <div style={{ zIndex: layer }} />;" }],
+    invalid: [
+      {
+        code: "const x = <div style={{ zIndex: 40 }} />;",
+        errors: [{ message: /hardcoded inline z-index/i }],
+      },
+    ],
+  });
+
+  tester.run("no-admin-arbitrary-text-size", noAdminArbitraryTextSize, {
+    valid: [
+      {
+        filename: "/repo/src/components/admin/dashboard/Widget.tsx",
+        code: "const x = <div className=\"text-sm\" />;",
+      },
+    ],
+    invalid: [
+      {
+        filename: "/repo/src/components/admin/dashboard/Widget.tsx",
+        code: "const x = <div className=\"text-[13px]\" />;",
+        errors: [{ message: /not allowed in admin UI/i }],
+      },
+    ],
+  });
+
+  tester.run("no-forbidden-chat-class-usage", noForbiddenChatClassUsage, {
+    valid: [
+      {
+        filename: "/repo/src/components/admin/chat/Thread.tsx",
+        code: "const x = <div className=\"glass-panel\" />;",
+      },
+    ],
+    invalid: [
+      {
+        filename: "/repo/src/components/admin/chat/Thread.tsx",
+        code: "const x = <div className=\"chat-message\" />;",
+        errors: [{ message: /not allowed in admin UI/i }],
+      },
+    ],
+  });
+
+  tester.run("no-forbidden-bespoke-chat-primitive", noForbiddenBespokeChatPrimitive, {
+    valid: [
+      {
+        filename: "/repo/src/components/admin/chat/Thread.tsx",
+        code: "import { ToolCallCard } from '@/components/ui/ToolCallCard';",
+      },
+    ],
+    invalid: [
+      {
+        filename: "/repo/src/components/admin/chat/Thread.tsx",
+        code: "import MessageBubble from './MessageBubble';",
+        errors: [{ message: /not allowed in admin chat/i }],
+      },
+    ],
+  });
+
+  tester.run("no-admin-manual-chart-bars", noAdminManualChartBars, {
+    valid: [
+      {
+        filename: "/repo/src/components/admin/dashboard/Stats.tsx",
+        code: "import { BarChart } from '@/components/ui/charts/BarChart'; const x = <BarChart />;",
+      },
+    ],
+    invalid: [
+      {
+        filename: "/repo/src/components/admin/dashboard/Stats.tsx",
+        code:
+          "const value = 20; const x = <div className=\"bg-[rgb(var(--chart-1))]\" style={{ width: `${value}%` }} />;",
+        errors: [{ message: /Manual proportional bars with inline width are not allowed/i }],
+      },
+    ],
+  });
+
+  tester.run("require-admin-sidebar-group-label", requireAdminSidebarGroupLabel, {
+    valid: [
+      {
+        filename: "/repo/src/components/admin/AdminShell.tsx",
+        code: "const x = <SidebarMenu><SidebarGroupLabel>Ops</SidebarGroupLabel></SidebarMenu>;",
+      },
+    ],
+    invalid: [
+      {
+        filename: "/repo/src/components/admin/AdminShell.tsx",
+        code: "const x = <SidebarMenu />;",
+        errors: [{ message: /must include SidebarGroupLabel/i }],
+      },
+    ],
+  });
+
+  tester.run("require-action-schema", requireActionSchema, {
+    valid: [
+      {
+        filename: "/repo/src/actions/create-user.ts",
+        code: `
+          'use server';
+          import { z } from 'zod';
+          const Schema = z.object({ id: z.string() });
+          export async function createUser(input) {
+            const parsed = Schema.parse(input);
+            return parsed;
+          }
+        `,
+      },
+      {
+        filename: "/repo/src/actions/create-user.ts",
+        code: `
+          'use server';
+          import { z } from 'zod';
+          const Schema = z.object({ id: z.string() });
+          export async function createUser(input) {
+            const result = Schema.safeParse(input);
+            return result;
+          }
+        `,
+      },
+    ],
+    invalid: [
+      {
+        filename: "/repo/src/actions/create-user.ts",
+        code: `
+          'use server';
+          export async function createUser(input) {
+            return input;
+          }
+        `,
+        errors: [{ message: /must validate input with Zod/i }],
+      },
+      {
+        filename: "/repo/src/actions/delete-user.ts",
+        code: `
+          'use server';
+          export const deleteUser = async (id) => {
+            return { deleted: id };
+          };
+        `,
+        errors: [{ message: /must validate input with Zod/i }],
+      },
+    ],
+  });
+
+  tester.run("no-app-primitive-composition", noAppPrimitiveComposition, {
+    valid: [
+      {
+        filename: "/repo/src/app/dashboard/page.tsx",
+        code: `
+          import { Button } from '@/components/ui/Button';
+          import { Card } from '@/components/ui/Card';
+          import { Badge } from '@/components/ui/Badge';
+          const x = <Card><Button><Badge>OK</Badge></Button></Card>;
+        `,
+      },
+      {
+        filename: "/repo/src/components/blocks/HeroBlock.tsx",
+        code: `
+          import { Button } from '@/components/ui/Button';
+          import { Card } from '@/components/ui/Card';
+          import { Badge } from '@/components/ui/Badge';
+          import { Avatar } from '@/components/ui/Avatar';
+          import { Dialog } from '@/components/ui/Dialog';
+          const x = <div />;
+        `,
+      },
+      {
+        filename: "/repo/src/app/dashboard/page.tsx",
+        code: `
+          import { Button } from '@/components/ui/Button';
+          import { Card } from '@/components/ui/Card';
+          import { Badge } from '@/components/ui/Badge';
+          import { HomeIcon } from '@/components/ui/icons/home';
+          import { UserIcon } from '@/components/ui/icons/user';
+          const x = <div />;
+        `,
+      },
+      {
+        filename: "/repo/src/app/api/auth/route.ts",
+        code: `
+          import { Button } from '@/components/ui/Button';
+          import { Card } from '@/components/ui/Card';
+          import { Badge } from '@/components/ui/Badge';
+          import { Avatar } from '@/components/ui/Avatar';
+          const x = <div />;
+        `,
+      },
+      {
+        filename: "/repo/src/app/dashboard/page.test.tsx",
+        code: `
+          import { Button } from '@/components/ui/Button';
+          import { Card } from '@/components/ui/Card';
+          import { Badge } from '@/components/ui/Badge';
+          import { Avatar } from '@/components/ui/Avatar';
+          const x = <div />;
+        `,
+      },
+    ],
+    invalid: [
+      {
+        filename: "/repo/src/app/dashboard/page.tsx",
+        code: `
+          import { Button } from '@/components/ui/Button';
+          import { Card } from '@/components/ui/Card';
+          import { Badge } from '@/components/ui/Badge';
+          import { Avatar } from '@/components/ui/Avatar';
+          const x = <div />;
+        `,
+        errors: [
+          { message: /4 UI primitives/ },
+          { message: /4 UI primitives/ },
+          { message: /4 UI primitives/ },
+          { message: /4 UI primitives/ },
+        ],
+      },
+    ],
+  });
+
+  tester.run("require-form-action", requireFormAction, {
+    valid: [
+      { code: "const x = <form action={handleAction}></form>;" },
+      { code: "const x = <form onSubmit={handleSubmit}></form>;" },
+      { code: 'const x = <form action={action} className="space-y-4"></form>;' },
+    ],
+    invalid: [
+      {
+        code: 'const x = <form className="space-y-4"></form>;',
+        errors: [{ message: /must have an action, formAction, or onSubmit handler/i }],
+      },
+      {
+        code: 'const x = <form action=""></form>;',
+        errors: [{ message: /must have an action, formAction, or onSubmit handler/i }],
+      },
+    ],
+  });
+
+  tester.run("require-input-name", requireInputName, {
+    valid: [
+      { code: 'const x = <form action={a}><input name="email" /></form>;' },
+      { code: 'const x = <form action={a}><input type="submit" /></form>;' },
+      { code: "const x = <form action={a}><input {...field} /></form>;" },
+      { code: "const x = <input />;" },
+      { code: "const x = <form action={a}><input readOnly /></form>;" },
+    ],
+    invalid: [
+      {
+        code: 'const x = <form action={a}><input type="email" /></form>;',
+        errors: [{ message: /<input> inside a form must have a 'name' attribute/i }],
+      },
+      {
+        code: 'const x = <form action={a}><Input type="text" /></form>;',
+        errors: [{ message: /<Input> inside a form must have a 'name' attribute/i }],
+      },
+      {
+        code: "const x = <form action={a}><textarea /></form>;",
+        errors: [{ message: /<textarea> inside a form must have a 'name' attribute/i }],
+      },
+    ],
+  });
+
+  tester.run("require-overflow-x-on-table-wrapper", requireOverflowXOnTableWrapper, {
+    valid: [
+      { code: "const x = <div className='overflow-x-auto rounded-md'><Table /></div>;" },
+      { code: "const x = <div className='overflow-x-scroll'><Table /></div>;" },
+    ],
+    invalid: [
+      {
+        code: "const x = <div className='rounded-md'><Table /></div>;",
+        errors: [{ message: /overflow-x-auto/ }],
+      },
+      {
+        code: "const x = <div><Table /></div>;",
+        errors: [{ message: /overflow-x-auto/ }],
+      },
+    ],
+  });
+
+  tester.run("require-scroll-containment-on-overlay", requireScrollContainmentOnOverlay, {
+    valid: [
+      { code: "const x = <DialogContent className='fixed z-50 max-h-[90dvh] overflow-y-auto glass-panel' />;" },
+      { code: "const x = <SheetContent className='fixed z-50 max-h-full overflow-y-auto' />;" },
+      { code: "const x = <PopoverContent className='fixed z-50 max-h-[24rem] overflow-y-auto' />;" },
+      { code: "const x = <SheetContent className='p-4' />;" },
+    ],
+    invalid: [
+      {
+        code: "const x = <DialogContent className='fixed z-50 p-4' />;",
+        errors: [{ message: /max-h-.*and overflow-y-auto/ }],
+      },
+      {
+        code: "const x = <PopoverContent className='fixed z-50 max-h-[24rem]' />;",
+        errors: [{ message: /overflow-y-auto/ }],
+      },
+    ],
+  });
+
+  tester.run("require-touch-target-on-interactive", requireTouchTargetOnInteractive, {
+    valid: [
+      { code: "const x = <button className='h-11 w-11'>Click</button>;" },
+      { code: "const x = <button className='h-8 min-h-11'>Click</button>;" },
+      { code: "const x = <button className='h-8 min-h-[44px]'>Click</button>;" },
+      { code: "const x = <button className='h-8 w-8 after:-inset-2'>Click</button>;" },
+      { code: "const x = <div className='h-8 w-8 after:-inset-2' role='button' tabIndex={0}>Click</div>;" },
+      { code: "const x = <div className='h-6'>Not interactive</div>;" },
+    ],
+    invalid: [
+      {
+        code: "const x = <button className='h-8 w-8'>Click</button>;",
+        errors: [{ message: /undersized touch target class/ }],
+      },
+      {
+        code: "const x = <a className='h-6 p-1' href='#'>Link</a>;",
+        errors: [{ message: /undersized touch target class/ }],
+      },
+      {
+        code: "const x = <div className={cn('size-8 rounded-md')} role='button' tabIndex={0}>Open</div>;",
+        errors: [{ message: /undersized touch target class/ }],
+      },
+    ],
+  });
+
+  tester.run("no-off-grid-spacing", noOffGridSpacing, {
+    valid: [
+      { code: "const x = <div className='p-2 gap-4 m-6' />;" },
+      { code: "const x = <div className='p-3 gap-1.5 px-2.5' />;" },
+      { code: "const x = <div className='p-[12px]' />;" },
+      { code: "const x = <div className='gap-[8px]' />;" },
+      { code: "const x = <div className='m-[20px]' />;" },
+      { code: "const x = <div className='p-1 gap-3 m-5' />;" },
+      { code: "const x = <div className='md:p-[16px]' />;" },
+    ],
+    invalid: [
+      {
+        code: "const x = <div className='p-[13px]' />;",
+        errors: [{ message: /off the 4px grid/i }],
+      },
+      {
+        code: "const x = <div className='gap-[7px]' />;",
+        errors: [{ message: /off the 4px grid/i }],
+      },
+      {
+        code: "const x = <div className='m-[5px]' />;",
+        errors: [{ message: /off the 4px grid/i }],
+      },
+      {
+        code: "const x = <div className='space-y-[11px]' />;",
+        errors: [{ message: /off the 4px grid/i }],
+      },
+    ],
+  });
+
+  tester.run("no-has-svg-selector", noHasSvgSelector, {
+    valid: [
+      { code: "const x = <div className='[&>svg]:size-4' />;" },
+      { code: "const x = <div className='[&>[data-slot=icon]]:text-destructive' />;" },
+      { code: "const x = <div className='[&:has([data-slot=icon])]:grid' />;" },
+      { code: "const x = cn('flex items-center gap-2');" },
+    ],
+    invalid: [
+      {
+        code: "const x = <div className='[&:has(svg)]:gap-2' />;",
+        errors: [{ message: /data-slot sub-component/i }],
+      },
+      {
+        code: "const x = <div className='[&:has(>svg)]:grid' />;",
+        errors: [{ message: /data-slot sub-component/i }],
+      },
+      {
+        code: "const x = cn('[&:has(svg)]:pl-8');",
+        errors: [{ message: /data-slot sub-component/i }],
+      },
+      {
+        code: "const x = cva('[&:has(>svg)]:gap-3 flex');",
+        errors: [{ message: /data-slot sub-component/i }],
+      },
+    ],
+  });
+});
+
+// ── Reduced motion enforcement ───────────────────────────────────────
+
+describe("reduced motion enforcement", () => {
+  tester.run("require-reduced-motion-on-motion-import", requireReducedMotionOnMotionImport, {
+    valid: [
+      {
+        code: `
+          import { motion } from 'motion/react';
+          import { useReducedMotion } from 'motion/react';
+          const X = () => { useReducedMotion(); return <motion.div animate={{ opacity: 1 }} /> };
+        `,
+      },
+      {
+        code: `
+          import { motion } from 'motion/react';
+          import { useMotionConfig } from '../../lib/motion';
+          const X = () => { const c = useMotionConfig(); return <motion.div animate={{ opacity: 1 }} /> };
+        `,
+      },
+      {
+        code: `
+          import { motion } from 'motion/react';
+          import { MotionConfig } from 'motion/react';
+          const X = () => <MotionConfig reducedMotion="user"><motion.div animate={{ x: 0 }} /></MotionConfig>;
+        `,
+      },
+      {
+        code: `
+          import { motion } from 'motion/react';
+          const X = () => <motion.div layoutId="x" />;
+        `,
+      },
+      {
+        code: `
+          const X = () => <div initial="test" animate="test" />;
+        `,
+      },
+      {
+        filename: "/repo/src/components/ui/Foo.test.tsx",
+        code: `
+          import { motion } from 'motion/react';
+          const X = () => <motion.div animate={{ opacity: 1 }} />;
+        `,
+      },
+      {
+        filename: "/repo/src/components/ui/icons/check.tsx",
+        code: `
+          import { motion } from 'motion/react';
+          const X = () => <motion.path animate={{ pathLength: 1 }} />;
+        `,
+      },
+      {
+        code: `
+          import { motion } from 'motion/react';
+          const mq = 'prefers-reduced-motion';
+          const X = () => <motion.div animate={{ opacity: 1 }} />;
+        `,
+      },
+    ],
+    invalid: [
+      {
+        code: `
+          import { motion } from 'motion/react';
+          const X = () => <motion.div animate={{ opacity: 1 }} />;
+        `,
+        errors: [{ message: /prefers-reduced-motion/i }],
+      },
+      {
+        code: `
+          import { motion } from 'framer-motion';
+          const X = () => <motion.div initial={{ y: 20 }} animate={{ y: 0 }} />;
+        `,
+        errors: [{ message: /prefers-reduced-motion/i }],
+      },
+      {
+        code: `
+          import { motion } from 'motion/react';
+          const X = () => <motion.div whileHover={{ scale: 1.1 }} />;
+        `,
+        errors: [{ message: /prefers-reduced-motion/i }],
+      },
+      {
+        code: `
+          import { motion, MotionConfig } from 'motion/react';
+          const X = () => <MotionConfig transition={{ duration: 0.3 }}><motion.div animate={{ x: 0 }} /></MotionConfig>;
+        `,
+        errors: [{ message: /prefers-reduced-motion/i }],
+      },
+    ],
+  });
+});
+
+// ── React 19 regression guards ───────────────────────────────────────
+
+describe("react 19 regression guards", () => {
+  tester.run("no-forward-ref", noForwardRef, {
+    valid: [
+      { code: "function Button({ ref, ...props }) { return <button ref={ref} {...props} /> }" },
+      { code: "import * as React from 'react'; function X({ ref }) { return <div ref={ref} /> }" },
+      {
+        filename: "/repo/src/components/ui/Dialog.test.tsx",
+        code: "import { forwardRef } from 'react'; const X = forwardRef((props, ref) => <div />)",
+      },
+    ],
+    invalid: [
+      {
+        code: "import { forwardRef } from 'react'; const X = forwardRef((props, ref) => <div />)",
+        errors: [{ message: /ref-as-prop/i }],
+      },
+      {
+        code: "import * as React from 'react'; const X = React.forwardRef((props, ref) => <div />)",
+        errors: [{ message: /ref-as-prop/i }],
+      },
+    ],
+  });
+
+  tester.run("no-nested-glass", noNestedGlass, {
+    valid: [
+      { code: "const x = <div className='glass-panel p-4'><span>ok</span></div>;" },
+      { code: "const x = <><div className='glass-panel' /><div className='glass-floating' /></>;" },
+      { code: "const x = <div className='backdrop-blur-xl'><span>ok</span></div>;" },
+      { code: "const x = <div className='glass-panel'><div className='bg-surface p-4'>ok</div></div>;" },
+    ],
+    invalid: [
+      {
+        code: "const x = <div className='glass-panel'><div className='glass-panel'>nested</div></div>;",
+        errors: [{ message: /No glass-on-glass/ }],
+      },
+      {
+        code: "const x = <div className='glass-panel'><div className='glass-floating'>nested</div></div>;",
+        errors: [{ message: /No glass-on-glass/ }],
+      },
+      {
+        code: "const x = <div className='backdrop-blur-xl bg-surface/85'><div className='glass-panel'>nested</div></div>;",
+        errors: [{ message: /No glass-on-glass/ }],
+      },
+      {
+        code: "const x = <div className='glass-panel'><div className='backdrop-blur-sm'>nested</div></div>;",
+        errors: [{ message: /No glass-on-glass/ }],
+      },
+      {
+        code: "const x = <div className='glass-panel'><section><div className='glass-overlay'>deep</div></section></div>;",
+        errors: [{ message: /No glass-on-glass/ }],
+      },
+      {
+        code: "const x = <div className={cn('glass-panel')}><div className={cn('glass-floating')}>nested</div></div>;",
+        errors: [{ message: /No glass-on-glass/ }],
+      },
+    ],
+  });
+
+  tester.run("no-unregistered-glass", noUnregisteredGlass, {
+    valid: [
+      // Glass in allowed directory (blocks/)
+      {
+        filename: "/repo/src/components/blocks/HeroBlock.tsx",
+        code: "const x = <div className='glass-panel p-4'>hero</div>;",
+      },
+      // Glass in allowed directory (pages/)
+      {
+        filename: "/repo/src/components/pages/Landing.tsx",
+        code: "const x = <section className='glass-floating'>content</section>;",
+      },
+      // Glass in allowed directory (app/)
+      {
+        filename: "/repo/src/app/dashboard/page.tsx",
+        code: "const x = <div className='glass-overlay'>overlay</div>;",
+      },
+      // Glass in allowed file (Dialog.tsx)
+      {
+        filename: "/repo/src/components/ui/Dialog.tsx",
+        code: "const x = <div className='glass-floating'>dialog</div>;",
+      },
+      // Glass in allowed file (Card.tsx)
+      {
+        filename: "/repo/src/components/ui/Card.tsx",
+        code: "const x = <div className='glass-panel'>card</div>;",
+      },
+      // Glass in allowed file (ToolCallCard.tsx)
+      {
+        filename: "/repo/src/components/ui/ToolCallCard.tsx",
+        code: "const x = <div className='glass-panel'>tool</div>;",
+      },
+      // Glass in test file (always exempt)
+      {
+        filename: "/repo/src/components/ui/Sidebar.test.tsx",
+        code: "const x = <div className='glass-panel'>test</div>;",
+      },
+      // No glass classes (always valid)
+      {
+        filename: "/repo/src/components/ui/Sidebar.tsx",
+        code: "const x = <div className='bg-surface p-4'>sidebar</div>;",
+      },
+      // Glass in cva() call in allowed file
+      {
+        filename: "/repo/src/components/ui/Button.tsx",
+        code: "const v = cva('glass-panel rounded-lg');",
+      },
+    ],
+    invalid: [
+      // Glass in className on unregistered UI component
+      {
+        filename: "/repo/src/components/ui/Sidebar.tsx",
+        code: "const x = <div className='glass-panel'>sidebar</div>;",
+        errors: [{ message: /glass-panel.*not allowed/i }],
+      },
+      // Glass in cn() call on unregistered component
+      {
+        filename: "/repo/src/components/ui/Tabs.tsx",
+        code: "const x = <div className={cn('glass-floating', 'p-4')}>tabs</div>;",
+        errors: [{ message: /glass-floating.*not allowed/i }],
+      },
+      // Glass in cva() call on unregistered component
+      {
+        filename: "/repo/src/components/ui/Badge.tsx",
+        code: "const v = cva('glass-overlay rounded');",
+        errors: [{ message: /glass-overlay.*not allowed/i }],
+      },
+      // Glass in file outside all allowed paths
+      {
+        filename: "/repo/src/lib/helpers.tsx",
+        code: "const x = <div className='glass-panel'>helper</div>;",
+        errors: [{ message: /glass-panel.*not allowed/i }],
+      },
+    ],
+  });
+});
+
+// ── React best practices ─────────────────────────────────────────────
+
+describe("react best practice rules", () => {
+  tester.run(
+    "no-derived-state-via-useeffect",
+    noDerivedStateViaUseeffect,
+    {
+      valid: [
+        {
+          code: `
+          function Component({ items }) {
+            const [count, setCount] = useState(0);
+            const total = useMemo(() => items.length, [items]);
+            return <div>{total}</div>;
+          }
+        `,
+        },
+        {
+          code: `
+          function Component({ id }) {
+            const [data, setData] = useState(null);
+            useEffect(() => {
+              fetch('/api/' + id).then(r => r.json()).then(setData);
+            }, [id]);
+            return <div>{data}</div>;
+          }
+        `,
+        },
+        {
+          code: `
+          function Component({ items }) {
+            const [a, setA] = useState(0);
+            const [b, setB] = useState(0);
+            useEffect(() => {
+              setA(items.length);
+              setB(items.length * 2);
+            }, [items]);
+            return <div>{a} {b}</div>;
+          }
+        `,
+        },
+      ],
+      invalid: [
+        {
+          code: `
+          function Component({ items }) {
+            const [total, setTotal] = useState(0);
+            useEffect(() => setTotal(items.length), [items]);
+            return <div>{total}</div>;
+          }
+        `,
+          errors: [{ message: /Avoid deriving state via useEffect/i }],
+        },
+        {
+          code: `
+          function Component({ items }) {
+            const [total, setTotal] = useState(0);
+            useEffect(() => {
+              const len = items.length;
+              setTotal(len);
+            }, [items]);
+            return <div>{total}</div>;
+          }
+        `,
+          errors: [{ message: /Avoid deriving state via useEffect/i }],
+        },
+      ],
+    },
+  );
+
+  tester.run(
+    "require-usesyncexternalstore-for-subscriptions",
+    requireUsesyncexternalstoreForSubscriptions,
+    {
+      valid: [
+        {
+          code: `
+          function Component() {
+            const value = useSyncExternalStore(store.subscribe, store.getSnapshot);
+            return <div>{value}</div>;
+          }
+        `,
+        },
+        {
+          code: `
+          function Component() {
+            useEffect(() => {
+              console.log('mounted');
+              return () => console.log('unmounted');
+            }, []);
+          }
+        `,
+        },
+        {
+          code: `
+          function Component() {
+            useEffect(() => {
+              window.addEventListener('resize', handler);
+            }, []);
+          }
+        `,
+        },
+      ],
+      invalid: [
+        {
+          code: `
+          function Component() {
+            useEffect(() => {
+              window.addEventListener('resize', handler);
+              return () => {
+                window.removeEventListener('resize', handler);
+              };
+            }, []);
+          }
+        `,
+          errors: [{ message: /useSyncExternalStore/i }],
+        },
+        {
+          code: `
+          function Component() {
+            useEffect(() => {
+              store.subscribe(handler);
+              return () => {
+                store.unsubscribe(handler);
+              };
+            }, []);
+          }
+        `,
+          errors: [{ message: /useSyncExternalStore/i }],
+        },
+        {
+          code: `
+          function Component() {
+            useEffect(() => {
+              emitter.on('event', handler);
+              return () => {
+                emitter.off('event', handler);
+              };
+            }, []);
+          }
+        `,
+          errors: [{ message: /useSyncExternalStore/i }],
+        },
+      ],
+    },
+  );
+
+  tester.run("no-object-in-effect-deps", noObjectInEffectDeps, {
+    valid: [
+      { code: `useEffect(() => {}, [id, name, count]);` },
+      { code: `useEffect(() => {}, [options]);` },
+      { code: `useEffect(() => {});` },
+    ],
+    invalid: [
+      {
+        code: `useEffect(() => {}, [{ key: 'value' }]);`,
+        errors: [{ message: /object or array literals/i }],
+      },
+      {
+        code: `useEffect(() => {}, [[1, 2, 3]]);`,
+        errors: [{ message: /object or array literals/i }],
+      },
+      {
+        code: `useEffect(() => {}, [id, { a: 1 }]);`,
+        errors: [{ message: /object or array literals/i }],
+      },
+    ],
+  });
+
+  tester.run(
+    "require-usememo-for-render-filter-sort",
+    requireUsememoForRenderFilterSort,
+    {
+      valid: [
+        {
+          code: `
+          function MyComponent({ items }) {
+            const filtered = useMemo(() => items.filter(x => x.active), [items]);
+            return <div>{filtered}</div>;
+          }
+        `,
+        },
+        {
+          code: `
+          function MyComponent({ items }) {
+            const handleClick = () => {
+              const sorted = items.sort((a, b) => a - b);
+            };
+            return <div onClick={handleClick} />;
+          }
+        `,
+        },
+        {
+          code: `
+          const sorted = items.filter(x => x.active);
+          function helper() {
+            return data.sort((a, b) => a - b);
+          }
+        `,
+        },
+        {
+          code: `
+          function MyComponent({ items }) {
+            return <div onClick={() => items.filter(x => x)} />;
+          }
+        `,
+        },
+      ],
+      invalid: [
+        {
+          code: `
+          function MyComponent({ items }) {
+            const active = items.filter(x => x.active);
+            return <div>{active}</div>;
+          }
+        `,
+          errors: [{ message: /Wrap .filter\(\) in useMemo/i }],
+        },
+        {
+          code: `
+          function MyComponent({ items }) {
+            const sorted = items.sort((a, b) => a - b);
+            return <div>{sorted}</div>;
+          }
+        `,
+          errors: [{ message: /Wrap .sort\(\) in useMemo/i }],
+        },
+        {
+          code: `
+          const MyComponent = ({ items }) => {
+            const item = items.find(x => x.id === 1);
+            return <div>{item}</div>;
+          };
+        `,
+          errors: [{ message: /Wrap .find\(\) in useMemo/i }],
+        },
+      ],
+    },
+  );
+
+  tester.run(
+    "require-loading-fallback-on-dynamic",
+    requireLoadingFallbackOnDynamic,
+    {
+      valid: [
+        {
+          code: `
+          import dynamic from 'next/dynamic';
+          const Chart = dynamic(() => import('./Chart'), { loading: () => <p>Loading...</p> });
+        `,
+        },
+        { code: `const Chart = dynamic(() => import('./Chart'));` },
+        {
+          code: `
+          import something from 'other-lib';
+          const x = something(() => import('./Chart'));
+        `,
+        },
+      ],
+      invalid: [
+        {
+          code: `
+          import dynamic from 'next/dynamic';
+          const Chart = dynamic(() => import('./Chart'));
+        `,
+          errors: [{ message: /must include a loading fallback/i }],
+        },
+        {
+          code: `
+          import dynamic from 'next/dynamic';
+          const Chart = dynamic(() => import('./Chart'), { ssr: false });
+        `,
+          errors: [{ message: /must include a loading fallback/i }],
+        },
+      ],
+    },
+  );
+
+  tester.run(
+    "no-inline-default-nonprimitive-props",
+    noInlineDefaultNonprimitiveProps,
+    {
+      valid: [
+        {
+          code: `
+          function MyComponent({ count = 0, name = 'default', active = true }) {
+            return <div>{count} {name}</div>;
+          }
+        `,
+        },
+        {
+          code: `
+          const DEFAULT_ITEMS = [];
+          function MyComponent({ items = DEFAULT_ITEMS }) {
+            return <div>{items}</div>;
+          }
+        `,
+        },
+        {
+          code: `
+          function processData({ items = [], config = {} }) {
+            return items;
+          }
+        `,
+        },
+      ],
+      invalid: [
+        {
+          code: `
+          function MyComponent({ items = [] }) {
+            return <div>{items}</div>;
+          }
+        `,
+          errors: [{ message: /inline non-primitive default props/i }],
+        },
+        {
+          code: `
+          function MyComponent({ config = {} }) {
+            return <div />;
+          }
+        `,
+          errors: [{ message: /inline non-primitive default props/i }],
+        },
+        {
+          code: `
+          const MyComponent = ({ cache = new Map() }) => {
+            return <div />;
+          };
+        `,
+          errors: [{ message: /inline non-primitive default props/i }],
+        },
+      ],
+    },
+  );
+
+  tester.run("no-barrel-imports", noBarrelImports, {
+    valid: [
+      { code: `import { Button } from './components/Button.tsx';` },
+      { code: `import React from 'react';` },
+      { code: `import { motion } from 'framer-motion';` },
+      { code: `import { cn } from '@/lib/utils.ts';` },
+    ],
+    invalid: [
+      {
+        code: `import { Button } from './components/index.js';`,
+        errors: [{ message: /barrel.*import/i }],
+      },
+      {
+        code: `import { hooks } from './hooks/index';`,
+        errors: [{ message: /barrel.*import/i }],
+      },
+    ],
+  });
+
+  tester.run("no-mutating-sort-on-state", noMutatingSortOnState, {
+    valid: [
+      {
+        code: `
+          function MyComponent() {
+            const [items, setItems] = useState([]);
+            const sorted = [...items].sort((a, b) => a - b);
+            return <div>{sorted}</div>;
+          }
+        `,
+      },
+      {
+        code: `
+          function MyComponent() {
+            const [items, setItems] = useState([]);
+            const sorted = items.toSorted((a, b) => a - b);
+            return <div>{sorted}</div>;
+          }
+        `,
+      },
+      {
+        code: `
+          function MyComponent() {
+            const local = [3, 1, 2];
+            local.sort();
+            return <div />;
+          }
+        `,
+      },
+    ],
+    invalid: [
+      {
+        code: `
+          function MyComponent() {
+            const [items, setItems] = useState([]);
+            const sorted = items.sort((a, b) => a - b);
+            return <div>{sorted}</div>;
+          }
+        `,
+        errors: [{ message: /Do not call .sort\(\) on state or props/i }],
+      },
+      {
+        code: `
+          function MyComponent() {
+            const [items, setItems] = useState([]);
+            const reversed = items.reverse();
+            return <div>{reversed}</div>;
+          }
+        `,
+        errors: [{ message: /Do not call .reverse\(\) on state or props/i }],
+      },
+      {
+        code: `
+          function MyComponent({ items }) {
+            const sorted = items.sort();
+            return <div>{sorted}</div>;
+          }
+        `,
+        errors: [{ message: /Do not call .sort\(\) on state or props/i }],
+      },
+    ],
+  });
+
+  tester.run("require-lazy-state-init", requireLazyStateInit, {
+    valid: [
+      { code: `const [count, setCount] = useState(0);` },
+      { code: `const [data, setData] = useState(() => JSON.parse(stored));` },
+      { code: `const [value, setValue] = useState(initialValue);` },
+      { code: `const [value, setValue] = useState();` },
+    ],
+    invalid: [
+      {
+        code: `const [data, setData] = useState(JSON.parse(localStorage.getItem('data')));`,
+        errors: [{ message: /lazy state initialization/i }],
+      },
+      {
+        code: `const [cache, setCache] = useState(new Map());`,
+        errors: [{ message: /lazy state initialization/i }],
+      },
+      {
+        code: `const [now, setNow] = useState(new Date());`,
+        errors: [{ message: /lazy state initialization/i }],
+      },
+    ],
+  });
+
+  tester.run("no-falsy-and-render", noFalsyAndRender, {
+    valid: [
+      { code: `const x = <div>{count > 0 && <Child />}</div>;` },
+      { code: `const x = <div>{!!items && <Child />}</div>;` },
+      { code: `const x = <div>{Boolean(items) && <Child />}</div>;` },
+      { code: `const x = <div>{isVisible && <Child />}</div>;` },
+      { code: `const x = <div>{hasItems && <Child />}</div>;` },
+    ],
+    invalid: [
+      {
+        code: `const x = <div>{items && <Child />}</div>;`,
+        errors: [{ message: /potentially non-boolean values/i }],
+      },
+      {
+        code: `const x = <div>{items.length && <Child />}</div>;`,
+        errors: [{ message: /potentially non-boolean values/i }],
+      },
+      {
+        code: `const x = <div>{data.count && <Child />}</div>;`,
+        errors: [{ message: /potentially non-boolean values/i }],
+      },
+      {
+        code: `const x = <div>{getCount() && <Child />}</div>;`,
+        errors: [{ message: /potentially non-boolean values/i }],
+      },
+    ],
+  });
+
+  tester.run("no-regexp-in-render", noRegexpInRender, {
+    valid: [
+      {
+        code: `
+          const pattern = new RegExp('abc');
+          function MyComponent() { return <div />; }
+        `,
+      },
+      {
+        code: `
+          function MyComponent({ pattern }) {
+            const regex = useMemo(() => new RegExp(pattern), [pattern]);
+            return <div />;
+          }
+        `,
+      },
+      {
+        code: `
+          function MyComponent() {
+            const check = useCallback(() => {
+              const re = new RegExp('test');
+              return re.test('abc');
+            }, []);
+            return <div />;
+          }
+        `,
+      },
+      {
+        code: `
+          function MyComponent() {
+            function handleClick() {
+              const re = new RegExp('test');
+            }
+            return <div onClick={handleClick} />;
+          }
+        `,
+      },
+      {
+        code: `
+          function helper() {
+            const re = new RegExp('test');
+            return re;
+          }
+        `,
+      },
+    ],
+    invalid: [
+      {
+        code: `
+          function MyComponent() {
+            const pattern = new RegExp('abc');
+            return <div />;
+          }
+        `,
+        errors: [{ message: /Avoid creating RegExp inside component body/i }],
+      },
+      {
+        code: `
+          const MyComponent = () => {
+            const re = new RegExp('test', 'i');
+            return <div />;
+          };
+        `,
+        errors: [{ message: /Avoid creating RegExp inside component body/i }],
+      },
+    ],
+  });
+});
+
+// ── Next.js navigation rules ─────────────────────────────────────────
+
+describe("next.js rules", () => {
+  tester.run("no-redirect-in-try-catch", noRedirectInTryCatch, {
+    valid: [
+      {
+        code: `
+          import { redirect } from 'next/navigation';
+          async function action() {
+            redirect('/home');
+          }
+        `,
+      },
+      {
+        code: `
+          import { redirect } from 'next/navigation';
+          import { unstable_rethrow } from 'next/navigation';
+          async function action() {
+            try {
+              redirect('/home');
+            } catch (e) {
+              unstable_rethrow(e);
+              console.error(e);
+            }
+          }
+        `,
+      },
+      {
+        code: `
+          async function action() {
+            try {
+              doSomething();
+            } catch (e) {
+              console.error(e);
+            }
+          }
+        `,
+      },
+    ],
+    invalid: [
+      {
+        code: `
+          import { redirect } from 'next/navigation';
+          async function action() {
+            try {
+              redirect('/home');
+            } catch (e) {
+              console.error(e);
+            }
+          }
+        `,
+        errors: [{ message: /redirect.*silently caught/i }],
+      },
+      {
+        code: `
+          import { notFound } from 'next/navigation';
+          async function action() {
+            try {
+              notFound();
+            } catch (e) {
+              return null;
+            }
+          }
+        `,
+        errors: [{ message: /notFound.*silently caught/i }],
+      },
+    ],
+  });
+
+  tester.run("no-framer-motion-import", noFramerMotionImport, {
+    valid: [
+      { code: `import { motion } from 'motion/react';` },
+      { code: `import { AnimatePresence } from 'motion/react';` },
+    ],
+    invalid: [
+      {
+        code: `import { motion } from 'framer-motion';`,
+        output: `import { motion } from 'motion/react';`,
+        errors: [{ message: /motion\/react.*instead.*framer-motion/i }],
+      },
+    ],
+  });
+
+  tester.run("require-sizes-on-fill-image", requireSizesOnFillImage, {
+    valid: [
+      {
+        code: `
+          import Image from 'next/image';
+          const x = <Image fill sizes="(max-width: 768px) 100vw, 50vw" src="/hero.jpg" alt="" />;
+        `,
+      },
+      {
+        code: `
+          import Image from 'next/image';
+          const x = <Image src="/hero.jpg" width={400} height={300} alt="" />;
+        `,
+      },
+      {
+        code: `
+          const x = <img src="/hero.jpg" />;
+        `,
+      },
+    ],
+    invalid: [
+      {
+        code: `
+          import Image from 'next/image';
+          const x = <Image fill src="/hero.jpg" alt="" />;
+        `,
+        errors: [{ message: /sizes.*prop/i }],
+      },
+    ],
+  });
+
+  tester.run("no-unstable-cache", noUnstableCache, {
+    valid: [
+      { code: `import { cacheLife } from 'next/cache';` },
+      { code: `import { revalidateTag } from 'next/cache';` },
+    ],
+    invalid: [
+      {
+        code: `import { unstable_cache } from 'next/cache';`,
+        errors: [{ message: /unstable_cache is deprecated/i }],
+      },
+    ],
+  });
+
+  tester.run("no-deprecated-segment-config", noDeprecatedSegmentConfig, {
+    valid: [
+      { code: `export const metadata = { title: 'Home' };` },
+      {
+        code: `export const revalidate = 60;`,
+        options: [{ ignore: ["revalidate"] }],
+      },
+    ],
+    invalid: [
+      {
+        code: `export const dynamic = 'force-dynamic';`,
+        errors: [{ message: /dynamic.*deprecated/i }],
+      },
+      {
+        code: `export const revalidate = 60;`,
+        errors: [{ message: /revalidate.*deprecated/i }],
+      },
+      {
+        code: `export const fetchCache = 'force-no-store';`,
+        errors: [{ message: /fetchCache.*deprecated/i }],
+      },
+    ],
+  });
+
+  tester.run("no-runtime-api-in-use-cache", noRuntimeApiInUseCache, {
+    valid: [
+      {
+        code: `
+          async function getData() {
+            const c = cookies();
+            return c.get('session');
+          }
+        `,
+      },
+      {
+        code: `
+          'use cache';
+          async function getData() {
+            return { value: 42 };
+          }
+        `,
+      },
+    ],
+    invalid: [
+      {
+        code: `
+          'use cache';
+          async function getData() {
+            const c = cookies();
+            return c.get('session');
+          }
+        `,
+        errors: [{ message: /cookies.*cannot be called.*use cache/i }],
+      },
+      {
+        code: `
+          async function getData() {
+            'use cache';
+            const h = headers();
+            return h.get('x-custom');
+          }
+        `,
+        errors: [{ message: /headers.*cannot be called.*use cache/i }],
+      },
+    ],
+  });
+});
+
+// ── Effect hygiene rules ──────────────────────────────────────────────
+
+describe("effect hygiene rules", () => {
+  tester.run("require-effect-cleanup", requireEffectCleanup, {
+    valid: [
+      {
+        code: `
+          useEffect(() => {
+            window.addEventListener('resize', handler);
+            return () => window.removeEventListener('resize', handler);
+          }, []);
+        `,
+      },
+      {
+        code: `
+          useEffect(() => {
+            console.log('mounted');
+          }, []);
+        `,
+      },
+      {
+        code: `
+          useEffect(() => {
+            const id = setInterval(tick, 1000);
+            return () => clearInterval(id);
+          }, []);
+        `,
+      },
+    ],
+    invalid: [
+      {
+        code: `
+          useEffect(() => {
+            window.addEventListener('resize', handler);
+          }, []);
+        `,
+        errors: [{ message: /cleanup function/i }],
+      },
+      {
+        code: `
+          useEffect(() => {
+            const id = setInterval(tick, 1000);
+          }, []);
+        `,
+        errors: [{ message: /cleanup function/i }],
+      },
+      {
+        code: `
+          useEffect(() => {
+            const id = setTimeout(doWork, 500);
+          }, []);
+        `,
+        errors: [{ message: /cleanup function/i }],
+      },
+      {
+        code: `
+          useEffect(() => {
+            observer.observe(element);
+          }, []);
+        `,
+        errors: [{ message: /cleanup function/i }],
+      },
+    ],
+  });
+
+  tester.run("require-passive-event-listener", requirePassiveEventListener, {
+    valid: [
+      {
+        code: `element.addEventListener('touchstart', handler, { passive: true });`,
+      },
+      {
+        code: `element.addEventListener('click', handler);`,
+      },
+      {
+        code: `element.addEventListener('wheel', handler, { capture: true, passive: true });`,
+      },
+    ],
+    invalid: [
+      {
+        code: `element.addEventListener('touchstart', handler);`,
+        output: `element.addEventListener('touchstart', handler, { passive: true });`,
+        errors: [{ message: /passive.*true/i }],
+      },
+      {
+        code: `element.addEventListener('wheel', handler, { capture: true });`,
+        output: `element.addEventListener('wheel', handler, { capture: true, passive: true });`,
+        errors: [{ message: /passive.*true/i }],
+      },
+    ],
+  });
+});
+
+// ── Animation rules ───────────────────────────────────────────────────
+
+describe("animation rules", () => {
+  tester.run("no-layout-property-animation", noLayoutPropertyAnimation, {
+    valid: [
+      {
+        code: `const x = <motion.div animate={{ opacity: 1, x: 0, scale: 1 }} />;`,
+      },
+      {
+        code: `const x = <motion.div whileHover={{ scale: 1.05 }} />;`,
+      },
+      {
+        code: `const x = <div style={{ width: '100px' }} />;`,
+      },
+    ],
+    invalid: [
+      {
+        code: `const x = <motion.div animate={{ width: '100px' }} />;`,
+        errors: [{ message: /Avoid animating 'width'/i }],
+      },
+      {
+        code: `const x = <motion.div whileHover={{ height: 200, opacity: 1 }} />;`,
+        errors: [{ message: /Avoid animating 'height'/i }],
+      },
+      {
+        code: `const x = <motion.div initial={{ marginTop: 0 }} />;`,
+        errors: [{ message: /Avoid animating 'marginTop'/i }],
+      },
+      {
+        code: `const x = <motion.div animate={{ left: 0, top: 0 }} />;`,
+        errors: [
+          { message: /Avoid animating 'left'/i },
+          { message: /Avoid animating 'top'/i },
+        ],
+      },
+    ],
+  });
+});
+
+// ── Server action security rules ──────────────────────────────────────
+
+describe("server action security rules", () => {
+  tester.run("require-auth-in-server-action", requireAuthInServerAction, {
+    valid: [
+      {
+        code: `
+          'use server';
+          export async function createPost(data) {
+            const session = await auth();
+            return { ok: true };
+          }
+        `,
+      },
+      {
+        code: `
+          'use server';
+          export async function deleteItem(id) {
+            await requireAuth();
+            return { deleted: true };
+          }
+        `,
+      },
+      {
+        code: `
+          export async function helper(data) {
+            return data;
+          }
+        `,
+      },
+      {
+        code: `
+          'use server';
+          export async function deleteUser(id) {
+            await requireAdmin();
+            return { deleted: id };
+          }
+        `,
+      },
+      {
+        code: `
+          'use server';
+          export async function updateSettings(data) {
+            checkRole('admin');
+            return { ok: true };
+          }
+        `,
+      },
+      {
+        code: `
+          'use server';
+          export async function createPost(data) {
+            await myCustomGuard();
+            return { ok: true };
+          }
+        `,
+        options: [{ authFunctions: ["myCustomGuard"] }],
+      },
+      {
+        code: `
+          'use server';
+          export async function getAuthSession() {
+            return null;
+          }
+        `,
+        filename: "/app/lib/auth.ts",
+      },
+      {
+        code: `
+          'use server';
+          export async function requireAdminRole() {
+            return null;
+          }
+        `,
+        filename: "/app/lib/admin.ts",
+      },
+    ],
+    invalid: [
+      {
+        code: `
+          'use server';
+          export async function createPost(data) {
+            return { ok: true };
+          }
+        `,
+        errors: [{ message: /should verify authentication/i }],
+      },
+      {
+        code: `
+          'use server';
+          export const deleteItem = async (id) => {
+            return { deleted: id };
+          };
+        `,
+        errors: [{ message: /should verify authentication/i }],
+      },
+      {
+        code: `
+          'use server';
+          export async function doWork(data) {
+            return { ok: true };
+          }
+        `,
+        options: [{ authFunctions: ["myCustomGuard"] }],
+        errors: [{ message: /should verify authentication/i }],
+      },
+      {
+        code: `
+          'use server';
+          export async function createPost(data) {
+            await requireAuth();
+            return { ok: true };
+          }
+        `,
+        options: [{ authFunctions: ["myCustomGuard"], replaceAuthFunctions: true }],
+        errors: [{ message: /should verify authentication/i }],
+      },
+    ],
+  });
+});
+
+// ── Dashboard pattern rules ──────────────────────────────────────────
+
+describe("dashboard pattern rules", () => {
+  tester.run("no-raw-recharts-import", noRawRechartsImport, {
+    valid: [
+      {
+        filename: "/repo/src/components/ui/charts/AreaChart.tsx",
+        code: "import { AreaChart } from 'recharts'; export default AreaChart;",
+      },
+      {
+        filename: "/repo/src/components/ui/Chart.tsx",
+        code: "import { ResponsiveContainer } from 'recharts'; export default ResponsiveContainer;",
+      },
+      {
+        filename: "/repo/src/app/dashboard/page.tsx",
+        code: "import { AreaChart } from '@/components/ui/charts/AreaChart';",
+      },
+    ],
+    invalid: [
+      {
+        filename: "/repo/src/app/dashboard/page.tsx",
+        code: "import { AreaChart } from 'recharts'; const x = AreaChart;",
+        errors: [{ message: /chart wrappers enforce consistent styling/i }],
+      },
+      {
+        filename: "/repo/src/components/blocks/StatsBlock.tsx",
+        code: "import { BarChart } from 'recharts'; const x = BarChart;",
+        errors: [{ message: /chart wrappers enforce consistent styling/i }],
+      },
+    ],
+  });
+
+  tester.run("require-chart-empty-handler", requireChartEmptyHandler, {
+    valid: [
+      {
+        code: `
+          import { AreaChart } from '@/components/ui/charts/AreaChart';
+          function Dashboard({ data }) {
+            return data.length > 0 ? <AreaChart data={data} /> : <Empty />;
+          }
+        `,
+      },
+      {
+        code: `
+          import { BarChart } from '@/components/ui/charts/BarChart';
+          function Dashboard({ data }) {
+            return data.length > 0 && <BarChart data={data} />;
+          }
+        `,
+      },
+      {
+        code: `
+          import { Button } from '@/components/ui/Button';
+          function Dashboard() {
+            return <Button>Click</Button>;
+          }
+        `,
+      },
+    ],
+    invalid: [
+      {
+        code: `
+          import { AreaChart } from '@/components/ui/charts/AreaChart';
+          function Dashboard({ data }) {
+            return <AreaChart data={data} />;
+          }
+        `,
+        errors: [{ message: /AreaChart.*must handle empty data/i }],
+      },
+      {
+        code: `
+          import { PieChart } from '@/components/ui/charts/PieChart';
+          function Dashboard({ data }) {
+            return <div><PieChart data={data} /></div>;
+          }
+        `,
+        errors: [{ message: /PieChart.*must handle empty data/i }],
+      },
+    ],
+  });
+
+  tester.run("no-arbitrary-chart-color", noArbitraryChartColor, {
+    valid: [
+      {
+        code: `
+          import { AreaChart } from '@/components/ui/charts/AreaChart';
+          const config = { color: 'rgb(var(--chart-1))' };
+        `,
+      },
+      {
+        code: `
+          import { BarChart } from '@/components/ui/charts/BarChart';
+          const config = { color: 'var(--color-chart-primary)' };
+        `,
+      },
+      {
+        code: `
+          const style = { color: '#ff0000' };
+        `,
+      },
+    ],
+    invalid: [
+      {
+        code: `
+          import { AreaChart } from '@/components/ui/charts/AreaChart';
+          const config = { color: '#3b82f6' };
+        `,
+        errors: [{ message: /semantic tokens/i }],
+      },
+      {
+        code: `
+          import { BarChart } from '@/components/ui/charts/BarChart';
+          const config = { color: 'rgb(59, 130, 246)' };
+        `,
+        errors: [{ message: /semantic tokens/i }],
+      },
+      {
+        code: `
+          import { LineChart } from '@/components/ui/charts/LineChart';
+          const config = { color: 'red' };
+        `,
+        errors: [{ message: /semantic tokens/i }],
+      },
+    ],
+  });
+
+  tester.run("require-dashboard-loading-skeleton", requireDashboardLoadingSkeleton, {
+    valid: [
+      {
+        filename: "/repo/src/app/dashboard/page.tsx",
+        code: `
+          import { AreaChart } from '@/components/ui/charts/AreaChart';
+          import { Skeleton } from '@/components/ui/Skeleton';
+          function Dashboard() { return <AreaChart />; }
+        `,
+      },
+      {
+        filename: "/repo/src/app/dashboard/page.tsx",
+        code: `
+          import { Button } from '@/components/ui/Button';
+          function Dashboard() { return <Button>Click</Button>; }
+        `,
+      },
+      {
+        filename: "/repo/src/app/settings/page.tsx",
+        code: `
+          import { AreaChart } from '@/components/ui/charts/AreaChart';
+          function Settings() { return <AreaChart />; }
+        `,
+      },
+    ],
+    invalid: [
+      {
+        filename: "/repo/src/app/dashboard/page.tsx",
+        code: `
+          import { AreaChart } from '@/components/ui/charts/AreaChart';
+          function Dashboard() { return <AreaChart />; }
+        `,
+        errors: [{ message: /must import 'Skeleton'/i }],
+      },
+      {
+        filename: "/repo/src/app/(dashboard)/analytics/page.tsx",
+        code: `
+          import { MetricCard } from '@/components/ui/MetricCard';
+          import { DataTable } from '@/components/ui/DataTable';
+          function Analytics() { return <div><MetricCard /><DataTable /></div>; }
+        `,
+        errors: [{ message: /must import 'Skeleton'/i }],
+      },
+    ],
+  });
+
+  tester.run("require-stagger-on-metric-grid", requireStaggerOnMetricGrid, {
+    valid: [
+      {
+        code: `
+          function Dashboard() {
+            return (
+              <StaggerChildren>
+                <div className="grid grid-cols-3 gap-4">
+                  <MetricCard>A</MetricCard>
+                  <MetricCard>B</MetricCard>
+                  <MetricCard>C</MetricCard>
+                </div>
+              </StaggerChildren>
+            );
+          }
+        `,
+      },
+      {
+        code: `
+          function Dashboard() {
+            return (
+              <div className="grid grid-cols-2 gap-4">
+                <MetricCard>A</MetricCard>
+                <MetricCard>B</MetricCard>
+              </div>
+            );
+          }
+        `,
+      },
+      {
+        code: `
+          function Dashboard() {
+            return (
+              <div className="grid grid-cols-3 gap-4">
+                <div>A</div>
+                <div>B</div>
+                <div>C</div>
+              </div>
+            );
+          }
+        `,
+      },
+      {
+        code: `
+          function Dashboard() {
+            return (
+              <div className="grid grid-cols-3 gap-4">
+                <Card>A</Card>
+                <Card>B</Card>
+                <Card>C</Card>
+              </div>
+            );
+          }
+        `,
+      },
+    ],
+    invalid: [
+      {
+        code: `
+          function Dashboard() {
+            return (
+              <div className="grid grid-cols-3 gap-4">
+                <MetricCard>A</MetricCard>
+                <MetricCard>B</MetricCard>
+                <MetricCard>C</MetricCard>
+              </div>
+            );
+          }
+        `,
+        errors: [{ message: /StaggerChildren.*entrance animation/i }],
+      },
+      {
+        code: `
+          function Dashboard() {
+            return (
+              <div className="grid grid-cols-4 gap-4">
+                <MetricCard>A</MetricCard>
+                <MetricCard>B</MetricCard>
+                <MetricCard>C</MetricCard>
+                <MetricCard>D</MetricCard>
+              </div>
+            );
+          }
+        `,
+        errors: [{ message: /StaggerChildren.*entrance animation/i }],
+      },
+    ],
+  });
+
+  tester.run("no-low-contrast-text-opacity", noLowContrastTextOpacity, {
+    valid: [
+      { code: "const x = <div className='text-text-primary opacity-70' />;" },
+      { code: "const x = <div className='text-text-tertiary' />;" },
+      { code: "const x = <div className='opacity-50' />;" },
+      { code: "const x = <div className='text-text-primary' />;" },
+      { code: "const x = <div className='text-text-secondary hover:opacity-100' />;" },
+    ],
+    invalid: [
+      {
+        code: "const x = <div className='text-text-tertiary opacity-50' />;",
+        errors: [{ message: /Low-contrast text.*text-text-tertiary.*opacity-50.*WCAG/ }],
+      },
+      {
+        code: "const x = <div className='text-text-secondary opacity-30' />;",
+        errors: [{ message: /Low-contrast text.*text-text-secondary.*opacity-30.*WCAG/ }],
+      },
+      {
+        code: "const x = <div className='text-disabled-foreground opacity-50' />;",
+        errors: [{ message: /Low-contrast text.*text-disabled-foreground.*opacity-50.*WCAG/ }],
+      },
+      {
+        code: "const x = cn('text-text-tertiary opacity-50');",
+        errors: [{ message: /Low-contrast text/ }],
+      },
+    ],
+  });
+
+  tester.run("require-sidebar-trigger", requireSidebarTrigger, {
+    valid: [
+      {
+        code: "import { SidebarProvider, SidebarTrigger } from '@/components/ui/Sidebar'; const x = <SidebarProvider><SidebarTrigger /></SidebarProvider>;",
+      },
+      {
+        code: "import { SidebarTrigger, SidebarProvider } from '@/components/ui/Sidebar'; const x = <SidebarProvider><SidebarTrigger /></SidebarProvider>;",
+      },
+      {
+        code: "import { SidebarMenu } from '@/components/ui/Sidebar'; const x = <SidebarMenu />;",
+      },
+      {
+        code: "import { useState } from 'react'; const x = useState();",
+      },
+      {
+        // Test files are exempt
+        filename: "/repo/src/components/ui/Sidebar.test.tsx",
+        code: "import { SidebarProvider } from '@/components/ui/Sidebar'; const x = <SidebarProvider>test</SidebarProvider>;",
+      },
+      {
+        // The Sidebar component source itself is exempt
+        filename: "/repo/src/components/ui/Sidebar.tsx",
+        code: "import { SidebarProvider } from '@/components/ui/Sidebar'; const x = <SidebarProvider>internal</SidebarProvider>;",
+      },
+    ],
+    invalid: [
+      {
+        code: "import { SidebarProvider } from '@/components/ui/Sidebar'; const x = <SidebarProvider>content</SidebarProvider>;",
+        errors: [{ message: /SidebarTrigger/ }],
+      },
+      {
+        code: "import { SidebarProvider, SidebarContent } from '@/components/ui/Sidebar'; const x = <SidebarProvider><SidebarContent /></SidebarProvider>;",
+        errors: [{ message: /SidebarTrigger/ }],
+      },
+    ],
+  });
+});