SKILL.md
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
- 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. - Gather the user's content — what stats, milestones, categories, and quotes to showcase
- Choose a layout — pick from the 3 layout templates based on card count and orientation
- Compose cards — select card types and fill with the user's content
- Generate the HTML — produce a single self-contained HTML file
- Screenshot (optional) — use the Playwright script to capture PNGs at 2x
Output Format
Always produce a single self-contained HTML file with:
<!DOCTYPE html>+<html lang="en">- Google Fonts
<link>tags in<head> - All CSS in a single
<style>block - All content in
<body>— no JavaScript needed
Card Types Available
| 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 |
Layout Templates
| 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 |
Critical: Zero-Gap Grid Rules
These 5 rules are mandatory for Apple-like appearance. See design-system.md Section 2 for details.
- NEVER set
align-items: start— defaultstretchfills cells - Use
aspect-ratioon horizontal layouts to lock container shape - Rows:
1frfor horizontal,autofor vertical - Gap:
6px(not 8px) - Every grid cell must be occupied — no empty cells
Screenshot Export
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).
Customization Checklist
- Gather content — stats, categories, milestones, quotes
- Choose layout — 4-col, 3-col, or 2-col
- Name grid areas — readable names matching content
- Select card types — Hero, Stat, Category, Chart, Badge, Quote, Highlight
- Assign accent colors — one per category, max 3-4 accents
- Set dimensions — viewport width matches grid width
- Lock aspect ratio — horizontal only; omit for vertical
- Verify zero-gap — no
align-items: start, all cells occupied, gap 6px - Scale for orientation — vertical gets smaller fonts, padding, radius
- Screenshot — Playwright at 2x, viewport matches grid width
Reference Files
- [
design-system.md](design-system.md) — Complete design tokens, card CSS/HTML, layout templates, and skeleton - [
scripts/screenshot.mjs](scripts/screenshot.mjs) — Playwright screenshot capture script