More screenshots
Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsLiquid Glass Buttons
This skill tells your agent how to make those cool fancy solid glass buttons that refract whatever's below it.
Free
Liquid Glass Buttons
Example session with this skill installed
Create a React component for a liquid glass button with the 'rim' effect for a pricing page.
- Read your context and instructions
- Compiled the liquid glass buttons
- Generated the UI component
I have generated the LiquidGlassButton component configured for the rim effect, including the necessary arc-length parameterization and specular orbit logic.
Liquid Glass Pricing CTA
// Usage: <LiquidGlassButton effect="rim" size="lg">Upgrade Plan</LiquidGlassButton>
import React from 'react';
import { LiquidGlassButton } from './LiquidGlassButton';
import { GlassLensDefs } from './GlassLensDefs';
export default function PricingSection() {
return (
<div className="bg-[#050505] p-20 flex justify-center">
{/* Required for refractive optics */}
<GlassLensDefs />
<LiquidGlassButton
effect="rim"
size="lg"
shape="pill"
onClick={() => console.log('Checkout')}
>
Get Professional Access
</LiquidGlassButton>
</div>
);
}
Next steps
- Ensure
GlassLensDefs.tsxis mounted at your application's root to enable thecd-lens-defaultSVG filter. - Add the
.glass-chassis-primaryand.cd-lens-glassstyles to your global CSS file. - Use the
effect="rim"prop specifically for primary CTAs to maintain high text legibility while keeping the spectral orbit.
liquid-glass-buttons.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
The problem
Standard "glassmorphism" buttons rely on simple blurs and white gradients, resulting in a milky, plastic appearance. They lack the physical weight and optical accuracy of high-end refractive glass interfaces.
What it does
- Generates clear refractive optical glass using SVG
feDisplacementMapfilters that physically bend background light. - Implements a 4-way anisotropic inset specular bevel system for realistic machined-edge lighting.
- Runs a self-sleeping Canvas 2D liquid-light engine with value-noise fBm and wave packets.
- Features two distinct lighting modes: 'iridescent' molten ribbons and 'rim' orbiting specular highlights.
- Includes pointer gravitational lag and antipode easing to prevent highlight snapping.
Frameworks & tools
React, Next.js, Tailwind CSS, SVG Filters, and HTML5 Canvas 2D API.
Why this beats prompting it yourself
Prompting often yields generic CSS glass effects that ignore the complex physics of refraction and fluid simulation. This skill provides the precise mathematical constants for incommensurate shear and arc-length parameterization required to prevent visual artifacts like "pearl beading" or canvas clipping.
Use cases
- Building high-fidelity cyberpunk or futuristic UI components.
- Creating luxury call-to-action buttons that respond to cursor movement with fluid physics.
- Implementing high-performance animated UI elements that consume zero GPU cycles when idle.
Known limitations
Requires SVG filter support for full refractive effects. Canvas sizing must be handled via JavaScript to avoid padding-box resolution bugs inherent to CSS.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
9 people have installed this skill.
Trust & safety
Security scanned
Verified clean 9 days ago
- Free to download with an account
Needs access to
W3