skills.rest
canyouseeus
canyouseeusCOMMUNITY
Explore all skills by this author →
GitHub

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

Related Skills

Explore More Design & Creative Skills→
cgalliccgallic
40

kaicalls-design

Design KaiCalls admin UI components with dark-first design tokens and typography.

Community
Advanced
Usmanhacker2641Usmanhacker2641

minimalist-ui

Generate editorial-style web interfaces with warm monochrome palettes and bento-grid layouts.

Community
Advanced
laravellaravel
3.6k

tailwindcss-development

Apply Tailwind CSS v4 utilities for styling and responsive layouts.

Official
Intermediate
kireevkit15-syskireevkit15-sys

minimalist-ui

Generate editorial web UI designs with bento-grid layouts and HTML/React/Tailwind components.

Community
Advanced