Expo Liquid Glass

What it does

The expo-liquid-glass skill enables AI agents to generate and apply liquid glassmorphism UI effects within Expo React Native projects. It automates the creation of frosted glass components, handling complex background blurs, transparency levels, and border styling directly in the codebase.

When to use it

• Building modern mobile interfaces that require trendy, translucent card layouts for dashboards or settings menus.
• Creating immersive overlays where content needs to remain readable while showing a blurred background context.
• Rapidly prototyping UI designs that leverage depth and layering without manually writing complex shadow or blur calculations.

Key capabilities

• Generates native Expo-compatible code for glassmorphism effects.
• Automatically configures backdrop filters for frosted glass appearances.
• Manages opacity, border radius, and background colors to achieve realistic depth.

Example prompts

• "Create a settings card with a liquid glass effect using the expo-liquid-glass skill."
• "Generate a dashboard widget container that uses frosted glass styling over a gradient background."
• "Apply liquid glassmorphism to a list item component in my Expo project."

Tips & gotchas

Ensure your base layer behind the glass components has sufficient contrast or color variation, as uniform backgrounds may not render the blur effect visibly. This skill is specifically designed for React Native environments via Expo; it will not function in standard web-only setups without an adapter.