What kind of state is this?
├── Server/API data (tasks, users, etc.)
│   ├── Was in Redux → Migrate to React Query (useQuery/useMutation)
│   ├── Was in Context → Migrate to React Query
│   ├── Was in local state (useState + useEffect + fetch) → Migrate to React Query
│   └── Was fetched with Axios/SWR → Replace with apiClient() + React Query
├── Client-only UI state (sidebar open, modal visible, filters)
│   ├── Shared across components → Zustand store in stores/[name]-store.ts
│   └── Local to one component → useState (keep as-is)
└── Unsure?
    └── If it comes from an API → React Query. Otherwise → Zustand or useState.

1. Analyze           — Read ALL legacy code, identify patterns
2. Schemas & Types   — Define Zod schemas, infer types
3. API Layer         — Migrate endpoints to route handlers + ApiResponse<T>
4. Data Fetching     — Replace manual fetch with apiClient/serverApiClient
5. State Management  — Replace Redux/Context with React Query + Zustand
6. Feature Structure — Move files into src/features/[name]/ structure
7. Components        — Migrate to functional, Tailwind, shadcn/ui
8. Pages             — Convert to thin App Router pages + SSR-first
9. Tests             — Create mock factories, write unit + E2E tests
10. Barrel Export    — Create index.ts with full public API
11. Navigation       — Add nav item to shell/constants/navigation.ts
12. Cleanup          — Delete legacy files, unused deps, dead code
13. Verify           — tsc --noEmit, vitest run, next build

// ❌ Before: CSS Modules
import styles from './Card.module.css';
<div className={styles.card}>
  <h2 className={styles.title}>{title}</h2>
</div>

// ✅ After: Tailwind via cn()
import { cn } from "@/lib/utils";
<div className={cn("rounded-lg border bg-card p-6 shadow-sm")}>
  <h2 className={cn("text-lg font-semibold")}>{title}</h2>
</div>

// ❌ Before: Styled Components
const StyledButton = styled.button`
  background: blue;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
`;

// ✅ After: shadcn/ui Button
import { Button } from "@/components/ui/button";
<Button variant="default">Click me</Button>

// ❌ Before: inline styles
<div style={{ display: 'flex', gap: '8px', padding: '16px' }}>

// ✅ After: Tailwind
<div className="flex gap-2 p-4">

// ❌ Before: Class component
class TaskList extends React.Component {
  state = { tasks: [], loading: true };
  componentDidMount() { this.fetchTasks(); }
  render() { ... }
}

// ✅ After: Functional with React Query
"use client";
import { useTasks } from "@/features/tasks";
import { ErrorState, LoadingState, EmptyState } from "@/features/feedback";

function TaskList() {
  const { data: tasks, isLoading, error } = useTasks();
  if (error) return <ErrorState error={error} />;
  if (isLoading) return <LoadingState />;
  if (!tasks?.length) return <EmptyState title="No tasks" />;
  return <ul>...</ul>;
}

// ❌ Before: HOC
const withAuth = (Component) => (props) => {
  const user = useContext(AuthContext);
  if (!user) return <Redirect to="/login" />;
  return <Component {...props} user={user} />;
};

// ✅ After: Hook + middleware protection
// Middleware handles auth redirect — no need for HOC
// Component just uses the session:
import { useSession } from "next-auth/react";

function Dashboard() {
  const { data: session } = useSession();
  // session is guaranteed by middleware
}

// ❌ Before: Pages Router
import { useRouter } from "next/router";
const router = useRouter();
const { id } = router.query;
router.push("/tasks");

// ✅ After: App Router
import { useRouter, useParams } from "next/navigation";
const router = useRouter();
const { id } = useParams();
router.push("/tasks");

// ❌ Before: inconsistent response shapes
app.get('/api/tasks', (req, res) => {
  res.json(tasks);  // raw array
});
app.get('/api/tasks/:id', (req, res) => {
  res.json({ task });  // wrapped differently
});

// ✅ After: consistent ApiResponse<T> envelope
export async function GET() {
  try {
    const tasks = await db.tasks.findMany();
    return Response.json({
      data: tasks,
      error: null,
      meta: { total: tasks.length },
    });
  } catch {
    return Response.json(
      { data: null, error: { message: "Failed to fetch tasks", code: "FETCH_ERROR" } },
      { status: 500 }
    );
  }
}

// ❌ Before: getServerSideProps
export async function getServerSideProps(context) {
  const tasks = await fetchTasks(context.query.filter);
  return { props: { tasks } };
}
export default function TasksPage({ tasks }) {
  return <TaskList tasks={tasks} />;
}

// ✅ After: Server Component + prefetch + Hydrate
import { Hydrate } from "@/lib/hydrate";
import { TaskList, prefetchTasks } from "@/features/tasks";

export default async function TasksPage() {
  await prefetchTasks();
  return (
    <Hydrate>
      <TaskList />
    </Hydrate>
  );
}

// ❌ Before: hardcoded inline
const task = { id: '1', title: 'Test', status: 'pending' };

// ✅ After: mock factory with overrides
import { createMockTask } from "../mocks/task.mock";
const task = createMockTask({ status: "done" });