# Apple Bento Grid > Create Apple-inspired bento grid presentation cards for showcasing project stats, timelines, and achievements. Use when the user asks to build stat cards, bento grids, project summary cards, dashboard cards, or Apple-style presentation layouts. Generates self-contained HTML files with zero-gap grids, stat cards, pill tags, bar charts, and dark quote cards — optimized for screenshot export. - Skill: `hubeiqiao/apple-bento-grid` (Agent Skill, multi-file: 4 files) - Install (CLI): `npx skillmds@latest add hubeiqiao/apple-bento-grid` - Raw SKILL.md: https://api.skillmd.com/api/skills/hubeiqiao/apple-bento-grid/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: hubeiqiao (https://skillmd.com/u/hubeiqiao) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/hubeiqiao/apple-bento-grid --- # Apple Bento Grid ## Overview 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 zero visible row gaps, ready for Playwright screenshot export at 2x resolution. ## Workflow 1. **Read the design system**: Read [`design-system.md`](design-system.md) completely before generating any bento grid. It contains all design tokens, card components, layout templates, and the critical zero-gap grid technique. 2. **Gather the user's content** — what stats, milestones, categories, and quotes to showcase 3. **Choose a layout** — pick from the 3 layout templates based on card count and orientation 4. **Compose cards** — select card types and fill with the user's content 5. **Generate the HTML** — produce a single self-contained HTML file 6. **Screenshot** (optional) — use the Playwright script to capture PNGs at 2x ## Output Format Always produce a **single self-contained HTML file** with: - `` + `` - Google Fonts `` tags in `` - All CSS in a single `