Stats
Actions
Tags
From apple-bento-grid
Generates Apple-inspired bento grid layouts using CSS Grid and Flexbox for responsive web UIs. Useful for landing pages, dashboards, and card-based designs with asymmetric arrangements.
How this skill is triggered — by the user, by Claude, or both
Slash command
/apple-bento-grid:apple-bento-gridThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
../../SKILL.md
../../SKILL.md
npx claudepluginhub hubeiqiao/apple-bento-grid --plugin apple-bento-gridCreates asymmetric card-based grid layouts using CSS Grid and Tailwind CSS, inspired by Apple and modern SaaS design. Includes hero, standard, and accent card variants.
Generates production-quality React and Next.js UI components and full pages using Tailwind CSS and Framer Motion for hero sections, SaaS dashboards, pricing pages, bento grids, forms, cards, and animated elements.
Defines responsive layout grid systems with columns, gutters, margins, breakpoints, and behaviors like fluid/adaptive layouts for consistent designs across devices.