{"owner":"microsoft","repo":"fluentui","hasSkills":true,"hasMcp":false,"mcpConfig":null,"found":["AGENTS.md"],"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`.\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\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"},"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`.\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\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"},"items":[{"name":"AGENTS.md","path":"AGENTS.md","title":"AGENTS.md","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`.\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\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","category":"root","tokens":1822}]}