mui-expert

Scan project for MUI anti-patterns, deprecated APIs, a11y issues, and performance problems

Scaffold MUI X Charts with typed data, responsive layout, custom tooltips, click handlers, theme integration, and composition API patterns.

Scaffold a production-ready MUI component with proper theming, accessibility, and TypeScript types

Build highly creative, fluid MUI widgets that go far beyond standard Material Design. Sparkline-in-grid cells, heatmap DataGrids, real-time WebSocket grids, AI assistant panels, animated wizards, hardware-style switches, interactive tree browsers, bi-directional chart+grid sync, and more.

Scaffold a new MUI X DataGrid component, add features to an existing one, or optimize an existing DataGrid for performance. Includes TypeScript types, server-side integration patterns, and React Query/SWR data fetching.

Scaffold a production-ready design system on MUI with design tokens, theme configuration, TypeScript augmentation, component overrides, CSS variables, dark mode, and optional multi-tenant white-label support.

Interactive app fingerprinting command. Scans the project to detect existing MUI components, pages, routing, data models, and API endpoints. Asks targeted questions about missing functionality. Then systematically builds every MUI component the app needs — layouts, forms, data tables, navigation, feedback, and custom widgets.

Analyze and execute MUI version migrations with codemods and manual transforms

Comprehensive MUI performance analysis covering bundle size, render optimization, DataGrid performance, SSR efficiency, and Emotion caching. Reports issues with severity and provides auto-fix for safe optimizations.

Complete MUI project setup — installs packages, configures the MUI MCP server for Claude Code, sets up LSP/editor tooling, generates starter theme, and configures SSR/bundler integration. One command to go from zero to production-ready MUI.

List available slots for a component, generate custom slot implementations, or migrate from deprecated components/componentsProps to the slots API.

Configure MUI for Next.js SSR with correct Emotion cache setup, CSS variables, flash prevention, and React Server Components compatibility.

Generate a complete MUI createTheme() configuration with palette, typography, spacing, shape, breakpoints, and component overrides — or audit an existing theme file for missing best practices, accessibility issues, and TypeScript gaps.

Generate a complete multi-tenant white-label theming architecture with tenant-specific branding, component variant overrides, dynamic theme loading, and CSS variables support.

Comprehensive accessibility auditor for MUI applications. Checks WCAG 2.1 compliance across all MUI component usage — ARIA attributes, keyboard navigation, color contrast, focus management, screen reader compatibility, and semantic HTML. Produces actionable report with auto-fix support.

Designs scalable, maintainable Material UI theme systems and component libraries. Produces architecture decision records covering token hierarchy, palette structure, typography scale, spacing, breakpoints, dark mode strategy, TypeScript augmentation, and component override patterns.

Designs enterprise-grade design systems built on MUI. Covers design token hierarchies, theme architecture, component library structure, CSS variables strategy, white-label/multi-tenant theming, Pigment CSS migration, and TypeScript augmentation. Produces architecture decisions with implementation blueprints.

Analyzes codebases for MUI version compatibility and executes migrations between MUI v4→v5 or v5→v6. Detects breaking changes, generates a file-by-file migration plan with effort estimates, applies codemods and manual transforms, and verifies results with TypeScript compilation.

Analyzes MUI applications for performance issues including bundle size, render optimization, Emotion overhead, DataGrid performance, and SSR efficiency. Produces prioritized recommendations with estimated impact and auto-applies safe fixes.

Reviews React code that uses Material UI and identifies issues related to best practices, accessibility, performance, and correctness. Produces a categorized report with file:line references and actionable fix code covering imports, theming, styling approach, a11y, performance, component usage, TypeScript typing, DataGrid, and DatePicker patterns.

Specialist in MUI X premium components. Handles advanced DataGrid patterns (server-side data source, row grouping, aggregation, master-detail, Excel export, cell selection, clipboard), Date/Time Pickers (timezone, custom fields, validation, shortcuts), Charts (composition API, custom renderers, dual axes), and Tree View (lazy loading, drag-drop, virtualization).

MUI accessibility patterns, ARIA attributes, and WCAG compliance

Advanced MUI component patterns — Autocomplete (async, virtualized, grouped, createFilterOptions), Stepper (non-linear, vertical, mobile), Popover, Popper, Portal, ClickAwayListener, and complex composition

Top 0.01% MUI patterns — sparkline grid cells, heatmap DataGrids, real-time WebSocket grids, AI assistant, save/restore grid state, bi-directional chart+grid, pivot tables, clipboard paste, progress cells

MUI transition components (Fade, Grow, Slide, Collapse, Zoom), custom transitions, TransitionGroup, and Framer Motion integration

MUI Base (unstyled/headless) components and hooks — useButton, useInput, useMenu, useSlider for building custom UI

MUI X Charts — BarChart, LineChart, PieChart, ScatterChart, composition API, custom axes, tooltips, and responsive patterns

MUI core component patterns and best practices

MUI CSS Variables mode (CssVarsProvider), Pigment CSS zero-runtime engine, and CSS custom properties theming

MUI X DataGrid configuration, server-side integration, and optimization

MUI X Date/Time Pickers setup, configuration, and form integration

MUI ecosystem — FormEngine, react-jsonschema-form, Uniforms, schema-driven forms, Tailwind interop, Framer Motion, and third-party component libraries

Metadata-driven CRUD with MUI X DataGrid + FormEngine — entity metadata model, server-driven UI, column/form generation, shared validation, access control, wizard flows

MUI form patterns with validation and library integration

MUI internationalization, RTL support, locale customization, and bidirectional text

Joy UI — MUI's alternative design system with CSS variables, modern aesthetics, and simpler API

MUI layout components and responsive design patterns

MUI version migration guides — v4→v5 and v5→v6 with codemods and patterns

MUI performance optimization — tree-shaking, bundle size, rendering, SSR

Gantt charts, Kanban boards, scheduling, and resource management libraries that integrate with MUI — SVAR, DHTMLX, Bryntum, Syncfusion, FullCalendar, dnd-kit, and architecture patterns

MUI slots and slotProps API for deep component customization — replacing internal elements, custom renderers, and composition patterns

MUI server-side rendering with Next.js — App Router, Pages Router, RSC compatibility, Emotion cache, and Pigment CSS

MUI sx prop and styled() API for component styling

Testing MUI components with React Testing Library — theme mocking, portal components, DataGrid, DatePicker, and accessibility testing

MUI theming system — createTheme, palette, typography, dark mode, component overrides, TypeScript augmentation, and design tokens

MUI X Tree View — SimpleTreeView, RichTreeView, lazy loading, custom icons, multiselect, drag-and-drop, and virtualization

MUI list virtualization with react-window, react-virtuoso, virtualized Autocomplete, and large dataset rendering patterns

MUI multi-theme and white-label systems — nested ThemeProvider, dynamic theme switching, tenant-specific branding, and theme composition