[docs] Link to agent skills in relevant docs (mui#48387)

Co-authored-by: mapache-salvaje <mapache@salvaje.com>

Author: mapache-salvaje

docs/data/material/customization/css-theme-variables/overview.md

@@ -9,6 +9,10 @@ You can implement them to improve Material UI's theming and customization exper
 If this is your first time encountering CSS variables, you should check out [the MDN Web Docs on CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties) before continuing here.
 :::
 
+:::success
+Use the [Material UI theming agent skill](https://github.com/mui/material-ui/tree/master/skills/material-ui-theming) to give your AI coding assistant full context on CSS theme variables, `theme.vars`, and SSR flicker prevention.
+:::
+
 ## Introduction
 
 CSS theme variables replace raw values in Material UI components for a better developer experience because, in the browser dev tool, you will see which theme token is used as a value.

docs/data/material/customization/dark-mode/dark-mode.md

@@ -2,6 +2,10 @@
 
 <p class="description">Material UI comes with two palette modes: light (the default) and dark.</p>
 
+:::success
+Use the [Material UI theming agent skill](https://github.com/mui/material-ui/tree/master/skills/material-ui-theming) to give your AI coding assistant full context on dark mode, color schemes, and SSR behavior.
+:::
+
 ## Dark mode only
 
 You can make your application use the dark theme as the default—regardless of the user's preference—by adding `mode: 'dark'` to the `createTheme()` helper:

docs/data/material/customization/how-to-customize/how-to-customize.md

@@ -14,6 +14,10 @@ Material UI provides several different ways to customize a component's styles.
 1. [Global theme overrides](#3-global-theme-overrides)
 1. [Global CSS override](#4-global-css-override)
 
+:::success
+Use the [Material UI styling agent skill](https://github.com/mui/material-ui/tree/master/skills/material-ui-styling) to give your AI coding assistant guidance on choosing between `sx`, `styled()`, theme overrides, and global CSS.
+:::
+
 ## 1. One-off customization
 
 To change the styles of _one single instance_ of a component, you can use one of the following options:

docs/data/material/customization/theming/theming.md

@@ -8,6 +8,10 @@ Themes let you apply a consistent tone to your app. It allows you to **customize
 
 To promote greater consistency between apps, light and dark theme types are available to choose from. By default, components use the light theme type.
 
+:::success
+Use the [Material UI theming agent skill](https://github.com/mui/material-ui/tree/master/skills/material-ui-theming) to give your AI coding assistant full context on `createTheme`, palette, color schemes, CSS variables, and TypeScript augmentation.
+:::
+
 ## Theme provider
 
 Material UI components adhere to the library's default theme out of the box.

docs/data/material/integrations/nextjs/nextjs.md

@@ -2,6 +2,10 @@
 
 <p class="description">Learn how to use Material UI with Next.js.</p>
 
+:::success
+Use the [Material UI + Next.js agent skill](https://github.com/mui/material-ui/tree/master/skills/material-ui-nextjs) to give your AI coding assistant full context on this integration, including App Router, SSR cache providers, `next/font`, and CSS layers.
+:::
+
 ## App Router
 
 This section walks through the Material UI integration with the Next.js [App Router](https://nextjs.org/docs/app), an evolution of the [Pages Router](#pages-router), and, currently, the recommended way of building new Next.js applications starting from version 13.

docs/data/material/integrations/tailwindcss/tailwindcss-v4.md

@@ -11,6 +11,10 @@ There are two steps to integrate Tailwind CSS v4 with Material UI:
 
 The instructions below detail how to achieve this using common React frameworks.
 
+:::success
+Use the [Material UI + Tailwind CSS agent skill](https://github.com/mui/material-ui/tree/master/skills/material-ui-tailwind) to give your AI coding assistant full context on this integration, including CSS layer ordering, `enableCssLayer`, and Tailwind class overrides.
+:::
+
 ### Next.js App Router
 
 To integrate Tailwind CSS v4 with Material UI in a Next.js App Router project, start by configuring Material UI with Next.js in the [App Router integration guide](/material-ui/integrations/nextjs/#app-router).

skills/material-ui-nextjs/AGENTS.md

@@ -1,6 +1,8 @@
 # Material UI and Next.js
 
-Version 1.0.0
+Version 1.0.0 (Material UI v9)
+
+> **Version notice:** This skill targets Material UI v9 (`>=9.0.0 <10.0.0`). If you are using a different major version, verify the API details before following this guidance.
 
 > Note: This document is for agents and LLMs integrating Material UI with Next.js. Source: `docs/data/material/integrations/nextjs/nextjs.md` and related integration docs in this repository.
 

skills/material-ui-nextjs/metadata.json

@@ -1,7 +1,8 @@
 {
   "version": "1.0.0",
-  "organization": "Material UI",
-  "abstract": "Documents Next.js integration for Material UI: AppRouterCacheProvider and Pages Router Document/App cache wiring, Emotion options, next/font with themes, CSS theme variables and SSR flicker pointers, enableCssLayer for Tailwind/CSS Modules, and Next.js Link client-wrapper patterns.",
+  "muiVersion": ">=9.0.0 <10.0.0",
+  "organization": "Material UI",
+  "abstract": "Documents Next.js integration for Material UI: AppRouterCacheProvider and Pages Router Document/App cache wiring, Emotion options, next/font with themes, CSS theme variables and SSR flicker pointers, enableCssLayer for Tailwind/CSS Modules, and Next.js Link client-wrapper patterns.",
   "references": [
     "https://mui.com/material-ui/integrations/nextjs.md",
     "https://mui.com/material-ui/integrations/routing.md",

skills/material-ui-styling/AGENTS.md

@@ -1,6 +1,8 @@
 # Material UI styling
 
-Version 1.0.0
+Version 1.0.0 (Material UI v9)
+
+> **Version notice:** This skill targets Material UI v9 (`>=9.0.0 <10.0.0`). If you are using a different major version, verify the API details before following this guidance.
 
 > Note: This document is for agents and LLMs maintaining or generating Material UI code. It follows [How to customize](https://mui.com/material-ui/customization/how-to-customize.md) and related sources in this repository (`docs/data/material/customization/`, `docs/data/system/`).
 

skills/material-ui-styling/metadata.json

@@ -1,7 +1,8 @@
 {
   "version": "1.0.0",
-  "organization": "Material UI",
-  "abstract": "Guides selection of Material UI styling strategies from narrowest to broadest scope (sx, styled, theme.components, GlobalStyles/CssBaseline), including slot/state overrides and sx vs styled foot-guns.",
+  "muiVersion": ">=9.0.0 <10.0.0",
+  "organization": "Material UI",
+  "abstract": "Guides selection of Material UI styling strategies from narrowest to broadest scope (sx, styled, theme.components, GlobalStyles/CssBaseline), including slot/state overrides and sx vs styled foot-guns.",
   "references": [
     "https://mui.com/material-ui/customization/how-to-customize.md",
     "https://mui.com/system/getting-started/the-sx-prop.md",