apple-bento-gridlisted

# Apple Bento Grid ## Problem 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. ## 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 minimal gaps, ready for Playwright screenshot export at 2x resolution. Both light and dark themes are available. ## Workflow 1. **Read the design system selectively**: Reference [`design-system.md`](design-system.md) as needed: - **Always read**: Section 2 (Zero-Gap Grid) + Section 3 (Layout Templates) — the grid foundation - **Read per card type**: Section 5.1–5.7 as needed for the cards you're using - **Read for theme**: Section 1 (light tokens) or Section 9 (dark tokens) - **Read once for first generation**: Section 8 (HTML Skeleton) as a structural starting point 2. **Gather the user's content** — what stats, milestones, categories, and quotes to showcase 3. **Choose a theme** — suggest light, dark, or both based on the context (see Theme Selection below) 4. **Choose a layout** — pick from the 3 layout templates based on card count and orientation 5. **Compose cards** — select card types and fill with the user's content; prioritize density (no empty-feeling cards) 6