{"owner":"mui","repo":"material-ui","hasSkills":true,"totalSkillsCount":6,"totalTokensCount":3970,"categories":["root-instruction","claude-rule","mcp-config","marketplace","plugin-manifest","cursor-rule"],"hasMcp":true,"mcpConfig":{"mcpServers":{"material-ui":{"command":"npx","args":["-y","@modelcontextprotocol/server-material-ui"]}}},"found":["AGENTS.md","CLAUDE.md",".cursor/mcp.json",".claude-plugin/marketplace.json",".claude-plugin/plugin.json",".cursorrules (nextjs-material-ui-tailwind-css-cursorrules-prompt.mdc)"],"skills":{"AGENTS.md":"# AGENTS.md\n\nThis file provides guidance for AI agents working with code in this repository.\n\n## Package Manager\n\n**Only pnpm is supported** (yarn/npm will fail). Use the `-F` flag for workspace operations:\n\n```bash\npnpm -F @mui/material add some-package    # Add dependency to a package\npnpm -F @mui/material build               # Build a specific package\n```\n\nNever use `cd` to navigate into package directories for commands.\n\n## Common Commands\n\n### Development\n\n```bash\npnpm install                  # Install deps if necessary\npnpm docs:dev                 # Start docs dev server only\n```\n\n### Building\n\n```bash\npnpm release:build            # Build all packages (except docs)\npnpm docs:build               # Build documentation site\n```\n\n### Testing\n\n```bash\npnpm test:unit                # Run all unit tests (jsdom)\npnpm test:unit ComponentName  # Run tests matching pattern\npnpm test:unit -t \"test name\" # Grep for specific test name\npnpm test:browser             # Run tests in real browsers (Chrome, Firefox, WebKit)\npnpm test:e2e                 # End-to-end tests\npnpm test:regressions         # Visual regression tests\n```\n\n### Code Quality\n\n```bash\npnpm prettier                 # Format staged changes\npnpm eslint                   # Lint with cache\npnpm typescript               # Type check all packages\n```\n\n### API Documentation\n\nAfter changing component props or TypeScript declarations:\n\n```bash\npnpm proptypes && pnpm docs:api\n```\n\n### Docs demos\n\nDemos live next to their page under `docs/data/<product>/components/<component>/demos/<demo-name>/`. Each demo folder contains three files:\n\n- `<ComponentName>.tsx` — the demo source, authored as TypeScript (`.tsx`).\n- `client.ts` — marks the demo's client boundary:\n\n  ```ts\n  'use client';\n\n  import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient';\n\n  export default createDemoClient(import.meta.url);\n  ```\n\n- `index.ts` — wires the demo into the docs pipeline:\n\n  ```ts\n  import { createDemo } from '@mui/internal-core-docs/utils/createDemo';\n  import ClientProvider from './client';\n  import BasicButtons from './BasicButtons';\n\n  export default createDemo(import.meta.url, BasicButtons, { ClientProvider });\n  ```\n\nReference the demo from the page's markdown via the `component` field. Use a `file://` URL with a path relative to the markdown file:\n\n```md\n{{\"component\": \"file://./demos/basic/index.ts\"}}\n```\n\nDemo options (`bg`, `hideToolbar`, `initialExpanded`, `collapseToEmpty`, `isolated`, `iframe`, `maxWidth`, `height`, `disableAd`, `disableLiveEdit`, `hideEditButton`, `aiSuggestion`, `anchorId`; `defaultCodeOpen` is a legacy alias for `initialExpanded`/`collapseToEmpty`) are defined by the `DemoOptions` interface in `packages-internal/core-docs/src/DemoContent/DemoContent.tsx`. Use `{/* @focus-start */}` / `{/* @focus-end */}` JSX comments inside the demo to highlight regions in the rendered code viewer.\n\nThe demo infrastructure itself is documented at <https://mui-internal.netlify.app/docs-infra/>.\n\n## Architecture\n\nThis is a monorepo managed by Lerna with Nx for caching. Key packages:\n\n- `@mui/material` - Core Material UI components\n- `@mui/system` - Styling system (sx prop, styled, theme)\n- `@mui/lab` - Experimental components (new components go here first)\n- `@mui/icons-material` - Material Design icons\n- `@mui/utils` - Internal utilities\n- `@mui/styled-engine` - CSS-in-JS abstraction (Emotion by default)\n\nInternal packages use `@mui/internal-*`; repo-only packages declare `\"private\": true`.\nPrivate workspaces without workspace dependents omit package names; reference them by path.\n\n## Code Conventions\n\n### TypeScript\n\n- Use `interface` (not `type`) for component props\n- Export `{ComponentName}Props` interface from component files\n- Path aliases available: `@mui/material` → `./packages/mui-material/src`\n\n### Errors\n\nThese guidelines only apply for errors thrown from public packages.\n\nEvery error message must:\n\n1. **Say what happened** - Describe the problem clearly\n2. **Say why it's a problem** - Explain the consequence\n3. **Point toward how to solve it** - Give actionable guidance\n\nFormat:\n\n- Prefix with `MUI: `\n- Use string concatenation for readability\n- Include a documentation link when applicable (`https://mui.com/r/...`)\n\n#### Error Minifier\n\nUse the `/* minify-error */` comment to activate the babel plugin:\n\n```tsx\nthrow /* minify-error */ new Error(\n  'MUI: Expected valid input target. ' +\n    'Did you use a custom `inputComponent` and forget to forward refs? ' +\n    'See https://mui.com/r/input-component-ref-interface for more info.',\n);\n```\n\nThe minifier works with both `Error` and `TypeError` constructors.\n\n#### After Adding/Updating Errors\n\nRun `pnpm extract-error-codes` to update `docs/public/static/error-codes.json`.\n\n**Important:** If the update created a new error code, but the new and original message have the same number of arguments and semantics haven't changed, update the original error in `error-codes.json` instead of creating a new code.\n\n### Component Structure\n\n```text\npackages/mui-material/src/Button/\n├── Button.tsx           # Component implementation\n├── Button.d.ts          # TypeScript declarations (for JSDoc API docs)\n├── Button.test.js       # Unit tests\n├── buttonClasses.ts     # CSS classes\n└── index.ts             # Public exports\n```\n\n### Testing\n\n- Use `createRenderer()` from `@mui/internal-test-utils`\n- Use Chai BDD-style assertions (`expect(x).to.equal(y)`)\n- Custom matchers: `toErrorDev()`, `toWarnDev()` for console assertions\n- Prefer testing components with full interactions using `user.*` methods. Avoid `fireEvent` and `setProps` if possible.\n- If tests require the browser because, for example, they require layout measurements, restrict it to the Chromium env by using `it.skipIf(isJsdom())` or `describe.skipIf(isJsdom())` (search other tests for example usage if unsure).\n\n```js\nimport { createRenderer } from '@mui/internal-test-utils';\n\ndescribe('Button', () => {\n  const { render } = createRenderer();\n\n  it('renders children', async () => {\n    const handleClick = vi.fn();\n    const { getByRole, user } = render(<Button onClick={handleClick}>Hello</Button>);\n\n    const button = getByRole('button');\n    expect(button).to.have.text('Hello');\n\n    await user.click(button);\n    expect(handleClick).toHaveBeenCalledTimes(1);\n  });\n});\n```\n\n### Accessibility Testing\n\naxe-core runs inside the visual-regression Playwright loop (`test/regressions/index.test.js`) — no separate browser session. Screenshots and a11y are independent: a demo can opt out of one and still run the other.\n\nKey files:\n\n- `test/regressions/demoMeta.ts` — `SCREENSHOT_RULES` and `A11Y_RULES` arrays, matched last-wins (no inheritance: overrides restate every field) against `docs/data/material/components/{slug}/{Demo}` (minimatch globs).\n- `test/regressions/a11y/axe.ts` — asserts `color-contrast` and `link-in-text-block` by default, or all exercised axe rules when the matching a11y rule sets `assertions: 'all'`; `skipAssertions` suppresses selected rule assertions.\n- `test/regressions/a11y/a11yReporter.ts` — writes one file per slug at `docs/data/material/components/{slug}/{slug}.a11y.json`. Each file is keyed by demo name, then by axe rule ID. Each rule records a `status` (`pass`, `fail`, or `incomplete`) and WCAG tags.\n\nEnroll a component (slug-wide, or narrow with brace-glob):\n\n```ts\n// test/regressions/demoMeta.ts\n{ test: 'docs/data/material/components/alert/*', enabled: true, skipAssertions: ['color-contrast'] },\n{ test: 'docs/data/material/components/buttons/{BasicButtons,ColorButtons}', enabled: true, assertions: 'all' },\n```\n\nOverride a specific demo: append a per-demo rule _after_ the slug-wide rule (last-match-wins; the override must restate every field it wants):\n\n```ts\n{ test: 'docs/data/material/components/popover/AnchorPlayground', enabled: false }, // Redux isolation\n```\n\nRun `pnpm test:regressions` to refresh the `*.a11y.json` files. CI fails if any are stale.\n\nFor local iteration, scope the run with vitest's `-t` test-name filter (matched against the `it()` strings, which contain the route). Non-matching tests are skipped — their bodies don't execute, so the browser never navigates to those routes.\n\n```bash\n# in one terminal\npnpm test:regressions:server\n\n# in another — note no `--`, pnpm forwards args directly\npnpm test:regressions:run -t '/docs-components-buttons/'              # one slug\npnpm test:regressions:run -t '/docs-components-buttons/BasicButtons$' # one demo\npnpm test:regressions:run -t '/docs-components-(buttons|chips)/'      # multiple slugs\n```\n\nFiltered runs only refresh the matched slugs' `*.a11y.json`. Run the unfiltered `pnpm test:regressions` before pushing.\n\n### Imports\n\nUse one-level deep imports to avoid bundling entire packages:\n\n```js\nimport Button from '@mui/material/Button'; // Good\nimport { Button } from '@mui/material'; // Avoid in packages\n```\n\n## Agent Skills\n\nPackaged guidance for common integration topics lives under `skills/`. Each skill is a self-contained directory:\n\n| Skill                                                                  | Focus                                                       |\n| :--------------------------------------------------------------------- | :---------------------------------------------------------- |\n| [skills/material-ui-styling](./skills/material-ui-styling/AGENTS.md)   | `sx`, `styled()`, theme overrides, slots, global CSS        |\n| [skills/material-ui-theming](./skills/material-ui-theming/AGENTS.md)   | `createTheme`, design tokens, `colorSchemes`, CSS variables |\n| [skills/material-ui-nextjs](./skills/material-ui-nextjs/AGENTS.md)     | App/Pages Router, Emotion cache, `next/font`, `Link`, SSR   |\n| [skills/material-ui-tailwind](./skills/material-ui-tailwind/AGENTS.md) | Tailwind v4 `@layer`, `enableCssLayer`, v3 interop          |\n\nRead the relevant `AGENTS.md` when helping users with those topics.\n\n## Pre-PR Checklist\n\n1. `pnpm prettier` - Format code\n2. `pnpm eslint` - Pass linting\n3. `pnpm typescript` - Pass type checking\n4. `pnpm test:unit` - Pass unit tests\n5. If API changed: `pnpm proptypes && pnpm docs:api`\n6. If `.md` files changed: `pnpm vale <file1> <file2> ...` - Check prose style and grammar\n\n## PR Title Format\n\n`[component] Imperative description`\n\nExamples:\n\n- `[button] Add loading state`\n- `[docs] Fix typo in Grid documentation`\n","CLAUDE.md":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\nSee [AGENTS.md](./AGENTS.md) for codebase documentation.\n",".cursor/mcp.json":"# Model Context Protocol (MCP) Configuration\n\nPath: `.cursor/mcp.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/mui/material-ui/HEAD/.cursor/mcp.json)",".claude-plugin/marketplace.json":"# Claude Plugin Marketplace Catalog\n\nPath: `.claude-plugin/marketplace.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/mui/material-ui/HEAD/.claude-plugin/marketplace.json)",".claude-plugin/plugin.json":"# claude-plugin Plugin Manifest\n\nPath: `.claude-plugin/plugin.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/mui/material-ui/HEAD/.claude-plugin/plugin.json)",".cursorrules (nextjs-material-ui-tailwind-css-cursorrules-prompt.mdc)":"---\ndescription: \"Cursor rules for Next.js development with Material UI and Tailwind CSS integration.\"\nglobs: **/*\nalwaysApply: false\n---\nCe projet s'appel Portfolio2\n\nIl est basé sur Next.Js, il a tailwindcss, materialui, shadcn/ui et aceternityui\n\nWhat is your project named? portfolio2\n\nWould you like to use TypeScript? Yes\n\nWould you like to use ESLint? No\n\nWould you like to use Tailwind CSS? Yes\n\nWould you like to use `src/` directory? Yes\n\nWould you like to use App Router? (recommended) Yes\n\nWould you like to customize the default import alias (@/)? No\n\nWhat import alias would you like configured? @/\n\nNola liste des dépendance\n\n\"dependencies\": {\n  \"@ckeditor/ckeditor5-react\": \"^6.3.0\",\n  \"@emotion/react\": \"^11.11.4\",\n  \"@emotion/styled\": \"^11.11.5\",\n  \"@mui/icons-material\": \"^5.15.18\",\n  \"@mui/material\": \"^5.15.18\",\n  \"@mui/styled-engine-sc\": \"^6.0.0-alpha.18\",\n  \"@prisma/client\": \"^5.14.0\",\n  \"autoprefixer\": \"^10.4.19\",\n  \"bcryptjs\": \"^2.4.3\",\n  \"ckeditor5\": \"^41.4.2\",\n  \"clsx\": \"^2.1.1\",\n  \"framer-motion\": \"^11.2.5\",\n  \"init\": \"^0.1.2\",\n  \"next\": \"^14.2.3\",\n  \"next-auth\": \"^4.24.7\",\n  \"react\": \"^18.3.1\",\n  \"react-dom\": \"^18.3.1\",\n  \"shadcn-ui\": \"^0.8.0\",\n  \"styled-components\": \"^6.1.11\",\n  \"tailwind-merge\": \"^2.3.0\"\n},\n\n\"devDependencies\": {\n  \"@types/bcryptjs\": \"^2.4.6\",\n  \"@types/node\": \"^20\",\n  \"@types/react\": \"^18\",\n  \"@types/react-dom\": \"^18\",\n  \"postcss\": \"^8.4.38\",\n  \"prisma\": \"^5.14.0\",\n  \"tailwindcss\": \"^3.4.3\",\n  \"typescript\": \"^5.4.5\"\n}\n"},"files":{"AGENTS.md":"# AGENTS.md\n\nThis file provides guidance for AI agents working with code in this repository.\n\n## Package Manager\n\n**Only pnpm is supported** (yarn/npm will fail). Use the `-F` flag for workspace operations:\n\n```bash\npnpm -F @mui/material add some-package    # Add dependency to a package\npnpm -F @mui/material build               # Build a specific package\n```\n\nNever use `cd` to navigate into package directories for commands.\n\n## Common Commands\n\n### Development\n\n```bash\npnpm install                  # Install deps if necessary\npnpm docs:dev                 # Start docs dev server only\n```\n\n### Building\n\n```bash\npnpm release:build            # Build all packages (except docs)\npnpm docs:build               # Build documentation site\n```\n\n### Testing\n\n```bash\npnpm test:unit                # Run all unit tests (jsdom)\npnpm test:unit ComponentName  # Run tests matching pattern\npnpm test:unit -t \"test name\" # Grep for specific test name\npnpm test:browser             # Run tests in real browsers (Chrome, Firefox, WebKit)\npnpm test:e2e                 # End-to-end tests\npnpm test:regressions         # Visual regression tests\n```\n\n### Code Quality\n\n```bash\npnpm prettier                 # Format staged changes\npnpm eslint                   # Lint with cache\npnpm typescript               # Type check all packages\n```\n\n### API Documentation\n\nAfter changing component props or TypeScript declarations:\n\n```bash\npnpm proptypes && pnpm docs:api\n```\n\n### Docs demos\n\nDemos live next to their page under `docs/data/<product>/components/<component>/demos/<demo-name>/`. Each demo folder contains three files:\n\n- `<ComponentName>.tsx` — the demo source, authored as TypeScript (`.tsx`).\n- `client.ts` — marks the demo's client boundary:\n\n  ```ts\n  'use client';\n\n  import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient';\n\n  export default createDemoClient(import.meta.url);\n  ```\n\n- `index.ts` — wires the demo into the docs pipeline:\n\n  ```ts\n  import { createDemo } from '@mui/internal-core-docs/utils/createDemo';\n  import ClientProvider from './client';\n  import BasicButtons from './BasicButtons';\n\n  export default createDemo(import.meta.url, BasicButtons, { ClientProvider });\n  ```\n\nReference the demo from the page's markdown via the `component` field. Use a `file://` URL with a path relative to the markdown file:\n\n```md\n{{\"component\": \"file://./demos/basic/index.ts\"}}\n```\n\nDemo options (`bg`, `hideToolbar`, `initialExpanded`, `collapseToEmpty`, `isolated`, `iframe`, `maxWidth`, `height`, `disableAd`, `disableLiveEdit`, `hideEditButton`, `aiSuggestion`, `anchorId`; `defaultCodeOpen` is a legacy alias for `initialExpanded`/`collapseToEmpty`) are defined by the `DemoOptions` interface in `packages-internal/core-docs/src/DemoContent/DemoContent.tsx`. Use `{/* @focus-start */}` / `{/* @focus-end */}` JSX comments inside the demo to highlight regions in the rendered code viewer.\n\nThe demo infrastructure itself is documented at <https://mui-internal.netlify.app/docs-infra/>.\n\n## Architecture\n\nThis is a monorepo managed by Lerna with Nx for caching. Key packages:\n\n- `@mui/material` - Core Material UI components\n- `@mui/system` - Styling system (sx prop, styled, theme)\n- `@mui/lab` - Experimental components (new components go here first)\n- `@mui/icons-material` - Material Design icons\n- `@mui/utils` - Internal utilities\n- `@mui/styled-engine` - CSS-in-JS abstraction (Emotion by default)\n\nInternal packages use `@mui/internal-*`; repo-only packages declare `\"private\": true`.\nPrivate workspaces without workspace dependents omit package names; reference them by path.\n\n## Code Conventions\n\n### TypeScript\n\n- Use `interface` (not `type`) for component props\n- Export `{ComponentName}Props` interface from component files\n- Path aliases available: `@mui/material` → `./packages/mui-material/src`\n\n### Errors\n\nThese guidelines only apply for errors thrown from public packages.\n\nEvery error message must:\n\n1. **Say what happened** - Describe the problem clearly\n2. **Say why it's a problem** - Explain the consequence\n3. **Point toward how to solve it** - Give actionable guidance\n\nFormat:\n\n- Prefix with `MUI: `\n- Use string concatenation for readability\n- Include a documentation link when applicable (`https://mui.com/r/...`)\n\n#### Error Minifier\n\nUse the `/* minify-error */` comment to activate the babel plugin:\n\n```tsx\nthrow /* minify-error */ new Error(\n  'MUI: Expected valid input target. ' +\n    'Did you use a custom `inputComponent` and forget to forward refs? ' +\n    'See https://mui.com/r/input-component-ref-interface for more info.',\n);\n```\n\nThe minifier works with both `Error` and `TypeError` constructors.\n\n#### After Adding/Updating Errors\n\nRun `pnpm extract-error-codes` to update `docs/public/static/error-codes.json`.\n\n**Important:** If the update created a new error code, but the new and original message have the same number of arguments and semantics haven't changed, update the original error in `error-codes.json` instead of creating a new code.\n\n### Component Structure\n\n```text\npackages/mui-material/src/Button/\n├── Button.tsx           # Component implementation\n├── Button.d.ts          # TypeScript declarations (for JSDoc API docs)\n├── Button.test.js       # Unit tests\n├── buttonClasses.ts     # CSS classes\n└── index.ts             # Public exports\n```\n\n### Testing\n\n- Use `createRenderer()` from `@mui/internal-test-utils`\n- Use Chai BDD-style assertions (`expect(x).to.equal(y)`)\n- Custom matchers: `toErrorDev()`, `toWarnDev()` for console assertions\n- Prefer testing components with full interactions using `user.*` methods. Avoid `fireEvent` and `setProps` if possible.\n- If tests require the browser because, for example, they require layout measurements, restrict it to the Chromium env by using `it.skipIf(isJsdom())` or `describe.skipIf(isJsdom())` (search other tests for example usage if unsure).\n\n```js\nimport { createRenderer } from '@mui/internal-test-utils';\n\ndescribe('Button', () => {\n  const { render } = createRenderer();\n\n  it('renders children', async () => {\n    const handleClick = vi.fn();\n    const { getByRole, user } = render(<Button onClick={handleClick}>Hello</Button>);\n\n    const button = getByRole('button');\n    expect(button).to.have.text('Hello');\n\n    await user.click(button);\n    expect(handleClick).toHaveBeenCalledTimes(1);\n  });\n});\n```\n\n### Accessibility Testing\n\naxe-core runs inside the visual-regression Playwright loop (`test/regressions/index.test.js`) — no separate browser session. Screenshots and a11y are independent: a demo can opt out of one and still run the other.\n\nKey files:\n\n- `test/regressions/demoMeta.ts` — `SCREENSHOT_RULES` and `A11Y_RULES` arrays, matched last-wins (no inheritance: overrides restate every field) against `docs/data/material/components/{slug}/{Demo}` (minimatch globs).\n- `test/regressions/a11y/axe.ts` — asserts `color-contrast` and `link-in-text-block` by default, or all exercised axe rules when the matching a11y rule sets `assertions: 'all'`; `skipAssertions` suppresses selected rule assertions.\n- `test/regressions/a11y/a11yReporter.ts` — writes one file per slug at `docs/data/material/components/{slug}/{slug}.a11y.json`. Each file is keyed by demo name, then by axe rule ID. Each rule records a `status` (`pass`, `fail`, or `incomplete`) and WCAG tags.\n\nEnroll a component (slug-wide, or narrow with brace-glob):\n\n```ts\n// test/regressions/demoMeta.ts\n{ test: 'docs/data/material/components/alert/*', enabled: true, skipAssertions: ['color-contrast'] },\n{ test: 'docs/data/material/components/buttons/{BasicButtons,ColorButtons}', enabled: true, assertions: 'all' },\n```\n\nOverride a specific demo: append a per-demo rule _after_ the slug-wide rule (last-match-wins; the override must restate every field it wants):\n\n```ts\n{ test: 'docs/data/material/components/popover/AnchorPlayground', enabled: false }, // Redux isolation\n```\n\nRun `pnpm test:regressions` to refresh the `*.a11y.json` files. CI fails if any are stale.\n\nFor local iteration, scope the run with vitest's `-t` test-name filter (matched against the `it()` strings, which contain the route). Non-matching tests are skipped — their bodies don't execute, so the browser never navigates to those routes.\n\n```bash\n# in one terminal\npnpm test:regressions:server\n\n# in another — note no `--`, pnpm forwards args directly\npnpm test:regressions:run -t '/docs-components-buttons/'              # one slug\npnpm test:regressions:run -t '/docs-components-buttons/BasicButtons$' # one demo\npnpm test:regressions:run -t '/docs-components-(buttons|chips)/'      # multiple slugs\n```\n\nFiltered runs only refresh the matched slugs' `*.a11y.json`. Run the unfiltered `pnpm test:regressions` before pushing.\n\n### Imports\n\nUse one-level deep imports to avoid bundling entire packages:\n\n```js\nimport Button from '@mui/material/Button'; // Good\nimport { Button } from '@mui/material'; // Avoid in packages\n```\n\n## Agent Skills\n\nPackaged guidance for common integration topics lives under `skills/`. Each skill is a self-contained directory:\n\n| Skill                                                                  | Focus                                                       |\n| :--------------------------------------------------------------------- | :---------------------------------------------------------- |\n| [skills/material-ui-styling](./skills/material-ui-styling/AGENTS.md)   | `sx`, `styled()`, theme overrides, slots, global CSS        |\n| [skills/material-ui-theming](./skills/material-ui-theming/AGENTS.md)   | `createTheme`, design tokens, `colorSchemes`, CSS variables |\n| [skills/material-ui-nextjs](./skills/material-ui-nextjs/AGENTS.md)     | App/Pages Router, Emotion cache, `next/font`, `Link`, SSR   |\n| [skills/material-ui-tailwind](./skills/material-ui-tailwind/AGENTS.md) | Tailwind v4 `@layer`, `enableCssLayer`, v3 interop          |\n\nRead the relevant `AGENTS.md` when helping users with those topics.\n\n## Pre-PR Checklist\n\n1. `pnpm prettier` - Format code\n2. `pnpm eslint` - Pass linting\n3. `pnpm typescript` - Pass type checking\n4. `pnpm test:unit` - Pass unit tests\n5. If API changed: `pnpm proptypes && pnpm docs:api`\n6. If `.md` files changed: `pnpm vale <file1> <file2> ...` - Check prose style and grammar\n\n## PR Title Format\n\n`[component] Imperative description`\n\nExamples:\n\n- `[button] Add loading state`\n- `[docs] Fix typo in Grid documentation`\n","CLAUDE.md":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\nSee [AGENTS.md](./AGENTS.md) for codebase documentation.\n",".cursor/mcp.json":"# Model Context Protocol (MCP) Configuration\n\nPath: `.cursor/mcp.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/mui/material-ui/HEAD/.cursor/mcp.json)",".claude-plugin/marketplace.json":"# Claude Plugin Marketplace Catalog\n\nPath: `.claude-plugin/marketplace.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/mui/material-ui/HEAD/.claude-plugin/marketplace.json)",".claude-plugin/plugin.json":"# claude-plugin Plugin Manifest\n\nPath: `.claude-plugin/plugin.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/mui/material-ui/HEAD/.claude-plugin/plugin.json)",".cursorrules (nextjs-material-ui-tailwind-css-cursorrules-prompt.mdc)":"---\ndescription: \"Cursor rules for Next.js development with Material UI and Tailwind CSS integration.\"\nglobs: **/*\nalwaysApply: false\n---\nCe projet s'appel Portfolio2\n\nIl est basé sur Next.Js, il a tailwindcss, materialui, shadcn/ui et aceternityui\n\nWhat is your project named? portfolio2\n\nWould you like to use TypeScript? Yes\n\nWould you like to use ESLint? No\n\nWould you like to use Tailwind CSS? Yes\n\nWould you like to use `src/` directory? Yes\n\nWould you like to use App Router? (recommended) Yes\n\nWould you like to customize the default import alias (@/)? No\n\nWhat import alias would you like configured? @/\n\nNola liste des dépendance\n\n\"dependencies\": {\n  \"@ckeditor/ckeditor5-react\": \"^6.3.0\",\n  \"@emotion/react\": \"^11.11.4\",\n  \"@emotion/styled\": \"^11.11.5\",\n  \"@mui/icons-material\": \"^5.15.18\",\n  \"@mui/material\": \"^5.15.18\",\n  \"@mui/styled-engine-sc\": \"^6.0.0-alpha.18\",\n  \"@prisma/client\": \"^5.14.0\",\n  \"autoprefixer\": \"^10.4.19\",\n  \"bcryptjs\": \"^2.4.3\",\n  \"ckeditor5\": \"^41.4.2\",\n  \"clsx\": \"^2.1.1\",\n  \"framer-motion\": \"^11.2.5\",\n  \"init\": \"^0.1.2\",\n  \"next\": \"^14.2.3\",\n  \"next-auth\": \"^4.24.7\",\n  \"react\": \"^18.3.1\",\n  \"react-dom\": \"^18.3.1\",\n  \"shadcn-ui\": \"^0.8.0\",\n  \"styled-components\": \"^6.1.11\",\n  \"tailwind-merge\": \"^2.3.0\"\n},\n\n\"devDependencies\": {\n  \"@types/bcryptjs\": \"^2.4.6\",\n  \"@types/node\": \"^20\",\n  \"@types/react\": \"^18\",\n  \"@types/react-dom\": \"^18\",\n  \"postcss\": \"^8.4.38\",\n  \"prisma\": \"^5.14.0\",\n  \"tailwindcss\": \"^3.4.3\",\n  \"typescript\": \"^5.4.5\"\n}\n"},"items":[{"name":"AGENTS.md","path":"AGENTS.md","rawUrl":"https://raw.githubusercontent.com/mui/material-ui/HEAD/AGENTS.md","title":"AI Agent Protocol & Instructions","category":"root-instruction","format":"markdown","content":"# AGENTS.md\n\nThis file provides guidance for AI agents working with code in this repository.\n\n## Package Manager\n\n**Only pnpm is supported** (yarn/npm will fail). Use the `-F` flag for workspace operations:\n\n```bash\npnpm -F @mui/material add some-package    # Add dependency to a package\npnpm -F @mui/material build               # Build a specific package\n```\n\nNever use `cd` to navigate into package directories for commands.\n\n## Common Commands\n\n### Development\n\n```bash\npnpm install                  # Install deps if necessary\npnpm docs:dev                 # Start docs dev server only\n```\n\n### Building\n\n```bash\npnpm release:build            # Build all packages (except docs)\npnpm docs:build               # Build documentation site\n```\n\n### Testing\n\n```bash\npnpm test:unit                # Run all unit tests (jsdom)\npnpm test:unit ComponentName  # Run tests matching pattern\npnpm test:unit -t \"test name\" # Grep for specific test name\npnpm test:browser             # Run tests in real browsers (Chrome, Firefox, WebKit)\npnpm test:e2e                 # End-to-end tests\npnpm test:regressions         # Visual regression tests\n```\n\n### Code Quality\n\n```bash\npnpm prettier                 # Format staged changes\npnpm eslint                   # Lint with cache\npnpm typescript               # Type check all packages\n```\n\n### API Documentation\n\nAfter changing component props or TypeScript declarations:\n\n```bash\npnpm proptypes && pnpm docs:api\n```\n\n### Docs demos\n\nDemos live next to their page under `docs/data/<product>/components/<component>/demos/<demo-name>/`. Each demo folder contains three files:\n\n- `<ComponentName>.tsx` — the demo source, authored as TypeScript (`.tsx`).\n- `client.ts` — marks the demo's client boundary:\n\n  ```ts\n  'use client';\n\n  import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient';\n\n  export default createDemoClient(import.meta.url);\n  ```\n\n- `index.ts` — wires the demo into the docs pipeline:\n\n  ```ts\n  import { createDemo } from '@mui/internal-core-docs/utils/createDemo';\n  import ClientProvider from './client';\n  import BasicButtons from './BasicButtons';\n\n  export default createDemo(import.meta.url, BasicButtons, { ClientProvider });\n  ```\n\nReference the demo from the page's markdown via the `component` field. Use a `file://` URL with a path relative to the markdown file:\n\n```md\n{{\"component\": \"file://./demos/basic/index.ts\"}}\n```\n\nDemo options (`bg`, `hideToolbar`, `initialExpanded`, `collapseToEmpty`, `isolated`, `iframe`, `maxWidth`, `height`, `disableAd`, `disableLiveEdit`, `hideEditButton`, `aiSuggestion`, `anchorId`; `defaultCodeOpen` is a legacy alias for `initialExpanded`/`collapseToEmpty`) are defined by the `DemoOptions` interface in `packages-internal/core-docs/src/DemoContent/DemoContent.tsx`. Use `{/* @focus-start */}` / `{/* @focus-end */}` JSX comments inside the demo to highlight regions in the rendered code viewer.\n\nThe demo infrastructure itself is documented at <https://mui-internal.netlify.app/docs-infra/>.\n\n## Architecture\n\nThis is a monorepo managed by Lerna with Nx for caching. Key packages:\n\n- `@mui/material` - Core Material UI components\n- `@mui/system` - Styling system (sx prop, styled, theme)\n- `@mui/lab` - Experimental components (new components go here first)\n- `@mui/icons-material` - Material Design icons\n- `@mui/utils` - Internal utilities\n- `@mui/styled-engine` - CSS-in-JS abstraction (Emotion by default)\n\nInternal packages use `@mui/internal-*`; repo-only packages declare `\"private\": true`.\nPrivate workspaces without workspace dependents omit package names; reference them by path.\n\n## Code Conventions\n\n### TypeScript\n\n- Use `interface` (not `type`) for component props\n- Export `{ComponentName}Props` interface from component files\n- Path aliases available: `@mui/material` → `./packages/mui-material/src`\n\n### Errors\n\nThese guidelines only apply for errors thrown from public packages.\n\nEvery error message must:\n\n1. **Say what happened** - Describe the problem clearly\n2. **Say why it's a problem** - Explain the consequence\n3. **Point toward how to solve it** - Give actionable guidance\n\nFormat:\n\n- Prefix with `MUI: `\n- Use string concatenation for readability\n- Include a documentation link when applicable (`https://mui.com/r/...`)\n\n#### Error Minifier\n\nUse the `/* minify-error */` comment to activate the babel plugin:\n\n```tsx\nthrow /* minify-error */ new Error(\n  'MUI: Expected valid input target. ' +\n    'Did you use a custom `inputComponent` and forget to forward refs? ' +\n    'See https://mui.com/r/input-component-ref-interface for more info.',\n);\n```\n\nThe minifier works with both `Error` and `TypeError` constructors.\n\n#### After Adding/Updating Errors\n\nRun `pnpm extract-error-codes` to update `docs/public/static/error-codes.json`.\n\n**Important:** If the update created a new error code, but the new and original message have the same number of arguments and semantics haven't changed, update the original error in `error-codes.json` instead of creating a new code.\n\n### Component Structure\n\n```text\npackages/mui-material/src/Button/\n├── Button.tsx           # Component implementation\n├── Button.d.ts          # TypeScript declarations (for JSDoc API docs)\n├── Button.test.js       # Unit tests\n├── buttonClasses.ts     # CSS classes\n└── index.ts             # Public exports\n```\n\n### Testing\n\n- Use `createRenderer()` from `@mui/internal-test-utils`\n- Use Chai BDD-style assertions (`expect(x).to.equal(y)`)\n- Custom matchers: `toErrorDev()`, `toWarnDev()` for console assertions\n- Prefer testing components with full interactions using `user.*` methods. Avoid `fireEvent` and `setProps` if possible.\n- If tests require the browser because, for example, they require layout measurements, restrict it to the Chromium env by using `it.skipIf(isJsdom())` or `describe.skipIf(isJsdom())` (search other tests for example usage if unsure).\n\n```js\nimport { createRenderer } from '@mui/internal-test-utils';\n\ndescribe('Button', () => {\n  const { render } = createRenderer();\n\n  it('renders children', async () => {\n    const handleClick = vi.fn();\n    const { getByRole, user } = render(<Button onClick={handleClick}>Hello</Button>);\n\n    const button = getByRole('button');\n    expect(button).to.have.text('Hello');\n\n    await user.click(button);\n    expect(handleClick).toHaveBeenCalledTimes(1);\n  });\n});\n```\n\n### Accessibility Testing\n\naxe-core runs inside the visual-regression Playwright loop (`test/regressions/index.test.js`) — no separate browser session. Screenshots and a11y are independent: a demo can opt out of one and still run the other.\n\nKey files:\n\n- `test/regressions/demoMeta.ts` — `SCREENSHOT_RULES` and `A11Y_RULES` arrays, matched last-wins (no inheritance: overrides restate every field) against `docs/data/material/components/{slug}/{Demo}` (minimatch globs).\n- `test/regressions/a11y/axe.ts` — asserts `color-contrast` and `link-in-text-block` by default, or all exercised axe rules when the matching a11y rule sets `assertions: 'all'`; `skipAssertions` suppresses selected rule assertions.\n- `test/regressions/a11y/a11yReporter.ts` — writes one file per slug at `docs/data/material/components/{slug}/{slug}.a11y.json`. Each file is keyed by demo name, then by axe rule ID. Each rule records a `status` (`pass`, `fail`, or `incomplete`) and WCAG tags.\n\nEnroll a component (slug-wide, or narrow with brace-glob):\n\n```ts\n// test/regressions/demoMeta.ts\n{ test: 'docs/data/material/components/alert/*', enabled: true, skipAssertions: ['color-contrast'] },\n{ test: 'docs/data/material/components/buttons/{BasicButtons,ColorButtons}', enabled: true, assertions: 'all' },\n```\n\nOverride a specific demo: append a per-demo rule _after_ the slug-wide rule (last-match-wins; the override must restate every field it wants):\n\n```ts\n{ test: 'docs/data/material/components/popover/AnchorPlayground', enabled: false }, // Redux isolation\n```\n\nRun `pnpm test:regressions` to refresh the `*.a11y.json` files. CI fails if any are stale.\n\nFor local iteration, scope the run with vitest's `-t` test-name filter (matched against the `it()` strings, which contain the route). Non-matching tests are skipped — their bodies don't execute, so the browser never navigates to those routes.\n\n```bash\n# in one terminal\npnpm test:regressions:server\n\n# in another — note no `--`, pnpm forwards args directly\npnpm test:regressions:run -t '/docs-components-buttons/'              # one slug\npnpm test:regressions:run -t '/docs-components-buttons/BasicButtons$' # one demo\npnpm test:regressions:run -t '/docs-components-(buttons|chips)/'      # multiple slugs\n```\n\nFiltered runs only refresh the matched slugs' `*.a11y.json`. Run the unfiltered `pnpm test:regressions` before pushing.\n\n### Imports\n\nUse one-level deep imports to avoid bundling entire packages:\n\n```js\nimport Button from '@mui/material/Button'; // Good\nimport { Button } from '@mui/material'; // Avoid in packages\n```\n\n## Agent Skills\n\nPackaged guidance for common integration topics lives under `skills/`. Each skill is a self-contained directory:\n\n| Skill                                                                  | Focus                                                       |\n| :--------------------------------------------------------------------- | :---------------------------------------------------------- |\n| [skills/material-ui-styling](./skills/material-ui-styling/AGENTS.md)   | `sx`, `styled()`, theme overrides, slots, global CSS        |\n| [skills/material-ui-theming](./skills/material-ui-theming/AGENTS.md)   | `createTheme`, design tokens, `colorSchemes`, CSS variables |\n| [skills/material-ui-nextjs](./skills/material-ui-nextjs/AGENTS.md)     | App/Pages Router, Emotion cache, `next/font`, `Link`, SSR   |\n| [skills/material-ui-tailwind](./skills/material-ui-tailwind/AGENTS.md) | Tailwind v4 `@layer`, `enableCssLayer`, v3 interop          |\n\nRead the relevant `AGENTS.md` when helping users with those topics.\n\n## Pre-PR Checklist\n\n1. `pnpm prettier` - Format code\n2. `pnpm eslint` - Pass linting\n3. `pnpm typescript` - Pass type checking\n4. `pnpm test:unit` - Pass unit tests\n5. If API changed: `pnpm proptypes && pnpm docs:api`\n6. If `.md` files changed: `pnpm vale <file1> <file2> ...` - Check prose style and grammar\n\n## PR Title Format\n\n`[component] Imperative description`\n\nExamples:\n\n- `[button] Add loading state`\n- `[docs] Fix typo in Grid documentation`\n","isInternal":false,"tokens":2513,"sizeBytes":10459},{"name":"CLAUDE.md","path":"CLAUDE.md","rawUrl":"https://raw.githubusercontent.com/mui/material-ui/HEAD/CLAUDE.md","title":"Claude Agent Guidelines & System Prompt","category":"claude-rule","format":"markdown","content":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\nSee [AGENTS.md](./AGENTS.md) for codebase documentation.\n","isInternal":false,"tokens":43,"sizeBytes":174},{"name":"marketplace.json","path":".claude-plugin/marketplace.json","rawUrl":"https://raw.githubusercontent.com/mui/material-ui/HEAD/.claude-plugin/marketplace.json","title":"Claude Plugin Marketplace Catalog","category":"marketplace","format":"json","content":"# Claude Plugin Marketplace Catalog\n\nPath: `.claude-plugin/marketplace.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/mui/material-ui/HEAD/.claude-plugin/marketplace.json)","tokens":300,"sizeBytes":194},{"name":"plugin.json","path":".claude-plugin/plugin.json","rawUrl":"https://raw.githubusercontent.com/mui/material-ui/HEAD/.claude-plugin/plugin.json","title":"claude-plugin Plugin Manifest","category":"plugin-manifest","format":"json","content":"# claude-plugin Plugin Manifest\n\nPath: `.claude-plugin/plugin.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/mui/material-ui/HEAD/.claude-plugin/plugin.json)","tokens":300,"sizeBytes":180},{"name":"mcp.json","path":".cursor/mcp.json","rawUrl":"https://raw.githubusercontent.com/mui/material-ui/HEAD/.cursor/mcp.json","title":"Model Context Protocol (MCP) Configuration","category":"mcp-config","format":"json","content":"# Model Context Protocol (MCP) Configuration\n\nPath: `.cursor/mcp.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/mui/material-ui/HEAD/.cursor/mcp.json)","tokens":300,"sizeBytes":173},{"name":".cursorrules","path":".cursorrules (nextjs-material-ui-tailwind-css-cursorrules-prompt.mdc)","rawUrl":"https://raw.githubusercontent.com/PatrickJS/awesome-cursorrules/main/rules/nextjs-material-ui-tailwind-css-cursorrules-prompt.mdc","title":"Awesome Cursorrules: nextjs material ui tailwind css cursorrules prompt","category":"cursor-rule","format":"markdown","content":"---\ndescription: \"Cursor rules for Next.js development with Material UI and Tailwind CSS integration.\"\nglobs: **/*\nalwaysApply: false\n---\nCe projet s'appel Portfolio2\n\nIl est basé sur Next.Js, il a tailwindcss, materialui, shadcn/ui et aceternityui\n\nWhat is your project named? portfolio2\n\nWould you like to use TypeScript? Yes\n\nWould you like to use ESLint? No\n\nWould you like to use Tailwind CSS? Yes\n\nWould you like to use `src/` directory? Yes\n\nWould you like to use App Router? (recommended) Yes\n\nWould you like to customize the default import alias (@/)? No\n\nWhat import alias would you like configured? @/\n\nNola liste des dépendance\n\n\"dependencies\": {\n  \"@ckeditor/ckeditor5-react\": \"^6.3.0\",\n  \"@emotion/react\": \"^11.11.4\",\n  \"@emotion/styled\": \"^11.11.5\",\n  \"@mui/icons-material\": \"^5.15.18\",\n  \"@mui/material\": \"^5.15.18\",\n  \"@mui/styled-engine-sc\": \"^6.0.0-alpha.18\",\n  \"@prisma/client\": \"^5.14.0\",\n  \"autoprefixer\": \"^10.4.19\",\n  \"bcryptjs\": \"^2.4.3\",\n  \"ckeditor5\": \"^41.4.2\",\n  \"clsx\": \"^2.1.1\",\n  \"framer-motion\": \"^11.2.5\",\n  \"init\": \"^0.1.2\",\n  \"next\": \"^14.2.3\",\n  \"next-auth\": \"^4.24.7\",\n  \"react\": \"^18.3.1\",\n  \"react-dom\": \"^18.3.1\",\n  \"shadcn-ui\": \"^0.8.0\",\n  \"styled-components\": \"^6.1.11\",\n  \"tailwind-merge\": \"^2.3.0\"\n},\n\n\"devDependencies\": {\n  \"@types/bcryptjs\": \"^2.4.6\",\n  \"@types/node\": \"^20\",\n  \"@types/react\": \"^18\",\n  \"@types/react-dom\": \"^18\",\n  \"postcss\": \"^8.4.38\",\n  \"prisma\": \"^5.14.0\",\n  \"tailwindcss\": \"^3.4.3\",\n  \"typescript\": \"^5.4.5\"\n}\n","tokens":514,"sizeBytes":1480}],"systemPromptSnippet":"<yakaai_skills repo=\"mui/material-ui\">\n<!-- File: AGENTS.md (Tokens: ~2513 | Category: root-instruction) -->\n# AGENTS.md\n\nThis file provides guidance for AI agents working with code in this repository.\n\n## Package Manager\n\n**Only pnpm is supported** (yarn/npm will fail). Use the `-F` flag for workspace operations:\n\n```bash\npnpm -F @mui/material add some-package    # Add dependency to a package\npnpm -F @mui/material build               # Build a specific package\n```\n\nNever use `cd` to navigate into package directories for commands.\n\n## Common Commands\n\n### Development\n\n```bash\npnpm install                  # Install deps if necessary\npnpm docs:dev                 # Start docs dev server only\n```\n\n### Building\n\n```bash\npnpm release:build            # Build all packages (except docs)\npnpm docs:build               # Build documentation site\n```\n\n### Testing\n\n```bash\npnpm test:unit                # Run all unit tests (jsdom)\npnpm test:unit ComponentName  # Run tests matching pattern\npnpm test:unit -t \"test name\" # Grep for specific test name\npnpm test:browser             # Run tests in real browsers (Chrome, Firefox, WebKit)\npnpm test:e2e                 # End-to-end tests\npnpm test:regressions         # Visual regression tests\n```\n\n### Code Quality\n\n```bash\npnpm prettier                 # Format staged changes\npnpm eslint                   # Lint with cache\npnpm typescript               # Type check all packages\n```\n\n### API Documentation\n\nAfter changing component props or TypeScript declarations:\n\n```bash\npnpm proptypes && pnpm docs:api\n```\n\n### Docs demos\n\nDemos live next to their page under `docs/data/<product>/components/<component>/demos/<demo-name>/`. Each demo folder contains three files:\n\n- `<ComponentName>.tsx` — the demo source, authored as TypeScript (`.tsx`).\n- `client.ts` — marks the demo's client boundary:\n\n  ```ts\n  'use client';\n\n  import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient';\n\n  export default createDemoClient(import.meta.url);\n  ```\n\n- `index.ts` — wires the demo into the docs pipeline:\n\n  ```ts\n  import { createDemo } from '@mui/internal-core-docs/utils/createDemo';\n  import ClientProvider from './client';\n  import BasicButtons from './BasicButtons';\n\n  export default createDemo(import.meta.url, BasicButtons, { ClientProvider });\n  ```\n\nReference the demo from the page's markdown via the `component` field. Use a `file://` URL with a path relative to the markdown file:\n\n```md\n{{\"component\": \"file://./demos/basic/index.ts\"}}\n```\n\nDemo options (`bg`, `hideToolbar`, `initialExpanded`, `collapseToEmpty`, `isolated`, `iframe`, `maxWidth`, `height`, `disableAd`, `disableLiveEdit`, `hideEditButton`, `aiSuggestion`, `anchorId`; `defaultCodeOpen` is a legacy alias for `initialExpanded`/`collapseToEmpty`) are defined by the `DemoOptions` interface in `packages-internal/core-docs/src/DemoContent/DemoContent.tsx`. Use `{/* @focus-start */}` / `{/* @focus-end */}` JSX comments inside the demo to highlight regions in the rendered code viewer.\n\nThe demo infrastructure itself is documented at <https://mui-internal.netlify.app/docs-infra/>.\n\n## Architecture\n\nThis is a monorepo managed by Lerna with Nx for caching. Key packages:\n\n- `@mui/material` - Core Material UI components\n- `@mui/system` - Styling system (sx prop, styled, theme)\n- `@mui/lab` - Experimental components (new components go here first)\n- `@mui/icons-material` - Material Design icons\n- `@mui/utils` - Internal utilities\n- `@mui/styled-engine` - CSS-in-JS abstraction (Emotion by default)\n\nInternal packages use `@mui/internal-*`; repo-only packages declare `\"private\": true`.\nPrivate workspaces without workspace dependents omit package names; reference them by path.\n\n## Code Conventions\n\n### TypeScript\n\n- Use `interface` (not `type`) for component props\n- Export `{ComponentName}Props` interface from component files\n- Path aliases available: `@mui/material` → `./packages/mui-material/src`\n\n### Errors\n\nThese guidelines only apply for errors thrown from public packages.\n\nEvery error message must:\n\n1. **Say what happened** - Describe the problem clearly\n2. **Say why it's a problem** - Explain the consequence\n3. **Point toward how to solve it** - Give actionable guidance\n\nFormat:\n\n- Prefix with `MUI: `\n- Use string concatenation for readability\n- Include a documentation link when applicable (`https://mui.com/r/...`)\n\n#### Error Minifier\n\nUse the `/* minify-error */` comment to activate the babel plugin:\n\n```tsx\nthrow /* minify-error */ new Error(\n  'MUI: Expected valid input target. ' +\n    'Did you use a custom `inputComponent` and forget to forward refs? ' +\n    'See https://mui.com/r/input-component-ref-interface for more info.',\n);\n```\n\nThe minifier works with both `Error` and `TypeError` constructors.\n\n#### After Adding/Updating Errors\n\nRun `pnpm extract-error-codes` to update `docs/public/static/error-codes.json`.\n\n**Important:** If the update created a new error code, but the new and original message have the same number of arguments and semantics haven't changed, update the original error in `error-codes.json` instead of creating a new code.\n\n### Component Structure\n\n```text\npackages/mui-material/src/Button/\n├── Button.tsx           # Component implementation\n├── Button.d.ts          # TypeScript declarations (for JSDoc API docs)\n├── Button.test.js       # Unit tests\n├── buttonClasses.ts     # CSS classes\n└── index.ts             # Public exports\n```\n\n### Testing\n\n- Use `createRenderer()` from `@mui/internal-test-utils`\n- Use Chai BDD-style assertions (`expect(x).to.equal(y)`)\n- Custom matchers: `toErrorDev()`, `toWarnDev()` for console assertions\n- Prefer testing components with full interactions using `user.*` methods. Avoid `fireEvent` and `setProps` if possible.\n- If tests require the browser because, for example, they require layout measurements, restrict it to the Chromium env by using `it.skipIf(isJsdom())` or `describe.skipIf(isJsdom())` (search other tests for example usage if unsure).\n\n```js\nimport { createRenderer } from '@mui/internal-test-utils';\n\ndescribe('Button', () => {\n  const { render } = createRenderer();\n\n  it('renders children', async () => {\n    const handleClick = vi.fn();\n    const { getByRole, user } = render(<Button onClick={handleClick}>Hello</Button>);\n\n    const button = getByRole('button');\n    expect(button).to.have.text('Hello');\n\n    await user.click(button);\n    expect(handleClick).toHaveBeenCalledTimes(1);\n  });\n});\n```\n\n### Accessibility Testing\n\naxe-core runs inside the visual-regression Playwright loop (`test/regressions/index.test.js`) — no separate browser session. Screenshots and a11y are independent: a demo can opt out of one and still run the other.\n\nKey files:\n\n- `test/regressions/demoMeta.ts` — `SCREENSHOT_RULES` and `A11Y_RULES` arrays, matched last-wins (no inheritance: overrides restate every field) against `docs/data/material/components/{slug}/{Demo}` (minimatch globs).\n- `test/regressions/a11y/axe.ts` — asserts `color-contrast` and `link-in-text-block` by default, or all exercised axe rules when the matching a11y rule sets `assertions: 'all'`; `skipAssertions` suppresses selected rule assertions.\n- `test/regressions/a11y/a11yReporter.ts` — writes one file per slug at `docs/data/material/components/{slug}/{slug}.a11y.json`. Each file is keyed by demo name, then by axe rule ID. Each rule records a `status` (`pass`, `fail`, or `incomplete`) and WCAG tags.\n\nEnroll a component (slug-wide, or narrow with brace-glob):\n\n```ts\n// test/regressions/demoMeta.ts\n{ test: 'docs/data/material/components/alert/*', enabled: true, skipAssertions: ['color-contrast'] },\n{ test: 'docs/data/material/components/buttons/{BasicButtons,ColorButtons}', enabled: true, assertions: 'all' },\n```\n\nOverride a specific demo: append a per-demo rule _after_ the slug-wide rule (last-match-wins; the override must restate every field it wants):\n\n```ts\n{ test: 'docs/data/material/components/popover/AnchorPlayground', enabled: false }, // Redux isolation\n```\n\nRun `pnpm test:regressions` to refresh the `*.a11y.json` files. CI fails if any are stale.\n\nFor local iteration, scope the run with vitest's `-t` test-name filter (matched against the `it()` strings, which contain the route). Non-matching tests are skipped — their bodies don't execute, so the browser never navigates to those routes.\n\n```bash\n# in one terminal\npnpm test:regressions:server\n\n# in another — note no `--`, pnpm forwards args directly\npnpm test:regressions:run -t '/docs-components-buttons/'              # one slug\npnpm test:regressions:run -t '/docs-components-buttons/BasicButtons$' # one demo\npnpm test:regressions:run -t '/docs-components-(buttons|chips)/'      # multiple slugs\n```\n\nFiltered runs only refresh the matched slugs' `*.a11y.json`. Run the unfiltered `pnpm test:regressions` before pushing.\n\n### Imports\n\nUse one-level deep imports to avoid bundling entire packages:\n\n```js\nimport Button from '@mui/material/Button'; // Good\nimport { Button } from '@mui/material'; // Avoid in packages\n```\n\n## Agent Skills\n\nPackaged guidance for common integration topics lives under `skills/`. Each skill is a self-contained directory:\n\n| Skill                                                                  | Focus                                                       |\n| :--------------------------------------------------------------------- | :---------------------------------------------------------- |\n| [skills/material-ui-styling](./skills/material-ui-styling/AGENTS.md)   | `sx`, `styled()`, theme overrides, slots, global CSS        |\n| [skills/material-ui-theming](./skills/material-ui-theming/AGENTS.md)   | `createTheme`, design tokens, `colorSchemes`, CSS variables |\n| [skills/material-ui-nextjs](./skills/material-ui-nextjs/AGENTS.md)     | App/Pages Router, Emotion cache, `next/font`, `Link`, SSR   |\n| [skills/material-ui-tailwind](./skills/material-ui-tailwind/AGENTS.md) | Tailwind v4 `@layer`, `enableCssLayer`, v3 interop          |\n\nRead the relevant `AGENTS.md` when helping users with those topics.\n\n## Pre-PR Checklist\n\n1. `pnpm prettier` - Format code\n2. `pnpm eslint` - Pass linting\n3. `pnpm typescript` - Pass type checking\n4. `pnpm test:unit` - Pass unit tests\n5. If API changed: `pnpm proptypes && pnpm docs:api`\n6. If `.md` files changed: `pnpm vale <file1> <file2> ...` - Check prose style and grammar\n\n## PR Title Format\n\n`[component] Imperative description`\n\nExamples:\n\n- `[button] Add loading state`\n- `[docs] Fix typo in Grid documentation`\n\n<!-- File: CLAUDE.md (Tokens: ~43 | Category: claude-rule) -->\n# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\nSee [AGENTS.md](./AGENTS.md) for codebase documentation.\n\n<!-- File: .claude-plugin/marketplace.json (Tokens: ~300 | Category: marketplace) -->\n# Claude Plugin Marketplace Catalog\n\nPath: `.claude-plugin/marketplace.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/mui/material-ui/HEAD/.claude-plugin/marketplace.json)\n\n<!-- File: .claude-plugin/plugin.json (Tokens: ~300 | Category: plugin-manifest) -->\n# claude-plugin Plugin Manifest\n\nPath: `.claude-plugin/plugin.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/mui/material-ui/HEAD/.claude-plugin/plugin.json)\n\n<!-- File: .cursor/mcp.json (Tokens: ~300 | Category: mcp-config) -->\n# Model Context Protocol (MCP) Configuration\n\nPath: `.cursor/mcp.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/mui/material-ui/HEAD/.cursor/mcp.json)\n\n<!-- File: .cursorrules (nextjs-material-ui-tailwind-css-cursorrules-prompt.mdc) (Tokens: ~514 | Category: cursor-rule) -->\n---\ndescription: \"Cursor rules for Next.js development with Material UI and Tailwind CSS integration.\"\nglobs: **/*\nalwaysApply: false\n---\nCe projet s'appel Portfolio2\n\nIl est basé sur Next.Js, il a tailwindcss, materialui, shadcn/ui et aceternityui\n\nWhat is your project named? portfolio2\n\nWould you like to use TypeScript? Yes\n\nWould you like to use ESLint? No\n\nWould you like to use Tailwind CSS? Yes\n\nWould you like to use `src/` directory? Yes\n\nWould you like to use App Router? (recommended) Yes\n\nWould you like to customize the default import alias (@/)? No\n\nWhat import alias would you like configured? @/\n\nNola liste des dépendance\n\n\"dependencies\": {\n  \"@ckeditor/ckeditor5-react\": \"^6.3.0\",\n  \"@emotion/react\": \"^11.11.4\",\n  \"@emotion/styled\": \"^11.11.5\",\n  \"@mui/icons-material\": \"^5.15.18\",\n  \"@mui/material\": \"^5.15.18\",\n  \"@mui/styled-engine-sc\": \"^6.0.0-alpha.18\",\n  \"@prisma/client\": \"^5.14.0\",\n  \"autoprefixer\": \"^10.4.19\",\n  \"bcryptjs\": \"^2.4.3\",\n  \"ckeditor5\": \"^41.4.2\",\n  \"clsx\": \"^2.1.1\",\n  \"framer-motion\": \"^11.2.5\",\n  \"init\": \"^0.1.2\",\n  \"next\": \"^14.2.3\",\n  \"next-auth\": \"^4.24.7\",\n  \"react\": \"^18.3.1\",\n  \"react-dom\": \"^18.3.1\",\n  \"shadcn-ui\": \"^0.8.0\",\n  \"styled-components\": \"^6.1.11\",\n  \"tailwind-merge\": \"^2.3.0\"\n},\n\n\"devDependencies\": {\n  \"@types/bcryptjs\": \"^2.4.6\",\n  \"@types/node\": \"^20\",\n  \"@types/react\": \"^18\",\n  \"@types/react-dom\": \"^18\",\n  \"postcss\": \"^8.4.38\",\n  \"prisma\": \"^5.14.0\",\n  \"tailwindcss\": \"^3.4.3\",\n  \"typescript\": \"^5.4.5\"\n}\n</yakaai_skills>"}