skills.rest
efekrbas
efekrbasCOMMUNITY
Explore all skills by this author →
Website𝕏@efekrbsGitHub

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
One-click install
npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill bento-ui
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
lachiehlachieh

arrange

Analyze UI layouts for spacing, hierarchy, and grid issues.

Community
Intermediate
magicpro97magicpro97
8

minimalist-ui

Generate ultra-minimalist document-style web interfaces with warm monochrome palettes.

Community
Advanced
makerjackiemakerjackie
1

baoyu-infographic

Generate infographic visuals from structured markdown with customizable layouts and styles.

Community
Advanced
7a336e6e7a336e6e
1

creating-page-layouts

Design editorial page layouts with CSS Grid, asymmetry, and bento grids.

Community
Intermediate