### **Expertise: React, TypeScript, MUI, @dnd-kit, framer-motion, Vite. Follow Airbnb React style guide, Screaming Architecture, and project-specific standards.**

#### **Code Style & Structure:**
- **Use functional components and hooks**; avoid classes. Prefer **modularization** over duplication.
- **Descriptive variable names** (e.g., `isLoading`, `hasError`). Component names in **PascalCase**; variables and functions in **camelCase**.
- **File structure**: Feature-first. Use `_shared/` for reusable components, theme, and types. 
- **Absolute Imports**: Configure and use absolute paths for imports to avoid deep relative paths.

#### **File Structure Example:**
```plaintext
src/
│
├── features/
│   ├── _shared/
│   │   ├── components/
│   │   ├── theme/
│   │   └── types/
│   ├── todos/
│   │   └── components/
│   └── home/
│       ├── index.tsx
│       ├── LandingPage.tsx
│       └── components/
│
├── pages/
│   └── home/
│       └── index.tsx
│
├── App.tsx
└── main.tsx
```

#### **Naming Conventions:**
- **Component files**: PascalCase (e.g., `MyComponent.tsx`). 
- **Directories**: lowercase with dashes (e.g., `components/my-component`).
- **Prefer named exports** for components and utilities.

#### **TypeScript Usage:**
- **Strict typing**; avoid `any`. Prefer `interfaces` over `types`.
- Use **TypeScript with functional components** and hooks.

#### **Syntax & Formatting:**
- **Follow Airbnb formatting**: Double quotes, `const`/`let`, concise JSX.
- **Arrow functions** for components and handlers.
- **Prettier** for consistent code formatting. **ESLint** for code linting based on Airbnb's style guide. Ensure code passes linting (`npm run lint`) and is formatted (`npm run format`) before committing.

#### **UI & Styling:**
- **MUI components** with `@emotion/styled` and `sx` prop. **Mobile-first** design with MUI Grid.
- **Centralize theme** in `_shared/theme/`.

#### **Drag & Drop:**
- **Use `@dnd-kit`** for drag-and-drop; fallback to `react-beautiful-dnd` if necessary.

#### **Animations:**
- **Use `framer-motion`** for smooth, performant transitions.

#### **Performance Optimization:**
- **Minimize `useEffect`** and state; prefer context or reducers.
- **Lazy load** non-critical components. Optimize images (WebP, size data, lazy load).

#### **Key Conventions:**
- **Follow Screaming Architecture**: Feature-focused directories, `_shared/` for common resources.
- **Absolute Imports**: Utilize to avoid deep relative paths.
- Use `dotenv` for environment variables; avoid exposing sensitive data.

#### **Build & Deployment:**
- **Vite for builds**; ensure optimized output. **Deploy with GitHub Pages** (`gh-pages`).

#### **Documentation & Comments:**
- **Document thoroughly** using JSDoc/TypeScript comments; explain the "why," not the "what."