Building Premium SPFx Web Parts with an Enterprise Skills Pack

/ Sudharsan K...

Github Repo: https://github.com/sudharsank/spfx-enterprise-skills

Why an SPFx Skills Pack?

Most SPFx guidance lives in a mix of docs, old project files, and tribal knowledge:

  • Microsoft design docs scattered across learn.microsoft.com.
  • Performance tips you remember only after a page gets slow.
  • A mental list of “we always use PnPjs for this” that never made it into code.

AI tools are great, but they don’t know your standards by default. Out of the box, Copilot or ChatGPT might:

  • Propose layouts that don’t respect SharePoint’s design guidance.
  • Use random npm packages.
  • Make REST calls inline in React components.
  • Ignore property pane performance.

So instead of trying to remember everything on every project, I created a set of skills – small, focused documents that describe how SPFx should be done in my world. Any AI editor can load these skills and follow the same patterns.

This post covers:

  1. The SPFx Enterprise Skills Pack structure
  2. Each skill and what it does
  3. How to use these skills with:
    • GitHub Copilot / IDEs
    • OpenClaw or other agent-based environments
    • Claude Code, Kiro, Cursor, Antigravity and similar editors
    • Chat-based tools like ChatGPT/Bing

The SPFx Enterprise Skills Pack

The skills live in a skills/ folder in the repo. Each skill is a SKILL.md file with:

  • A short frontmatter block (name, description).
  • Clear guidance on when to use it.
  • Opinionated patterns, examples, and guardrails.

At the core is a hub skill that routes AI to the right sub-skills.

1. The Hub: spfx-enterprise-ux-hub

Think of this as the table of contents for your SPFx brain.

It explains:

  • When work is SPFx‑related (web parts, extensions, theming, release).
  • Which specialized skills are available.
  • How to pick the right skill based on the task:
    • Design & content
    • Theme/brand & CSS
    • Code & performance
    • Property pane & behavior
    • Images & media
    • Release & toolchain

In an agent environment, the hub is the first skill that should be loaded. From there, the agent only loads the specific skills it needs, which keeps the context small and focused.

Design & Content Skills

These skills encode the Microsoft design guidance for SPFx web parts and extensions:

  • Layout
  • Content hierarchy
  • Copywriting
  • Empty states
  • Accessibility

spfx-enterprise-design-core

This is the baseline design skill for SPFx.

It focuses on:

  • Web part structure and levels
    • Clear titles and descriptions that explain purpose and outcome.
    • Section and item levels that make sense on their own.
  • Layout and responsive design
    • Grid and responsive patterns following Microsoft guidance.
    • Behavior across small/medium/large breakpoints.
  • Commanding
    • Primary vs secondary actions.
    • Where to put commands (web part vs row level).
  • States
    • First‑run (not configured) experiences.
    • No data, partial data, and error states.
  • Accessibility at the design level
    • Keyboard reachability.
    • Focus visibility.
    • Not relying on color alone.

Any time an AI proposes a new SPFx UI, I expect it to follow this skill.

spfx-accessibility-and-content-quality

This skill dives deeper into accessibility and UX copy:

  • Keyboard and focus patterns.
  • Screen reader semantics.
  • Clear, action-oriented text.
  • Recovery paths for errors and empty states.

I use this skill to:

  • Review user-visible text in PRs.
  • Tune empty state messages.
  • Ensure new command surfaces are discoverable and usable without a mouse.

Theme, Brand & Styling Skills

These skills keep the visual layer aligned with SharePoint and your tenant’s brand.

spfx-theme-and-brand-integration

Covers:

  • Theme tokens and semantic slots.
  • Light/dark/high-contrast compatibility.
  • Brand Center fonts and tenant-safe branding.

Whenever a change touches colors, fonts, or theme behavior, I want the AI to consult this skill and avoid hard-coded color values in favor of theme tokens.

spfx-css-and-styling-governance

Focuses on SCSS architecture and governance:

  • Local, module-scoped styles.
  • Naming and structure for maintainable SCSS.
  • Avoiding global style leakage across web parts.

This is especially useful when refactoring older web parts that grew organically and started fighting each other in the DOM.

spfx-glassmorphism-ui

Optional, but powerful when you have a glassmorphism-inspired design language:

  • Shared tokens for glass backgrounds, blur, borders, and shadows.
  • Patterns for cards, headers, metrics, and tables.
  • How to reuse an existing glass baseline without copy-pasting entire SCSS files.

This lets AI propose consistent glassmorphism treatments across web parts.

Code, Performance & Behavior Skills

These skills are about how the code is written, how it performs, and how it behaves.

spfx-enterprise-code-and-performance

This is the code-centric skill. It covers:

  • Architecture
    • Thin web part/extension classes.
    • Services for data access.
    • Reusable hooks and components.
  • Data access
    • Using PnPjs (@pnp/sp, @pnp/graph) for SharePoint and Microsoft Graph.
    • Keeping REST calls in services, not scattered through components.
  • Performance
    • Minimizing bundle size (no duplicate React/Fluent UI, careful with dependencies).
    • Batching and caching with PnPjs.
    • Lazy loading of heavy features.
    • Rendering performance (memoization, virtualization of large lists).
  • Recommended npm packages
    • What’s safe and useful.
    • What to avoid.

When I ask an AI to build or refactor a web part, I call out this skill explicitly so it bakes performance and structure in from the start.

spfx-enterprise-implementation-core

This skill sets implementation standards:

  • Clear service boundaries.
  • Strongly typed contracts for data and props.
  • Predictable error and loading behavior.

It complements the code/performance skill by making sure the codebase is clean and maintainable, not just fast.

spfx-property-pane-reactivity

Property pane UX can make or break editor experience.

This skill explains:

  • When to use reactive vs non-reactive property panes.
  • How to avoid expensive operations on every keystroke.
  • How to clearly signal “Apply” behavior to users.

It’s the one I rely on when adding or changing property panes so the AI doesn’t accidentally create a noisy, laggy editing experience.

spfx-extensions-enterprise-patterns

For Application Customizers, Field Customizers, and Command Sets, this skill covers:

  • Safe dialog usage.
  • Command discoverability and behavior.
  • Respecting the host page context and not hijacking the entire UX.

Any extension‑related work should go through this lens.

Images, Media, Release & Toolchain

spfx-image-and-media-optimization

Optimizes image-heavy experiences:

  • Responsive image handling.
  • Lazy loading and perceived-performance tricks.
  • Alt text and accessibility for media.

spfx-release-and-package-quality

Ensures release readiness:

  • package-solution configuration.
  • Versioning and change tracking.
  • App catalog readiness and regression prevention.

spfx-heft-build-and-toolchain & spfx-heft-webpack-customization

For build and toolchain work:

  • Heft lifecycle and included plugins.
  • Where script plugins make sense.
  • How to apply minimal, targeted webpack overrides without fighting the SPFx rig.

How to Use These Skills in Practice

1. With GitHub Copilot (and other IDE assistants)

  1. Commit the skills/ folder into your repo.
  2. When working on SPFx code or UX:
    • Open the relevant SKILL.md side-by-side with your files.
    • Add small prompt comments in code, e.g.:
// Follow spfx-enterprise-code-and-performance:
// - Use PnPjs for SharePoint list access
// - Batch and cache reads
// - Keep this component presentational

In PR descriptions, explicitly reference the skills:

  • “Applies spfx-enterprise-design-core for layout and empty states.”
  • “Refactors data access to follow spfx-enterprise-code-and-performance.”

    This gives Copilot and reviewers shared expectations.

    2. With OpenClaw / Agent-Based Environments

    1. Put the skills/ folder in the workspace where the agent can see it.
    2. Reference the hub when requesting work:
    "Use my SPFx enterprise skills (start with the SPFx UX hub) to design and implement this new web part."
    1. The agent will:
      • Load spfx-enterprise-ux-hub.
      • Pull in only the necessary skills (design, code, theming, etc.).

    Because the logic is encoded in the skills, you get consistent decisions across tasks and time.

    3. With Claude Code

    1. Open your SPFx repo in Claude Code so it can index the skills/ folder.
    2. Before asking for changes, reference the skills explicitly in your instructions, for example:
      • “Use the SPFx enterprise skills in skills/ (start from the UX hub) when designing this web part.”
      • “Review this PR against spfx-enterprise-code-and-performance and spfx-enterprise-design-core.”
    3. When Claude suggests code or diffs, ask it to justify decisions in terms of the skills (design, performance, theming) so you know it’s following your standards.

    4. With Kiro, Cursor, Antigravity & Similar Editors

    These editors typically index your repo (including skills/) and use open files as additional context.

    1. Make sure skills/ is committed and easy to discover.
    2. When working on SPFx files:
      • Keep the relevant SKILL.md open in a side pane so the editor model pulls it into context.
      • Add small hints in your code comments, for example:
    // Kiro/Cursor: follow spfx-enterprise-code-and-performance
    // - PnPjs for SharePoint list access
    // - Batch and cache reads
    // - No inline REST URLs in components
    1. For Antigravity-style project agents or long-running refactors:
      • Start by instructing the agent to read spfx-enterprise-ux-hub and any relevant skills.
      • Ask it to summarize which skills it applied in its plan or PR.

    5. With ChatGPT / Bing / Other Chat Models

    1. Paste or upload the relevant SKILL.md files into the conversation.
    2. Be explicit in your prompt:
      • “Here is my SPFx design skill. Only propose UI that follows it.”
      • “Review this web part against spfx-enterprise-code-and-performance and suggest improvements.”
    3. Use the model to:
      • Sketch new web parts.
      • Review diffs.
      • Generate refactor plans.

    Closing Thoughts

    The goal of this SPFx Enterprise Skills Pack is simple:

    Make it trivial for AI tools to build SPFx solutions that you’d actually ship to production.

    By encoding design, accessibility, performance, and tooling decisions into reusable skills, you:

    • Reduce drift between projects.
    • Speed up onboarding for new developers.
    • Turn AI editors from “code generators” into actual collaborators that respect your standards.

    If you adopt or adapt this skills pack in your own SPFx projects, I’d love to hear how you extend it: new skills, more code examples, or tenant-specific rules.

    Happy Sharing…

    Leave a comment