Coding, performance, and best-practice guidance for SPFx web parts and extensions, including data access (REST, Graph, PnPjs), recommended npm packages, and sample patterns.

2026-03-075

spfx-enterprise-design-core

sudharsank/spfx-enterprise-skills

Core design guidance for SPFx web parts and extensions. Use for layout, hierarchy, commanding, text, empty states, and responsive behavior when building or reviewing SPFx UX.

2026-03-075

spfx-enterprise-implementation-core

sudharsank/spfx-enterprise-skills

Core implementation standards for enterprise SPFx web parts, extensions, and shared modules.

2026-03-075

spfx-enterprise-ux-hub

sudharsank/spfx-enterprise-skills

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.

2026-03-075

name	spfx-image-and-media-optimization
description	SPFx image and media optimization patterns for responsive and performance-aware experiences.

SPFx Image and Media Optimization

Use for

Image-heavy web parts or dashboard cards.
Responsive media handling and display performance.
Integration with SPFx image helper guidance.

Do not use for

Non-media feature work.
Pure build pipeline tuning.

Trigger conditions

New image rendering requirements.
Slow image loading or layout shift issues.

Enterprise guardrails

Optimize for page performance and perceived load speed.
Avoid oversized assets in default views.
Preserve accessibility metadata for images.

Output expectations

Faster image rendering paths.
Better responsive behavior across viewport sizes.

Typical target paths (any SPFx project)

src/webparts/**/assets
src/webparts/**/components