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:

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."