style: fix Prettier formatting for AGENTS.md and skill files

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: tudorpopams

.agents/skills/lint-check/SKILL.md

@@ -2,7 +2,7 @@
 name: lint-check
 description: Run lint on affected packages, parse errors, and auto-fix common issues (design tokens, React.FC, SSR safety, import restrictions)
 disable-model-invocation: true
-argument-hint: "[package-name]"
+argument-hint: '[package-name]'
 allowed-tools: Bash Read Edit Grep Glob
 ---
 
@@ -24,15 +24,16 @@ Run linting and fix common issues for Fluent UI packages.
 
 2. **Parse the output** and categorize errors by the custom Fluent UI ESLint rules:
 
-   | Rule | What it catches | How to fix |
-   |------|----------------|------------|
-   | `@fluentui/ban-context-export` | Context exported from wrong layer | Move to `react-shared-contexts` package |
-   | `@fluentui/ban-instanceof-html-element` | `instanceof HTMLElement` (breaks iframes) | Use element.tagName or feature detection |
-   | `@fluentui/no-global-react` | `React.FC`, `React.useState` etc. | Use named imports: `import { useState } from 'react'` |
-   | `@fluentui/no-restricted-imports` | Banned import paths | Use the allowed import path from the error message |
-   | `@fluentui/no-context-default-value` | Context created without `undefined` default | Use `createContext(undefined)` and add a guard hook |
+   | Rule                                    | What it catches                             | How to fix                                            |
+   | --------------------------------------- | ------------------------------------------- | ----------------------------------------------------- |
+   | `@fluentui/ban-context-export`          | Context exported from wrong layer           | Move to `react-shared-contexts` package               |
+   | `@fluentui/ban-instanceof-html-element` | `instanceof HTMLElement` (breaks iframes)   | Use element.tagName or feature detection              |
+   | `@fluentui/no-global-react`             | `React.FC`, `React.useState` etc.           | Use named imports: `import { useState } from 'react'` |
+   | `@fluentui/no-restricted-imports`       | Banned import paths                         | Use the allowed import path from the error message    |
+   | `@fluentui/no-context-default-value`    | Context created without `undefined` default | Use `createContext(undefined)` and add a guard hook   |
 
 3. **Auto-fix** any issues found by editing the source files directly. For each fix:
+
    - Read the file
    - Apply the fix
    - Verify the fix by re-running lint on that specific file

.agents/skills/package-info/SKILL.md

@@ -12,24 +12,28 @@ Get a comprehensive overview of the package **$ARGUMENTS**.
 ## Steps
 
 1. **Resolve the package path.** Map the name to a filesystem path:
+
    - `react-button` or `@fluentui/react-button` → `packages/react-components/react-button/`
    - Check both `library/` (source) and `stories/` (storybook) sub-packages
 
 2. **Get Nx project details:**
+
    ```bash
    yarn nx show project @fluentui/$ARGUMENTS --json 2>/dev/null || yarn nx show project $ARGUMENTS --json 2>/dev/null
    ```
 
 3. **Read the package.json** for version, dependencies, and peer dependencies.
 
 4. **Check ownership** by searching CODEOWNERS:
+
    ```bash
    grep -i "$ARGUMENTS" CODEOWNERS
    ```
 
 5. **Summarize the component structure** — list files under `library/src/components/`.
 
 6. **Check test coverage** — does it have:
+
    - Unit tests (`*.test.tsx`)
    - Conformance tests (`testing/isConformant.ts`)
    - Stories (`stories/` package)

.agents/skills/token-lookup/SKILL.md

@@ -12,6 +12,7 @@ Find the correct `@fluentui/react-theme` design token for the hardcoded value **
 ## Steps
 
 1. **Identify the value category:**
+
    - Hex color / rgb / named color → color tokens
    - px/rem spacing → spacing tokens
    - px/rem font size → font size tokens
@@ -22,31 +23,34 @@ Find the correct `@fluentui/react-theme` design token for the hardcoded value **
    - Duration (ms/s) → duration tokens
 
 2. **Search the theme source** for matching values:
+
    ```
    packages/react-components/react-theme/library/src/
    ```
+
    Look in the relevant theme files (e.g., `colorPalette*.ts`, `global/`, `alias/`) to find tokens that map to the given value.
 
 3. **Return the token name and usage:**
+
    ```tsx
    // Instead of: color: '#0078d4'
    // Use:
    import { tokens } from '@fluentui/react-theme';
-   color: tokens.colorBrandBackground
+   color: tokens.colorBrandBackground;
    ```
 
 4. **If no exact match exists**, suggest the closest semantic token and explain the difference. Refer to [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md) for token categories.
 
 ## Common Mappings
 
-| Hardcoded | Token |
-|-----------|-------|
-| `#0078d4` | `tokens.colorBrandBackground` |
-| `#323130` | `tokens.colorNeutralForeground1` |
-| `#ffffff` | `tokens.colorNeutralBackground1` |
-| `4px` border-radius | `tokens.borderRadiusMedium` |
-| `8px` padding | `tokens.spacingHorizontalS` or `tokens.spacingVerticalS` |
-| `14px` font-size | `tokens.fontSizeBase300` |
-| `600` font-weight | `tokens.fontWeightSemibold` |
+| Hardcoded           | Token                                                    |
+| ------------------- | -------------------------------------------------------- |
+| `#0078d4`           | `tokens.colorBrandBackground`                            |
+| `#323130`           | `tokens.colorNeutralForeground1`                         |
+| `#ffffff`           | `tokens.colorNeutralBackground1`                         |
+| `4px` border-radius | `tokens.borderRadiusMedium`                              |
+| `8px` padding       | `tokens.spacingHorizontalS` or `tokens.spacingVerticalS` |
+| `14px` font-size    | `tokens.fontSizeBase300`                                 |
+| `600` font-weight   | `tokens.fontWeightSemibold`                              |
 
 These are approximate — always verify against the actual theme source.

.agents/skills/v9-component/SKILL.md

@@ -15,21 +15,22 @@ Create a new v9 component named **$ARGUMENTS** following the exact patterns in [
 1. **Determine the package path.** If creating inside an existing package, use that path. If creating a new package, the path is `packages/react-components/react-<lowercase-name>/library/src/`.
 
 2. **Read an existing well-structured component** for reference. Good examples:
+
    - `packages/react-components/react-badge/library/src/components/Badge/`
    - `packages/react-components/react-tag/library/src/components/Tag/`
-   Read at least the types, hook, styles, render, and main component files from one of these.
+     Read at least the types, hook, styles, render, and main component files from one of these.
 
 3. **Generate all required files** under `components/$ARGUMENTS/`:
 
-   | File | Purpose |
-   |------|---------|
-   | `$ARGUMENTS.tsx` | `ForwardRefComponent` with `React.forwardRef`. Never use `React.FC`. |
-   | `$ARGUMENTS.types.ts` | Props, State, Slots types |
-   | `use$ARGUMENTS.ts` | State hook — processes props/slots into normalized state |
+   | File                              | Purpose                                                                                                    |
+   | --------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+   | `$ARGUMENTS.tsx`                  | `ForwardRefComponent` with `React.forwardRef`. Never use `React.FC`.                                       |
+   | `$ARGUMENTS.types.ts`             | Props, State, Slots types                                                                                  |
+   | `use$ARGUMENTS.ts`                | State hook — processes props/slots into normalized state                                                   |
    | `use${ARGUMENTS}Styles.styles.ts` | Griffel styling with `makeStyles` using design tokens from `@fluentui/react-theme`. Never hardcode values. |
-   | `render$ARGUMENTS.tsx` | Pure JSX render using `assertSlots` |
-   | `$ARGUMENTS.test.tsx` | Unit tests with React Testing Library |
-   | `index.ts` | Barrel export for the component |
+   | `render$ARGUMENTS.tsx`            | Pure JSX render using `assertSlots`                                                                        |
+   | `$ARGUMENTS.test.tsx`             | Unit tests with React Testing Library                                                                      |
+   | `index.ts`                        | Barrel export for the component                                                                            |
 
 4. **Update barrel exports** — add the component to the package's root `index.ts`.
 

.agents/skills/visual-test/SKILL.md

@@ -13,34 +13,41 @@ Visually verify **$ARGUMENTS** by launching Storybook and capturing a screenshot
 ## Prerequisites
 
 Ensure `playwright-cli` is installed globally:
+
 ```bash
 npm ls -g @playwright/cli 2>/dev/null || npm install -g @playwright/cli@latest
 ```
 
 ## Steps
 
 1. **Find the component's stories package.** Each v9 component has a dedicated stories package:
+
    ```bash
    yarn nx show projects 2>/dev/null | grep "<lowercase-component-name>.*stories"
    ```
 
 2. **Start the component's Storybook dev server:**
+
    ```bash
    # Use the stories package directly — much faster than the full VR tests app
    yarn nx run react-<component>-stories:start &
    ```
+
    Wait for Storybook to be ready on port 6006. Check with:
+
    ```bash
    curl -s -o /dev/null -w "%{http_code}" http://localhost:6006 2>/dev/null
    ```
 
 3. **Open the page with playwright-cli:**
+
    ```bash
    playwright-cli open "http://localhost:6006"
    ```
 
 4. **Navigate to the specific story iframe** and capture a screenshot.
    Use the iframe URL for a clean render without Storybook chrome:
+
    ```bash
    playwright-cli goto "http://localhost:6006/iframe.html?id=components-<component>-<component>--default&viewMode=story"
    playwright-cli screenshot --filename=/tmp/visual-test-$ARGUMENTS.png
@@ -49,9 +56,11 @@ npm ls -g @playwright/cli 2>/dev/null || npm install -g @playwright/cli@latest
 5. **View the screenshot** using the Read tool to visually inspect the rendered component.
 
 6. **Use `snapshot`** to get the accessibility tree and find interactive element refs:
+
    ```bash
    playwright-cli snapshot
    ```
+
    Then interact with elements by ref (e.g., click, hover) before taking more screenshots.
 
 7. **If the component doesn't look right**, go back to the code, fix the issue, and repeat from step 4 (Storybook hot-reloads changes).

AGENTS.md

@@ -91,14 +91,14 @@ state.root.className = mergeClasses(
 
 ## Skills (Slash Commands)
 
-| Skill            | Command              | Purpose                                                  |
-| ---------------- | -------------------- | -------------------------------------------------------- |
-| `v9-component`   | `/v9-component Name` | Scaffold a new v9 component with all required files      |
-| `change`         | `/change`            | Create beachball change file from current diff            |
-| `lint-check`     | `/lint-check [pkg]`  | Run lint, parse errors, and auto-fix common issues       |
-| `token-lookup`   | `/token-lookup val`  | Find the design token for a hardcoded CSS value          |
-| `package-info`   | `/package-info pkg`  | Quick lookup: path, deps, owner, tests, structure        |
-| `visual-test`    | `/visual-test Name`  | Visually verify a component via Storybook + playwright-cli |
+| Skill          | Command              | Purpose                                                    |
+| -------------- | -------------------- | ---------------------------------------------------------- |
+| `v9-component` | `/v9-component Name` | Scaffold a new v9 component with all required files        |
+| `change`       | `/change`            | Create beachball change file from current diff             |
+| `lint-check`   | `/lint-check [pkg]`  | Run lint, parse errors, and auto-fix common issues         |
+| `token-lookup` | `/token-lookup val`  | Find the design token for a hardcoded CSS value            |
+| `package-info` | `/package-info pkg`  | Quick lookup: path, deps, owner, tests, structure          |
+| `visual-test`  | `/visual-test Name`  | Visually verify a component via Storybook + playwright-cli |
 
 ## Package Layout
 

docs/workflows/testing.md

@@ -2,14 +2,14 @@
 
 ## Test Types
 
-| Type              | Tool                         | Command                                        | Purpose                          |
-| ----------------- | ---------------------------- | ---------------------------------------------- | -------------------------------- |
+| Type              | Tool                         | Command                                         | Purpose                          |
+| ----------------- | ---------------------------- | ----------------------------------------------- | -------------------------------- |
 | Unit              | Jest + React Testing Library | `yarn nx run <project>:test`                    | Component behavior, hooks, utils |
 | Visual Regression | Storybook + StoryWright      | `yarn nx run vr-tests-react-components:test-vr` | Screenshot diffs (CI only)       |
 | E2E               | Cypress                      | `yarn nx run react-components:e2e`              | Integration flows                |
 | SSR               | Custom                       | `yarn nx run ssr-tests-v9:test-ssr`             | Server-side rendering safety     |
 | Cross-React       | Custom                       | `yarn nx run rit-tests-v9:test-rit`             | React version compatibility      |
-| Conformance       | isConformant                 | Part of unit tests                             | Consistent component API         |
+| Conformance       | isConformant                 | Part of unit tests                              | Consistent component API         |
 
 ## Writing Unit Tests