v9-component Skill

Source

• Creator: microsoft
• Repository: microsoft/fluentui
• Skill file: .agents/skills/v9-component/SKILL.md

What it does

Scaffold a new v9 component with all required files following Fluent UI patterns (hook, styles, render, types, tests, stories, conformance)

Skill instructions

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: bash 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: bash 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