spfx-enterprise-ux-hub

name	spfx-enterprise-ux-hub
description	Global entry skill for enterprise-grade SPFx web parts and extensions. Use this first for SPFx UX work, then follow the linked specialized SPFx skills as needed.

SPFx Enterprise UX Hub

This skill is a global index for your SPFx skills. Any AI editor doing SPFx work should:

1. Trigger this skill first for SPFx-related tasks.
2. Decide which specialized SPFx skills are relevant.
3. Load only those skills to keep context lean.

Use this hub whenever the work involves SharePoint Framework (SPFx) web parts or extensions: design, behavior, performance, theming, or packaging.

---

1. Skill map (when to use what)

1.1 Design & content (top priority)

• spfx-enterprise-design-core
  Use for: layout, information hierarchy, web part levels, titles/descriptions, commanding, placeholders, empty/loading/error states, and responsive design.

• spfx-accessibility-and-content-quality
  Use for: keyboard/focus patterns, screen-reader semantics, empty/error text quality, recovery paths, and overall UX text tone.

1.2 Theme, brand, and styling

• spfx-theme-and-brand-integration
  Use for: theme tokens, semantic slots, high-contrast and dark mode, Brand Center fonts, and tenant-safe branding.

• spfx-css-and-styling-governance
  Use for: SCSS module structure, selector scoping, naming conventions, preventing style leakage across web parts.

• spfx-glassmorphism-ui
  Use for: glassmorphism-inspired UI patterns (cards, headers, metrics) when that visual language is appropriate and agreed for the solution.

1.3 Behavior & configuration

• spfx-property-pane-reactivity
  Use for: choosing reactive vs non-reactive property pane behavior and designing property editing UX that doesn’t hurt performance.

• spfx-extensions-enterprise-patterns
  Use for: Application Customizers, Field Customizers, and Command Sets; dialog patterns; respecting host page context.

1.4 Data, implementation, and performance

• spfx-enterprise-code-and-performance
  Use for: code structure, data access patterns (REST, Graph, PnPjs), performance optimization, and recommended npm packages.

• spfx-enterprise-implementation-core
  Use for: service boundaries, typed interfaces, error/loading handling, module structure, and maintainability.

• spfx-image-and-media-optimization
  Use for: image sizing, lazy loading, responsive media, and performance-aware image handling.

1.5 Release, packaging, and toolchain

• spfx-release-and-package-quality
  Use for: package-solution configuration, versioning, app catalog readiness, and release checklists.

• spfx-heft-build-and-toolchain
  Use for: Heft lifecycle understanding, SPFx default tasks, and script plugin integration.

• spfx-heft-webpack-customization
  Use for: targeted webpack overrides in SPFx (loaders, plugins) with minimal upgrade risk.

---

2. How an AI editor should use this hub

When handling an SPFx task:

1. Identify the task type

   • Pure UX/design? → spfx-enterprise-design-core, spfx-accessibility-and-content-quality.
   • Theming/visual alignment? → spfx-theme-and-brand-integration, spfx-css-and-styling-governance, spfx-glassmorphism-ui.
   • Configuration/behavior? → spfx-property-pane-reactivity, spfx-extensions-enterprise-patterns.
   • Data & implementation? → spfx-enterprise-implementation-core, spfx-image-and-media-optimization.
   • Release/build? → spfx-release-and-package-quality, spfx-heft-build-and-toolchain, spfx-heft-webpack-customization.

2. Load only the relevant skills
   Do not load all SPFx skills at once. Pick the minimal set needed.

3. Apply Microsoft guidance
   Each specialized skill encodes patterns aligned with Microsoft docs (design, theming, Heft, webpack, image helper API, etc.). Use those patterns as the default unless the user explicitly overrides them.

4. Aim for enterprise-grade UX
   Every SPFx change should be:

   • Accessible (keyboard, screen reader, color contrast)
   • Performance-aware (no heavy blocking operations in UI or property pane)
   • Theme- and tenant-safe (semantic slots, no hard-coded brand colors)
   • Maintainable (clear module boundaries, typed APIs, minimal toolchain hacks)

---

3. Quick decision checklist

For any SPFx task, quickly answer:

1. Does this change UI or UX?

   • Yes → Start with spfx-enterprise-design-core and spfx-accessibility-and-content-quality.

2. Does it affect colors, fonts, or visual style?

   • Yes → Add spfx-theme-and-brand-integration and spfx-css-and-styling-governance.

3. Does it add or change configuration / property panes?

   • Yes → Add spfx-property-pane-reactivity.

4. Does it introduce or change images/media?

   • Yes → Add spfx-image-and-media-optimization.

5. Is this for release or pipeline work?

   • Yes → Add spfx-release-and-package-quality, optionally spfx-heft-build-and-toolchain / spfx-heft-webpack-customization as needed.

Use this hub as your first stop for SPFx; then let the specialized skills drive detailed decisions.