apple-bento-grid
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.mdcompletely 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
More from hubeiqiao/skills
pptx
Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or speaker notes, or any other presentation tasks
1responsive-video-source-selection
|
1coding-standards
Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
1docx
Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks
1internal-comms
A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).
1reddit-fetch
Fetch content from Reddit using Gemini CLI when WebFetch is blocked. Use when accessing Reddit URLs, researching topics on Reddit, or when Reddit returns 403/blocked errors. (user)
1