bento

Generate dashboard layout configurations using modular grid and design tokens.

Updated Jul 9, 2026
One-click install
npx skills add https://github.com/AshesOfTheUndead/rezurxlib --skill bento-ashesoftheundead
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: bento
Source: https://github.com/AshesOfTheUndead/rezurxlib/tree/main/skills/design/design-systems/style-skills/bento
Command: npx skills add https://github.com/AshesOfTheUndead/rezurxlib --skill bento-ashesoftheundead

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of inconsistent UI design by providing a structured, token-based grid system that ensures visual harmony and scannable interfaces across all components.

Core Features & Use Cases

  • Modular Grid Layout: Implements a bento-box style grid for organizing content into clear, hierarchical blocks.
  • Design Token Enforcement: Provides a centralized source of truth for colors, typography, and spacing to prevent design drift.
  • Use Case: When building a new dashboard, use this Skill to generate a layout configuration that automatically applies the correct spacing, typography, and color tokens to every card and container.

Quick Start

Use the bento skill to generate a design guideline document for a new dashboard component using the defined primary and surface color tokens.

Frequently Asked Questions about bento

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

FAQPage Schema
What is a bento grid system for UI layout design?

A bento grid system is a modular layout structure that organizes UI components into clear, hierarchical blocks. It uses predefined design tokens to enforce consistent typography, spacing, and color constraints across web and application interfaces.

How do I standardize UI component layouts using design tokens?

You can standardize UI component layouts by applying a centralized set of design tokens for colors, typography, and spacing. This prevents design drift and ensures visual harmony and scannable interfaces across all dashboard components.

Can I use this modular grid system for dashboard UI components?

Yes, you can use this modular grid system to generate layout configurations for dashboard UI components. It automatically applies the correct spacing, typography, and color tokens to every card and container.

Does this grid system enforce WCAG 2.2 accessibility standards?

Yes, the grid system enforces WCAG 2.2 accessibility standards. It requires adherence to these standards and mandates semantic token usage for all component variants to ensure accessible design implementation.

Why does my UI design drift across different application interfaces?

UI design drifts when there is no centralized source of truth for design tokens. Implementing a structured, token-based grid system prevents this by enforcing strict constraints on typography, spacing, and color across all components.

What is the best way to generate a design guideline document for a new dashboard component?

The best way to generate a design guideline document is to use a modular grid skill. It applies predefined primary and surface color tokens, establishing a structured layout configuration for your new dashboard component.