skills.rest
ESO-Toolkit
ESO-ToolkitOFFICIAL
Explore all skills by this author →
GitHub

ui-updates

Enforce glassmorphism design tokens in React applications using MUI v7.

2|Updated Aug 18, 2025
Search Tags:#ui#frontend#react#design system#styling#glassmorphism#mui
One-click install
npx skills add https://github.com/ESO-Toolkit/eso-toolkit --skill ui-updates
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-updates
Source: https://github.com/ESO-Toolkit/eso-toolkit/tree/main/.github/skills/ui-updates
Command: npx skills add https://github.com/ESO-Toolkit/eso-toolkit --skill ui-updates

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures that all UI changes made to the ESO Log Aggregator application adhere to the established modern glassmorphism design system, maintaining visual consistency and a polished user experience.

Core Features & Use Cases

  • Design System Adherence: Guarantees that new or updated React components, styling, layouts, and visual elements match the application's theme, color palette, typography, and interaction patterns.
  • Glassmorphism Implementation: Provides guidance and recipes for applying the signature blurred, translucent, and gradient-heavy aesthetic.
  • Use Case: When developing a new dashboard widget, use this Skill to ensure its appearance, including background, borders, shadows, and typography, perfectly matches the existing UI elements.

Quick Start

Apply the glassmorphism recipe to the new DashboardCard component, ensuring it uses the panel background token and has a backdropFilter of blur(10px).

Frequently Asked Questions about ui-updates

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

FAQPage Schema
How do I implement glassmorphism styling in a React application?▼

To maintain glassmorphism consistency, use predefined design tokens for color, typography, shadows, and animations. This Skill enforces the use of these tokens within MUI v7 and Emotion to ensure visual parity across both dark and light modes.

Does this glassmorphism design system support both dark and light modes?▼

Yes, the glassmorphism design system fully supports both dark and light modes. It guides developers to apply specific color tokens and responsive design principles that adapt the translucent and blurred aesthetic across different theme preferences.

How do I ensure my new React dashboard widget matches the existing UI?▼

To match the existing UI, apply the glassmorphism recipe using the panel background token and a backdropFilter of blur(10px). This ensures your dashboard widget's background, borders, and shadows align with the established design system.

What is the best way to manage design tokens for Material UI v7 components?▼

The best way to manage design tokens for MUI v7 is to enforce adherence to a centralized design system. This Skill provides guidance on applying specific tokens for color, typography, and shadows to maintain a polished user experience.

Can I use Emotion to apply blurred translucent effects in React?▼

Yes, you can use Emotion alongside MUI v7 to apply blurred translucent effects. This Skill guides developers on combining Emotion styling with specific design tokens to achieve the signature glassmorphism aesthetic.

Related Skills

Explore More Design & Creative Skills→
blencorpblencorp
101

mui

Provides MUI v7 styling and theming patterns via sx and components.

Official
Intermediate
wzyxdwllwzyxdwll
14

liquid-glass

Provide reusable CSS tokens for glass-like UI theming across light and dark modes.

Community
Intermediate
toddmoytoddmoy
1

animate

Design performant UI animations with CSS and Framer Motion.

Community
Advanced
Mte90Mte90
51

Next.js Styling & UI Performance

Optimize Next.js styling with zero-runtime CSS for Server Components.

Community
Intermediate