skills.rest
hubeiqiao
hubeiqiaoCOMMUNITY
Explore all skills by this author →
Website𝕏@hubeiqiaoGitHub

apple-bento-grid

Generate self-contained HTML files for Apple-inspired bento grid presentations.

Updated Mar 4, 2026
Search Tags:#html#data visualization#design system#css#presentation#bento grid
One-click install
npx skills add https://github.com/hubeiqiao/skills --skill apple-bento-grid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apple-bento-grid
Source: https://github.com/hubeiqiao/skills/tree/main/apple-bento-grid
Command: npx skills add https://github.com/hubeiqiao/skills --skill apple-bento-grid

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation of visually appealing, Apple-inspired bento grid layouts for presenting project stats, timelines, and achievements, eliminating the need for manual design and coding.

Core Features & Use Cases

  • Generate HTML: Creates self-contained HTML files with inline CSS for Apple-style presentation cards.
  • Zero-Gap Grids: Implements a precise CSS technique for seamless card layouts.
  • Diverse Card Types: Offers various card components like Hero, Stat, Category, Bar Chart, Badge, Quote, and Highlight.
  • Layout Templates: Provides pre-defined grid layouts optimized for different content volumes and orientations.
  • Screenshot Export: Includes a script for capturing high-resolution PNG exports of the generated grids.
  • Use Case: Quickly generate a project overview dashboard with key metrics, recent achievements, and a timeline, all formatted in a clean, modern aesthetic suitable for executive presentations.

Quick Start

Use the apple-bento-grid skill to generate an HTML file for a project status update using the 4-column horizontal layout.

Frequently Asked Questions about apple-bento-grid

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Apple-style bento grid presentations in HTML?▼

To generate Apple-style bento grid presentations in HTML, this Skill creates self-contained HTML files using inline CSS and a zero-gap grid technique. It provides pre-defined layout templates and diverse card types like Hero, Stat, and Bar Chart for clean layouts.

What is a zero-gap CSS grid and when should I use it for data visualization?▼

A zero-gap CSS grid is a layout technique for creating seamless card arrangements without margins. Use it for data visualization when you need a modern, Apple-inspired aesthetic to present project stats, timelines, and achievements in a unified dashboard.

Can I use Playwright to export high-resolution screenshots of HTML presentations?▼

Yes, you can use Playwright to export high-resolution screenshots of HTML presentations. This Skill includes a Playwright script specifically designed to capture and export generated bento grids as high-resolution PNG files.

What's the best way to create a project status dashboard with HTML and CSS?▼

The best way to create a project status dashboard with HTML and CSS is using pre-defined bento grid layout templates. This Skill offers 4-column, 3-column horizontal, and 2-column vertical layouts optimized for different content volumes.

Does this bento grid generator support different card types for metrics and quotes?▼

Yes, this bento grid generator supports different card types for metrics and quotes. It provides diverse components including Hero, Stat, Category, Bar Chart, Badge, Quote, and Highlight cards to structure various presentation data points.

Do I need to install external CSS frameworks to build these Apple-inspired layouts?▼

No, you do not need to install external CSS frameworks to build these Apple-inspired layouts. The Skill generates self-contained HTML files with inline CSS, ensuring the presentation is fully independent and portable without external dependencies.

Related Skills

Explore More Design & Creative Skills→
silaratursilaratur

image-creator

Render HTML and CSS content into high-resolution PNG images with a headless Playwright browser.

Community
Intermediate
decocmsdecocms
396

slides

Generate editable HTML slide decks from JSON data with live preview.

Official
Advanced
Camilo8902Camilo8902

animation-micro-interaction-pack

Provide reusable animation patterns for Tailwind CSS and Framer Motion.

Community
Intermediate
xukrutdonutxukrutdonut

chart-image

Generate line, bar, and area PNG charts from JSON data with Vega-Lite.

Community
Intermediate