list-styling

Generates SharePoint list and library view formatting JSON using column, row, and tile formatters.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Styling a SharePoint list or document library requires hand-writing complex view formatting JSON across column formatters, rowFormatter templates, and tile layouts, and mistakes like wrong internal column names or mismatched Choice values produce blank or broken views. ## Core Features & Use Cases - Multi-Level Formatting: Combines column formatting, view formatting, rowFormatter row templates, and tile/gallery layouts into a single styled view. - Schema-Driven Column Mapping: Reads the list schema first and maps actual internal column names and Choice values onto a style token template before generating JSON. - Responsive and Safe Application: Enforces mobile breakpoints, preview-before-save testing, and custom view creation so default views are never modified. - Use Case: A user wants a project tracker list to look like a card-based dashboard. The skill reads the list's Status, Progress, and Due Date columns, adapts a style template's rowFormatter to those internal names, and produces paste-ready JSON for a new view. ## Quick Start Ask the assistant to apply a visual style theme to your SharePoint list and provide the list's column names and Choice values.

Frequently Asked Questions about list-styling

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

FAQPage Schema
How do I style a SharePoint list with JSON formatting?▼

Create a new view, then open Format current view in Advanced mode and paste rowFormatter JSON that references your list's internal column names. Combine it with column formatters for fields not covered by the row template, and preview before saving.

What is the difference between rowFormatter and additionalRowClass in SharePoint?▼

rowFormatter replaces the entire row layout with a custom HTML structure, while additionalRowClass only adds CSS classes to existing rows. They conflict when used together, so rowFormatter takes precedence and additionalRowClass has no effect.

Why does my SharePoint view formatting show blank cells?▼

Blank cells usually mean the JSON references display names instead of internal column names, where spaces become _x0020_, or Choice values mismatch in case. Verify the exact internal names and case-sensitive Choice values against the list schema.

Does SharePoint JSON formatting support gradients or rgba colors?▼

No. SharePoint JSON formatting supports hex colors only and does not support gradients, rgb(), rgba(), hsl(), backdrop-filter, CSS variables, or hover pseudo-states. Use solid hex colors and inline style properties instead.

How do I make a styled SharePoint list view work on mobile?▼

Avoid fixed widths over 240 px, use flex-wrap so sections stack on narrow screens, and hide secondary metadata below 480 px using @window.innerWidth expressions. Test the preview at roughly 375 px, 600 px, and desktop widths before saving.