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

style-blueprint

Generates blueprint-style SharePoint list rowFormatter JSON with monochromatic blue spec-sheet cards.

128|50|Updated May 4, 2026
Search Tags:#json#blueprint#sharepoint#list formatting#status badge#rowformatter#view styling
One-click install
npx skills add https://github.com/pnp/sharepoint-skills --skill style-blueprint-pnp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: style-blueprint
Source: https://github.com/pnp/sharepoint-skills/tree/main/Skills/style-blueprint/style-blueprint
Command: npx skills add https://github.com/pnp/sharepoint-skills --skill style-blueprint-pnp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Styling SharePoint list views with custom JSON row formatters is tedious and error-prone, and achieving a consistent engineering-drawing aesthetic requires precise color tokens, badge markup, and layout rules that are hard to hand-write. ## Core Features & Use Cases - Complete style token system: Provides a nine-swatch monochromatic blue palette, double-ring rubber-stamp badge tokens, progress bar tokens, and deadline tokens with overdue-only red alerts. - Ready-to-adapt rowFormatter JSON: Ships a full SharePoint view-formatting schema producing an ultra-compact two-line spec-sheet card with a 4px blue left edge, no banner, no sidebar, and no emoji. - Use Case: A user asks Copilot in SharePoint to style a document library in a "blueprint" or "engineering drawing" look; the skill supplies the exact tokens and JSON, which are adapted to the list's actual Status, Progress, and Deadline column names. ## Quick Start Ask Copilot in SharePoint to apply the blueprint engineering-drawing style to your list, replacing the placeholder column names with your actual Status, Progress, and Deadline fields.

Frequently Asked Questions about style-blueprint

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

FAQPage Schema
How do I apply a custom row style to a SharePoint list view?▼

Use the rowFormatter JSON from this style in your list's view formatting settings, replacing the placeholder fields like [$Status], [$Progress], and [$Deadline] with your list's actual internal column names. The JSON follows the SharePoint v2 view-formatting schema.

What does the blueprint SharePoint list style look like?▼

The blueprint style renders ultra-compact two-line cards with a 4px blue left edge, double-ring rubber-stamp status badges, a 4px progress bar, and text-only DUE and OVERDUE labels. It uses no banner, sidebar, shadows, or emoji.

Does the blueprint style use different colors per status value?▼

No, every status uses the same monochromatic blue (#1e40af) for the stamp border and text; only the stamp text differentiates statuses. Red (#dc2626) appears exclusively when a deadline is overdue, overriding any status.

Why is my SharePoint rowFormatter JSON not rendering correctly?▼

The most common cause is placeholder column names not being replaced with actual internal field names from your list. Also verify the JSON validates against the SharePoint v2 view-formatting schema and that referenced columns exist in the view.

What are the limitations of the blueprint list style?▼

The style intentionally avoids per-status colors, emoji, banners, and shadows, so it is unsuitable when users need color-coded status differentiation. The double-ring stamp may degrade to a single ring if a SharePoint theme drops nested element styling.

Related Skills

Explore More Design & Creative Skills→
zrosenfieldzrosenfield
84

list-formatting

Create custom JSON visual styles for SharePoint lists and libraries.

Community
Intermediate
dembrandtdembrandt
33

coordinated-data-views

Synchronize selections and highlights across paired data tables and visual views.

Official
Intermediate
RorySullivan1RorySullivan1

sharepoint-column-formatting

Generates declarative JSON formatters that style SharePoint list columns and views.

Community
Intermediate
borderuxborderux
1

recursica-skill-panel

Guides correct usage of the Recursica panel component for non-blocking side surfaces.

Official
Intermediate