{"id":"21946f4d-93e0-4635-958a-66dabbc669e8","shortId":"znyvAH","kind":"skill","title":"apple-bento-grid","tagline":"Create Apple-inspired bento grid presentation cards for showcasing project stats,\ntimelines, and achievements. Generates self-contained HTML files with zero-gap grids,\nstat cards, pill tags, bar charts, and dark quote cards — optimized for screenshot export.\nSupports both light (","description":"# Apple Bento Grid\n\n## Problem\n\nCreating 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.\n\n## Overview\n\nGenerate 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.\n\n## Workflow\n\n1. **Read the design system selectively**: Reference [`design-system.md`](design-system.md) as needed:\n   - **Always read**: Section 2 (Zero-Gap Grid) + Section 3 (Layout Templates) — the grid foundation\n   - **Read per card type**: Section 5.1–5.7 as needed for the cards you're using\n   - **Read for theme**: Section 1 (light tokens) or Section 9 (dark tokens)\n   - **Read once for first generation**: Section 8 (HTML Skeleton) as a structural starting point\n2. **Gather the user's content** — what stats, milestones, categories, and quotes to showcase\n3. **Choose a theme** — suggest light, dark, or both based on the context (see Theme Selection below)\n4. **Choose a layout** — pick from the 3 layout templates based on card count and orientation\n5. **Compose cards** — select card types and fill with the user's content; prioritize density (no empty-feeling cards)\n6. **Ask about logos/images** — if the user has a logo or images, incorporate them (see Logos & Images below)\n7. **Generate the HTML** — produce a single self-contained HTML file\n8. **Visual review** — open the HTML in a browser and screenshot it to check for issues (see Visual Review below)\n9. **Offer a vertical version** — after generating a landscape grid, ask: \"Want a vertical (portrait) version for social media?\" and generate a Template C adaptation if yes\n10. **Screenshot** (optional) — use the Playwright script to capture PNGs at 2x\n\n## Visual Review\n\nAfter 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:\n\n**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.\n\n**Empty space** — Cards that look sparse with too much whitespace. Fix by adding a subtitle, badge, or extra description text to fill the card.\n\n**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\").\n\n**Broken grid** — Visible row gaps or misaligned cards. Check: no `align-items: start`, gap is exactly 6px, all grid cells are occupied.\n\n**Font fallback** — Text rendering in system fonts instead of Sora/DM Sans. Ensure Google Fonts link is present and page has network access.\n\n**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`.\n\nIf any issues are found, fix the HTML and re-check. Do not present to the user until the output passes visual review.\n\n## Theme Selection\n\nSuggest a theme based on context. When unsure, generate both.\n\n| Context | Suggested Theme |\n|---------|----------------|\n| Slide deck / presentation | **Dark** — higher visual impact on projectors |\n| Social media / portfolio | **Dark** — stands out in feeds |\n| Report / document embed | **Light** — matches white page backgrounds |\n| Print / PDF | **Light** — saves ink, better legibility |\n| User says \"Apple style\" | **Light** — Apple's signature look |\n| User says \"modern\" or \"sleek\" | **Dark** — contemporary feel |\n| No preference stated | **Both** — generate two files, let user choose |\n\nSee design-system.md **Section 9** for complete dark theme tokens, or **Section 1** for light theme tokens.\n\n## Output Format\n\nAlways produce a **single self-contained HTML file** with:\n- `<!DOCTYPE html>` + `<html lang=\"en\">`\n- Google Fonts `<link>` tags in `<head>`\n- All CSS in a single `<style>` block\n- All content in `<body>` — no JavaScript needed\n\n## Card Types Available\n\n| Card | Use For | Key Feature |\n|------|---------|-------------|\n| **Hero** | Taglines, headlines | Gradient top-border, spans 2 rows |\n| **Stat** | Numbers + labels | Color-coded accent per category |\n| **Category** | Grouped items (phases, teams, quarters) | Color label + subtitle + pill tags |\n| **Bar Chart** | Growth / comparison over time | Gradient bars, header badge |\n| **Badge** | Tool attribution, featured callout | Icon pill + stat number |\n| **Quote** | Mission statement, testimonial | Dark bg, white text, green `<em>` |\n| **Highlight** | Hero number (3x, 10x, 100%) | Full-gradient background |\n\n## Layout Templates\n\n| Template | Columns | Width | Aspect Ratio | Best For |\n|----------|---------|-------|--------------|----------|\n| A: Horizontal | 4-col | 1200px | 52/25 | 12-16 cards, slides |\n| B: Horizontal | 3-col | 1100px | 52/22 | 8-10 cards, focused |\n| C: Vertical | 2-col | 600px | none (content) | 8-14 cards, social |\n\n## Critical: Zero-Gap Grid Rules\n\nThese 5 rules are mandatory for Apple-like appearance. See design-system.md Section 2 for details.\n\n1. **NEVER** set `align-items: start` — default `stretch` fills cells\n2. Use `aspect-ratio` on horizontal layouts to lock container shape\n3. Rows: `1fr` for horizontal, `auto` for vertical\n4. Gap: `6px` (not 8px)\n5. Every grid cell must be occupied — no empty cells\n\n## Screenshot Export\n\nUse the Playwright script at `scripts/screenshot.mjs` to capture pixel-perfect PNGs.\n\n```bash\ncd scripts\nnpm install\nnpx playwright install chromium\nnode screenshot.mjs\n```\n\nEdit 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).\n\n**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).\n\n**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.\n\n**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.\n\n## Logos & Images\n\nUsers 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.\n\n**Placement options:**\n\n| Location | How | Best For |\n|----------|-----|----------|\n| Hero card corner | `<img>` with `position: absolute; top: 20px; right: 20px; width: 40px;` | Company logo |\n| Badge card icon | Replace the SVG in `.badge-pill` with an `<img>` tag (`width: 16px; height: 16px; border-radius: 4px;`) | Tool/framework logo |\n| Full card background | `background-image: url(...)` with overlay gradient for text readability | Feature screenshots |\n| Standalone image card | `<img>` filling the card with `object-fit: cover; border-radius: 18px;` | Product photos |\n\n**Guidelines:**\n- Use `<img src=\"path/to/file.png\">` with a local file path — the HTML is for screenshot export, not hosting\n- Keep logos small (24–48px) so they don't dominate the card\n- For dark theme, ensure logos work on dark backgrounds (use white/light versions)\n- Always add `alt` text for accessibility\n\n## Content Adaptation\n\n| User's Data | Recommended Template | Card Mix |\n|---|---|---|\n| 3–5 stats, no categories | C (2-col vertical) | 1 Hero + 3–5 Stats + 1 Quote |\n| 6–8 stats, 1–2 categories | B (3-col horizontal) | 1 Hero + 4–6 Stats + 1–2 Categories + 1 Chart |\n| 8–12 stats, 3+ categories | A (4-col horizontal) | Full mix: Hero, Stats, Categories, Chart, Badge, Quote, Highlight |\n| Social / portrait format | C (2-col vertical) | Any mix, smaller fonts |\n\n**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.\n\n## Customization Checklist\n\n1. Gather content — stats, categories, milestones, quotes\n2. Choose theme — light, dark, or both\n3. Choose layout — 4-col, 3-col, or 2-col\n4. Name grid areas — readable names matching content\n5. Select card types — Hero, Stat, Category, Chart, Badge, Quote, Highlight\n6. Assign accent colors — one per category, max 3–4 accents\n7. Set dimensions — viewport width matches grid width\n8. Lock aspect ratio — horizontal only; omit for vertical\n9. Verify density — no empty-feeling cards, no unused grid cells, gap 6px\n10. Scale for orientation — vertical gets smaller fonts, padding, radius\n11. Screenshot — Playwright at 2x, viewport matches grid width\n\n## Verification\n\nAfter generating a bento grid HTML file:\n1. Open in Chrome or Safari — verify all grid cells are filled with no visible row gaps\n2. Check font loading — Sora and DM Sans should render (not system fallback)\n3. For dark theme — verify card backgrounds are #1a1a1a, not #fff\n4. Screenshot at the correct viewport width (1200/1100/600) at 2x resolution\n5. Confirm density — no card should have excessive whitespace\n\n## Notes\n\n- Google Fonts requires internet access; grids fall back to system fonts offline\n- Playwright screenshot is optional; users can take manual browser screenshots\n- `aspect-ratio` is only for horizontal layouts; vertical layouts flow from content height\n- Maximum 3–4 accent colors per grid to maintain Apple-like restraint\n- This skill produces static HTML for screenshot export, not interactive dashboards\n- For grids with fewer than 6 data points, Template C (2-col vertical) usually works best\n\n## Reference Files\n\n- [`design-system.md`](design-system.md) — Complete design tokens (light + dark), card CSS/HTML, layout templates, and skeleton\n- [`scripts/screenshot.mjs`](scripts/screenshot.mjs) — Playwright screenshot capture script","tags":["apple","bento","grid","hubeiqiao","agent-skills","apple-design","bento-grid","claude-code","codex","data-visualization","presentation"],"capabilities":["skill","source-hubeiqiao","skill-apple-bento-grid","topic-agent-skills","topic-apple-design","topic-bento-grid","topic-claude-code","topic-codex","topic-data-visualization","topic-presentation"],"categories":["apple-bento-grid"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/hubeiqiao/apple-bento-grid","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add hubeiqiao/apple-bento-grid","source_repo":"https://github.com/hubeiqiao/apple-bento-grid","install_from":"skills.sh"}},"qualityScore":"0.531","qualityRationale":"deterministic score 0.53 from registry signals: · indexed on github topic:agent-skills · 162 github stars · SKILL.md body (10,338 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T18:56:17.909Z","embedding":null,"createdAt":"2026-04-18T23:48:24.258Z","updatedAt":"2026-04-22T18:56:17.909Z","lastSeenAt":"2026-04-22T18:56:17.909Z","tsv":"'0':568,570 '000':487 '1':146,191,680 '10':357 '2':160,213,485 '2.4':482 '2x':136,368 '3':166,227,251 '4':244 '400':486 '5':260 '5.1':177 '5.7':178 '6':280 '6px':505 '7':298 '8':205,310 '9':196,330,672 'abbrevi':480 'access':532 'achiev':19 'ad':448 'adapt':354 'add':428 'align':499 'align-item':498 'alon':411 'alway':157,375,687 'appl':2,7,48,69,101,644,647 'apple-bento-grid':1 'apple-inspir':6,100 'apple-qu':68 'ask':281,340 'avail':144 'background':634 'badg':451 'bar':35 'base':236,254,600 'bento':3,9,49,71,103 'better':640 'bottom':537 'boundingbox':565 'box.x':562 'box.y':563 'broken':488 'browser':318,390 'c':353 'captur':365 'card':12,32,40,104,121,174,183,256,262,264,279,438,459,471,495,540 'catch':380 'categori':222 'cell':508 'chart':36 'check':323,400,496,582 'choos':228,245,668 'clip':534,560 'complet':674 'compos':261 'contain':23,77,95,307,693 'contemporari':657 'content':218,272 'context':239,602,607 'count':257 'creat':5,52 'css':115,125,555,702 'cut':541 'dark':38,141,197,233,613,622,656,675 'deck':611 'densiti':274 'depend':117 'descript':454 'design':59,88,149 'design-system.md':153,154,670 'document':628 'e.g':481 'edg':538 'emb':629 'empti':277,436 'empty-feel':276 'enough':429 'ensur':522,549 'even':426 'exact':504,557 'except':118 'export':44,134,545 'extra':453 'fallback':512 'feed':626 'feel':278,658 'figma':62 'file':25,79,97,112,309,398,665,695 'fill':122,267,425,432,457 'first':202 'fix':416,446,473,547,576 'font':120,477,511,517,524,698 'font-siz':476 'format':686 'found':575 'foundat':171 'full':434 'gap':29,129,163,492,502 'gather':214 'generat':20,67,92,203,299,336,350,372,605,663 'googl':119,523,697 'graphic':56 'grid':4,10,30,50,72,105,126,164,170,339,489,507,554 'higher':614 'html':24,78,96,111,206,301,308,315,374,578,694 'imag':86,291,296 'impact':616 'incorpor':292 'ink':639 'inlin':114 'inspir':8,102 'instead':518 'issu':325,382,573 'item':500 'keynot':64 'label':464 'landscap':338 'layout':73,167,247,252 'legibl':641 'let':666 'light':47,139,192,232,630,637,646,682 'like':61 'line':403 'link':525 'logo':289,295 'logos/images':283 'long':468 'look':440,650 'm':483 'match':552,631 'mcp':391 'media':348,620 'mileston':221 'minim':128 'misalign':494 'modern':653 'much':444 'need':90,156,180 'network':531 'new':414 'number':462 'occupi':510 'offer':331 'one':419 'open':313,394 'optim':41 'option':359 'orient':259 'orphan':402 'output':107,378,591,685 'overflow':461 'overview':91 'page':529,633 'pass':592 'pdf':636 'per':173 'perfect':85 'pick':248 'pill':33,406,420,424,430 'pixel':84 'pixel-perfect':83 'playwright':132,362,389 'png':546 'pngs':366 'point':212 'polish':54 'portfolio':621 'portrait':344 'prefer':660 'present':11,55,384,527,585,612 'print':635 'priorit':273 'problem':51 'produc':302,688 'project':15 'projector':618 'qualiti':70 'quot':39,224 're':185,581 're-check':580 'read':147,158,172,187,199 'readi':130 'reduc':475 'refer':152 'remain':423 'remov':418 'render':99,396,514 'report':627 'requir':58 'resolut':137 'review':312,328,370,594 'right':535 'row':415,435,491 'san':521 'save':638 'say':643,652 'screenshot':43,81,133,320,358,533 'script':363 'section':159,165,176,190,195,204,671,679 'see':240,294,326,669 'select':151,242,263,596 'self':22,76,94,306,692 'self-contain':21,75,93,305,691 'showcas':14,226 'signatur':649 'singl':110,304,405,690,705 'size':478 'skeleton':207 'skill':66 'skill-apple-bento-grid' 'sleek':655 'slide':610 'social':347,619 'sora/dm':520 'source-hubeiqiao' 'space':437 'spars':441 'stand':623 'start':211,501 'stat':16,31,220 'state':661 'structur':210 'style':645 'subtitl':450 'suggest':231,597,608 'support':45 'system':150,516 'tag':34,407,699 'templat':168,253,352 'text':455,460,513 'theme':142,189,230,241,595,599,609,676,683 'tight':124 'timelin':17 'token':193,198,677,684 'tool':60,89,392 'topic-agent-skills' 'topic-apple-design' 'topic-bento-grid' 'topic-claude-code' 'topic-codex' 'topic-data-visualization' 'topic-presentation' 'two':433,664 'type':175,265 'typic':57 'unsur':604 'use':186,360,388,561 'user':216,270,286,387,588,642,651,667 'version':334,345 'vertic':333,343 'view':376 'viewport':550 'visibl':490 'visual':53,311,327,369,381,593,615 'want':341 'white':632 'whitespac':445 'width':472,551,556 'word':409 'workflow':145 'wrap':410 'x':567 'y':569 'yes':356 'zero':28,162 'zero-gap':27,161","prices":[{"id":"7155b9d7-e019-4526-8b39-da8180e73ebc","listingId":"21946f4d-93e0-4635-958a-66dabbc669e8","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"hubeiqiao","category":"apple-bento-grid","install_from":"skills.sh"},"createdAt":"2026-04-18T23:48:24.258Z"}],"sources":[{"listingId":"21946f4d-93e0-4635-958a-66dabbc669e8","source":"github","sourceId":"hubeiqiao/apple-bento-grid","sourceUrl":"https://github.com/hubeiqiao/apple-bento-grid","isPrimary":false,"firstSeenAt":"2026-04-18T23:48:24.258Z","lastSeenAt":"2026-04-22T18:56:17.909Z"}],"details":{"listingId":"21946f4d-93e0-4635-958a-66dabbc669e8","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"hubeiqiao","slug":"apple-bento-grid","github":{"repo":"hubeiqiao/apple-bento-grid","stars":162,"topics":["agent-skills","apple-design","bento-grid","claude-code","codex","data-visualization","presentation"],"license":"mit","html_url":"https://github.com/hubeiqiao/apple-bento-grid","pushed_at":"2026-03-17T17:35:51Z","description":"Agent skill that generates Apple-inspired bento grid presentation cards. For Claude Code, Codex, and any AI coding agent.","skill_md_sha":"6e7351bc1a08a6967f4d211723ea1e49fb90d930","skill_md_path":"SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/hubeiqiao/apple-bento-grid"},"layout":"root","source":"github","category":"apple-bento-grid","frontmatter":{"name":"apple-bento-grid","license":"MIT","description":"Create Apple-inspired bento grid presentation cards for showcasing project stats,\ntimelines, and achievements. Generates self-contained HTML files with zero-gap grids,\nstat cards, pill tags, bar charts, and dark quote cards — optimized for screenshot export.\nSupports both light (Apple signature #f5f5f7) and dark (#000) themes.\nUse when the user asks to build stat cards, bento grids, project summary cards,\ndashboard cards, Apple-style presentation layouts, project overviews, achievement\nshowcases, or any visual summary of numbers and milestones. Also use when the user\nwants to create slides, infographics, or visual reports with a clean Apple aesthetic.","compatibility":"Requires internet for Google Fonts. Optional Playwright for screenshot export."},"skills_sh_url":"https://skills.sh/hubeiqiao/apple-bento-grid"},"updatedAt":"2026-04-22T18:56:17.909Z"}}