skills.rest
ionmidori
ionmidoriCOMMUNITY
Explore all skills by this author →
GitHub

designing-modern-ui

Design web interfaces with Bento Grids, Glassmorphism, and Tailwind CSS.

Updated Dec 17, 2025
Search Tags:#web design#frontend development#ui design#glassmorphism#ux/ui#bento grid
One-click install
npx skills add https://github.com/ionmidori/SYDBioedilizia --skill designing-modern-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designing-modern-ui
Source: https://github.com/ionmidori/SYDBioedilizia/tree/main/.gemini/skills/designing-modern-ui
Command: npx skills add https://github.com/ionmidori/SYDBioedilizia --skill designing-modern-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the need to create visually stunning, high-end web interfaces that align with current design trends, ensuring a premium user experience.

Core Features & Use Cases

  • Bento Grid Layouts: Implement modular, asymmetric grid systems for organized and aesthetically pleasing dashboards and landing pages.
  • Glassmorphism: Apply translucent layers with blurs and subtle borders for a modern, sophisticated look.
  • Dynamic Motion: Integrate subtle micro-animations to enhance user engagement and interface responsiveness.
  • Expressive Typography: Utilize sophisticated font pairings for clear visual hierarchy and brand identity.
  • Use Case: Redesigning a project dashboard to be more engaging and informative by implementing a bento grid layout with glassmorphic cards and subtle animations.

Quick Start

Apply the glass-surface utility class to any div to give it a premium, translucent appearance.

Frequently Asked Questions about designing-modern-ui

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

FAQPage Schema
How do I build a bento grid dashboard layout with Tailwind CSS?▼

To build a bento grid dashboard, you apply modular, asymmetric grid systems using Tailwind CSS utility classes to organize interface elements into aesthetically pleasing sections.

What is the best way to apply glassmorphism to web interfaces?▼

Glassmorphism is applied by using translucent layers with background blurs and subtle borders, often achieved by adding a glass-surface utility class to div elements for a sophisticated look.

Can I use Framer Motion to add dynamic animations to UI components?▼

Yes, you can use Framer Motion to integrate subtle micro-animations into your web interface, which enhances user engagement and interface responsiveness.

How do I implement Material 3 Expressive typography in a frontend project?▼

Implement Material 3 Expressive typography by utilizing sophisticated font pairings that establish clear visual hierarchy and brand identity within your frontend application design.

Does this approach work for redesigning existing project dashboards?▼

Yes, this approach facilitates redesigning existing project dashboards to be more engaging and informative by implementing bento grid layouts with glassmorphic cards and subtle animations.

Related Skills

Explore More Design & Creative Skills→
STier-AiSTier-Ai
5

frontend-ui-dark-ts

Build dark-themed React UIs with Tailwind CSS and Framer Motion.

Official
Intermediate
zmsqnfl-commitszmsqnfl-commits
1

industrial-brutalist-ui

Translate brutalist UI concepts into grid-driven dashboard components with ASCII framing.

Community
Advanced
WeAreBiniWeAreBini
14

design-guide

Guide frontend developers in building consistent UI components for Paperclip.

Official
Intermediate
MohammedSaudAlsahliMohammedSaudAlsahli

minimalist-ui

Generate minimalist web interfaces with warm monochrome palettes and bento grid layouts.

Community
Advanced