Can I customize the intensity of the glass blur?

Yes, the skill supports four distinct blur levels: subtle (sm), medium (md), strong (xl), and maximum (3xl).

How does the agent workflow improve the design process?

It spawns specialized agents to explore your existing codebase for patterns and research the latest backdrop-filter support before writing any code.

Does it automatically handle dark mode?

Yes, the skill includes critical rules that mandate the definition of dark mode variants for every glass component created.

Is it compatible with gradient backgrounds?

Absolutely. The validation checklist specifically ensures that the glass effects work correctly over gradient backgrounds for maximum visual impact.

What version of Tailwind CSS does this skill support?

This skill is specifically optimized for Tailwind CSS version 4.1 and above to leverage the latest utility classes.

Advanced Glassmorphism UI

Name: Advanced Glassmorphism UI
Author: fusengine

byfusengine

•

设计工具

Generates sophisticated frosted glass effects and transparent overlays using advanced Tailwind CSS patterns and multi-agent validation.

The Glassmorphism Advanced skill empowers developers to implement modern, high-fidelity UI designs with precision and depth. It automates the creation of multi-layered transparent surfaces, utilizing backdrop filters, opacity layers, and colored shadows to ensure visual interest and production-grade quality. By leveraging a specialized multi-agent workflow—including codebase exploration and browser support research—the skill ensures that glass effects are not only aesthetically pleasing but also consistent with existing patterns and fully compatible with both light and dark modes.

主要功能

01Tailwind CSS 4.1 optimized blur levels ranging from subtle to maximum

022 GitHub stars

03Multi-agent verification workflow to ensure codebase consistency and browser support

04Multi-layered glass stack implementation for realistic depth and hierarchy

05Automated dark mode variant generation for all transparent surfaces

06Dynamic colored shadow integration for vibrant and modern UI elements

使用场景

01Standardizing glassmorphism design patterns across large-scale frontend projects

02Creating high-end hero sections with complex visual hierarchies on gradient backgrounds

03Designing modern dashboard cards, modals, and navigation overlays

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fusengine/agents glassmorphism-advanced

For use in Claude.ai and ChatGPT

Download Skill