Run any Skill in Manus with one click

style-figma-clean

Stars73

Forks29

UpdatedMay 2, 2026 at 22:03

Figma Clean style tokens and row template for the list-styling skill. Polished professional cards with a colored top stripe that matches the status, clean data layout below, subtle self-colored borders. Layout features a thin status-colored bar across the top of each card. Use when the user says "figma," "clean," "polished," "professional," "design tool," 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

zrosenfield

zrosenfield/sharepoint-ai-skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

More from this repository

same repository

exec-report

zrosenfield/sharepoint-ai-skills

Generates a polished, self-contained HTML executive report or dashboard from any data source — SharePoint lists, CSV exports, or a user description. Use when asked to build an exec report, one-pager, summary page, status dashboard, project summary, business review, or any single-page visual summary of data. Interviews the user if data is incomplete, constructs a validated JSON document block by block, then renders it into a single sandbox-safe HTML file using the component library. No external dependencies — output runs inside a SharePoint sandboxed iframe.

2026-05-2873

dossier

zrosenfield/sharepoint-ai-skills

Renders a polished, self-contained HTML briefing from any data source — SharePoint lists, uploaded documents, or a verbal description. Use when asked to build a competitor landscape, account brief, candidate summary, site inventory, board bio, speaker profile, partner overview, or any grid of profile cards or single-subject one-pager. Interviews the user if data is incomplete, constructs a validated JSON document, then renders it into a sandbox-safe HTML file using grid mode (2–8 subjects as responsive cards) or one-pager mode (1 subject as a rich briefing). No external dependencies — output runs inside a SharePoint sandboxed iframe.

2026-05-2873

roadmap-timeline

zrosenfield/sharepoint-ai-skills

Generates a polished, self-contained HTML roadmap or milestone timeline from any project data — SharePoint lists, pasted tables, or a verbal description. Use when asked to build a project roadmap, product roadmap, migration timeline, release plan, onboarding sequence, run-of-show, phase plan, or any visual schedule showing items over time. Interviews the user if data is incomplete, constructs a validated JSON document, then renders it into a single sandbox-safe HTML file. Chooses between two layouts automatically: horizontal roadmap with swimlanes (for phase-range data) or vertical milestone list (for point-in-time events). No external dependencies — output runs inside a SharePoint sandboxed iframe.

2026-05-2873

scorecard-matrix

zrosenfield/sharepoint-ai-skills

Generates a polished, self-contained HTML heatmap scorecard — a weighted comparison matrix where entities (rows) are scored across dimensions (columns), with computed totals, rank badges, and a winner highlight. Use when asked to build a scorecard, comparison matrix, decision matrix, vendor evaluation, tool assessment, candidate scoring grid, competitive analysis, site-readiness matrix, or any weighted multi-criteria ranking. Interviews the user if entities or criteria are missing, constructs a validated JSON document, then renders it into a sandbox-safe HTML file using the component library. No external dependencies — output runs inside a SharePoint sandboxed iframe.

2026-05-2873

review-council

zrosenfield/sharepoint-ai-skills

Convene a council of expert AI personas to review, stress-test, and improve any document, idea, proposal, or plan. Use this skill whenever the user asks to "review," "stress-test," "get feedback on," "critique," "poke holes in," "red team," "evaluate," "council," "panel review," or "get perspectives on" any content — whether it's an uploaded Word doc, Excel spreadsheet, PowerPoint deck, PDF, or just a raw idea typed into chat. Also trigger on phrases like "what do you think of this," "is this any good," "what am I missing," "would this work," or "convene the council." This skill works on any format: .docx, .xlsx, .pptx, .pdf, pasted text, or a verbal idea. It replaces generic "looks good" feedback with structured multi-perspective debate and a clear verdict.

2026-05-2873

style-blueprint

zrosenfield/sharepoint-ai-skills

Blueprint engineering-drawing style tokens and row template for the list-styling skill. Monochromatic blue palette, double-ring rubber-stamp status badges, ultra-compact spec-sheet card with a blue left edge. The most compact card in the library — no sidebar, no banner. Overdue is the only element that turns red. Use when the user says "blueprint," "technical drawing," "engineering," "schematic," "spec sheet," or similar.

2026-05-0273

name	style-figma-clean
description	Figma Clean style tokens and row template for the list-styling skill. Polished professional cards with a colored top stripe that matches the status, clean data layout below, subtle self-colored borders. Layout features a thin status-colored bar across the top of each card. Use when the user says "figma," "clean," "polished," "professional," "design tool," or similar.

Figma Clean — Style Tokens + Row Template

Precise, polished, information-dense. Each card has a thin colored stripe across the top that matches the status. Below it, a clean horizontal layout with all metadata. Feels like a Figma component.

Layout philosophy: Top-stripe card. A thin 4px colored bar spans the top of each card, color-coded to the status. Below it, a single horizontal row of data: name, badge, progress, deadline. Dense but never cluttered. Every element is precisely placed.

Badge Tokens

padding: 4px 12px
border-radius: 4px
font-size: 12px
font-weight: 600
text-transform: none

status_colors

Value	bg	text	border	stripe_color
Draft	`#6b7280`	`#ffffff`	`1px solid #6b7280`	`#6b7280`
In Review	`#3b82f6`	`#ffffff`	`1px solid #3b82f6`	`#3b82f6`
Revising	`#f97316`	`#ffffff`	`1px solid #f97316`	`#f97316`
Approved	`#22c55e`	`#ffffff`	`1px solid #22c55e`	`#22c55e`
Published	`#16a34a`	`#ffffff`	`1px solid #16a34a`	`#16a34a`
_fallback	`#9ca3af`	`#ffffff`	`1px solid #9ca3af`	`#9ca3af`

Row Card Tokens

card_border: 1px solid #e5e7eb
card_border_radius: 8px
card_background: #ffffff
card_margin_bottom: 8px
card_shadow: 0px 1px 4px #0000000a
stripe_height: 4px (colored bar at top)
overdue_stripe_color: #ef4444
overdue_card_border: 1px solid #fecaca

Row Template Layout

Top-stripe card with a horizontal metadata row.

┌──────────────────────────────────────────────────────────┐
│████████████████████████████████████████████████████████████│ ← 4px status-colored stripe
│                                                          │
│  API Guide.docx      [In Review]    ███████░░░  72%     │
│                                      5/15/2026           │
╰──────────────────────────────────────────────────────────╯

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",
      "border": "=if([$Deadline] < @now, '1px solid #fecaca', '1px solid #e5e7eb')",
      "border-radius": "8px",
      "background-color": "#ffffff",
      "margin-bottom": "8px",
      "box-shadow": "0px 1px 4px #0000000a",
      "overflow": "hidden"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "height": "4px",
          "width": "100%",
          "background-color": "=if([$Deadline] < @now, '#ef4444', if([$Status] == 'Draft', '#6b7280', if([$Status] == 'In Review', '#3b82f6', if([$Status] == 'Revising', '#f97316', if([$Status] == 'Approved', '#22c55e', if([$Status] == 'Published', '#16a34a', '#9ca3af'))))))"
        }
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "align-items": "center",
          "padding": "16px 20px",
          "gap": "20px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex": "2",
              "display": "flex",
              "flex-direction": "column",
              "gap": "2px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "font-size": "14px",
                  "font-weight": "600",
                  "color": "#1f2937"
                },
                "txtContent": "=if([$FileLeafRef] == '', [$Title], [$FileLeafRef])"
              },
              {
                "elmType": "span",
                "txtContent": "=if([$Deadline] < @now, '⚠ Overdue — ' + toLocaleDateString([$Deadline]), toLocaleDateString([$Deadline]))",
                "style": {
                  "font-size": "12px",
                  "color": "=if([$Deadline] < @now, '#ef4444', '#9ca3af')",
                  "font-weight": "=if([$Deadline] < @now, '600', '400')"
                }
              }
            ]
          },
          {
            "elmType": "span",
            "txtContent": "[$Status]",
            "style": {
              "display": "inline-block",
              "padding": "4px 12px",
              "border-radius": "4px",
              "font-size": "12px",
              "font-weight": "600",
              "white-space": "nowrap",
              "color": "#ffffff",
              "background-color": "=if([$Status] == 'Draft', '#6b7280', if([$Status] == 'In Review', '#3b82f6', if([$Status] == 'Revising', '#f97316', if([$Status] == 'Approved', '#22c55e', if([$Status] == 'Published', '#16a34a', '#9ca3af')))))",
              "border": "=if([$Status] == 'Draft', '1px solid #6b7280', if([$Status] == 'In Review', '1px solid #3b82f6', if([$Status] == 'Revising', '1px solid #f97316', if([$Status] == 'Approved', '1px solid #22c55e', if([$Status] == 'Published', '1px solid #16a34a', '1px solid #9ca3af')))))"
            }
          },
          {
            "elmType": "div",
            "style": {
              "flex": "1.5",
              "display": "flex",
              "align-items": "center",
              "gap": "8px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "flex": "1",
                  "height": "6px",
                  "background-color": "#e5e7eb",
                  "border-radius": "3px",
                  "overflow": "hidden"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "width": "=toString([$Progress]) + '%'",
                      "height": "100%",
                      "border-radius": "3px",
                      "background-color": "=if([$Progress] < 30, '#ef4444', if([$Progress] < 66, '#3b82f6', '#22c55e'))"
                    }
                  }
                ]
              },
              {
                "elmType": "span",
                "txtContent": "=toString([$Progress]) + '%'",
                "style": {
                  "font-size": "13px",
                  "font-weight": "600",
                  "color": "#374151",
                  "min-width": "36px",
                  "text-align": "right"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

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

✅ Full rowFormatter — NOT default column grid
✅ 4px colored STATUS STRIPE across the top of each card — this IS the style
✅ Stripe color changes per status AND turns red for overdue
✅ Compact single-row horizontal layout below the stripe
✅ Self-colored badge borders (border matches background)
✅ Title Case on badges — not uppercase
✅ Blue mid-range progress fill (#3b82f6)
✅ Date is secondary text below the document name — not a separate compartment
✅ Overdue shows inline with the date ("⚠ Overdue — 4/25/2026")
✅ Very subtle shadow and border — precision, not drama
✅ Most compact layout of all styles — highest information density
✅ Completely different from: Neobrutalism (stripe vs sidebar), Glassmorphism (horizontal vs stacked), Bento (single-row vs compartments), Retro (subtle vs loud)