Create Apple-inspired bento grid presentation cards for showcasing project stats, timelines, and achievements.
$ npx skills add hubeiqiao/apple-bento-grid --skill apple-bento-grid -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install hubeiqiao/apple-bento-grid apple-bento-grid --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "apple-bento-grid" agent skill from https://github.com/hubeiqiao/apple-bento-grid/tree/main into .claude/skills/apple-bento-grid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apple-bento-grid", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add hubeiqiao/apple-bento-grid --skill apple-bento-grid -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install hubeiqiao/apple-bento-grid apple-bento-grid --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "apple-bento-grid" agent skill from https://github.com/hubeiqiao/apple-bento-grid/tree/main into .agents/skills/apple-bento-grid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apple-bento-grid", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add hubeiqiao/apple-bento-grid --skill apple-bento-grid -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install hubeiqiao/apple-bento-grid apple-bento-grid --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "apple-bento-grid" agent skill from https://github.com/hubeiqiao/apple-bento-grid/tree/main into .cursor/skills/apple-bento-grid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apple-bento-grid", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add hubeiqiao/apple-bento-grid --skill apple-bento-grid -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install hubeiqiao/apple-bento-grid apple-bento-grid --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "apple-bento-grid" agent skill from https://github.com/hubeiqiao/apple-bento-grid/tree/main into .gemini/skills/apple-bento-grid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apple-bento-grid", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install hubeiqiao/apple-bento-grid apple-bento-gridInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add hubeiqiao/apple-bento-grid --skill apple-bento-grid -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "apple-bento-grid" agent skill from https://github.com/hubeiqiao/apple-bento-grid/tree/main into .github/skills/apple-bento-grid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apple-bento-grid", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add hubeiqiao/apple-bento-grid --skill apple-bento-grid -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install hubeiqiao/apple-bento-grid apple-bento-grid --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "apple-bento-grid" agent skill from https://github.com/hubeiqiao/apple-bento-grid/tree/main into .opencode/skills/apple-bento-grid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apple-bento-grid", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
apple-bento-gridCreate Apple-inspired bento grid presentation cards for showcasing project stats, timelines, and achievements.
Apple Bento Grid is an agent skill from hubeiqiao/apple-bento-grid. 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…
Its SKILL.md is about 2.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 36 other files, including scripts (for example `.claude-plugin/marketplace.json`, `.claude-plugin/plugin.json` and `README.md`). Compatibility notes: Requires internet for Google Fonts. Optional Playwright for screenshot export.
It sits in Media & Creative, covering Infographics, Slides and decks and Project management. The repository describes itself as: Agent skill that generates Apple-inspired bento grid presentation cards. For Claude Code, Codex, and any AI coding agent. The licence is MIT.
10 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 235f740. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
npmnpxnodeFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md. Its commands use npm and npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Requires internet for Google Fonts. Optional Playwright for screenshot export.
From compatibility in the SKILL.md frontmatter.
Apple Bento Grid loads about 2.8k tokens when it runs. Until then it costs about 169 tokens; SKILL.md has 1,458 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
The full file from hubeiqiao/apple-bento-grid at commit 235f740, republished under its MIT licence (© hubeiqiao). 1,458 words, ~2,809 tokens.
.claude/skills/apple-bento-grid/SKILL.md (or your agent's skills folder). This skill also uses 33 other files; get the full folder from GitHub.Creating visually polished presentation graphics typically requires design tools like Figma or Keynote. This skill generates Apple-quality bento grid layouts as self-contained HTML files that screenshot into pixel-perfect images — no design tool needed.
Generate self-contained HTML files that render Apple-inspired bento card grids. Each output is a single HTML file with inline CSS — no dependencies except Google Fonts. Cards fill a tight CSS grid with minimal gaps, ready for Playwright screenshot export at 2x resolution. Both light and dark themes are available.
design-system.md as needed:After generating the HTML, always view the output to catch visual issues before presenting to the user. Use Playwright, browser MCP tools, or open to render the file, then check for:
Orphan lines — A single pill tag or word wrapping alone to a new row. Fix by removing one pill so the remaining pills fill evenly, or add enough pills to fill two full rows.
Empty space — Cards that look sparse with too much whitespace. Fix by adding a subtitle, badge, or extra description text to fill the card.
Text overflow — Numbers or labels that are too long for their card width. Fix by reducing font-size or abbreviating (e.g., "$2.4M" not "$2,400,000").
Broken grid — Visible row gaps or misaligned cards. Check: no align-items: start, gap is exactly 6px, all grid cells are occupied.
Font fallback — Text rendering in system fonts instead of Sora/DM Sans. Ensure Google Fonts link is present and page has network access.
Screenshot clipping — Right or bottom edges of cards cut off in the exported PNG. Fix by ensuring viewport width matches the grid CSS width exactly and the clip uses box.x/box.y from boundingBox(), not x: 0, y: 0.
If any issues are found, fix the HTML and re-check. Do not present to the user until the output passes visual review.
Suggest a theme based on context. When unsure, generate both.
| Context | Suggested Theme |
|---|---|
| Slide deck / presentation | Dark — higher visual impact on projectors |
| Social media / portfolio | Dark — stands out in feeds |
| Report / document embed | Light — matches white page backgrounds |
| Print / PDF | Light — saves ink, better legibility |
| User says "Apple style" | Light — Apple's signature look |
| User says "modern" or "sleek" | Dark — contemporary feel |
| No preference stated | Both — generate two files, let user choose |
See design-system.md Section 9 for complete dark theme tokens, or Section 1 for light theme tokens.
Always produce a single self-contained HTML file with:
<!DOCTYPE html> + <html lang="en"><link> tags in <head><style> block<body> — no JavaScript needed| Card | Use For | Key Feature |
|---|---|---|
| Hero | Taglines, headlines | Gradient top-border, spans 2 rows |
| Stat | Numbers + labels | Color-coded accent per category |
| Category | Grouped items (phases, teams, quarters) | Color label + subtitle + pill tags |
| Bar Chart | Growth / comparison over time | Gradient bars, header badge |
| Badge | Tool attribution, featured callout | Icon pill + stat number |
| Quote | Mission statement, testimonial | Dark bg, white text, green <em> |
| Highlight | Hero number (3x, 10x, 100%) | Full-gradient background |
| Template | Columns | Width | Aspect Ratio | Best For |
|---|---|---|---|---|
| A: Horizontal | 4-col | 1200px | 52/25 | 12-16 cards, slides |
| B: Horizontal | 3-col | 1100px | 52/22 | 8-10 cards, focused |
| C: Vertical | 2-col | 600px | none (content) | 8-14 cards, social |
These 5 rules are mandatory for Apple-like appearance. See design-system.md Section 2 for details.
align-items: start — default stretch fills cellsaspect-ratio on horizontal layouts to lock container shape1fr for horizontal, auto for vertical6px (not 8px)Use the Playwright script at scripts/screenshot.mjs to capture pixel-perfect PNGs.
cd scripts
npm install
npx playwright install chromium
node screenshot.mjsEdit the pages array in screenshot.mjs to point to your HTML files. Each entry needs: file (HTML path), output (PNG path), viewportWidth (match grid width).
Critical: Viewport must match grid width. If the viewport is wider than the grid, the grid gets centered and the clip can cut off the right edge. Always set viewportWidth to the exact grid CSS width (1200 for 4-col, 1100 for 3-col, 600 for 2-col).
Critical: Clip must use element position. When clipping to the grid element, use box.x and box.y from boundingBox(), not x: 0, y: 0. If the grid is centered in a wider viewport, x: 0 will start the clip before the grid and cut off the right side.
After screenshotting, always view the output image to verify no edges are clipped. Check that the rightmost and bottommost cards are fully visible with their border-radius intact.
Users can add their own logos or images to bento grid cards. Ask the user if they have any logos or images they'd like included.
Placement options:
| Location | How | Best For |
|---|---|---|
| Hero card corner | <img> with position: absolute; top: 20px; right: 20px; width: 40px; | Company logo |
| Badge card icon | Replace the SVG in .badge-pill with an <img> tag (width: 16px; height: 16px; border-radius: 4px;) | Tool/framework logo |
| Full card background | background-image: url(...) with overlay gradient for text readability | Feature screenshots |
| Standalone image card | <img> filling the card with object-fit: cover; border-radius: 18px; | Product photos |
Guidelines:
<img src="path/to/file.png"> with a local file path — the HTML is for screenshot export, not hostingalt text for accessibility| User's Data | Recommended Template | Card Mix |
|---|---|---|
| 3–5 stats, no categories | C (2-col vertical) | 1 Hero + 3–5 Stats + 1 Quote |
| 6–8 stats, 1–2 categories | B (3-col horizontal) | 1 Hero + 4–6 Stats + 1–2 Categories + 1 Chart |
| 8–12 stats, 3+ categories | A (4-col horizontal) | Full mix: Hero, Stats, Categories, Chart, Badge, Quote, Highlight |
| Social / portrait format | C (2-col vertical) | Any mix, smaller fonts |
Density rule: Every card should feel full. If a card looks sparse, add a subtitle, badge, or pill tags. If the grid has visible empty space, either span a card across cells or add a supporting card.
After generating a bento grid HTML file:
aspect-ratio is only for horizontal layouts; vertical layouts flow from content heightdesign-system.md — Complete design tokens (light + dark), card CSS/HTML, layout templates, and skeletonscripts/screenshot.mjs — Playwright screenshot capture script© hubeiqiao, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 33 other files (scripts) in the repository root of hubeiqiao/apple-bento-grid.
Open the folder on GitHubat commit 235f740
Apple Bento Grid next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Apple Bento Grid this skillhubeiqiao/apple-bento-grid | 236 | — | ~2.8k | Automated safety check: Pass | MIT | |
| Strategy Consulting Visualizationkgraph57/mckinsey-style-visualization-skill | 129 | — | ~3.2k | Automated safety check: Pass | MIT | |
| Visual Explainernicobailon/visual-explainer | 10k | — | ~3.5k | Automated safety check: Pass | MIT | |
| Guizang Material Illustrationop7418/guizang-material-illustration | 1.2k | — | ~1.6k | Automated safety check: Pass | None | |
| Gemini Carouselcharlie947/social-media-skills | 3.8k | — | ~1.7k | Automated safety check: Pass | MIT | |
| Img2pptxLancelot-Xie/img2pptx | 163 | — | ~5.9k | Automated safety check: Pass | Apache-2.0 |
kgraph57/mckinsey-style-visualization-skill
A skill your agent uses when turning any content into clear, professional visualizations - board slides, reports, proposals, research summaries, training materials, technical diagrams, infographics…
nicobailon/visual-explainer
Turns systems, code changes, plans and data into self-contained HTML pages where figures carry the explanation, with options for slide decks and narrated MP4 videos.
op7418/guizang-material-illustration
Generate Guizang-style material illustrations, labeled explanatory visuals, material-styled chart illustrations, and data-first editorial images from articles, notes, product concepts, workplace…
charlie947/social-media-skills
Generate a branded slide-by-slide LinkedIn carousel using Gemini.
Lancelot-Xie/img2pptx
Reconstruct raster reference images as one-slide editable, modular, auditable PPTX files containing a complete SVG.
TheCraigHewitt/skills
Turns a piece of Craig's content (an email, a YouTube script, an essay, or pasted text) into a polished image carousel publishable to both LinkedIn and Instagram from one set of 1080x1350 slides.
Categories
Create Apple-inspired bento grid presentation cards for showcasing project stats, timelines, and achievements. Apple Bento Grid is an agent skill from hubeiqiao/apple-bento-grid. Create Apple-inspired bento grid presentation cards for showcasing project stats, timelines, and achievements.
Apple Bento Grid fits situations like: the user asks to build stat cards; project summary cards; dashboard cards; apple-style presentation layouts.
Run `npx skills add hubeiqiao/apple-bento-grid --skill apple-bento-grid -a claude-code`. Or copy the skill folder (the hubeiqiao/apple-bento-grid repository) into .claude/skills/apple-bento-grid in your project. Claude Code loads it when a task matches its description.
Run `npx skills add hubeiqiao/apple-bento-grid --skill apple-bento-grid -a codex`. Or copy the skill folder (the hubeiqiao/apple-bento-grid repository) into .agents/skills/apple-bento-grid in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add hubeiqiao/apple-bento-grid --skill apple-bento-grid -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/apple-bento-grid, .gemini/skills/apple-bento-grid, .github/skills/apple-bento-grid and .opencode/skills/apple-bento-grid in your project.
Going by SKILL.md and its folder, Apple Bento Grid needs the command-line tools its instructions call (npm, npx and node). Our summary lists: Node.js. Compatibility (from SKILL.md): Requires internet for Google Fonts. Optional Playwright for screenshot export..
SKILL.md contains no URLs. Its commands use npm and npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
Apple Bento Grid is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.8k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Apple Bento Grid: Strategy Consulting Visualization (kgraph57/mckinsey-style-visualization-skill, 129 stars), Visual Explainer (nicobailon/visual-explainer, 10k stars), Guizang Material Illustration (op7418/guizang-material-illustration, 1.2k stars) and Gemini Carousel (charlie947/social-media-skills, 3.8k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
hubeiqiao (a GitHub user) maintains it in hubeiqiao/apple-bento-grid, which has 236 GitHub stars. The repository was last updated on March 17, 2026.
Source: hubeiqiao/apple-bento-grid on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.
