Fabric UX Devkit — VS Code Extension

A GitHub Copilot Chat extension for VS Code with two delivery modes:

@fabric chat participant for direct component lookup and guidance
workspace installer for Fabric UX Copilot agents and skills so Copilot Chat can discover them from the active repo

Commands

Command	Description
`@fabric /react <component>`	Look up React wrapper usage — props, events, refs, slots, JSX examples
`@fabric /angular <component>`	Look up Angular directive usage — imports, CVA forms, slots, template examples
`@fabric /design`	Analyze a design against Fabric components — parity report + implementation
`@fabric /patterns`	Framework conventions — registration, event bridging, boolean attrs, CVA
`Fabric UX: Install Copilot Chat Assets To Workspace`	Copies Fabric UX agents and skills into the active workspace so Copilot Chat can discover them

Examples

@fabric /react button
@fabric /angular dropdown
@fabric /react dialog
@fabric /angular text-input
@fabric /patterns
@fabric /design Here's a card layout with an avatar, title, subtitle, and action buttons...

How It Works

Installing the extension gives you the @fabric participant immediately.

If you also want Fabric UX agents and skills to appear in Copilot Chat, run the command palette action Fabric UX: Install Copilot Chat Assets To Workspace. That copies the packaged assets into:

AGENTS.md
.github/agents/
.github/skills/

Those workspace files are the surface Copilot Chat can discover from the active repository. The extension packages and installs them for you.

Local Development

cd fabric-ux-devkit/vscode-extension
npm install
npm run build
npm run install:local

Packaging

npm run package
# Creates fabric-ux-vscode-devkit-0.2.0.vsix

The package step bundles the Fabric UX skills, agent files, AGENTS.md, and LICENSE into the .vsix.