Apple Bento Grid — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited Apple Bento Grid (Plugin) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
Aggregate score unchanged between these scans.
The primary manifest — the file an agent reads to learn what this artifact does.
A skill for AI coding agents that generates Apple-inspired bento grid presentation cards as self-contained HTML files. No design tools needed — just describe your stats and get pixel-perfect output.
Compatible with Claude Code, OpenAI Codex, Cursor, and other agents that support the Agent Skills standard.
All made with this skill — just describe your data and get pixel-perfect output.
Solo Dev Project Stats — 79 days of building, tracked as product metrics
Project horizontal
Personal Data Dashboard — 12 years of writing & social media activity
Corpus horizontal
Product Launch — Light and dark themes
| Light | Dark |
|---|---|
| Light | Dark |
Chinese New Year Launch — Square format (1200x1200) with festive theme
CNY 2026
Vertical / Social Media — Portrait format for social posts
| Project Stats | GitHub Social | Personal Dashboard |
|---|---|---|
| Project vertical | Light vertical | Corpus vertical |
/plugin marketplace add hubeiqiao/apple-bento-grid
/plugin install apple-bento-grid@apple-bento-grid-marketplaceInstall from the Agent Skills Directory:
npx skills add hubeiqiao/apple-bento-gridClone directly into your Claude Code skills directory:
git clone https://github.com/hubeiqiao/apple-bento-grid.git ~/.claude/skills/apple-bento-gridOr add it as a project skill in .claude/skills/.
In your AI coding agent, just describe what you want to visualize. You don't need to be specific — the skill figures out the best layout, theme, and card types for you.
Quick start:
Use /apple-bento-grid to visualize my project statsExplore different use cases:
Use /apple-bento-grid to visualize my startup's growth journeyUse /apple-bento-grid to visualize my open source project achievementsUse /apple-bento-grid to create a year-in-review card for my portfolioUse /apple-bento-grid to visualize our team's Q4 shipping velocityOr be specific when you know what you want:
Create a dark theme bento grid with $2.4M revenue, 12K users, and a bar chart showing quarterly growthMake a vertical social media card with 5 achievement stats and my company logoThe skill will:
#f5f5f7) and dark (#000) with Apple dark-mode colors| Card | Use For | Key Feature |
|---|---|---|
| Hero | Taglines, headlines | Gradient top-border accent, spans 2 rows |
| Stat | Numbers + labels | Color-coded accent per category |
| Category | Grouped items | Color label + subtitle + pill tags |
| Bar Chart | Growth over time | Gradient bars with header badge |
| Badge | Tool attribution | Icon pill + stat number |
| Quote | Mission statements | Dark background, colored emphasis |
| Highlight | Hero numbers (3x, 10x) | Full-gradient background |
| Light | Dark |
|---|---|
| Light | Dark |
| Template | Columns | Width | Best For |
|---|---|---|---|
| A: Horizontal | 4-col | 1200px | 12-16 cards, slides |
| B: Horizontal | 3-col | 1100px | 8-10 cards, focused |
| C: Vertical | 2-col | 600px | Social media, portrait |
cd scripts
npm install
npx playwright install chromium
node screenshot.mjsEdit the pages array in screenshot.mjs to point to your HTML files.
light-horizontal.html — Light theme, 3-column product launchdark-horizontal.html — Dark theme, 4-column SaaS metricslight-vertical.html — Light theme, 2-column GitHub social cardreal-corpus-dark-horizontal.html — Personal data dashboard, 10 cardsreal-corpus-dark-vertical.html — Same content, portrait formatreal-cny-2026-square.html — Chinese New Year launch, 1200x1200 squareapple-bento-grid/
├── SKILL.md # Skill definition (workflow, themes, card types)
├── design-system.md # Complete design tokens, CSS/HTML for all components
├── examples/ # Generated + real-world HTML outputs with screenshots
├── evals/ # Test cases for skill evaluation
├── scripts/
│ ├── screenshot.mjs # Playwright 2x screenshot capture
│ └── package.json
├── LICENSE # MIT
└── README.mdMIT
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.