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

style-retro

Applies Retro Memphis design tokens and rowFormatter JSON to SharePoint list views.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Styling SharePoint list rows with a consistent, distinctive visual theme requires hand-writing complex view-formatting JSON with per-status colors, shadows, and layouts, which is error-prone and time-consuming. ## Core Features & Use Cases - Complete design token set: Provides badge, progress bar, deadline, and row card tokens with per-status colors (Draft, In Review, Revising, Approved, Published) for the Retro Memphis aesthetic. - Ready-to-adapt rowFormatter JSON: Ships a full SharePoint view-formatting schema producing a stacked vertical card with a status-colored top banner, pill badges, large progress percentage, and colored offset shadows. - Responsive and fallback guidance: Includes mobile breakpoints and notes on inconsistent colored box-shadow rendering across browsers and SharePoint themes. - Use Case: A user asks Copilot in SharePoint to make a document tracking list look "retro" or "colorful"; the skill supplies the tokens and JSON template, adapted to the list's actual column names and Choice values. ## Quick Start Ask Copilot in SharePoint to apply the retro Memphis style to your list, replacing the placeholder column names with your actual Status, Progress, and Deadline columns.

Frequently Asked Questions about style-retro

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

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

Use the provided rowFormatter JSON in the list's view formatting settings, replacing placeholder columns like [$Status], [$Progress], and [$Deadline] with your list's actual internal column names and matching the status strings to your Choice values.

What is the difference between Retro Memphis and Neobrutalism list styling?▼

Retro Memphis uses a vertical stacked card with a status-colored banner on top, rounded 12px corners, and 6px colored shadows. Neobrutalism uses a horizontal sidebar split layout with sharper edges and 4px shadows.

Why is my SharePoint progress bar teal instead of green?▼

Retro Memphis intentionally uses a pink to blue to teal progress palette instead of the traditional red-amber-green traffic-light scheme. Each progress range gets its own distinct hue following the 80s Memphis design approach.

Does colored box-shadow work in all SharePoint environments?▼

No. Chrome and Edge render colored box-shadows correctly, but Safari may mute saturation and older SharePoint themes may strip them entirely. The status-colored top banner is the primary identity element and renders without depending on the shadow.

How does the retro style handle overdue items in SharePoint lists?▼

When the Deadline column value is before the current date, the card banner, border, and shadow turn hot pink, the sparkle emoji is replaced with a fire emoji, and the deadline label shows OVERDUE in bold hot pink.

Related Skills

Explore More Design & Creative Skills→
RorySullivan1RorySullivan1

sharepoint-column-formatting

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

Community
Intermediate
alastor0325alastor0325

open-team

Opens Firefox review-team dashboards hosted on GitHub Pages for specified teams.

Community
Basic
dembrandtdembrandt
33

coordinated-data-views

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

Official
Intermediate
Negentropy-LabyNegentropy-Laby
3

quick-design

Generate Quick Design Specs for minor project changes.

Official
Basic