تشغيل أي مهارة في Manus بنقرة واحدة

$pwd:

style-bento

Name: Style Bento
Author: pnp

// Bento style tokens and row template for the list-styling skill. Card layout inspired by bento boxes — distinct compartments separated by thin borders, each section labeled, warm earth tones. Layout is a horizontal row of compartments (name | status | progress | deadline) with visible dividers between each. Use when the user says "bento," "compartment," "warm style," "earth tones," "organized," or similar.

تشغيل في Manus

$ git log --oneline --stat

stars:٢٨

forks:١١

updated:٢٥ مايو ٢٠٢٦ في ١٩:١٠

SKILL.md

readonly

related-skills.json

نفس المستودع

file-classifier.md

from "pnp/sharepoint-skills"

Classifies files in a SharePoint document library by reading their content and matching them to known content types (Contracts, Invoices, Purchase Orders). Creates a File classification Choice column plus 5 metadata columns per content type, extracts values from each file, and writes them back automatically. Use when the user asks to classify, categorize, tag, or auto-label files in a library, or to set up content types with metadata extraction. Trigger phrases: classify files, classify documents, classify library, categorize files, tag files, auto-classify, set up content types, extract metadata, identify contracts invoices purchase orders.

2026-05-2528

library-cleanup.md

from "pnp/sharepoint-skills"

Organizes files in a document library so people and AI can find them easily. Scans all files, summarizes issues (duplicates, empty folders, bad names), recommends a clean structure with a visual before/after comparison, reads file content to propose meaningful rename suggestions, then executes with a TODO checklist the user can follow along with. Triggered when someone says "clean up file demo".

2026-05-2528

list-styling.md

from "pnp/sharepoint-skills"

Apply a visual style theme to any SharePoint list or document library using column formatting, view formatting, row templates, and tile layouts. Use this skill whenever the user asks to style, theme, or visually transform a list or library. The goal is "I can't believe that's SharePoint" impact — not just color swaps, but fully art-directed views. This skill works with any style token file.

2026-05-2528

organize-library.md

from "pnp/sharepoint-skills"

End-to-end orchestrator that fully organizes a SharePoint document library — classifies files by content type (via the file-classifier skill), creates and extracts metadata columns, applies brand-consistent column and view formatting, builds per-content-type views, colors folders, and creates notification rules for overdue items. Use when the user asks to organize, set up, structure, or transform a document library, or to apply branding and views across content types. Trigger phrases: organize library, organize document library, set up library, structure library, brand library, full library makeover, apply brand to library, organize and format library.

2026-05-2528

rename-files-date-prefix.md

from "pnp/sharepoint-skills"

Renames all files in a SharePoint document library (including subfolders) to prefix them with their created date in yyMMdd format (e.g., 251203-Status Report.pdf). Offers a preview before committing changes. Use when the user asks to prefix filenames with dates or add date prefixes to files.

2026-05-2528

review-council.md

from "pnp/sharepoint-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-2528

package.json

"author": "pnp"

"repository": "pnp/sharepoint-skills"

فتح مستودع GitHub عرض مستودعات المنشئ

$ install --global

$ download --local

تشغيل في Manus

$ useful --forSOC

المصممون الجرافيكيونالفنون والتصميم والترفيه والرياضة والإعلام27-1024L4

name

style-bento

description

Bento style tokens and row template for the list-styling skill. Card layout inspired by bento boxes — distinct compartments separated by thin borders, each section labeled, warm earth tones. Layout is a horizontal row of compartments (name | status | progress | deadline) with visible dividers between each. Use when the user says "bento," "compartment," "warm style," "earth tones," "organized," or similar.

Bento — Style Tokens + Row Template

Warm, organized, compartmentalized. Each row is a card divided into labeled compartments like a bento box — visible dividers, each section has a header label above its content.

Layout philosophy: Horizontal compartments with dividers. Not a sidebar split, not a single stack. Four distinct compartments in a row: Name | Status | Progress | Deadline. Each compartment has a tiny uppercase label above the content. The dividers between compartments ARE the design.

Badge Tokens

padding: 4px 10px
border-radius: 4px
font-size: 11px
font-weight: 600
text-transform: uppercase

status_colors

Value	bg	text	border
Draft	`#9ca3af`	`#ffffff`	`0px`
In Review	`#3b82f6`	`#ffffff`	`0px`
Revising	`#ea580c`	`#ffffff`	`0px`
Approved	`#16a34a`	`#ffffff`	`0px`
Published	`#15803d`	`#ffffff`	`0px`
_fallback	`#d1d5db`	`#ffffff`	`0px`

Progress Bar Tokens

progress_track_height: 8px
progress_track_bg: #f3f4f6
progress_track_border: 0px
progress_track_radius: 4px
progress_fill_radius: 4px
progress_color_low: #ef4444
progress_color_mid: #ea580c
progress_color_high: #22c55e
progress_label_font_size: 20px
progress_label_font_weight: 700
progress_label_color: #1f2937

Row Card Tokens

card_border: 1px solid #e5e7eb
card_border_radius: 8px
card_background: #ffffff
card_margin_bottom: 8px
card_shadow: 0px 1px 3px #0000000d
compartment_border: 1px solid #e5e7eb (dividers between sections)
compartment_label_color: #9ca3af
compartment_label_size: 9px
compartment_label_weight: 600
compartment_label_transform: uppercase
compartment_label_spacing: 0.5px
overdue_accent: 2px solid #dc2626 (left border accent on overdue cards)

Row Template Layout

Horizontal compartment grid. Each section is a labeled box.

┌──────────────────┬───────────┬──────────────────┬──────────────┐
│ DOCUMENT         │ STATUS    │ PROGRESS         │ DEADLINE     │
│                  │           │                  │              │
│ API Guide.docx   │ [In Rev]  │        72%       │ 📅 5/15/2026 │
│                  │           │ ████████████░░░  │ DEADLINE     │
│                  │ On Track  │                  │              │
└──────────────────┴───────────┴──────────────────┴──────────────┘
  ↑ overdue cards get a 2px red left border accent

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",
      "border": "1px solid #e5e7eb",
      "border-left": "=if([$Deadline] < @now, '3px solid #dc2626', '1px solid #e5e7eb')",
      "border-radius": "8px",
      "background-color": "#ffffff",
      "margin-bottom": "8px",
      "box-shadow": "0px 1px 3px #0000000d",
      "overflow": "hidden",
      "min-height": "90px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex": "2",
          "padding": "14px 16px",
          "display": "flex",
          "flex-direction": "column",
          "gap": "6px",
          "border-right": "1px solid #e5e7eb"
        },
        "children": [
          {
            "elmType": "span",
            "txtContent": "DOCUMENT",
            "style": {
              "font-size": "9px",
              "font-weight": "600",
              "color": "#9ca3af",
              "text-transform": "uppercase",
              "letter-spacing": "0.5px"
            }
          },
          {
            "elmType": "div",
            "style": {
              "font-size": "14px",
              "font-weight": "700",
              "color": "#1f2937",
              "line-height": "1.3"
            },
            "txtContent": "=if([$FileLeafRef] == '', [$Title], [$FileLeafRef])"
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "flex": "1",
          "padding": "14px 16px",
          "display": "flex",
          "flex-direction": "column",
          "gap": "8px",
          "align-items": "center",
          "justify-content": "center",
          "border-right": "1px solid #e5e7eb"
        },
        "children": [
          {
            "elmType": "span",
            "txtContent": "STATUS",
            "style": {
              "font-size": "9px",
              "font-weight": "600",
              "color": "#9ca3af",
              "text-transform": "uppercase",
              "letter-spacing": "0.5px"
            }
          },
          {
            "elmType": "span",
            "txtContent": "[$Status]",
            "style": {
              "display": "inline-block",
              "padding": "4px 10px",
              "border-radius": "4px",
              "font-size": "11px",
              "font-weight": "600",
              "text-transform": "uppercase",
              "white-space": "nowrap",
              "color": "#ffffff",
              "background-color": "=if([$Status] == 'Draft', '#9ca3af', if([$Status] == 'In Review', '#3b82f6', if([$Status] == 'Revising', '#ea580c', if([$Status] == 'Approved', '#16a34a', if([$Status] == 'Published', '#15803d', '#d1d5db')))))"
            }
          },
          {
            "elmType": "span",
            "txtContent": "=if([$Deadline] < @now, '⚠ At Risk', '✓ On Track')",
            "style": {
              "font-size": "10px",
              "font-weight": "500",
              "color": "=if([$Deadline] < @now, '#dc2626', '#16a34a')"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "flex": "1.5",
          "padding": "14px 16px",
          "display": "flex",
          "flex-direction": "column",
          "gap": "6px",
          "align-items": "center",
          "justify-content": "center",
          "border-right": "1px solid #e5e7eb"
        },
        "children": [
          {
            "elmType": "span",
            "txtContent": "PROGRESS",
            "style": {
              "font-size": "9px",
              "font-weight": "600",
              "color": "#9ca3af",
              "text-transform": "uppercase",
              "letter-spacing": "0.5px"
            }
          },
          {
            "elmType": "span",
            "txtContent": "=toString([$Progress]) + '%'",
            "style": {
              "font-size": "20px",
              "font-weight": "700",
              "color": "=if([$Progress] < 30, '#ef4444', if([$Progress] < 66, '#ea580c', '#16a34a'))"
            }
          },
          {
            "elmType": "div",
            "style": {
              "width": "100%",
              "height": "8px",
              "background-color": "#f3f4f6",
              "border-radius": "4px",
              "overflow": "hidden"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "width": "=toString([$Progress]) + '%'",
                  "height": "100%",
                  "border-radius": "4px",
                  "background-color": "=if([$Progress] < 30, '#ef4444', if([$Progress] < 66, '#ea580c', '#22c55e'))"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "flex": "1",
          "padding": "14px 16px",
          "display": "flex",
          "flex-direction": "column",
          "gap": "4px",
          "align-items": "center",
          "justify-content": "center"
        },
        "children": [
          {
            "elmType": "span",
            "txtContent": "DEADLINE",
            "style": {
              "font-size": "9px",
              "font-weight": "600",
              "color": "#9ca3af",
              "text-transform": "uppercase",
              "letter-spacing": "0.5px"
            }
          },
          {
            "elmType": "span",
            "txtContent": "=toLocaleDateString([$Deadline])",
            "style": {
              "font-size": "13px",
              "font-weight": "=if([$Deadline] < @now, '700', '500')",
              "color": "=if([$Deadline] < @now, '#dc2626', '#374151')"
            }
          },
          {
            "elmType": "span",
            "txtContent": "=if([$Deadline] < @now, '⚠ OVERDUE', '')",
            "style": {
              "font-size": "10px",
              "font-weight": "700",
              "color": "#dc2626"
            }
          }
        ]
      }
    ]
  }
}

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

✅ Full rowFormatter — NOT default column grid
✅ Horizontal compartment layout with VISIBLE DIVIDERS between sections
✅ Each compartment has a tiny uppercase label (DOCUMENT, STATUS, PROGRESS, DEADLINE)
✅ Labels are 9px, gray, uppercase with letter-spacing — subtle but structured
✅ Progress percentage is LARGE (20px) and centered in its compartment
✅ Warm earth-tone badge colors (burnt orange, olive green)
✅ Overdue cards get a red left-border accent — not the whole border
✅ No sidebar — this is a horizontal grid, like bento box compartments
✅ Subtle shadow (not hard offset) — organized, not aggressive
✅ On Track / At Risk indicator under the status badge
✅ Completely different layout from Neobrutalism (compartments vs sidebar) and Glassmorphism (horizontal vs stacked)

Responsive / mobile

≤ 600 px: bento compartments stack vertically rather than sitting side-by-side. Set the row container to flex-wrap: wrap and each compartment to min-width: 0 so titles ellipsis-truncate.
≤ 480 px: hide the compartment labels (Document / Status / Progress / Deadline), keep only the values. The compartment dividers carry the structure on their own.
Padding step-down: 16px desktop → 12px tablet → 8px mobile.
Touch targets: any customRowAction element stays ≥ 44 × 44 px on mobile.

Implementation notes

The tokens + rowFormatter JSON in this file has grown large. When adapting it for a real library, treat the tokens block as the source of truth and re-derive the rowFormatter from it — do not mass-edit both halves of the file in parallel. A future iteration should split this into two reference files (tokens first, then rowFormatter that consumes them).

style-bento

المزيد من هذا المستودع

المزيد من هذا المستودع

Bento — Style Tokens + Row Template

Badge Tokens

status_colors

Progress Bar Tokens

Row Card Tokens

Row Template Layout

rowFormatter JSON

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

Responsive / mobile

Implementation notes

Bento — Style Tokens + Row Template

Badge Tokens

status_colors

Progress Bar Tokens

Row Card Tokens

Row Template Layout

rowFormatter JSON

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

Responsive / mobile

Implementation notes