name: v9-component description: Scaffold a new v9 component with all required files following Fluent UI patterns (hook, styles, render, types, tests, stories, conformance) disable-model-invocation: true argument-hint: <ComponentName> allowed-tools: Read Write Bash Glob Grep

Scaffold a V9 Component

Create a new v9 component named $ARGUMENTS using the repo's Nx generators.

Steps

Adding a component to an existing package

Use the react-component generator:

yarn nx g @fluentui/workspace-plugin:react-component --name $ARGUMENTS --project <project-name>

Where <project-name> is the Nx project (e.g., react-button). This generates all required files: component, types, hook, styles, render, index barrel, and conformance test.

Creating a new package + component

Use the react-library generator first, then add the component:

# Create the package (will prompt for owner team)
yarn create-package

# Or non-interactively:
yarn nx g @fluentui/workspace-plugin:react-library --name <package-name> --owner "<team>"

# Then add the component inside it:
yarn nx g @fluentui/workspace-plugin:react-component --name $ARGUMENTS --project <package-name>

After scaffolding

1. Review generated files against docs/architecture/component-patterns.md and fill in component-specific logic.

2. Add styles in use${ARGUMENTS}Styles.styles.ts using design tokens:

   import { makeStyles } from '@griffel/react';
   import { tokens } from '@fluentui/react-theme';
   

3. Create a default story at the appropriate stories package location if not generated.

4. Update API docs after adding exports:

   yarn nx run <project>:generate-api
   

Critical Rules

• Always use ForwardRefComponent with React.forwardRef — never React.FC
• Always use design tokens from @fluentui/react-theme — never hardcoded colors/spacing/typography
• Always preserve user className as the LAST argument in mergeClasses()
• Use _unstable suffix on exported hooks: use$ARGUMENTS_unstable, use${ARGUMENTS}Styles_unstable, render${ARGUMENTS}_unstable
• Guard any window/document/navigator access with canUseDOM() from @fluentui/react-utilities
• Do not add dependencies on other Tier 3 component packages (see docs/architecture/layers.md)

Available Generators Reference