|
| 1 | +# Fabric UX Devkit |
| 2 | + |
| 3 | +AI-powered tooling for repos that consume [Fabric UX](https://github.com/microsoft/fabric-ux) web components. Includes agents and skills that help LLMs find real Fabric components, assess parity against design specs, and implement UI code — all backed by evidence from installed packages. |
| 4 | + |
| 5 | +> Source: [`brianchristopherbrady/fabric-ux-copilot-plugins`](https://github.com/brianchristopherbrady/fabric-ux-copilot-plugins) |
| 6 | +
|
| 7 | +## What it does |
| 8 | + |
| 9 | +Fabric UX Devkit grounds AI assistance in the actual Fabric component catalog, ensuring LLMs use real APIs rather than hallucinated ones. It enables agents to: |
| 10 | + |
| 11 | +| Capability | Description | |
| 12 | +| --- | --- | |
| 13 | +| **Parity analysis** | Compare a Figma spec or engineering spec against the Fabric component catalog | |
| 14 | +| **Component lookup** | Retrieve verified React and Angular usage examples for any Fabric component | |
| 15 | +| **Spec-to-code** | Translate an approved design spec into repo-compliant UI code | |
| 16 | +| **Gap identification** | Classify component gaps and file feature requests upstream | |
| 17 | + |
| 18 | +## Agent |
| 19 | + |
| 20 | +### `fabric-ux-developer` |
| 21 | + |
| 22 | +Orchestration agent for consumer-repo Fabric UX parity analysis and implementation. Handles design review, parity assessment, report generation, and code implementation across React, Angular, and Web Component framework lanes. |
| 23 | + |
| 24 | +## Skills |
| 25 | + |
| 26 | +| Skill | Description | |
| 27 | +| --- | --- | |
| 28 | +| **parity-analysis** | Spec-to-catalog parity assessment with environment baseline checks and report generation | |
| 29 | +| **react-examples** | Verified React usage examples for every Fabric component | |
| 30 | +| **angular-examples** | Verified Angular usage examples for every Fabric component | |
| 31 | +| **figma-api** | Figma design extraction for node hierarchy, screenshots, and visual properties | |
| 32 | +| **figma-spec-review** | Design-node triage into implement-now, future, and reference-only | |
| 33 | +| **figma-to-code** | Translates an approved Figma spec + parity report into repo-compliant UI code | |
| 34 | +| **file-fabric-issue** | Files feature requests and bug reports as Azure DevOps work items | |
| 35 | +| **feature-switches** | Feature switch discovery and local enablement in PowerBI clients | |
| 36 | + |
| 37 | +## Framework lanes |
| 38 | + |
| 39 | +| Framework | Wrapper package | Evidence source | |
| 40 | +| --- | --- | --- | |
| 41 | +| React | `@fabric-msft/fabric-react` | + `@fabric-msft/fabric-web` | |
| 42 | +| Angular | `@fabric-msft/fabric-angular` | + `@fabric-msft/fabric-web` | |
| 43 | +| Web Components | — | `@fabric-msft/fabric-web` | |
| 44 | + |
| 45 | +## License |
| 46 | + |
| 47 | +[MIT](../../LICENSE) |
0 commit comments