Skills help AI coding agents understand how Fabric UI is structured, how components should be installed, and how design decisions should stay consistent across a project.
What Skills Are For
Use skills when you want an agent to perform a repeatable task with project-specific conventions.
- Add a Fabric UI component and wire it into an existing screen.
- Convert a Figma design into Fabric UI code.
- Keep copy, naming, and visual style aligned with the Fabric UI brand.
- Audit component pages for accessibility, SEO, or implementation quality.
Recommended Agent Context
When asking an AI agent to work with Fabric UI, include the goal, the target route, and the design direction.
Use Fabric UI patterns to build a settings screen.
Keep the visual style consistent with the current Theme customizer.
Install registry items only when they are needed, and prefer existing project components first.Component Workflow
- Inspect the current route and existing components.
- Choose the closest Fabric UI component or pattern.
- Install or reuse the component.
- Adapt spacing, copy, states, and responsive behavior.
- Preview the result in the browser.
Design Workflow
For design-to-code work, pair Fabric UI with Figma context.
- Use Figma for layout, spacing, typography, and hierarchy.
- Use Fabric UI for implementation primitives and component behavior.
- Preserve the site’s existing theme tokens instead of hardcoding one-off values.
Skill Ideas
- Component composer: turns a product requirement into a composed Fabric UI screen.
- Theme reviewer: checks whether a page follows the selected base, style, radius, and typography.
- Registry installer: chooses and installs the smallest useful registry item.
- Docs writer: creates concise usage docs for installed components.