skills.rest
Hamzaoui-Louai
Hamzaoui-LouaiCOMMUNITY
Explore all skills by this author →
GitHub

kmp-glassmorphism-ui

Implements a glassmorphism design system with translucent components for Compose Multiplatform applications.

1|Updated Aug 4, 2026
Search Tags:#desktop app#ui design#glassmorphism#kotlin#material3#compose multiplatform#frosted glass
One-click install
npx skills add https://github.com/Hamzaoui-Louai/LEAN-gym-dashboard-frontend --skill kmp-glassmorphism-ui-hamzaoui-louai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kmp-glassmorphism-ui
Source: https://github.com/Hamzaoui-Louai/LEAN-gym-dashboard-frontend/tree/main/.github/copilot/skills/kmp-glassmorphism-ui
Command: npx skills add https://github.com/Hamzaoui-Louai/LEAN-gym-dashboard-frontend --skill kmp-glassmorphism-ui-hamzaoui-louai

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building a consistent frosted-glass UI in Kotlin Multiplatform projects requires manually recreating translucent surfaces, gradient borders, animated backgrounds, and themed components for every project, which is repetitive and error-prone across Desktop, Android, iOS, and WASM targets. ## Core Features & Use Cases - Complete Theme System: Provides GlassTheme with dark and light color schemes, accent colors, and typography built on Material3. - Ready-to-Copy Components: Includes GlassSurface, GlassCard, GlassTextField, GlassButton, dropdowns, sidebar, and chat bubble components with configurable alpha and shapes. - Animated Backgrounds & Transparency: LiquidBackground renders animated gradient blobs, and a transparency guide covers undecorated transparent windows on Compose Desktop. - Use Case: When building a chat-style desktop app in Compose Multiplatform, copy the theme, LiquidBackground, GlassChatBubble, GlassTextField, and GlassButton assets to assemble a cohesive frosted-glass interface. ## Quick Start Ask the AI to apply the glassmorphism theme and glass components from this skill to your Compose Multiplatform project, starting with GlassTheme and LiquidBackground.

Frequently Asked Questions about kmp-glassmorphism-ui

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

FAQPage Schema
How do I add glassmorphism UI to a Compose Multiplatform app?▼

Copy the GlassTheme.kt, LiquidBackground.kt, and the needed component files into your project, then wrap your root composable in GlassTheme and place LiquidBackground as the outermost container. All components read colors from MaterialTheme.colorScheme automatically.

How to create a frosted glass card in Compose Multiplatform?▼

Use GlassCard for a premium card with radial glow and shimmer border, or GlassSurface for a basic translucent container with gradient background and border stroke. Both accept shape and alpha parameters for customization.

Does glassmorphism work on Compose Desktop with transparent windows?▼

Yes, Compose Desktop supports transparent undecorated windows using Window(transparent = true, undecorated = true). Combine this with a semi-transparent Surface color and LiquidBackground with enableTransparentBackground set to true.

What alpha values should glass UI components use?▼

Use 0.5f for main content surfaces, 0.2f for sidebar panels, 0.95f for modal dialogs, and 0.9f to 0.95f for dropdown menus. Hover state backgrounds work well at 0.8f alpha.

What are the requirements for using glassmorphism components in Kotlin Multiplatform?▼

The components require Kotlin 1.9 or higher, Compose Multiplatform 1.5.0 or higher, Material3, and Material Icons Extended. They support Desktop JVM, Android, iOS, and WASM targets with both dark and light modes.

Related Skills

Explore More Software Engineering Skills→
Aks-4125Aks-4125
5

kmp-glassmorphism-ui

Implement glassmorphism UI components across Kotlin Multiplatform targets.

Community
Advanced
thangvawnthangvawn

compose-multiplatform-patterns

Build multiplatform UI applications with Compose Multiplatform and Kotlin Multiplatform.

Community
Intermediate
lukaskellersteinlukaskellerstein
3

design-system

Generate color palettes, type scales, and audit design systems for WCAG contrast compliance.

Community
Intermediate
fengshao1227fengshao1227
5.9k

liquid-glass

Implements Apple-style translucent glass morphism UI with CSS tokens and component patterns.

Community
Basic