{"owner":"mui","repo":"material-ui","hasSkills":true,"hasMcp":false,"mcpConfig":null,"found":["CLAUDE.md","AGENTS.md"],"skills":{"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","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\nAlways author the TypeScript version of the demos. To generate the JavaScript variant, run:\n\n```bash\npnpm docs:typescript:formatted\n```\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 (not published): `@mui-internal/*`, `@mui/internal-*`\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` unless listed in `skipAssertions`.\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 },\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 demos changed: `pnpm docs:typescript:formatted`\n7. 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"},"files":{"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","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\nAlways author the TypeScript version of the demos. To generate the JavaScript variant, run:\n\n```bash\npnpm docs:typescript:formatted\n```\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 (not published): `@mui-internal/*`, `@mui/internal-*`\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` unless listed in `skipAssertions`.\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 },\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 demos changed: `pnpm docs:typescript:formatted`\n7. 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"},"items":[{"name":"CLAUDE.md","path":"CLAUDE.md","title":"CLAUDE.md","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","category":"root","tokens":44},{"name":"AGENTS.md","path":"AGENTS.md","title":"AGENTS.md","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\nAlways author the TypeScript version of the demos. To generate the JavaScript variant, run:\n\n```bash\npnpm docs:typescript:formatted\n```\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 (not published): `@mui-internal/*`, `@mui/internal-*`\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` unless listed in `skipAssertions`.\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 },\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 demos changed: `pnpm docs:typescript:formatted`\n7. 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","category":"root","tokens":2203}]}