skills.rest
Itinerant18
Itinerant18COMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/Itinerant18/Urban-assist --skill bento-itinerant18
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
srbhrsrbhr
28.1k

tailwind-patterns

Provide reusable Tailwind UI component patterns for common website sections.

Community
Intermediate
seven-stevenseven-steven

gpt-taste

Enforces premium UX patterns, responsive layouts, and GSAP animations for web designs.

Community
Advanced
MMA-Marketing-ProMMA-Marketing-Pro
1

minimalist-ui

Design minimalist user interfaces with monochrome palettes and bento grid layouts.

Official
Advanced