bento

Standardize UI components and design tokens for dark-mode web interfaces.

1|Updated Jun 30, 2026

Search Tags:#ui #frontend #design system #tokens #dark mode #bento

Ready to run

npx skills add https://github.com/Itinerant18/Urban-assist --skill bento-itinerant18

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: bento
Source: https://github.com/Itinerant18/Urban-assist/tree/main/.bento
Command: npx skills add https://github.com/Itinerant18/Urban-assist --skill bento-itinerant18

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the challenge of maintaining visual consistency and premium aesthetic standards in dark-mode web interfaces by providing a structured, token-based design language.

Core Features & Use Cases

Design Token Management: Provides a source of truth for colors, typography, spacing, and radii to ensure UI uniformity.
Component Library: Offers a comprehensive set of modular components like cards, buttons, and hero sections optimized for bento-style layouts.
Use Case: When building a new landing page or dashboard, use this Skill to ensure all cards, buttons, and typography adhere to the specific dark-mode aesthetic and geometric constraints defined in the Bento Pro system.

Quick Start

Use the bento skill to generate a responsive hero section and a three-column feature grid that follows the defined design tokens and layout rules.

Frequently Asked Questions about bento

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

FAQPage Schema

How do I maintain visual consistency across dark-mode web interfaces?▼

Create bento-grid layouts by using a token-based design system that provides modular components like cards, buttons, and hero sections. It enforces specific geometric constraints, consistent spacing, and radius scales for responsive dashboard and landing page designs.

How do I standardize UI component implementation for product dashboards?▼

Use this Skill to generate responsive hero sections and multi-column feature grids that follow predefined layout rules. It provides modular components and standardized spacing to satisfy the geometric constraints of bento-style layouts.

What is a design token system for premium dark mode UI?▼

Yes, you can generate responsive hero sections and three-column feature grids by applying the centralized design tokens and layout rules. This ensures all modular components adhere to the specific dark-mode aesthetic and geometric constraints.

Do I need external dependencies to use this bento-grid design system?▼

It is best suited for building product dashboards and landing pages that require a premium dark-mode aesthetic. If your project needs consistent spacing, radius scales, and semantic color mapping across bento-grid layouts, this system applies those constraints effectively.