How to use
- Copy the installation command and review the source package before installing it in your own agent environment.
- Check the source document for required tools, credentials and supported hosts.
- Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/sharepoint/spfx-dev-skills --skill spfxBefore you start
- Installation does not include a model subscription, API allowance or permission to access your files.
- Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
SPFx Development
Pick the reference(s) that match the user's intent. Load only what is needed and execute the steps exactly:
- Create a project → create.md
- Upgrade a project → upgrade.md
- Working on UI in a React SPFx project (components, styling, layout, accessibility) → react-design.md
- Reading or writing SharePoint / Microsoft Graph data → pnpjs.md
Global rules (apply to every SPFx task)
- Use PnPjs by default for all SharePoint and Microsoft Graph data operations. See pnpjs.md. Only fall back to raw
SPHttpClient/MSGraphClientV3when the user explicitly requires it or a dependency cannot be added. - When running `npm install`, always run it synchronously with a timeout of at least 3 minutes. SPFx projects have heavy dependency trees.
Toolchain decision rule
SPFx switched build systems at v1.22.0. Determine the version from .yo-rc.json (@microsoft/generator-sharepoint.version) or package.json, then:
| Installed SPFx version | Toolchain |
|---|---|
| v1.22.0 and newer | Heft |
| v1.0 – v1.21.1 | gulp (legacy) |