Axiom Liquid Glass Ref

The axiom-liquid-glass-ref skill provides a reference implementation for rendering liquid glass effects within Axiom, enabling developers to create modern, translucent UI components with dynamic lighting and refraction properties. It serves as a foundational template for building aesthetic interfaces that mimic frosted glass or fluid materials in web applications.

When to use it

• Implementing frosted glass navigation bars or cards in dashboard interfaces.
• Creating immersive landing pages featuring animated, translucent background elements.
• Prototyping UI designs that require complex material interactions before final implementation.
• Learning how to structure Axiom components for advanced CSS-based visual effects.

Key capabilities

• Renders realistic liquid glass textures and distortions.
• Applies dynamic lighting and refraction simulations to UI elements.
• Provides a reusable reference pattern for the Axiom framework.
• Supports dark mode compatibility through adaptive opacity settings.

Example prompts

• "Create a navigation bar using the axiom-liquid-glass-ref skill with a backdrop blur effect."
• "Generate a card component that applies liquid glass refraction to its background."
• "Show me how to integrate this reference implementation into an existing Axiom project layout."

Tips & gotchas

This skill is specifically designed for the Axiom framework; it may not function correctly in standard HTML/CSS environments without adaptation. Ensure your base theme supports translucent backgrounds, as the effect relies on underlying content visibility to render properly.