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, in

238 stars 16 forksDocuments & Office Files

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add hubeiqiao/apple-bento-grid --skill apple-bento-grid

Manual install

git clone --depth 1 https://github.com/hubeiqiao/apple-bento-grid.git /tmp/apple-bento-grid
mkdir -p ~/.claude/skills
cp -r /tmp/apple-bento-grid/. ~/.claude/skills/apple-bento-grid

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 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)

Read the full skill on GitHub

Details

Skill name: apple-bento-grid
Repository: hubeiqiao/apple-bento-grid
License: MIT
Repo updated: 17 March 2026
Copies: Found in 2 GitHub repos

FAQ

What does the Apple Bento Grid skill do?

How do I install the Apple Bento Grid skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add hubeiqiao/apple-bento-grid --skill apple-bento-grid. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Apple Bento Grid popular?

It lives in hubeiqiao/apple-bento-grid, which has 238 GitHub stars and 16 forks.

Related skills

Document Format Skills

236

KaguraNanaga/document-format-skills

Chinese Word document formatting toolkit for .docx/.doc/.wps workflows. Use when Codex needs to diagnose document formatting, fix mixed Chinese/English punctuation and spacing, apply official/academic/legal/custom presets, normalize tables and page numbers, preserve or output Word revision marks, convert plain text or Markdown into formatted DOCX, or batch/script document cleanup for Chinese official documents.

Documents & Office Files19

Overleaf

234

aloth/olcli

Sync and manage Overleaf LaTeX projects from the command line. Pull projects locally, push changes back, compile PDFs, and download compile outputs like .bbl files for arXiv submissions. Use when working with LaTeX, Overleaf, academic papers, or arXiv.

Documents & Office Files30

Figedit V2

191

giszzt/figedit

将位图图形重建为高保真可编辑 SVG 与原生 PowerPoint，支持仅文字可编辑、文字/结构/公式可编辑、源图素材保真混合、选择性或完整前景拆分，以及复杂连续背景的 AI 清版底重建。当用户希望把截图、论文插图、流程图、架构图、信息图、UI、图表/地图、海报或封面转成可编辑图形，或提到“图片转可编辑 SVG/PPT”“仅文字可编辑”“图表重建”“FigEdit”时使用。

Documents & Office Files17

Markdown Exporter

274

bowenliang123/markdown-exporter

Convert Markdown text to DOCX, PPTX, XLSX, PDF, PNG, SVG, HTML, IPYNB, MD, CSV, JSON, JSONL, XML files, and extract code blocks in Markdown to Python, Bash,JS and etc files.

Documents & Office Files69

Slidemuse

168

helloo1568/slidemuse

将书籍、PDF、论文、报告或文字制作成视觉统一的图片版 PPT，适用于竞赛、答辩、路演、课程展示和读书分享；按需还原可编辑 PPTX，也支持直接还原已有图片、PDF 或图片版 PPTX。不用于普通修改已有可编辑 PPTX。

Documents & Office Files18

Mck Ppt Design

326

likaku/Mck-ppt-design-skill

Create professional, consultant-grade PowerPoint presentations from scratch using MckEngine (python-pptx wrapper) with McKinsey-style design. Use when user asks to create slides, pitch decks, business presentations, strategy decks, quarterly reviews, board meeting slides, or any professional PPTX. AI calls eng.cover(), eng.donut(), eng.timeline() etc — 67 high-level methods across 12 categories (structure, data, framework, comparison, narrative, timeline, team, charts, images, advanced viz, dashboards, visual storytelling), consistent typography, zero file-corruption issues, BLOCK_ARC native s

Documents & Office Files43

Browse the most popular Claude skills, all documents & office files skills, or write your own with the skills generator.