bento-ui

Design bento-style interfaces with mixed card sizes and responsive grid layouts.

41|5|Updated Sep 30, 2025

Search Tags:#swiftui #flutter #dashboard design #grid layout #ui composition #bento ui #responsive cards

Ready to run

npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill bento-ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: bento-ui
Source: https://github.com/efekrbas/discord-hypesquad-manager/tree/main/.agents/skills/design-it/bento-ui
Command: npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill bento-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design and implement bento-style interfaces when a product needs a premium, modular dashboard layout instead of a flat list of sections.

Core Features & Use Cases

Strict Grid Composition: Organizes content into balanced cards with deliberate 1x1, 2x1, and 1x2 spans.
Cross-Platform Guidance: Provides implementation patterns for web CSS Grid, SwiftUI, Flutter, React Native, and Jetpack Compose.
Use Case: Build a home dashboard, analytics overview, or feature showcase where visual hierarchy comes from varied card sizes and consistent spacing.

Quick Start

Create a bento-style dashboard layout for my app with mixed card sizes, rounded compartments, and responsive spacing.

Frequently Asked Questions about bento-ui

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

FAQPage Schema

What is a bento UI layout and when should I use it for my dashboard?▼

A bento UI layout organizes content into a structured grid with mixed card sizes and rounded compartments. Use it for home dashboards, landing pages, or app home screens where visual hierarchy requires varied card spans and consistent spacing.

Does bento UI design support implementation patterns for SwiftUI and Flutter?▼

Yes, bento UI design provides cross-platform implementation guidance for SwiftUI, Flutter, React Native, and Jetpack Compose, along with web CSS Grid patterns, ensuring consistent responsive grid composition across mobile and web frameworks.

How do I build a responsive bento grid layout with mixed card sizes?▼

Build a responsive bento grid by organizing content into balanced compartments with deliberate 1x1, 2x1, and 1x2 spans. This approach satisfies responsive grid composition, consistent spacing, and rounded compartments for premium modular dashboards.

Can I use bento UI composition for web CSS Grid layouts?▼

Yes, bento UI composition provides specific implementation guidance for web CSS Grid, alongside mobile frameworks. It ensures strict grid composition with balanced cards, deliberate spans, and responsive spacing for landing pages and web dashboards.

What is the best way to structure modular dashboard cards with varied sizes?▼

The best way to structure modular dashboard cards is using strict grid composition with deliberate spans like 1x1, 2x1, and 1x2. This creates a premium bento-style layout where visual hierarchy comes from varied card sizes and consistent spacing.