This skill helps your agent create Apple-inspired bento grid cards from plain descriptions, like project stats, launch recaps, or social posts. It chooses a layout and theme, asks for logos or images if needed, and returns self-contained HTML you can open or screenshot.
Builders who want Claude Code, Codex, Cursor, or other Agent Skills–compatible tools to make polished bento grid cards.
You can turn project stats and stories into ready-to-share HTML cards without doing layout work yourself.
Uses Apple-style light `#f5f5f7` and dark `#000` themes with matching dark-mode colors.
Includes Hero, Stat, Category, Bar Chart, Badge, Quote, and Highlight cards.
Supports 4-column horizontal, 3-column horizontal, and 2-column vertical templates.
Lets you include logos, screenshots, and avatars in the card layout.
Includes a Playwright script that captures 2x PNG screenshots.
Generates HTML files with inline CSS and no runtime dependencies.
/plugin marketplace add hubeiqiao/apple-bento-grid /plugin install apple-bento-grid@apple-bento-grid-marketplace
npx skills add hubeiqiao/apple-bento-grid
git clone https://github.com/hubeiqiao/apple-bento-grid.git ~/.claude/skills/apple-bento-grid
Use /apple-bento-grid to visualize my project stats
Use /apple-bento-grid to visualize my startup's growth journey
Use /apple-bento-grid to visualize my open source project achievements
A skill for AI coding agents that generates Apple-inspired bento grid presentation cards as self-contained HTML files. No design tools needed — just describe your stats and get pixel-perfect output.
Compatible with Claude Code, OpenAI Codex, Cursor, and other agents that support the Agent Skills standard.
All made with this skill — just describe your data and get pixel-perfect output.
Solo Dev Project Stats — 79 days of building, tracked as product metrics
Personal Data Dashboard — 12 years of writing & social media activity
Product Launch — Light and dark themes
| Light | Dark |
|---|---|
 |  |
Chinese New Year Launch — Square format (1200x1200) with festive theme
Vertical / Social Media — Portrait format for social posts
| Project Stats | GitHub Social | Personal Dashboard |
|---|---|---|
 |  |  |
/plugin marketplace add hubeiqiao/apple-bento-grid
/plugin install apple-bento-grid@apple-bento-grid-marketplace
Install from the Agent Skills Directory:
npx skills add hubeiqiao/apple-bento-grid
Clone directly into your Claude Code skills directory:
git clone https://github.com/hubeiqiao/apple-bento-grid.git ~/.claude/skills/apple-bento-grid
Or add it as a project skill in .claude/skills/.
In your AI coding agent, just describe what you want to visualize. You don't need to be specific — the skill figures out the best layout, theme, and card types for you.
Quick start:
Use /apple-bento-grid to visualize my project stats
Explore different use cases:
Use /apple-bento-grid to visualize my startup's growth journey
Use /apple-bento-grid to visualize my open source project achievements
Use /apple-bento-grid to create a year-in-review card for my portfolio
Use /apple-bento-grid to visualize our team's Q4 shipping velocity
Or be specific when you know what you want:
Create a dark theme bento grid with $2.4M revenue, 12K users, and a bar chart showing quarterly growth
Make a vertical social media card with 5 achievement stats and my company logo
The skill will:
#f5f5f7) and dark (#000) with Apple dark-mode colors| Card | Use For | Key Feature |
|---|---|---|
| Hero | Taglines, headlines | Gradient top-border accent, spans 2 rows |
| Stat | Numbers + labels | Color-coded accent per category |
| Category | Grouped items | Color label + subtitle + pill tags |
| Bar Chart | Growth over time | Gradient bars with header badge |
| Badge | Tool attribution | Icon pill + stat number |
| Quote | Mission statements | Dark background, colored emphasis |
| Highlight | Hero numbers (3x, 10x) | Full-gradient background |
| Light | Dark |
|---|---|
| |
| Template | Columns | Width | Best For |
|---|---|---|---|
| A: Horizontal | 4-col | 1200px | 12-16 cards, slides |
| B: Horizontal | 3-col | 1100px | 8-10 cards, focused |
| C: Vertical | 2-col | 600px | Social media, portrait |
cd scripts
npm install
npx playwright install chromium
node screenshot.mjs
Edit the pages array in screenshot.mjs to point to your HTML files.
light-horizontal.html — Light theme, 3-column product launchdark-horizontal.html — Dark theme, 4-column SaaS metricslight-vertical.html — Light theme, 2-column GitHub social cardreal-corpus-dark-horizontal.html — Personal data dashboard, 10 cardsreal-corpus-dark-vertical.html — Same content, portrait formatreal-cny-2026-square.html — Chinese New Year launch, 1200x1200 squareapple-bento-grid/
├── SKILL.md # Skill definition (workflow, themes, card types)
├── design-system.md # Complete design tokens, CSS/HTML for all components
├── examples/ # Generated + real-world HTML outputs with screenshots
├── evals/ # Test cases for skill evaluation
├── scripts/
│ ├── screenshot.mjs # Playwright 2x screenshot capture
│ └── package.json
├── LICENSE # MIT
└── README.md
MIT
Sign in to join the discussion.
No comments yet. Be the first to say what this is good for.
Topic in, narrated explainer video out. A Claude Code / Codex skill that turns any topic into a black-canvas motion-graphics explainer video with TTS voiceover, subtitles and a chapter progress bar. Chinese or English; every frame drawn in code with Remotion.
Public repository for Agent Skills
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Taste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop
Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams—self-contained HTML with motion and crisp export.
Rebuild the object in a reference image as a code-only, procedural, quality-gated, animation-ready Three.js model. Token-efficient image-to-3D.