Create Apple-inspired bento grid presentation cards for showcasing project stats, timelines, and achievements. Generates self-contained HTML files with zero-gap grids, stat cards, pill tags, bar charts, and dark quote cards — optimized for screenshot export. Supports both light (Apple signature #f5f5f7) and dark (#000) themes. Use when the user asks to build stat cards, bento grids, project summary cards, dashboard cards, Apple-style presentation layouts, project overviews, achievement showcases, or any visual summary of numbers and milestones. Also use when the user wants to create slides, infographics, or visual reports with a clean Apple aesthetic.
How to install apple-bento-grid?
hubeiqiao/apple-bento-grid
$npx -y skills add hubeiqiao/apple-bento-grid --skill apple-bento-gridInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/hubeiqiao/apple-bento-grid" --skill "hubeiqiao/apple-bento-grid"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/hubeiqiao/apple-bento-grid" that are relevant to the current task. Run `npx skills add "https://github.com/hubeiqiao/apple-bento-grid"` and select the relevant skills, then follow their instructions.
SKILL.md
| 1 | # Apple Bento Grid |
| 2 | |
| 3 | 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. |
| 4 | |
| 5 | > Compatible with [Claude Code](https://claude.com/claude-code), [OpenAI Codex](https://openai.com/index/codex/), [Cursor](https://cursor.sh), and other agents that support the [Agent Skills](https://agentskills.io) standard. |
| 6 | |
| 7 | ## Examples |
| 8 | |
| 9 | All made with this skill — just describe your data and get pixel-perfect output. |
| 10 | |
| 11 | **Solo Dev Project Stats** — 79 days of building, tracked as product metrics |
| 12 | |
| 13 |  |
| 14 | |
| 15 | **Personal Data Dashboard** — 12 years of writing & social media activity |
| 16 | |
| 17 |  |
| 18 | |
| 19 | **Product Launch** — Light and dark themes |
| 20 | |
| 21 | | Light | Dark | |
| 22 | |-------|------| |
| 23 | |  |  | |
| 24 | |
| 25 | **Chinese New Year Launch** — Square format (1200x1200) with festive theme |
| 26 | |
| 27 |  |
| 28 | |
| 29 | **Vertical / Social Media** — Portrait format for social posts |
| 30 | |
| 31 | | Project Stats | GitHub Social | Personal Dashboard | |
| 32 | |--------------|--------------|-------------------| |
| 33 | |  |  |  | |
| 34 | |
| 35 | ## Installation |
| 36 | |
| 37 | ### Claude Code Plugin (recommended) |
| 38 | |
| 39 | ```bash |
| 40 | /plugin marketplace add hubeiqiao/apple-bento-grid |
| 41 | /plugin install apple-bento-grid@apple-bento-grid-marketplace |
| 42 | ``` |
| 43 | |
| 44 | ### Agent Skills |
| 45 | |
| 46 | Install from the [Agent Skills Directory](https://skills.sh): |
| 47 | |
| 48 | ```bash |
| 49 | npx skills add hubeiqiao/apple-bento-grid |
| 50 | ``` |
| 51 | |
| 52 | ### Manual |
| 53 | |
| 54 | Clone directly into your Claude Code skills directory: |
| 55 | |
| 56 | ```bash |
| 57 | git clone https://github.com/hubeiqiao/apple-bento-grid.git ~/.claude/skills/apple-bento-grid |
| 58 | ``` |
| 59 | |
| 60 | Or add it as a project skill in `.claude/skills/`. |
| 61 | |
| 62 | ## Usage |
| 63 | |
| 64 | 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. |
| 65 | |
| 66 | **Quick start:** |
| 67 | ``` |
| 68 | Use /apple-bento-grid to visualize my project stats |
| 69 | ``` |
| 70 | |
| 71 | **Explore different use cases:** |
| 72 | ``` |
| 73 | Use /apple-bento-grid to visualize my startup's growth journey |
| 74 | ``` |
| 75 | ``` |
| 76 | Use /apple-bento-grid to visualize my open source project achievements |
| 77 | ``` |
| 78 | ``` |
| 79 | Use /apple-bento-grid to create a year-in-review card for my portfolio |
| 80 | ``` |
| 81 | ``` |
| 82 | Use /apple-bento-grid to visualize our team's Q4 shipping velocity |
| 83 | ``` |
| 84 | |
| 85 | **Or be specific when you know what you want:** |
| 86 | ``` |
| 87 | Create a dark theme bento grid with $2.4M revenue, 12K users, and a bar chart showing quarterly growth |
| 88 | ``` |
| 89 | ``` |
| 90 | Make a vertical social media card with 5 achievement stats and my company logo |
| 91 | ``` |
| 92 | |
| 93 | The skill will: |
| 94 | 1. Suggest a theme (light/dark/both) based on your use case |
| 95 | 2. Choose the right layout template |
| 96 | 3. Ask if you have logos or images to include |
| 97 | 4. Generate a self-contained HTML file |
| 98 | 5. Offer to create a vertical (portrait) version for social media |
| 99 | |
| 100 | ## Features |
| 101 | |
| 102 | - **Two themes** — Light (Apple `#f5f5f7`) and dark (`#000`) with Apple dark-mode colors |
| 103 | - **7 card types** — Hero, Stat, Category, Bar Chart, Badge, Quote, Highlight |
| 104 | - **3 layouts** — 4-column (1200px), 3-column (1100px), 2-column vertical (600px) |
| 105 | - **Logo & image support** — Add your own logos, product screenshots, or avatars |
| 106 | - **Screenshot export** — Playwright script for 2x Retina-quality PNGs |
| 107 | - **Zero dependencies** — Each output is a single HTML file with inline CSS |
| 108 | |
| 109 | ## Card Types |
| 110 | |
| 111 | | Card | Use For | Key Feature | |
| 112 | |------|---------|-------------| |
| 113 | | **Hero** | Taglines, headlines | Gradient top-border accent, spans 2 rows | |
| 114 | | **Stat** | Numbers + labels | Color-coded accent per category | |
| 115 | | **Category** | Grouped items | Color label + subtitle + pill tags | |
| 116 | | **Bar Chart** | Growth over time | Gradient bars with header badge | |
| 117 | | **Badge** | Tool attribution | Icon pill + stat number | |
| 118 | | **Quote** | Mission statements | Dark background, colored emphasis | |
| 119 | | **Highlight** | Hero numbers (3x, 10x) | Full-gradient background | |
| 120 | |
| 121 | ## Themes |
| 122 | |
| 123 | | Light | Dark | |
| 124 | |-------|------| |
| 125 | |  |  | |
| 126 | |
| 127 | ## Layout Options |
| 128 | |
| 129 | | Template | Columns | Width | Best For | |
| 130 | |----------|---------|-------|----------| |
| 131 | | A: Horizontal | 4-col | 1200px | 12-16 cards, slides | |
| 132 | | B: Horizontal | 3-col | 1100px | 8-10 cards, focused | |
| 133 | | C: Vertical | 2-col | 600px | Social media, portrait | |
| 134 | |
| 135 | ## Screenshot Export |
| 136 | |
| 137 | ```bash |
| 138 | cd scripts |
| 139 | npm install |
| 140 | npx playwright install chromium |
| 141 | node screenshot.mjs |
| 142 | ``` |
| 143 | |
| 144 | Edit the `pages` array in `screenshot.mjs` to point to your HTML files. |
| 145 | |
| 146 | ## Examples |
| 147 | |
| 148 | ### Generated examples (included with HTML source) |
| 149 | - [`light-horizontal.html`](examples/light-horizontal.html) — Light theme, 3-column product launch |
| 150 | - [`dark-horizontal.html`](examples/dark-horizontal.html) — Dark theme, 4-col |
Related
6 picksType
- web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site…Jul 2026
- prototypeBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a…Jul 2026
- lark-whiteboard飞书画板：查询和编辑飞书云文档中的画板。支持导出画板为预览图片、导出原始节点结构、使用多种格式更新画板内容。 当用户需要查看画板内容、导出画板图片、编辑画板时使用此 skill。不负责：飞书云文档内容编辑（lark-doc）、文档内嵌电子表格/Base（lark-sheets / lark-base）。Jul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX…Jul 2026
- design-guidePaperclip UI design system guide for building consistent, reusable frontend components.Jul 2026
- impeccableUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or…Jul 2026
