hubeiqiao/apple-bento-grid-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 summary of numbers and milestones. Also use when the user wants to create slides, infographics, or visual reports with a clean Apple aesthetic.
npx skills add https://github.com/hubeiqiao/apple-bento-grid --skill apple-bento-gridCreating 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:10. Screenshot (optional) — use the Playwright script to capture PNGs at 2x
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.mjs
Edit 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.
10. Scale for orientation — vertical gets smaller fonts, padding, radius
11. Screenshot — Playwright at 2x, viewport matches grid width
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 scriptTake hubeiqiao/apple-bento-grid-apple-bento-grid from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.
The instructions reference npm, npx.
Without those the skill loads but fails at the first command.