skills.rest
pnp
pnpOFFICIAL
Explore all skills by this author →
Website𝕏@m365pnpGitHub

sharepoint-safe-html

Generate accessible single-file HTML artifacts that render in SharePoint and OneDrive preview surfaces.

128|50|Updated May 4, 2026
Search Tags:#html#accessibility#WCAG#dashboard#sharepoint#iframe#onedrive
One-click install
npx skills add https://github.com/pnp/sharepoint-skills --skill sharepoint-safe-html-pnp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sharepoint-safe-html
Source: https://github.com/pnp/sharepoint-skills/tree/main/Skills/sharepoint-safe-html/sharepoint-safe-html
Command: npx skills add https://github.com/pnp/sharepoint-skills --skill sharepoint-safe-html-pnp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? HTML files hosted in SharePoint or OneDrive render inside restricted sandboxed iframes, so pages relying on external CSS, JavaScript, fonts, CDNs, or network calls break or fail to load. This Skill enforces a strict self-contained contract so generated HTML reports, dashboards, and one-pagers render reliably across SharePoint, OneDrive, Teams, File Viewer, and embedded iframe previews. ## Core Features & Use Cases - Self-contained HTML generation: Produces exactly one .html file with inline CSS, system fonts, semantic markup, and no external dependencies, secrets, or runtime network calls. - Live-linked data support: Optionally links up to 10 CSV or XLSX files in the same SharePoint folder so artifacts auto-update, with defensive normalization, empty states, and visible error panels. - WCAG 2.2 AA accessibility: Enforces one h1, logical headings, main landmark, live regions, accessible KPI cards, tables with captions, and chart text equivalents, backed by a detailed accessibility reference. - Use Case: Ask for a project status dashboard as a SharePoint-safe HTML file; the result is a single responsive page with CSS-only charts, source notes, and full keyboard and screen-reader support that works when opened through File Viewer. ## Quick Start Ask the AI to create a SharePoint-safe HTML report or dashboard from your data, for example: create a SharePoint-safe HTML one-pager summarizing this quarter's project status.

Frequently Asked Questions about sharepoint-safe-html

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an HTML report that works in SharePoint preview?▼

Generate a single self-contained .html file with all CSS inline, system fonts, and no external scripts, stylesheets, images, fonts, or network calls. SharePoint renders files in a restricted sandboxed iframe, so anything outside the file will fail to load.

Can a SharePoint HTML page use JavaScript or external libraries?▼

External scripts, CDN libraries, and runtime network calls like fetch are banned. Inline JavaScript is allowed only when interactivity is truly required, and the artifact must remain useful if scripts are blocked by the sandbox.

How do I make an HTML dashboard auto-update from SharePoint data?▼

Use the live-linked data exception: place up to 10 CSV or XLSX files in the same SharePoint or OneDrive folder as the HTML file. Define each file's expected schema, normalize data with safe defaults, and render visible empty or error states if links fail.

Does SharePoint-hosted HTML support charts and dashboards?▼

Yes, but use CSS-only visuals such as bars, badges, sparklines, timelines, inline SVG, or semantic tables instead of chart library CDNs. Every chart must also provide the same data as text, a list, or a table for accessibility.

Why does my HTML file look broken when opened in OneDrive or Teams?▼

Breakage usually comes from external CSS, fonts, images, or scripts that the sandboxed iframe blocks. Check the source for banned patterns like http references, script src tags, link stylesheets, fetch calls, or local file paths and inline everything instead.

What accessibility standard should SharePoint HTML artifacts meet?▼

Artifacts target WCAG 2.2 AA by default, including one h1, logical heading order, a main landmark, visible focus, sufficient contrast, live regions for dynamic states, and no meaning conveyed by color or hover alone.

Related Skills

Explore More Content & Communication Skills→
MichaelYang-lyxMichaelYang-lyx
110

group-by-analysis

Group multi-sheet Excel data into styled summary reports with charts.

Community
Intermediate
AceDataCloudAceDataCloud
13

microsoft-onedrive

Manage OneDrive and SharePoint files via Microsoft Graph endpoints.

Official
Advanced
InnerScopeHearingInnerScopeHearing

cfo-sharepoint

Access SharePoint sites and document libraries for read-only operations.

Official
Intermediate
winstonkoh87winstonkoh87
558

dashboard-builder

Convert data into interactive offline HTML dashboards with Chart.js.

Community
Intermediate