bento-design

Establishes Bento-style UI design guidelines for THE LOST+UNFOUNDS dashboards.

Updated Nov 9, 2025

Search Tags:#typography #consistency #components #dashboard #design-system #ui-patterns #bento

Ready to run

npx skills add https://github.com/canyouseeus/thelostandunfounds --skill bento-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: bento-design
Source: https://github.com/canyouseeus/thelostandunfounds/tree/main/.agent/skills/bento-design
Command: npx skills add https://github.com/canyouseeus/thelostandunfounds --skill bento-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guidelines and patterns to implement THE LOST+UNFOUNDS premium Bento-style UI consistently across the application.

Core Features & Use Cases

Core Design Principles: Pure Black Base, Bento Card Structure, Left-Aligned Content, Premium Typography, Subtle Accents.
Primary Components: AdminBentoCard, AdminBentoRow, CollapsibleSection, LoadingSpinner.
Implementation Patterns: Migrating a Basic List to Bento Style, Form Implementation.
Best Practices: Grid layouts, avoid over-nesting, shadows, transitions.

Quick Start

Apply the Bento design system to a page by implementing AdminBentoCard components with a black base, square corners, left-aligned content, and premium typography.

Frequently Asked Questions about bento-design

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

FAQPage Schema

How do I implement a Bento UI design system for admin dashboards?▼

Establish design guidelines for a Bento-style UI by applying a pure black base, square card corners, left-aligned content, and premium typography using components like AdminBentoCard for consistent admin dashboards.

What are the core typography and layout rules for a Bento style dashboard?▼

Core rules for a Bento style dashboard require a pure black base, left-aligned content within square-cornered cards, and premium typography to ensure consistent UI patterns across data panels.

Can I use Bento card components to migrate a basic list to a premium UI?▼

Yes, you can migrate a basic list to a premium Bento style UI using defined implementation patterns that utilize components like AdminBentoCard and CollapsibleSection for structured data presentation.

Does the Bento design system support collapsible sections and loading states?▼

Yes, the Bento design system supports interactive states through primary components like CollapsibleSection and LoadingSpinner, maintaining consistent transitions and spacing within the square card structure.

What are the limitations or best practices for Bento grid layouts?▼

Best practices for Bento grid layouts include avoiding over-nesting of components and using subtle shadows and transitions to prevent structural complexity while maintaining the premium pure black base aesthetic.