apple-bento-grid
CommunityCraft Apple-style bento grids for stunning presentations.
Authorhubeiqiao
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
playwright
Components
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: apple-bento-grid Download link: https://github.com/hubeiqiao/skills/archive/main.zip#apple-bento-grid Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.