skills.rest
bergside
bergsideOFFICIAL
Explore all skills by this author →
WebsiteGitHub

bento

Generate Bento-style modular grid layouts with token-based typography and WCAG 2.2 AA accessibility.

2.3k|211|Updated Mar 9, 2026
Search Tags:#design tokens#accessible UI#typography scale#component styling#bento layout#modular grid
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill bento-bergside
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bento
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/bento
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill bento-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bento helps you turn complex interfaces into scannable, card-based layouts with consistent hierarchy, spacing, and color contrast.

Core Features & Use Cases

  • Modular grid layouts: Arrange content into bento-style blocks of varying size for clear visual grouping.
  • Token-driven styling: Use a defined typography scale, spacing rhythm, and semantic color palette to keep UI consistent.
  • Accessibility-first guidance: Apply WCAG 2.2 AA, keyboard-first interaction patterns, and visible focus-state rules during implementation.

Quick Start

Use the bento skill to generate a Bento-style page layout with tokenized typography, a 4/8/12/16/24/32 spacing rhythm, and accessible focus/interaction states.

Frequently Asked Questions about bento

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

FAQPage Schema
How do I build a bento layout for a dashboard with modular grid blocks?▼

To build a bento layout, arrange content into card-like blocks of varying sizes within a modular grid. This creates clear visual grouping and organized scanning for product pages and dashboards.

What is a modular grid UI and when should I use card-based layouts?▼

A modular grid UI uses card-like blocks with consistent hierarchy for scannable interfaces. Use it for product pages, dashboards, and component families where organized scanning and layout clarity matter.

Do I need design tokens for typography and spacing to create accessible UI?▼

Yes, creating accessible UI requires token-based typography, a defined spacing rhythm, and semantic colors. These tokens maintain consistent hierarchy and contrast while applying WCAG 2.2 AA standards.

How do I apply WCAG 2.2 AA keyboard-first interaction to a bento layout?▼

Apply WCAG 2.2 AA keyboard-first interaction by implementing visible focus-state rules and consistent spacing rhythm across your modular grid. This ensures accessible navigation within card-based blocks.

What is the best way to organize component families using a modular grid?▼

The best way to organize component families is using a bento-style modular grid with varying block sizes. Apply tokenized typography and a 4/8/12/16/24/32 spacing rhythm to maintain clear visual grouping.

Can I use a bento layout for complex interfaces without losing visual hierarchy?▼

Yes, a bento layout turns complex interfaces into scannable, card-based designs without losing hierarchy. Token-driven styling and semantic color palettes ensure consistent spacing and contrast across blocks.

Related Skills

Explore More Design & Creative Skills→
superpollo02superpollo02

codex

Generate minimal typography-led UI design guidance with WCAG 2.2 AA accessibility tokens.

Community
Advanced
bergsidebergside
2.3k

sleek

Enforce minimalist design-system specs with WCAG 2.2 AA accessibility rules.

Official
Intermediate
superpollo02superpollo02

bento

Generates Bendodesign-system guidance for modular card-based grid interfaces with WCAG 2.2 AA keyboard accessibility criteria embedded in workflows.

Community
Intermediate
GatsbyhateyouGatsbyhateyou

bento

Apply a Bento grid layout with varying card sizes and information grouping.

Community
Basic