brianbrady.dev

Fabric UX / agentic development / secure Figma intake

Fabric UX DevKit

The DevKit is a standard agentic development layer for teams building with Fabric UX components. It connects Figma design context, Fabric component guidance, implementation examples, accessibility rules, issue filing, and code generation into one evidence-based workflow.

What it solves

Fabric adoption creates the same questions over and over: which component matches the design, whether the React or Angular wrapper exposes the needed API, whether a composition is supported, whether a repo already has a local tri-* or pbi-* component, and whether a real Fabric gap should be filed upstream.

The DevKit turns those questions into a repeatable workflow. It uses package evidence, generated examples, component references, Figma metadata, and explicit parity rules instead of memory or guesswork.

Consumer flow

npm install -D @fabric-msft/fabric-ux-devkit
npx fabric-ux doctor --json
npx fabric-ux login figma
npx fabric-ux figma fetch "https://figma.com/file/..." --json
npx fabric-ux agent parity "https://figma.com/file/..." --framework react

Production flow

From design evidence to gated implementation.

01

Design intake

Accepts Figma links, screenshots, product specs, engineering specs, existing UI examples, and migration requests.

02

Component discovery

Identifies roles such as button, dropdown, dialog, drawer, listbox, tree, wizard, message bar, menu, or table action area.

03

Parity analysis

Compares the spec, current product implementation, and documented Fabric React or Angular examples before recommending a path.

04

Issue filing

Files Azure DevOps gaps only after approval, with duplicate detection and evidence from the parity report.

05

Implementation

Uses the parity report as the contract, then edits code only after explicit confirmation.

Safe agent behavior

  • Analyze freely, but ask before filing upstream issues.
  • Ask before editing product code.
  • Reject unsupported Fabric compositions instead of inventing new ones.
  • Check existing tri-*, pbi-*, and local components before replacing product UI.
  • Use documented React and Angular examples as implementation evidence.

Verdicts

  • Use Fabric directly.
  • Use a documented Fabric composition.
  • Keep the existing product component.
  • Use an existing tri-* component.
  • File a Fabric feature request or bug.
  • Implement local UI when no reusable Fabric path exists.

Figma authentication

Production uses a Fabric-owned Figma OAuth broker. Users do not paste personal access tokens into repos, and no OAuth client secret ships inside the npm package or VS Code extension. The broker owns the sensitive pieces; the DevKit receives user-scoped credentials and caches them locally.

  • Figma OAuth app owned by Fabric UX.
  • Client secret stored in Azure Key Vault.
  • Azure App Service reads secrets through managed identity.
  • Short-lived broker sessions with refresh support.
  • Credentials can be checked, refreshed, or cleared from the CLI.

Authentication commands

npx fabric-ux auth login --provider figma
npx fabric-ux auth status --json
npx fabric-ux auth refresh --json
npx fabric-ux auth logout

Codespaces support

The CLI is portable Node, not machine-specific scripts. It works in Windows, macOS, Linux, VS Code terminals, Copilot CLI sessions, headless environments, and GitHub Codespaces. In Codespaces, login uses a browser-safe device-style flow: the CLI prints a URL, the user signs in, and the terminal polls until the broker completes.

Agent commands

npx fabric-ux figma image "https://figma.com/file/..." --node 12:34 --json
npx fabric-ux examples search dropdown --framework angular --json
npx fabric-ux parity report ./spec.md --repo . --json
npx fabric-ux ado file --from parity-report.json --detect-duplicates

Azure production architecture

Secure by default, boring to consume.

The production broker runs on Azure App Service with Node 20, Azure Key Vault, managed identity, HTTPS-only endpoints, health checks, monitoring, alerting, token refresh, and secret rotation docs. Consumer repos only need the official broker URL.

Quality bar

The DevKit is product infrastructure, not a pile of prompts. Releases are validated through CLI unit tests, broker login tests, token refresh tests, Codespaces tests, package contents tests, skill reference consistency checks, doctor checks, example catalog validation, JSON schema stability, cross-platform command tests, and docs.

Business value

The DevKit makes the supported path easier than the ad hoc path. It helps teams adopt Fabric faster, avoid unsupported compositions, reduce design-to-code ambiguity, file better upstream gaps, improve accessibility consistency, and give AI agents safer implementation boundaries.