No-Jira - /doctor ran on mpdx-react codebase

.claude/rules/code-review.md

@@ -1,8 +1,16 @@
+---
+# Loaded on demand by /quality:agent-review (which reads this file directly).
+# The self-referencing glob keeps it out of normal session context — it only
+# auto-loads when this file itself is being edited.
+paths:
+  - '.claude/rules/code-review.md'
+---
+
 # MPDX React — Code Review Rules
 
 Project-specific rules layered on top of `CLAUDE.md` for `/quality:agent-review`.
 
-**Stack:** Next.js 15 (Pages Router) · React 18 · TypeScript · Material UI v5 · Apollo Client (dual GraphQL) · Formik + Yup · Jest + React Testing Library · react-i18next · NextAuth (Okta / API OAuth).
+**Stack:** Next.js 15 (Pages Router) · React 18 · TypeScript · Material UI v7 · Apollo Client (dual GraphQL) · Formik + Yup · Jest + React Testing Library · react-i18next · NextAuth (Okta / API OAuth).
 
 **Key architectural facts the agents should know:**
 
@@ -298,7 +306,7 @@ Project-specific testing conventions added to the Testing agent's universal chec
 
 Project-specific UX/UI conventions layered on top of the UX agent's universal checks.
 
-- **Material UI v5 conventions** — use the `sx` prop for styling; avoid `makeStyles` (legacy v4) and avoid inline `style={...}` (breaks theme-aware styling and responsive breakpoints). Styled components (`styled(...)`) are acceptable for reused patterns
+- **Material UI v7 conventions** — use the `sx` prop for styling; avoid `makeStyles` (legacy v4) and avoid inline `style={...}` (breaks theme-aware styling and responsive breakpoints). Styled components (`styled(...)`) are acceptable for reused patterns
 - **Theme tokens, not hardcoded values** — use `theme.palette.*`, `theme.spacing(n)`, `theme.breakpoints.*`. Flag raw hex colors, pixel values, and magic numbers
 - **Responsive design** — MUI breakpoints (`xs`, `sm`, `md`, `lg`, `xl`) via `sx={{ [theme.breakpoints.down('md')]: {...} }}` or the shorthand `sx={{ display: { xs: 'block', md: 'flex' } }}`. New components must render correctly at mobile breakpoints
 - **Loading states** — every Apollo query must render a loading state (MUI `Skeleton` or `CircularProgress`), not render nothing or flash stale content

CLAUDE.md

@@ -2,52 +2,9 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
-## Development Commands
-
-Essential commands for development:
-
-```bash
-# Package management - ALWAYS use yarn
-yarn                    # Install dependencies
-yarn start             # Start dev server with GraphQL codegen watching
-yarn build             # Production build
-yarn serve             # Serve production build locally
-
-# Code Quality
-yarn lint              # ESLint with auto-fix
-yarn lint:ci          # ESLint without fix (CI)
-yarn lint:ts          # TypeScript type checking
-yarn prettier:write   # Format code with Prettier
-
-# Testing
-yarn test             # Run all tests silently
-yarn test:log         # Run tests with output
-yarn test:watch       # Run tests in watch mode
-yarn localtest        # Run tests in band with verbose output
-yarn test:coverage    # Run tests with coverage report
-
-# GraphQL
-yarn gql              # Generate TypeScript from GraphQL files
-yarn gql:w            # Generate with watch mode (auto-runs with yarn start)
-
-# Translations
-yarn extract          # Extract i18n strings
-yarn crowdin:download # Download translations from CrowdIn
-yarn crowdin:upload   # Upload translations to CrowdIn
-```
-
 ## Architecture Overview
 
-MPDX is a Next.js 15 React application using the Pages Router with TypeScript and Material UI v5.
-
-### Key Technologies
-
-- **Frontend**: Next.js v15, React v18, Material UI v5, TypeScript
-- **Data**: Apollo Client GraphQL with dual GraphQL servers
-- **Forms**: Formik with Yup validation
-- **Testing**: Jest with React Testing Library
-- **i18n**: react-i18next
-- **Authentication**: NextAuth.js with Okta/API OAuth providers
+MPDX is a Next.js 15 React application using the Pages Router with TypeScript and Material UI v7.
 
 ### Dual GraphQL Architecture
 
@@ -58,24 +15,6 @@ The application uses two GraphQL servers:
 
 Apollo Link automatically routes queries based on which fields are requested. Check `src/graphql/rootFields.generated.ts` to see which fields are available from the GraphQL API server.
 
-### Directory Structure
-
-```
-pages/               # Next.js pages (file-based routing)
-├── api/            # API routes and REST proxy GraphQL schemas
-├── accountLists/   # Account list pages
-├── auth/           # Authentication endpoints
-└── [other routes]  # Other application pages
-
-src/
-├── components/     # React components organized by feature
-├── hooks/         # Custom React hooks
-├── lib/           # Apollo client, utility functions, helpers
-└── graphql/       # Generated GraphQL types and schema
-
-public/locales/    # Translation files
-```
-
 ### Component Organization
 
 - Components are organized by feature/page in `src/components/`