Run any Skill in Manus with one click

style-high-contrast

Stars58

Forks28

UpdatedMay 25, 2026 at 19:10

High Contrast accessibility style tokens and row template for the list-styling skill. Maximum contrast, large text, thick borders, alternating dark/light band rows, heavy left accent bar. Layout uses wide horizontal bands with large bold text for maximum readability. Use when the user says "high contrast," "accessible," "WCAG," "large text," or similar.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

pnp

pnp/sharepoint-skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Graphic DesignersArts, Design, Entertainment, Sports, and Media Occupations·SOC 27-1024

SKILL.md

readonly

More from this repository

same repository

metadata-completeness-auditor

pnp/sharepoint-skills

Audits the metadata quality of a SharePoint document library or list. Scans every item against its required columns, flags missing, blank, or placeholder values, computes a completeness score per item and per column, and saves a self-contained HTML gap-report dashboard to the site. It is strictly read-only — it never changes the list or its items. Use when the user says: - "metadata audit" - "metadata completeness" - "metadata health" - "missing metadata" - "audit metadata" - "metadata quality" - "check metadata" - "metadata gap report" - "which items are missing metadata" - "find blank columns"

2026-07-1158

project-intelligence-change-event-extraction

pnp/sharepoint-skills

Reads every document in a SharePoint project library and compiles a complete, structured record of every change event — scope assumptions, scope changes, technical decisions, client requests, risks, budget and schedule events, governance events, and early-warning signals — writing each to the Change Events SharePoint list with signal strength and governance flags. Use when the user asks to "extract change events from the project", "build the project change log", "find the signals in these project documents", "populate the Change Events list", or "start the Project Intelligence Engine on this site". First stage of the Project Intelligence Engine; its output feeds Root Cause Analysis.

2026-07-0758

project-intelligence-root-cause-analysis

pnp/sharepoint-skills

Reads the Change Events list and produces a full causal analysis of a project failure — a counterfactual root-cause test, the causal chain, intervention windows, and early-warning signal analysis — ending in one actionable recommendation, persisted back to SharePoint. Use when the user asks to "find the root cause", "run root cause analysis on the project", "what went wrong and when did we know", "trace the causal chain", or "analyze the change log". Second stage of the Project Intelligence Engine; requires the Change Events list populated by Change Event Extraction.

2026-07-0758

project-intelligence-timeline-dashboard

pnp/sharepoint-skills

Generates a self-contained, dependency-free HTML timeline dashboard that visualises the Project Intelligence Engine output — KPI bar, planned-vs-actual contrast panel, root cause, causal chain, signal-trail timeline, early-warnings table, governance summary, and recommendation. Use when the user asks to "build the timeline dashboard", "visualize the project intelligence output", "generate the project intelligence dashboard", or "create the root cause HTML dashboard". Final stage of the Project Intelligence Engine; requires the Change Events list and analysis from the prior two skills.

2026-07-0758

convert-cowork-skill-to-sharepoint

pnp/sharepoint-skills

Convert an existing Copilot Cowork skill into a Copilot in SharePoint skill. Use this skill to inspect the source skill, identify Cowork-specific assumptions, produce a SharePoint-native conversion plan, get user approval, then create or update the converted skill in AgentAssets/Skills. Use when the user says: - "Convert my skill" - "Rewrite my Cowork skill" - "Make my Cowork skill work in SharePoint" - "Adapt this Cowork skill for Copilot in SharePoint" - "Port this skill from Cowork to SharePoint"

2026-07-0358

sharepoint-safe-html

pnp/sharepoint-skills

Creates single-file HTML artifacts that render reliably in SharePoint, OneDrive, Teams, File Viewer, and embedded iframe preview surfaces. Use this skill whenever the user asks for SharePoint-safe HTML, an HTML report, dashboard, deck, artifact, visual page, one-pager, or embeddable HTML file for Microsoft 365 preview surfaces. Enforces inline CSS, no external dependencies, no runtime network calls, responsive iframe-friendly layout, optional live-linked CSV/XLSX data files, accessibility, and privacy-safe escaping.

2026-06-2858

name	style-high-contrast
description	High Contrast accessibility style tokens and row template for the list-styling skill. Maximum contrast, large text, thick borders, alternating dark/light band rows, heavy left accent bar. Layout uses wide horizontal bands with large bold text for maximum readability. Use when the user says "high contrast," "accessible," "WCAG," "large text," or similar.

High Contrast — Style Tokens + Row Template

Maximum readability. Thick borders. Large text. Each row is a wide horizontal band with alternating backgrounds and a heavy left accent bar color-coded to the status. Everything is designed to be read at arm's length.

Layout philosophy: Wide bands with heavy accents. No card separation — rows are wide horizontal bands with alternating light/dark backgrounds. A thick (6px) left accent bar marks each row's status. All text is oversized. Progress percentage is the largest element. Optimized for accessibility, not aesthetics.

Badge Tokens

padding: 6px 16px
border-radius: 4px
font-size: 14px
font-weight: 700
text-transform: uppercase

status_colors

Value	bg	text	border
Draft	`#1f2937`	`#ffffff`	`2px solid #1f2937`
In Review	`#1d4ed8`	`#ffffff`	`2px solid #1d4ed8`
Revising	`#b45309`	`#ffffff`	`2px solid #b45309`
Approved	`#047857`	`#ffffff`	`2px solid #047857`
Published	`#065f46`	`#ffffff`	`2px solid #065f46`
_fallback	`#374151`	`#ffffff`	`2px solid #374151`

Row Card Tokens

row_border: none (bands, not cards)
row_background_even: #ffffff
row_background_odd: #f8fafc
accent_width: 6px (thick left accent bar)
row_padding: 18px 24px
row_margin: 0px (no gaps — continuous bands)
overdue_background: #fef2f2 (light red wash over entire row)

Row Template Layout

Wide horizontal band. No card borders. Thick left accent. Alternating backgrounds.

┃█████ API Guide.docx         [IN REVIEW]       72%    5/15/2026         ┃
┃█████ ████████████████████████████████████░░░░░░░░░░░░░░               ┃
┃                                                          (white bg)    ┃
┃█████ Architecture Overview   [DRAFT]           35%    5/30/2026        ┃
┃█████ ███████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░                      ┃
┃                                                          (gray bg)     ┃
  ↑ 6px left accent in status color. Overdue rows get pink wash.

rowFormatter JSON

Adapt before applying. The column names below ([$Status], [$Progress], [$Deadline]) are example placeholders — replace them with the actual internal column names from the user's list. Also update every status value string ('Draft', 'In Review', 'Revising', etc.) to match the user's actual Choice values. Follow list-styling Step 3.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "hideSelection": false,
  "hideColumnHeaders": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "gap": "10px",
      "padding": "18px 24px",
      "border-left": "=if([$Status] == 'Draft', '6px solid #1f2937', if([$Status] == 'In Review', '6px solid #1d4ed8', if([$Status] == 'Revising', '6px solid #b45309', if([$Status] == 'Approved', '6px solid #047857', if([$Status] == 'Published', '6px solid #065f46', '6px solid #374151')))))",
      "background-color": "=if([$Deadline] < @now, '#fef2f2', if(@rowIndex % 2 == 0, '#ffffff', '#f8fafc'))",
      "border-bottom": "1px solid #d1d5db",
      "min-height": "80px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "align-items": "center",
          "gap": "20px",
          "flex-wrap": "wrap"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex": "2",
              "font-size": "16px",
              "font-weight": "700",
              "color": "#1f2937"
            },
            "txtContent": "=if([$FileLeafRef] == '', [$Title], [$FileLeafRef])"
          },
          {
            "elmType": "span",
            "txtContent": "[$Status]",
            "style": {
              "display": "inline-block",
              "padding": "6px 16px",
              "border-radius": "4px",
              "font-size": "14px",
              "font-weight": "700",
              "text-transform": "uppercase",
              "white-space": "nowrap",
              "color": "#ffffff",
              "background-color": "=if([$Status] == 'Draft', '#1f2937', if([$Status] == 'In Review', '#1d4ed8', if([$Status] == 'Revising', '#b45309', if([$Status] == 'Approved', '#047857', if([$Status] == 'Published', '#065f46', '#374151')))))",
              "border": "=if([$Status] == 'Draft', '2px solid #1f2937', if([$Status] == 'In Review', '2px solid #1d4ed8', if([$Status] == 'Revising', '2px solid #b45309', if([$Status] == 'Approved', '2px solid #047857', if([$Status] == 'Published', '2px solid #065f46', '2px solid #374151')))))"
            }
          },
          {
            "elmType": "span",
            "txtContent": "=toString([$Progress]) + '%'",
            "style": {
              "font-size": "24px",
              "font-weight": "800",
              "color": "#1f2937",
              "min-width": "60px",
              "text-align": "right"
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "gap": "6px"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "📅",
                "style": { "font-size": "15px" }
              },
              {
                "elmType": "span",
                "txtContent": "=toLocaleDateString([$Deadline])",
                "style": {
                  "font-size": "15px",
                  "font-weight": "=if([$Deadline] < @now, '800', '500')",
                  "color": "=if([$Deadline] < @now, '#b91c1c', '#1f2937')"
                }
              },
              {
                "elmType": "span",
                "txtContent": "=if([$Deadline] < @now, '⚠ OVERDUE', '')",
                "style": {
                  "font-size": "14px",
                  "font-weight": "800",
                  "color": "#b91c1c"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "height": "12px",
          "background-color": "#d1d5db",
          "border": "2px solid #1f2937",
          "border-radius": "2px",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "width": "=toString([$Progress]) + '%'",
              "height": "100%",
              "border-radius": "0px",
              "background-color": "=if([$Progress] < 30, '#b91c1c', if([$Progress] < 66, '#b45309', '#047857'))"
            }
          }
        ]
      }
    ]
  }
}

Checklist — "I Can't Believe That's SharePoint"

✅ Full rowFormatter — NOT default column grid
✅ Wide horizontal BANDS — not cards (no card separation, no rounded corners, no shadow)
✅ 6px thick left accent bar in status color
✅ Alternating row backgrounds (white / light gray) — even vs odd
✅ Overdue rows get full pink wash background
✅ ALL text is oversized (14-24px) — readable at arm's length
✅ Progress percentage is 24px and bold — second-largest element
✅ 12px thick progress bar with dark border — chunkiest of all styles
✅ Dark, high-contrast colors (WCAG AAA)
✅ 📅 icon + large date (15px)
✅ Different from ALL others: bands vs cards, no shadows, no rounded corners, maximum density

Responsive / mobile

≤ 600 px: collapse the band by reducing the left-accent bar from 8 px to 4 px and stacking the title above the chips. Keep band height ≥ 64 px so the row is still a comfortable touch target.
Never reduce any text below 16 px on mobile. This style trades density for legibility; shrinking text defeats the purpose. If the layout doesn't fit, drop fields, do not shrink type.
≤ 480 px: hide the progress label ("Progress") — the numeral and the bar are self-explanatory.
Touch targets: rows are 64 px tall and clickable; this is already mobile-friendly by default.

Implementation notes

WCAG contrast claim (pinned)

The shipped token pairs were verified at WebAIM at design time:

Pair	Use	Ratio	WCAG
`#0F172A` BG + `#FFFFFF` text	Dark band background + body text	≈ 17.4 : 1	AAA (normal & large)
`#F8FAFC` BG + `#0F172A` text	Light band background + body text	≈ 16.8 : 1	AAA (normal & large)
`#0078D4` accent on `#F8FAFC`	Accent text / left bar on light	≈ 4.6 : 1	AA (large text only)
`#DC2626` overdue on `#F8FAFC`	Overdue red on light	≈ 5.9 : 1	AA (normal)
`#FFFFFF` on `#DC2626`	Overdue badge text	≈ 4.8 : 1	AA (normal)

If any of these tokens are re-skinned, re-verify the affected pairs in WebAIM contrast checker before publishing. Never lower an existing AAA pair to AA without an explicit decision.