zrosenfield/style-bento
Skills/styling/style-bento/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add zrosenfield/sharepoint-ai-skills style-bentoInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 3, 2026, 2:27 AM107.6s1 file scanned
SKILL.md
- 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)
Related Skills
zrosenfield/Skills/writing/review-council
testing
VerifiedTrustedCommunity
--- name: review-council description: 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 "w
58SKILL.mdUpdated May 30, 2026
zrosenfield/scorecard-matrix
tools
VerifiedTrustedCommunity
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.
58SKILL.mdUpdated May 30, 2026
zrosenfield/roadmap-timeline
development
VerifiedTrustedCommunity
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.
58SKILL.mdUpdated May 30, 2026
zrosenfield/exec-report
development
VerifiedTrustedCommunity
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.
58SKILL.mdUpdated May 30, 2026