SPFx Dev-AI for SPFx development

Example

Deliver a ready-to-ship project skeleton: folder layout, service interfaces, theming, and test hooks. Includes data layer abstraction and SPFx context wiring. Example snippets (TypeScript): "// pnp setup\nimport { spfi, SPFx } from '@pnp/sp';\nimport '@pnp/sp/webs';\nimport '@pnp/sp/lists';\nimport '@pnp/sp/items';\n\nexport const getSp = (ctx: any) => spfi().using(SPFx(ctx));\n\n// service contract\nexport interface IEmployeeService {\n findByName(name: string): Promise<any[]>;\n}\n\n// concrete service\nexport class EmployeeService implements IEmployeeService {\n constructor(private ctx: any) {}\n async findByName(name: string) {\n const sp = getSp(this.ctx);\n return sp.web.lists.getByTitle('Employees').items\n .filter(`substringof('${name}', Title)`)();\n }\n}\n\n// React web part component (Fluent UI v9)\nimport { Button, makeStyles, tokens } from '@fluentui/react-components';\nconst useStyles = makeStyles({ cta: { backgroundColor: tokens.colorBrandBackground, color: tokens.colorNeutralBackground1 } });\n"

Scenario

Greenfield intranet project with 4 web parts and one Application Customizer. SPFx Dev proposes a monorepo-friendly structure, consistent service interfaces, and a shared UI kit (Fluent UI v9) so all parts share the same tokens, typography, and accessibility patterns. Result: faster assembly, easier code reviews, and cleaner app-catalog packaging.

Example

Use PnPjs for SharePoint data (typed, composable) and MGT for Graph-backed UI that honors Single Sign-On and consent. Example snippets: "// MGT provider in SPFx (Graph via current user)\nimport { Providers, SharePointProvider } from '@microsoft/mgt-sharepoint-provider';\nexport function initProviders(ctx: any) {\n Providers.globalProvider = new SharePointProvider(ctx);\n}\n\n// React usage in a web part\nimport '@microsoft/mgt-components';\n// ... in JSX: <mgt-people-picker selection-mode='single'></mgt-people-picker>\n\n// PnPjs caching + reads\nimport { spfi, SPFx } from '@pnp/sp';\nimport { Caching } from '@pnp/queryable';\nconst sp = spfi().using(SPFx(this.context)).using(Caching());\nconst items = await sp.web.lists.getByTitle('Announcements').items.select('Title','Id').top(25)();\n"

Scenario

Build a "My Meetings" dashboard for Viva Connections: MGT <mgt-agenda> surfaces the user’s upcoming meetings immediately; PnPjs reads related documents from a SharePoint list and shows them in a Fluent UI v9 Table. SPFx Dev also ensures the minimal Graph scopes are requested and documents the admin consent story.

Example

Apply design tokens, slots, and motion responsibly. Ensure keyboard navigation, color contrast, and RTL support are correct by default. Example snippets: "// Themed command bar with v9\nimport { Toolbar, ToolbarButton, makeStyles, tokens } from '@fluentui/react-components';\nconst useStyles = makeStyles({ bar: { backgroundColor: tokens.colorNeutralBackground2, padding: '4px 8px' } });\n\nfunction CommandBar() {\n const s = useStyles();\n return (\n <Toolbar className={s.bar} aria-label='Actions'>\n <ToolbarButton icon={<span aria-hidden='true'>➕</span>} aria-label='Add item' />\n <ToolbarButton icon={<span aria-hidden='true'>✏️</span>} aria-label='Edit item' />\n </Toolbar>\n );\n}\n\n// Accessible dialog trigger (focus management handled by v9 components)\n"

Scenario

A regulated industry tenant needs WCAG-compliant dashboards. SPFx Dev chooses Fluent UI v9 components with built-in focus behavior, aligns tokens with the SharePoint theme, verifies contrast, and provides guidance for high-contrast mode and localization so the same web part is compliant across tenants and in Teams.