skills.rest
Javeria-Javaid
Javeria-JavaidCOMMUNITY
Explore all skills by this author →
GitHub

bento-ui

Implements modular bento grid layouts for web and mobile applications.

3|Updated Jul 17, 2026
Search Tags:#swiftui#flutter#react native#ui layout#css grid#dashboard design#bento grid
One-click install
npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill bento-ui-javeria-javaid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bento-ui
Source: https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore/tree/main/Users/Javeria/Desktop/Alkhidmat_foundation_lahore/.agents/skills/design-it/bento-ui
Command: npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill bento-ui-javeria-javaid

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires flutter_staggered_grid_view.

What problem does it solve? Designing consistent, modular bento-style grid layouts across web and mobile platforms requires careful handling of grid spans, spacing, and border radii, which is error-prone when done from scratch on each framework. ## Core Features & Use Cases - Web Implementation: Provides CSS Grid patterns with span utilities (2x1, 1x2, 2x2) for responsive bento dashboards. - Cross-Platform Mobile Code: Includes ready-to-adapt examples for SwiftUI (LazyVGrid), Flutter (flutter_staggered_grid_view), React Native (flexbox composition), and Jetpack Compose (weighted rows and columns). - Use Case: When building an Apple-style analytics dashboard with mixed-size cards, apply the provided grid structure, 24-32px corner radii, and consistent 16-24px gutters to produce a polished bento layout on any platform. ## Quick Start Ask the AI to build a bento grid dashboard section with mixed card sizes using the bento-ui style guidelines.

Frequently Asked Questions about bento-ui

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

FAQPage Schema
How do I create a bento grid layout with CSS?▼

Use CSS Grid with grid-template-columns and grid-auto-rows to define the base structure, then apply grid-column and grid-row span utilities for larger cells. Set a consistent gap and give each card a large border-radius around 24-32px.

How to build a bento grid in Flutter?▼

Use the flutter_staggered_grid_view package with StaggeredGrid.count and StaggeredGridTile.count to declare each tile's crossAxis and mainAxis spans. Wrap content in containers with white backgrounds, 24px border radius, and soft shadows.

Can React Native create irregular bento grid layouts?▼

React Native lacks CSS Grid, so compose the layout manually using flexDirection row containers with the gap property and nested vertical stacks. Combine fixed heights with flex weights to simulate 1x2 and 2x1 spans.

What border radius and spacing should bento cards use?▼

Bento cards typically use large border radii of 24-32px and perfectly consistent gaps of 16-24px between compartments. The background should be slightly darker than the cards so the white compartments stand out.

When should I not use a bento grid layout?▼

Avoid bento grids when content is dense or text-heavy, since each compartment should stay uncluttered. This reference also does not cover accessibility validation or responsive testing, which must be verified separately.

Related Skills

Explore More Design & Creative Skills→
PritahiPritahi

visual-design-foundations

Generate typography scales, color tokens, spacing grids, and iconography guidelines.

Community
Intermediate
prasanna591prasanna591

card-layout

Designs responsive card-based UI layouts with grid, bento, and accessibility patterns.

Community
Intermediate
sandrasocialsandrasocial
1

minimalist-ui

Design ultra-minimalist editorial UI guidelines for enterprise dashboards.

Community
Advanced
kostja94kostja94
872

masonry

Guide masonry layout design, optimization, and SEO for varying content heights.

Community
Intermediate