{"owner":"microsoft","repo":"fluentui","hasSkills":true,"totalSkillsCount":5,"totalTokensCount":4112,"categories":["root-instruction","claude-rule","mcp-config","marketplace","plugin-manifest"],"hasMcp":true,"mcpConfig":{"mcpServers":{"fluentui":{"command":"npx","args":["-y","@modelcontextprotocol/server-fluentui"]}}},"found":["AGENTS.md","CLAUDE.md",".cursor/mcp.json",".claude-plugin/marketplace.json",".claude-plugin/plugin.json"],"skills":{"AGENTS.md":"<!-- nx configuration start-->\n<!-- Leave the start & end comments to automatically receive updates. -->\n\n# General Guidelines for working with Nx\n\n- Always run tasks through `nx` (`nx run`, `nx run-many`, `nx affected`), never tools directly\n- Use `nx_workspace` tool to understand workspace architecture\n- Use `nx_project_details` tool to analyze specific project structure and dependencies\n- Use `nx_docs` tool for up-to-date Nx configuration guidance\n\n<!-- nx configuration end-->\n\n# Fluent UI — Agent Instructions\n\n**Instructions in this file are the source of truth, not existing code.** This repo contains\nlegacy patterns (especially in v8 packages) that predate current standards. Never copy patterns\nfrom existing code without verifying they match these instructions.\n\n## Critical Rules (never violate)\n\n1. **Never hardcode colors, spacing, or typography values.** Always use design tokens from `@fluentui/react-theme`. See [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md).\n2. **Never use `React.FC`.** Always use `ForwardRefComponent` with `React.forwardRef`.\n3. **Never access `window`, `document`, or `navigator` directly.** In v9 components, use `useFluent_unstable()` to get `targetDocument` and `targetDocument.defaultView` instead of `document`/`window`. For non-component code, use `canUseDOM()` from `@fluentui/react-utilities`.\n4. **Never add dependencies between component packages.** `react-button` must not depend on `react-menu`. Shared logic goes in `react-utilities` or `react-shared-contexts`. See [docs/architecture/layers.md](docs/architecture/layers.md).\n5. **Never skip beachball change files** for published package changes. Run `yarn beachball change`.\n6. **Each PR must contain at most one Beachball change file per package.** Consolidate all changes for that package in the PR into that one file.\n\n## V9 Component Template (the correct pattern)\n\n```tsx\n// ComponentName.tsx — always ForwardRefComponent, never React.FC\nexport const ComponentName: ForwardRefComponent<ComponentNameProps> = React.forwardRef((props, ref) => {\n  const state = useComponentName_unstable(props, ref);\n  useComponentNameStyles_unstable(state);\n  return renderComponentName_unstable(state);\n});\n\n// Styles — always use tokens, never hardcoded values\nimport { makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const useComponentNameStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,\n  },\n});\n\n// mergeClasses — always preserve user className LAST\nstate.root.className = mergeClasses(\n  classes.root,\n  state.root.className, // always last\n);\n```\n\n## Legacy Anti-Patterns (never copy these)\n\n- **DO NOT copy patterns from `packages/react/` (v8).** That's maintenance-only legacy code using runtime styling, class components, and different APIs.\n- **DO NOT use `@fluentui/react` imports for new v9 work.** Use `@fluentui/react-components`.\n- **DO NOT use `mergeStyles` or `mergeStyleSets`.** Use Griffel `makeStyles` with design tokens.\n- **DO NOT use `IStyle` or `IStyleFunctionOrObject`.** Use Griffel's `GriffelStyle` type.\n- **DO NOT use `initializeIcons()`.** V9 uses `@fluentui/react-icons` with tree-shaking.\n\n## Exploration Guidance\n\n- `packages/react-components/` has 74+ packages — search by specific component name, never read the full directory.\n- Use `yarn nx show project <project-name>` to understand a project's structure.\n- Map package names to paths: `@fluentui/react-<name>` → `packages/react-components/react-<name>/library/src/`.\n\n## Architecture (deep dives)\n\n| Topic                                         | Location                                                                           |\n| --------------------------------------------- | ---------------------------------------------------------------------------------- |\n| V9 component patterns (hooks, slots, Griffel) | [docs/architecture/component-patterns.md](docs/architecture/component-patterns.md) |\n| Design tokens and theming                     | [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md)           |\n| Package dependency layers                     | [docs/architecture/layers.md](docs/architecture/layers.md)                         |\n\n## Workflows\n\n| Topic                                | Location                                                         |\n| ------------------------------------ | ---------------------------------------------------------------- |\n| PR checklist, change files, commands | [docs/workflows/contributing.md](docs/workflows/contributing.md) |\n| Testing guide (unit, VRT, SSR, E2E)  | [docs/workflows/testing.md](docs/workflows/testing.md)           |\n| Team routing and label taxonomy      | [docs/team-routing.md](docs/team-routing.md)                     |\n\n## Quality Tracking\n\n| Topic                      | Location                                               |\n| -------------------------- | ------------------------------------------------------ |\n| Per-package quality grades | [docs/quality-grades.md](docs/quality-grades.md)       |\n| Technical debt tracker     | [docs/tech-debt-tracker.md](docs/tech-debt-tracker.md) |\n\n## Skills (Slash Commands)\n\n| Skill                | Command                            | Purpose                                                                   |\n| -------------------- | ---------------------------------- | ------------------------------------------------------------------------- |\n| `v9-component`       | `/v9-component Name`               | Scaffold a new v9 component with all required files                       |\n| `headless-component` | `/headless-component Name`         | Author an unstyled v9 primitive with state attributes, tests, and stories |\n| `change`             | `/change`                          | Create beachball change file from current diff                            |\n| `lint-check`         | `/lint-check [pkg]`                | Run lint, parse errors, and auto-fix common issues                        |\n| `token-lookup`       | `/token-lookup val`                | Find the design token for a hardcoded CSS value                           |\n| `package-info`       | `/package-info pkg`                | Quick lookup: path, deps, owner, tests, structure                         |\n| `visual-test`        | `/visual-test Name`                | Visually verify a component via Storybook + playwright-cli                |\n| `review-pr`          | `/review-pr #123`                  | Review a PR with confidence scoring and category checks                   |\n| `triage-issues`      | `/triage-issues`                   | Walk the Needs-Triage queue and recommend labels/assignee                 |\n| `dependabot-rollup`  | `/dependabot-rollup`               | Dry-run and optionally roll up at most 11 Dependabot patch/minor PRs      |\n| `assign-prs`         | `/assign-prs`                      | Assign reviewers to the team review queues by area and current load       |\n| `release-recovery`   | `/release-recovery [pipeline-url]` | Diagnose and repair a release that published to npm but failed to push    |\n\n## Package Layout\n\n| Area           | Path                         | Status             |\n| -------------- | ---------------------------- | ------------------ |\n| V9 components  | `packages/react-components/` | Active development |\n| V8 components  | `packages/react/`            | Maintenance only   |\n| Web Components | `packages/web-components/`   | Active             |\n| Charting       | `packages/charts/`           | Active             |\n| Build tooling  | `tools/`                     | Active             |\n| ESLint plugin  | `packages/eslint-plugin/`    | Active             |\n","CLAUDE.md":"<!-- nx configuration start-->\n<!-- Leave the start & end comments to automatically receive updates. -->\n\n# General Guidelines for working with Nx\n\n- Always run tasks through `nx` (`nx run`, `nx run-many`, `nx affected`), never tools directly\n- Use `nx_workspace` tool to understand workspace architecture\n- Use `nx_project_details` tool to analyze specific project structure and dependencies\n- Use `nx_docs` tool for up-to-date Nx configuration guidance\n\n<!-- nx configuration end-->\n\n# Fluent UI — Agent Instructions\n\n**Instructions in this file are the source of truth, not existing code.** This repo contains\nlegacy patterns (especially in v8 packages) that predate current standards. Never copy patterns\nfrom existing code without verifying they match these instructions.\n\n## Critical Rules (never violate)\n\n1. **Never hardcode colors, spacing, or typography values.** Always use design tokens from `@fluentui/react-theme`. See [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md).\n2. **Never use `React.FC`.** Always use `ForwardRefComponent` with `React.forwardRef`.\n3. **Never access `window`, `document`, or `navigator` directly.** In v9 components, use `useFluent_unstable()` to get `targetDocument` and `targetDocument.defaultView` instead of `document`/`window`. For non-component code, use `canUseDOM()` from `@fluentui/react-utilities`.\n4. **Never add dependencies between component packages.** `react-button` must not depend on `react-menu`. Shared logic goes in `react-utilities` or `react-shared-contexts`. See [docs/architecture/layers.md](docs/architecture/layers.md).\n5. **Never skip beachball change files** for published package changes. Run `yarn beachball change`.\n6. **Each PR must contain at most one Beachball change file per package.** Consolidate all changes for that package in the PR into that one file.\n\n## V9 Component Template (the correct pattern)\n\n```tsx\n// ComponentName.tsx — always ForwardRefComponent, never React.FC\nexport const ComponentName: ForwardRefComponent<ComponentNameProps> = React.forwardRef((props, ref) => {\n  const state = useComponentName_unstable(props, ref);\n  useComponentNameStyles_unstable(state);\n  return renderComponentName_unstable(state);\n});\n\n// Styles — always use tokens, never hardcoded values\nimport { makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const useComponentNameStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,\n  },\n});\n\n// mergeClasses — always preserve user className LAST\nstate.root.className = mergeClasses(\n  classes.root,\n  state.root.className, // always last\n);\n```\n\n## Legacy Anti-Patterns (never copy these)\n\n- **DO NOT copy patterns from `packages/react/` (v8).** That's maintenance-only legacy code using runtime styling, class components, and different APIs.\n- **DO NOT use `@fluentui/react` imports for new v9 work.** Use `@fluentui/react-components`.\n- **DO NOT use `mergeStyles` or `mergeStyleSets`.** Use Griffel `makeStyles` with design tokens.\n- **DO NOT use `IStyle` or `IStyleFunctionOrObject`.** Use Griffel's `GriffelStyle` type.\n- **DO NOT use `initializeIcons()`.** V9 uses `@fluentui/react-icons` with tree-shaking.\n\n## Exploration Guidance\n\n- `packages/react-components/` has 74+ packages — search by specific component name, never read the full directory.\n- Use `yarn nx show project <project-name>` to understand a project's structure.\n- Map package names to paths: `@fluentui/react-<name>` → `packages/react-components/react-<name>/library/src/`.\n\n## Architecture (deep dives)\n\n| Topic                                         | Location                                                                           |\n| --------------------------------------------- | ---------------------------------------------------------------------------------- |\n| V9 component patterns (hooks, slots, Griffel) | [docs/architecture/component-patterns.md](docs/architecture/component-patterns.md) |\n| Design tokens and theming                     | [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md)           |\n| Package dependency layers                     | [docs/architecture/layers.md](docs/architecture/layers.md)                         |\n\n## Workflows\n\n| Topic                                | Location                                                         |\n| ------------------------------------ | ---------------------------------------------------------------- |\n| PR checklist, change files, commands | [docs/workflows/contributing.md](docs/workflows/contributing.md) |\n| Testing guide (unit, VRT, SSR, E2E)  | [docs/workflows/testing.md](docs/workflows/testing.md)           |\n| Team routing and label taxonomy      | [docs/team-routing.md](docs/team-routing.md)                     |\n\n## Quality Tracking\n\n| Topic                      | Location                                               |\n| -------------------------- | ------------------------------------------------------ |\n| Per-package quality grades | [docs/quality-grades.md](docs/quality-grades.md)       |\n| Technical debt tracker     | [docs/tech-debt-tracker.md](docs/tech-debt-tracker.md) |\n\n## Skills (Slash Commands)\n\n| Skill                | Command                            | Purpose                                                                   |\n| -------------------- | ---------------------------------- | ------------------------------------------------------------------------- |\n| `v9-component`       | `/v9-component Name`               | Scaffold a new v9 component with all required files                       |\n| `headless-component` | `/headless-component Name`         | Author an unstyled v9 primitive with state attributes, tests, and stories |\n| `change`             | `/change`                          | Create beachball change file from current diff                            |\n| `lint-check`         | `/lint-check [pkg]`                | Run lint, parse errors, and auto-fix common issues                        |\n| `token-lookup`       | `/token-lookup val`                | Find the design token for a hardcoded CSS value                           |\n| `package-info`       | `/package-info pkg`                | Quick lookup: path, deps, owner, tests, structure                         |\n| `visual-test`        | `/visual-test Name`                | Visually verify a component via Storybook + playwright-cli                |\n| `review-pr`          | `/review-pr #123`                  | Review a PR with confidence scoring and category checks                   |\n| `triage-issues`      | `/triage-issues`                   | Walk the Needs-Triage queue and recommend labels/assignee                 |\n| `dependabot-rollup`  | `/dependabot-rollup`               | Dry-run and optionally roll up at most 11 Dependabot patch/minor PRs      |\n| `assign-prs`         | `/assign-prs`                      | Assign reviewers to the team review queues by area and current load       |\n| `release-recovery`   | `/release-recovery [pipeline-url]` | Diagnose and repair a release that published to npm but failed to push    |\n\n## Package Layout\n\n| Area           | Path                         | Status             |\n| -------------- | ---------------------------- | ------------------ |\n| V9 components  | `packages/react-components/` | Active development |\n| V8 components  | `packages/react/`            | Maintenance only   |\n| Web Components | `packages/web-components/`   | Active             |\n| Charting       | `packages/charts/`           | Active             |\n| Build tooling  | `tools/`                     | Active             |\n| ESLint plugin  | `packages/eslint-plugin/`    | Active             |\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/microsoft/fluentui/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/microsoft/fluentui/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/microsoft/fluentui/HEAD/.claude-plugin/plugin.json)"},"files":{"AGENTS.md":"<!-- nx configuration start-->\n<!-- Leave the start & end comments to automatically receive updates. -->\n\n# General Guidelines for working with Nx\n\n- Always run tasks through `nx` (`nx run`, `nx run-many`, `nx affected`), never tools directly\n- Use `nx_workspace` tool to understand workspace architecture\n- Use `nx_project_details` tool to analyze specific project structure and dependencies\n- Use `nx_docs` tool for up-to-date Nx configuration guidance\n\n<!-- nx configuration end-->\n\n# Fluent UI — Agent Instructions\n\n**Instructions in this file are the source of truth, not existing code.** This repo contains\nlegacy patterns (especially in v8 packages) that predate current standards. Never copy patterns\nfrom existing code without verifying they match these instructions.\n\n## Critical Rules (never violate)\n\n1. **Never hardcode colors, spacing, or typography values.** Always use design tokens from `@fluentui/react-theme`. See [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md).\n2. **Never use `React.FC`.** Always use `ForwardRefComponent` with `React.forwardRef`.\n3. **Never access `window`, `document`, or `navigator` directly.** In v9 components, use `useFluent_unstable()` to get `targetDocument` and `targetDocument.defaultView` instead of `document`/`window`. For non-component code, use `canUseDOM()` from `@fluentui/react-utilities`.\n4. **Never add dependencies between component packages.** `react-button` must not depend on `react-menu`. Shared logic goes in `react-utilities` or `react-shared-contexts`. See [docs/architecture/layers.md](docs/architecture/layers.md).\n5. **Never skip beachball change files** for published package changes. Run `yarn beachball change`.\n6. **Each PR must contain at most one Beachball change file per package.** Consolidate all changes for that package in the PR into that one file.\n\n## V9 Component Template (the correct pattern)\n\n```tsx\n// ComponentName.tsx — always ForwardRefComponent, never React.FC\nexport const ComponentName: ForwardRefComponent<ComponentNameProps> = React.forwardRef((props, ref) => {\n  const state = useComponentName_unstable(props, ref);\n  useComponentNameStyles_unstable(state);\n  return renderComponentName_unstable(state);\n});\n\n// Styles — always use tokens, never hardcoded values\nimport { makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const useComponentNameStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,\n  },\n});\n\n// mergeClasses — always preserve user className LAST\nstate.root.className = mergeClasses(\n  classes.root,\n  state.root.className, // always last\n);\n```\n\n## Legacy Anti-Patterns (never copy these)\n\n- **DO NOT copy patterns from `packages/react/` (v8).** That's maintenance-only legacy code using runtime styling, class components, and different APIs.\n- **DO NOT use `@fluentui/react` imports for new v9 work.** Use `@fluentui/react-components`.\n- **DO NOT use `mergeStyles` or `mergeStyleSets`.** Use Griffel `makeStyles` with design tokens.\n- **DO NOT use `IStyle` or `IStyleFunctionOrObject`.** Use Griffel's `GriffelStyle` type.\n- **DO NOT use `initializeIcons()`.** V9 uses `@fluentui/react-icons` with tree-shaking.\n\n## Exploration Guidance\n\n- `packages/react-components/` has 74+ packages — search by specific component name, never read the full directory.\n- Use `yarn nx show project <project-name>` to understand a project's structure.\n- Map package names to paths: `@fluentui/react-<name>` → `packages/react-components/react-<name>/library/src/`.\n\n## Architecture (deep dives)\n\n| Topic                                         | Location                                                                           |\n| --------------------------------------------- | ---------------------------------------------------------------------------------- |\n| V9 component patterns (hooks, slots, Griffel) | [docs/architecture/component-patterns.md](docs/architecture/component-patterns.md) |\n| Design tokens and theming                     | [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md)           |\n| Package dependency layers                     | [docs/architecture/layers.md](docs/architecture/layers.md)                         |\n\n## Workflows\n\n| Topic                                | Location                                                         |\n| ------------------------------------ | ---------------------------------------------------------------- |\n| PR checklist, change files, commands | [docs/workflows/contributing.md](docs/workflows/contributing.md) |\n| Testing guide (unit, VRT, SSR, E2E)  | [docs/workflows/testing.md](docs/workflows/testing.md)           |\n| Team routing and label taxonomy      | [docs/team-routing.md](docs/team-routing.md)                     |\n\n## Quality Tracking\n\n| Topic                      | Location                                               |\n| -------------------------- | ------------------------------------------------------ |\n| Per-package quality grades | [docs/quality-grades.md](docs/quality-grades.md)       |\n| Technical debt tracker     | [docs/tech-debt-tracker.md](docs/tech-debt-tracker.md) |\n\n## Skills (Slash Commands)\n\n| Skill                | Command                            | Purpose                                                                   |\n| -------------------- | ---------------------------------- | ------------------------------------------------------------------------- |\n| `v9-component`       | `/v9-component Name`               | Scaffold a new v9 component with all required files                       |\n| `headless-component` | `/headless-component Name`         | Author an unstyled v9 primitive with state attributes, tests, and stories |\n| `change`             | `/change`                          | Create beachball change file from current diff                            |\n| `lint-check`         | `/lint-check [pkg]`                | Run lint, parse errors, and auto-fix common issues                        |\n| `token-lookup`       | `/token-lookup val`                | Find the design token for a hardcoded CSS value                           |\n| `package-info`       | `/package-info pkg`                | Quick lookup: path, deps, owner, tests, structure                         |\n| `visual-test`        | `/visual-test Name`                | Visually verify a component via Storybook + playwright-cli                |\n| `review-pr`          | `/review-pr #123`                  | Review a PR with confidence scoring and category checks                   |\n| `triage-issues`      | `/triage-issues`                   | Walk the Needs-Triage queue and recommend labels/assignee                 |\n| `dependabot-rollup`  | `/dependabot-rollup`               | Dry-run and optionally roll up at most 11 Dependabot patch/minor PRs      |\n| `assign-prs`         | `/assign-prs`                      | Assign reviewers to the team review queues by area and current load       |\n| `release-recovery`   | `/release-recovery [pipeline-url]` | Diagnose and repair a release that published to npm but failed to push    |\n\n## Package Layout\n\n| Area           | Path                         | Status             |\n| -------------- | ---------------------------- | ------------------ |\n| V9 components  | `packages/react-components/` | Active development |\n| V8 components  | `packages/react/`            | Maintenance only   |\n| Web Components | `packages/web-components/`   | Active             |\n| Charting       | `packages/charts/`           | Active             |\n| Build tooling  | `tools/`                     | Active             |\n| ESLint plugin  | `packages/eslint-plugin/`    | Active             |\n","CLAUDE.md":"<!-- nx configuration start-->\n<!-- Leave the start & end comments to automatically receive updates. -->\n\n# General Guidelines for working with Nx\n\n- Always run tasks through `nx` (`nx run`, `nx run-many`, `nx affected`), never tools directly\n- Use `nx_workspace` tool to understand workspace architecture\n- Use `nx_project_details` tool to analyze specific project structure and dependencies\n- Use `nx_docs` tool for up-to-date Nx configuration guidance\n\n<!-- nx configuration end-->\n\n# Fluent UI — Agent Instructions\n\n**Instructions in this file are the source of truth, not existing code.** This repo contains\nlegacy patterns (especially in v8 packages) that predate current standards. Never copy patterns\nfrom existing code without verifying they match these instructions.\n\n## Critical Rules (never violate)\n\n1. **Never hardcode colors, spacing, or typography values.** Always use design tokens from `@fluentui/react-theme`. See [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md).\n2. **Never use `React.FC`.** Always use `ForwardRefComponent` with `React.forwardRef`.\n3. **Never access `window`, `document`, or `navigator` directly.** In v9 components, use `useFluent_unstable()` to get `targetDocument` and `targetDocument.defaultView` instead of `document`/`window`. For non-component code, use `canUseDOM()` from `@fluentui/react-utilities`.\n4. **Never add dependencies between component packages.** `react-button` must not depend on `react-menu`. Shared logic goes in `react-utilities` or `react-shared-contexts`. See [docs/architecture/layers.md](docs/architecture/layers.md).\n5. **Never skip beachball change files** for published package changes. Run `yarn beachball change`.\n6. **Each PR must contain at most one Beachball change file per package.** Consolidate all changes for that package in the PR into that one file.\n\n## V9 Component Template (the correct pattern)\n\n```tsx\n// ComponentName.tsx — always ForwardRefComponent, never React.FC\nexport const ComponentName: ForwardRefComponent<ComponentNameProps> = React.forwardRef((props, ref) => {\n  const state = useComponentName_unstable(props, ref);\n  useComponentNameStyles_unstable(state);\n  return renderComponentName_unstable(state);\n});\n\n// Styles — always use tokens, never hardcoded values\nimport { makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const useComponentNameStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,\n  },\n});\n\n// mergeClasses — always preserve user className LAST\nstate.root.className = mergeClasses(\n  classes.root,\n  state.root.className, // always last\n);\n```\n\n## Legacy Anti-Patterns (never copy these)\n\n- **DO NOT copy patterns from `packages/react/` (v8).** That's maintenance-only legacy code using runtime styling, class components, and different APIs.\n- **DO NOT use `@fluentui/react` imports for new v9 work.** Use `@fluentui/react-components`.\n- **DO NOT use `mergeStyles` or `mergeStyleSets`.** Use Griffel `makeStyles` with design tokens.\n- **DO NOT use `IStyle` or `IStyleFunctionOrObject`.** Use Griffel's `GriffelStyle` type.\n- **DO NOT use `initializeIcons()`.** V9 uses `@fluentui/react-icons` with tree-shaking.\n\n## Exploration Guidance\n\n- `packages/react-components/` has 74+ packages — search by specific component name, never read the full directory.\n- Use `yarn nx show project <project-name>` to understand a project's structure.\n- Map package names to paths: `@fluentui/react-<name>` → `packages/react-components/react-<name>/library/src/`.\n\n## Architecture (deep dives)\n\n| Topic                                         | Location                                                                           |\n| --------------------------------------------- | ---------------------------------------------------------------------------------- |\n| V9 component patterns (hooks, slots, Griffel) | [docs/architecture/component-patterns.md](docs/architecture/component-patterns.md) |\n| Design tokens and theming                     | [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md)           |\n| Package dependency layers                     | [docs/architecture/layers.md](docs/architecture/layers.md)                         |\n\n## Workflows\n\n| Topic                                | Location                                                         |\n| ------------------------------------ | ---------------------------------------------------------------- |\n| PR checklist, change files, commands | [docs/workflows/contributing.md](docs/workflows/contributing.md) |\n| Testing guide (unit, VRT, SSR, E2E)  | [docs/workflows/testing.md](docs/workflows/testing.md)           |\n| Team routing and label taxonomy      | [docs/team-routing.md](docs/team-routing.md)                     |\n\n## Quality Tracking\n\n| Topic                      | Location                                               |\n| -------------------------- | ------------------------------------------------------ |\n| Per-package quality grades | [docs/quality-grades.md](docs/quality-grades.md)       |\n| Technical debt tracker     | [docs/tech-debt-tracker.md](docs/tech-debt-tracker.md) |\n\n## Skills (Slash Commands)\n\n| Skill                | Command                            | Purpose                                                                   |\n| -------------------- | ---------------------------------- | ------------------------------------------------------------------------- |\n| `v9-component`       | `/v9-component Name`               | Scaffold a new v9 component with all required files                       |\n| `headless-component` | `/headless-component Name`         | Author an unstyled v9 primitive with state attributes, tests, and stories |\n| `change`             | `/change`                          | Create beachball change file from current diff                            |\n| `lint-check`         | `/lint-check [pkg]`                | Run lint, parse errors, and auto-fix common issues                        |\n| `token-lookup`       | `/token-lookup val`                | Find the design token for a hardcoded CSS value                           |\n| `package-info`       | `/package-info pkg`                | Quick lookup: path, deps, owner, tests, structure                         |\n| `visual-test`        | `/visual-test Name`                | Visually verify a component via Storybook + playwright-cli                |\n| `review-pr`          | `/review-pr #123`                  | Review a PR with confidence scoring and category checks                   |\n| `triage-issues`      | `/triage-issues`                   | Walk the Needs-Triage queue and recommend labels/assignee                 |\n| `dependabot-rollup`  | `/dependabot-rollup`               | Dry-run and optionally roll up at most 11 Dependabot patch/minor PRs      |\n| `assign-prs`         | `/assign-prs`                      | Assign reviewers to the team review queues by area and current load       |\n| `release-recovery`   | `/release-recovery [pipeline-url]` | Diagnose and repair a release that published to npm but failed to push    |\n\n## Package Layout\n\n| Area           | Path                         | Status             |\n| -------------- | ---------------------------- | ------------------ |\n| V9 components  | `packages/react-components/` | Active development |\n| V8 components  | `packages/react/`            | Maintenance only   |\n| Web Components | `packages/web-components/`   | Active             |\n| Charting       | `packages/charts/`           | Active             |\n| Build tooling  | `tools/`                     | Active             |\n| ESLint plugin  | `packages/eslint-plugin/`    | Active             |\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/microsoft/fluentui/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/microsoft/fluentui/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/microsoft/fluentui/HEAD/.claude-plugin/plugin.json)"},"items":[{"name":"AGENTS.md","path":"AGENTS.md","rawUrl":"https://raw.githubusercontent.com/microsoft/fluentui/HEAD/AGENTS.md","title":"AI Agent Protocol & Instructions","category":"root-instruction","format":"markdown","content":"<!-- nx configuration start-->\n<!-- Leave the start & end comments to automatically receive updates. -->\n\n# General Guidelines for working with Nx\n\n- Always run tasks through `nx` (`nx run`, `nx run-many`, `nx affected`), never tools directly\n- Use `nx_workspace` tool to understand workspace architecture\n- Use `nx_project_details` tool to analyze specific project structure and dependencies\n- Use `nx_docs` tool for up-to-date Nx configuration guidance\n\n<!-- nx configuration end-->\n\n# Fluent UI — Agent Instructions\n\n**Instructions in this file are the source of truth, not existing code.** This repo contains\nlegacy patterns (especially in v8 packages) that predate current standards. Never copy patterns\nfrom existing code without verifying they match these instructions.\n\n## Critical Rules (never violate)\n\n1. **Never hardcode colors, spacing, or typography values.** Always use design tokens from `@fluentui/react-theme`. See [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md).\n2. **Never use `React.FC`.** Always use `ForwardRefComponent` with `React.forwardRef`.\n3. **Never access `window`, `document`, or `navigator` directly.** In v9 components, use `useFluent_unstable()` to get `targetDocument` and `targetDocument.defaultView` instead of `document`/`window`. For non-component code, use `canUseDOM()` from `@fluentui/react-utilities`.\n4. **Never add dependencies between component packages.** `react-button` must not depend on `react-menu`. Shared logic goes in `react-utilities` or `react-shared-contexts`. See [docs/architecture/layers.md](docs/architecture/layers.md).\n5. **Never skip beachball change files** for published package changes. Run `yarn beachball change`.\n6. **Each PR must contain at most one Beachball change file per package.** Consolidate all changes for that package in the PR into that one file.\n\n## V9 Component Template (the correct pattern)\n\n```tsx\n// ComponentName.tsx — always ForwardRefComponent, never React.FC\nexport const ComponentName: ForwardRefComponent<ComponentNameProps> = React.forwardRef((props, ref) => {\n  const state = useComponentName_unstable(props, ref);\n  useComponentNameStyles_unstable(state);\n  return renderComponentName_unstable(state);\n});\n\n// Styles — always use tokens, never hardcoded values\nimport { makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const useComponentNameStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,\n  },\n});\n\n// mergeClasses — always preserve user className LAST\nstate.root.className = mergeClasses(\n  classes.root,\n  state.root.className, // always last\n);\n```\n\n## Legacy Anti-Patterns (never copy these)\n\n- **DO NOT copy patterns from `packages/react/` (v8).** That's maintenance-only legacy code using runtime styling, class components, and different APIs.\n- **DO NOT use `@fluentui/react` imports for new v9 work.** Use `@fluentui/react-components`.\n- **DO NOT use `mergeStyles` or `mergeStyleSets`.** Use Griffel `makeStyles` with design tokens.\n- **DO NOT use `IStyle` or `IStyleFunctionOrObject`.** Use Griffel's `GriffelStyle` type.\n- **DO NOT use `initializeIcons()`.** V9 uses `@fluentui/react-icons` with tree-shaking.\n\n## Exploration Guidance\n\n- `packages/react-components/` has 74+ packages — search by specific component name, never read the full directory.\n- Use `yarn nx show project <project-name>` to understand a project's structure.\n- Map package names to paths: `@fluentui/react-<name>` → `packages/react-components/react-<name>/library/src/`.\n\n## Architecture (deep dives)\n\n| Topic                                         | Location                                                                           |\n| --------------------------------------------- | ---------------------------------------------------------------------------------- |\n| V9 component patterns (hooks, slots, Griffel) | [docs/architecture/component-patterns.md](docs/architecture/component-patterns.md) |\n| Design tokens and theming                     | [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md)           |\n| Package dependency layers                     | [docs/architecture/layers.md](docs/architecture/layers.md)                         |\n\n## Workflows\n\n| Topic                                | Location                                                         |\n| ------------------------------------ | ---------------------------------------------------------------- |\n| PR checklist, change files, commands | [docs/workflows/contributing.md](docs/workflows/contributing.md) |\n| Testing guide (unit, VRT, SSR, E2E)  | [docs/workflows/testing.md](docs/workflows/testing.md)           |\n| Team routing and label taxonomy      | [docs/team-routing.md](docs/team-routing.md)                     |\n\n## Quality Tracking\n\n| Topic                      | Location                                               |\n| -------------------------- | ------------------------------------------------------ |\n| Per-package quality grades | [docs/quality-grades.md](docs/quality-grades.md)       |\n| Technical debt tracker     | [docs/tech-debt-tracker.md](docs/tech-debt-tracker.md) |\n\n## Skills (Slash Commands)\n\n| Skill                | Command                            | Purpose                                                                   |\n| -------------------- | ---------------------------------- | ------------------------------------------------------------------------- |\n| `v9-component`       | `/v9-component Name`               | Scaffold a new v9 component with all required files                       |\n| `headless-component` | `/headless-component Name`         | Author an unstyled v9 primitive with state attributes, tests, and stories |\n| `change`             | `/change`                          | Create beachball change file from current diff                            |\n| `lint-check`         | `/lint-check [pkg]`                | Run lint, parse errors, and auto-fix common issues                        |\n| `token-lookup`       | `/token-lookup val`                | Find the design token for a hardcoded CSS value                           |\n| `package-info`       | `/package-info pkg`                | Quick lookup: path, deps, owner, tests, structure                         |\n| `visual-test`        | `/visual-test Name`                | Visually verify a component via Storybook + playwright-cli                |\n| `review-pr`          | `/review-pr #123`                  | Review a PR with confidence scoring and category checks                   |\n| `triage-issues`      | `/triage-issues`                   | Walk the Needs-Triage queue and recommend labels/assignee                 |\n| `dependabot-rollup`  | `/dependabot-rollup`               | Dry-run and optionally roll up at most 11 Dependabot patch/minor PRs      |\n| `assign-prs`         | `/assign-prs`                      | Assign reviewers to the team review queues by area and current load       |\n| `release-recovery`   | `/release-recovery [pipeline-url]` | Diagnose and repair a release that published to npm but failed to push    |\n\n## Package Layout\n\n| Area           | Path                         | Status             |\n| -------------- | ---------------------------- | ------------------ |\n| V9 components  | `packages/react-components/` | Active development |\n| V8 components  | `packages/react/`            | Maintenance only   |\n| Web Components | `packages/web-components/`   | Active             |\n| Charting       | `packages/charts/`           | Active             |\n| Build tooling  | `tools/`                     | Active             |\n| ESLint plugin  | `packages/eslint-plugin/`    | Active             |\n","isInternal":false,"tokens":1606,"sizeBytes":7816},{"name":"CLAUDE.md","path":"CLAUDE.md","rawUrl":"https://raw.githubusercontent.com/microsoft/fluentui/HEAD/CLAUDE.md","title":"Claude Agent Guidelines & System Prompt","category":"claude-rule","format":"markdown","content":"<!-- nx configuration start-->\n<!-- Leave the start & end comments to automatically receive updates. -->\n\n# General Guidelines for working with Nx\n\n- Always run tasks through `nx` (`nx run`, `nx run-many`, `nx affected`), never tools directly\n- Use `nx_workspace` tool to understand workspace architecture\n- Use `nx_project_details` tool to analyze specific project structure and dependencies\n- Use `nx_docs` tool for up-to-date Nx configuration guidance\n\n<!-- nx configuration end-->\n\n# Fluent UI — Agent Instructions\n\n**Instructions in this file are the source of truth, not existing code.** This repo contains\nlegacy patterns (especially in v8 packages) that predate current standards. Never copy patterns\nfrom existing code without verifying they match these instructions.\n\n## Critical Rules (never violate)\n\n1. **Never hardcode colors, spacing, or typography values.** Always use design tokens from `@fluentui/react-theme`. See [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md).\n2. **Never use `React.FC`.** Always use `ForwardRefComponent` with `React.forwardRef`.\n3. **Never access `window`, `document`, or `navigator` directly.** In v9 components, use `useFluent_unstable()` to get `targetDocument` and `targetDocument.defaultView` instead of `document`/`window`. For non-component code, use `canUseDOM()` from `@fluentui/react-utilities`.\n4. **Never add dependencies between component packages.** `react-button` must not depend on `react-menu`. Shared logic goes in `react-utilities` or `react-shared-contexts`. See [docs/architecture/layers.md](docs/architecture/layers.md).\n5. **Never skip beachball change files** for published package changes. Run `yarn beachball change`.\n6. **Each PR must contain at most one Beachball change file per package.** Consolidate all changes for that package in the PR into that one file.\n\n## V9 Component Template (the correct pattern)\n\n```tsx\n// ComponentName.tsx — always ForwardRefComponent, never React.FC\nexport const ComponentName: ForwardRefComponent<ComponentNameProps> = React.forwardRef((props, ref) => {\n  const state = useComponentName_unstable(props, ref);\n  useComponentNameStyles_unstable(state);\n  return renderComponentName_unstable(state);\n});\n\n// Styles — always use tokens, never hardcoded values\nimport { makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const useComponentNameStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,\n  },\n});\n\n// mergeClasses — always preserve user className LAST\nstate.root.className = mergeClasses(\n  classes.root,\n  state.root.className, // always last\n);\n```\n\n## Legacy Anti-Patterns (never copy these)\n\n- **DO NOT copy patterns from `packages/react/` (v8).** That's maintenance-only legacy code using runtime styling, class components, and different APIs.\n- **DO NOT use `@fluentui/react` imports for new v9 work.** Use `@fluentui/react-components`.\n- **DO NOT use `mergeStyles` or `mergeStyleSets`.** Use Griffel `makeStyles` with design tokens.\n- **DO NOT use `IStyle` or `IStyleFunctionOrObject`.** Use Griffel's `GriffelStyle` type.\n- **DO NOT use `initializeIcons()`.** V9 uses `@fluentui/react-icons` with tree-shaking.\n\n## Exploration Guidance\n\n- `packages/react-components/` has 74+ packages — search by specific component name, never read the full directory.\n- Use `yarn nx show project <project-name>` to understand a project's structure.\n- Map package names to paths: `@fluentui/react-<name>` → `packages/react-components/react-<name>/library/src/`.\n\n## Architecture (deep dives)\n\n| Topic                                         | Location                                                                           |\n| --------------------------------------------- | ---------------------------------------------------------------------------------- |\n| V9 component patterns (hooks, slots, Griffel) | [docs/architecture/component-patterns.md](docs/architecture/component-patterns.md) |\n| Design tokens and theming                     | [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md)           |\n| Package dependency layers                     | [docs/architecture/layers.md](docs/architecture/layers.md)                         |\n\n## Workflows\n\n| Topic                                | Location                                                         |\n| ------------------------------------ | ---------------------------------------------------------------- |\n| PR checklist, change files, commands | [docs/workflows/contributing.md](docs/workflows/contributing.md) |\n| Testing guide (unit, VRT, SSR, E2E)  | [docs/workflows/testing.md](docs/workflows/testing.md)           |\n| Team routing and label taxonomy      | [docs/team-routing.md](docs/team-routing.md)                     |\n\n## Quality Tracking\n\n| Topic                      | Location                                               |\n| -------------------------- | ------------------------------------------------------ |\n| Per-package quality grades | [docs/quality-grades.md](docs/quality-grades.md)       |\n| Technical debt tracker     | [docs/tech-debt-tracker.md](docs/tech-debt-tracker.md) |\n\n## Skills (Slash Commands)\n\n| Skill                | Command                            | Purpose                                                                   |\n| -------------------- | ---------------------------------- | ------------------------------------------------------------------------- |\n| `v9-component`       | `/v9-component Name`               | Scaffold a new v9 component with all required files                       |\n| `headless-component` | `/headless-component Name`         | Author an unstyled v9 primitive with state attributes, tests, and stories |\n| `change`             | `/change`                          | Create beachball change file from current diff                            |\n| `lint-check`         | `/lint-check [pkg]`                | Run lint, parse errors, and auto-fix common issues                        |\n| `token-lookup`       | `/token-lookup val`                | Find the design token for a hardcoded CSS value                           |\n| `package-info`       | `/package-info pkg`                | Quick lookup: path, deps, owner, tests, structure                         |\n| `visual-test`        | `/visual-test Name`                | Visually verify a component via Storybook + playwright-cli                |\n| `review-pr`          | `/review-pr #123`                  | Review a PR with confidence scoring and category checks                   |\n| `triage-issues`      | `/triage-issues`                   | Walk the Needs-Triage queue and recommend labels/assignee                 |\n| `dependabot-rollup`  | `/dependabot-rollup`               | Dry-run and optionally roll up at most 11 Dependabot patch/minor PRs      |\n| `assign-prs`         | `/assign-prs`                      | Assign reviewers to the team review queues by area and current load       |\n| `release-recovery`   | `/release-recovery [pipeline-url]` | Diagnose and repair a release that published to npm but failed to push    |\n\n## Package Layout\n\n| Area           | Path                         | Status             |\n| -------------- | ---------------------------- | ------------------ |\n| V9 components  | `packages/react-components/` | Active development |\n| V8 components  | `packages/react/`            | Maintenance only   |\n| Web Components | `packages/web-components/`   | Active             |\n| Charting       | `packages/charts/`           | Active             |\n| Build tooling  | `tools/`                     | Active             |\n| ESLint plugin  | `packages/eslint-plugin/`    | Active             |\n","isInternal":false,"tokens":1606,"sizeBytes":7816},{"name":"marketplace.json","path":".claude-plugin/marketplace.json","rawUrl":"https://raw.githubusercontent.com/microsoft/fluentui/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/microsoft/fluentui/HEAD/.claude-plugin/marketplace.json)","tokens":300,"sizeBytes":197},{"name":"plugin.json","path":".claude-plugin/plugin.json","rawUrl":"https://raw.githubusercontent.com/microsoft/fluentui/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/microsoft/fluentui/HEAD/.claude-plugin/plugin.json)","tokens":300,"sizeBytes":183},{"name":"mcp.json","path":".cursor/mcp.json","rawUrl":"https://raw.githubusercontent.com/microsoft/fluentui/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/microsoft/fluentui/HEAD/.cursor/mcp.json)","tokens":300,"sizeBytes":176}],"systemPromptSnippet":"<yakaai_skills repo=\"microsoft/fluentui\">\n<!-- File: AGENTS.md (Tokens: ~1606 | Category: root-instruction) -->\n<!-- nx configuration start-->\n<!-- Leave the start & end comments to automatically receive updates. -->\n\n# General Guidelines for working with Nx\n\n- Always run tasks through `nx` (`nx run`, `nx run-many`, `nx affected`), never tools directly\n- Use `nx_workspace` tool to understand workspace architecture\n- Use `nx_project_details` tool to analyze specific project structure and dependencies\n- Use `nx_docs` tool for up-to-date Nx configuration guidance\n\n<!-- nx configuration end-->\n\n# Fluent UI — Agent Instructions\n\n**Instructions in this file are the source of truth, not existing code.** This repo contains\nlegacy patterns (especially in v8 packages) that predate current standards. Never copy patterns\nfrom existing code without verifying they match these instructions.\n\n## Critical Rules (never violate)\n\n1. **Never hardcode colors, spacing, or typography values.** Always use design tokens from `@fluentui/react-theme`. See [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md).\n2. **Never use `React.FC`.** Always use `ForwardRefComponent` with `React.forwardRef`.\n3. **Never access `window`, `document`, or `navigator` directly.** In v9 components, use `useFluent_unstable()` to get `targetDocument` and `targetDocument.defaultView` instead of `document`/`window`. For non-component code, use `canUseDOM()` from `@fluentui/react-utilities`.\n4. **Never add dependencies between component packages.** `react-button` must not depend on `react-menu`. Shared logic goes in `react-utilities` or `react-shared-contexts`. See [docs/architecture/layers.md](docs/architecture/layers.md).\n5. **Never skip beachball change files** for published package changes. Run `yarn beachball change`.\n6. **Each PR must contain at most one Beachball change file per package.** Consolidate all changes for that package in the PR into that one file.\n\n## V9 Component Template (the correct pattern)\n\n```tsx\n// ComponentName.tsx — always ForwardRefComponent, never React.FC\nexport const ComponentName: ForwardRefComponent<ComponentNameProps> = React.forwardRef((props, ref) => {\n  const state = useComponentName_unstable(props, ref);\n  useComponentNameStyles_unstable(state);\n  return renderComponentName_unstable(state);\n});\n\n// Styles — always use tokens, never hardcoded values\nimport { makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const useComponentNameStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,\n  },\n});\n\n// mergeClasses — always preserve user className LAST\nstate.root.className = mergeClasses(\n  classes.root,\n  state.root.className, // always last\n);\n```\n\n## Legacy Anti-Patterns (never copy these)\n\n- **DO NOT copy patterns from `packages/react/` (v8).** That's maintenance-only legacy code using runtime styling, class components, and different APIs.\n- **DO NOT use `@fluentui/react` imports for new v9 work.** Use `@fluentui/react-components`.\n- **DO NOT use `mergeStyles` or `mergeStyleSets`.** Use Griffel `makeStyles` with design tokens.\n- **DO NOT use `IStyle` or `IStyleFunctionOrObject`.** Use Griffel's `GriffelStyle` type.\n- **DO NOT use `initializeIcons()`.** V9 uses `@fluentui/react-icons` with tree-shaking.\n\n## Exploration Guidance\n\n- `packages/react-components/` has 74+ packages — search by specific component name, never read the full directory.\n- Use `yarn nx show project <project-name>` to understand a project's structure.\n- Map package names to paths: `@fluentui/react-<name>` → `packages/react-components/react-<name>/library/src/`.\n\n## Architecture (deep dives)\n\n| Topic                                         | Location                                                                           |\n| --------------------------------------------- | ---------------------------------------------------------------------------------- |\n| V9 component patterns (hooks, slots, Griffel) | [docs/architecture/component-patterns.md](docs/architecture/component-patterns.md) |\n| Design tokens and theming                     | [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md)           |\n| Package dependency layers                     | [docs/architecture/layers.md](docs/architecture/layers.md)                         |\n\n## Workflows\n\n| Topic                                | Location                                                         |\n| ------------------------------------ | ---------------------------------------------------------------- |\n| PR checklist, change files, commands | [docs/workflows/contributing.md](docs/workflows/contributing.md) |\n| Testing guide (unit, VRT, SSR, E2E)  | [docs/workflows/testing.md](docs/workflows/testing.md)           |\n| Team routing and label taxonomy      | [docs/team-routing.md](docs/team-routing.md)                     |\n\n## Quality Tracking\n\n| Topic                      | Location                                               |\n| -------------------------- | ------------------------------------------------------ |\n| Per-package quality grades | [docs/quality-grades.md](docs/quality-grades.md)       |\n| Technical debt tracker     | [docs/tech-debt-tracker.md](docs/tech-debt-tracker.md) |\n\n## Skills (Slash Commands)\n\n| Skill                | Command                            | Purpose                                                                   |\n| -------------------- | ---------------------------------- | ------------------------------------------------------------------------- |\n| `v9-component`       | `/v9-component Name`               | Scaffold a new v9 component with all required files                       |\n| `headless-component` | `/headless-component Name`         | Author an unstyled v9 primitive with state attributes, tests, and stories |\n| `change`             | `/change`                          | Create beachball change file from current diff                            |\n| `lint-check`         | `/lint-check [pkg]`                | Run lint, parse errors, and auto-fix common issues                        |\n| `token-lookup`       | `/token-lookup val`                | Find the design token for a hardcoded CSS value                           |\n| `package-info`       | `/package-info pkg`                | Quick lookup: path, deps, owner, tests, structure                         |\n| `visual-test`        | `/visual-test Name`                | Visually verify a component via Storybook + playwright-cli                |\n| `review-pr`          | `/review-pr #123`                  | Review a PR with confidence scoring and category checks                   |\n| `triage-issues`      | `/triage-issues`                   | Walk the Needs-Triage queue and recommend labels/assignee                 |\n| `dependabot-rollup`  | `/dependabot-rollup`               | Dry-run and optionally roll up at most 11 Dependabot patch/minor PRs      |\n| `assign-prs`         | `/assign-prs`                      | Assign reviewers to the team review queues by area and current load       |\n| `release-recovery`   | `/release-recovery [pipeline-url]` | Diagnose and repair a release that published to npm but failed to push    |\n\n## Package Layout\n\n| Area           | Path                         | Status             |\n| -------------- | ---------------------------- | ------------------ |\n| V9 components  | `packages/react-components/` | Active development |\n| V8 components  | `packages/react/`            | Maintenance only   |\n| Web Components | `packages/web-components/`   | Active             |\n| Charting       | `packages/charts/`           | Active             |\n| Build tooling  | `tools/`                     | Active             |\n| ESLint plugin  | `packages/eslint-plugin/`    | Active             |\n\n<!-- File: CLAUDE.md (Tokens: ~1606 | Category: claude-rule) -->\n<!-- nx configuration start-->\n<!-- Leave the start & end comments to automatically receive updates. -->\n\n# General Guidelines for working with Nx\n\n- Always run tasks through `nx` (`nx run`, `nx run-many`, `nx affected`), never tools directly\n- Use `nx_workspace` tool to understand workspace architecture\n- Use `nx_project_details` tool to analyze specific project structure and dependencies\n- Use `nx_docs` tool for up-to-date Nx configuration guidance\n\n<!-- nx configuration end-->\n\n# Fluent UI — Agent Instructions\n\n**Instructions in this file are the source of truth, not existing code.** This repo contains\nlegacy patterns (especially in v8 packages) that predate current standards. Never copy patterns\nfrom existing code without verifying they match these instructions.\n\n## Critical Rules (never violate)\n\n1. **Never hardcode colors, spacing, or typography values.** Always use design tokens from `@fluentui/react-theme`. See [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md).\n2. **Never use `React.FC`.** Always use `ForwardRefComponent` with `React.forwardRef`.\n3. **Never access `window`, `document`, or `navigator` directly.** In v9 components, use `useFluent_unstable()` to get `targetDocument` and `targetDocument.defaultView` instead of `document`/`window`. For non-component code, use `canUseDOM()` from `@fluentui/react-utilities`.\n4. **Never add dependencies between component packages.** `react-button` must not depend on `react-menu`. Shared logic goes in `react-utilities` or `react-shared-contexts`. See [docs/architecture/layers.md](docs/architecture/layers.md).\n5. **Never skip beachball change files** for published package changes. Run `yarn beachball change`.\n6. **Each PR must contain at most one Beachball change file per package.** Consolidate all changes for that package in the PR into that one file.\n\n## V9 Component Template (the correct pattern)\n\n```tsx\n// ComponentName.tsx — always ForwardRefComponent, never React.FC\nexport const ComponentName: ForwardRefComponent<ComponentNameProps> = React.forwardRef((props, ref) => {\n  const state = useComponentName_unstable(props, ref);\n  useComponentNameStyles_unstable(state);\n  return renderComponentName_unstable(state);\n});\n\n// Styles — always use tokens, never hardcoded values\nimport { makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const useComponentNameStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,\n  },\n});\n\n// mergeClasses — always preserve user className LAST\nstate.root.className = mergeClasses(\n  classes.root,\n  state.root.className, // always last\n);\n```\n\n## Legacy Anti-Patterns (never copy these)\n\n- **DO NOT copy patterns from `packages/react/` (v8).** That's maintenance-only legacy code using runtime styling, class components, and different APIs.\n- **DO NOT use `@fluentui/react` imports for new v9 work.** Use `@fluentui/react-components`.\n- **DO NOT use `mergeStyles` or `mergeStyleSets`.** Use Griffel `makeStyles` with design tokens.\n- **DO NOT use `IStyle` or `IStyleFunctionOrObject`.** Use Griffel's `GriffelStyle` type.\n- **DO NOT use `initializeIcons()`.** V9 uses `@fluentui/react-icons` with tree-shaking.\n\n## Exploration Guidance\n\n- `packages/react-components/` has 74+ packages — search by specific component name, never read the full directory.\n- Use `yarn nx show project <project-name>` to understand a project's structure.\n- Map package names to paths: `@fluentui/react-<name>` → `packages/react-components/react-<name>/library/src/`.\n\n## Architecture (deep dives)\n\n| Topic                                         | Location                                                                           |\n| --------------------------------------------- | ---------------------------------------------------------------------------------- |\n| V9 component patterns (hooks, slots, Griffel) | [docs/architecture/component-patterns.md](docs/architecture/component-patterns.md) |\n| Design tokens and theming                     | [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md)           |\n| Package dependency layers                     | [docs/architecture/layers.md](docs/architecture/layers.md)                         |\n\n## Workflows\n\n| Topic                                | Location                                                         |\n| ------------------------------------ | ---------------------------------------------------------------- |\n| PR checklist, change files, commands | [docs/workflows/contributing.md](docs/workflows/contributing.md) |\n| Testing guide (unit, VRT, SSR, E2E)  | [docs/workflows/testing.md](docs/workflows/testing.md)           |\n| Team routing and label taxonomy      | [docs/team-routing.md](docs/team-routing.md)                     |\n\n## Quality Tracking\n\n| Topic                      | Location                                               |\n| -------------------------- | ------------------------------------------------------ |\n| Per-package quality grades | [docs/quality-grades.md](docs/quality-grades.md)       |\n| Technical debt tracker     | [docs/tech-debt-tracker.md](docs/tech-debt-tracker.md) |\n\n## Skills (Slash Commands)\n\n| Skill                | Command                            | Purpose                                                                   |\n| -------------------- | ---------------------------------- | ------------------------------------------------------------------------- |\n| `v9-component`       | `/v9-component Name`               | Scaffold a new v9 component with all required files                       |\n| `headless-component` | `/headless-component Name`         | Author an unstyled v9 primitive with state attributes, tests, and stories |\n| `change`             | `/change`                          | Create beachball change file from current diff                            |\n| `lint-check`         | `/lint-check [pkg]`                | Run lint, parse errors, and auto-fix common issues                        |\n| `token-lookup`       | `/token-lookup val`                | Find the design token for a hardcoded CSS value                           |\n| `package-info`       | `/package-info pkg`                | Quick lookup: path, deps, owner, tests, structure                         |\n| `visual-test`        | `/visual-test Name`                | Visually verify a component via Storybook + playwright-cli                |\n| `review-pr`          | `/review-pr #123`                  | Review a PR with confidence scoring and category checks                   |\n| `triage-issues`      | `/triage-issues`                   | Walk the Needs-Triage queue and recommend labels/assignee                 |\n| `dependabot-rollup`  | `/dependabot-rollup`               | Dry-run and optionally roll up at most 11 Dependabot patch/minor PRs      |\n| `assign-prs`         | `/assign-prs`                      | Assign reviewers to the team review queues by area and current load       |\n| `release-recovery`   | `/release-recovery [pipeline-url]` | Diagnose and repair a release that published to npm but failed to push    |\n\n## Package Layout\n\n| Area           | Path                         | Status             |\n| -------------- | ---------------------------- | ------------------ |\n| V9 components  | `packages/react-components/` | Active development |\n| V8 components  | `packages/react/`            | Maintenance only   |\n| Web Components | `packages/web-components/`   | Active             |\n| Charting       | `packages/charts/`           | Active             |\n| Build tooling  | `tools/`                     | Active             |\n| ESLint plugin  | `packages/eslint-plugin/`    | Active             |\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/microsoft/fluentui/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/microsoft/fluentui/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/microsoft/fluentui/HEAD/.cursor/mcp.json)\n</yakaai_skills>"}