Guide · Agent skill

How to use the Liquid Metal Border agent skill

Updated 2026-11-02 · written with AI from the project's own documentation and checked against our catalogue data

The liquid-metal-border skill teaches an AI agent to wrap an existing React button, link, chip or card with the metal-fx component, which draws an animated liquid-metal WebGL ring around it. This guide explains what the skill does, how to install it, how to ask for it in plain language, and what to check before you ship the effect. You do not need prior experience with agent skills to follow it.

Liquid Metal BorderMengTo/Skills · MIT Download the skill

Quick start

1Download and unzip the skill. Download the liquid-metal-border ZIP from this page and unzip it so you have a liquid-metal-border folder containing SKILL.md.
2Place the folder. Move the folder to ~/.claude/skills/ for personal use or to .claude/skills/ inside a project. Alternatively, upload it under Settings → Capabilities → Skills in the Claude apps.
3Install metal-fx. In your React project, run npm install metal-fx or the equivalent with pnpm, yarn or bun. Confirm react and react-dom are version 18 or newer.
4Ask for the effect. Describe the control, such as a selected tab or primary button, and say you want a liquid metal border. Name the state that should drive it.
5Review the output. Check that the real control is still a button, link or other semantic element, and that a plain border or focus outline remains as the fallback.
6Test motion and themes. Check the effect in light and dark mode, and with reduced motion turned on in your operating system. Confirm inactive instances are paused.

What the skill makes the agent do

The skill gives the agent a set of rules and examples for the metal-fx React component, made by Jakubantalik. When you ask for a metallic highlight, the agent wraps a real host element such as a button, a link, a div or an article with the MetalFx component and tunes its look.

The skill is opinionated about restraint. It asks the agent to reserve the animated border for active, selected, focused, hovered or primary surfaces, to keep the real control semantic and accessible, and to keep a plain CSS border or focus outline as the fallback. It also tells the agent to pause non-active instances and reduced-motion experiences.

Wraps one existing React host element with the MetalFx component
Drives the effect from real state such as selected, hover or focus
Keeps aria-pressed, aria-selected or native selected state as the real signal
Pauses animation when it is not needed or when reduced motion is requested
Falls back to a static border or focus outline

Install the skill from a ZIP file

Download the ZIP for the liquid-metal-border skill from this page and unzip it. The skill folder contains agents/openai.yaml, REFERENCES.md and SKILL.md. Place the unzipped liquid-metal-border folder in one of these locations:

For all of your projects, put it in ~/.claude/skills/. For a single project, put it in that project's .claude/skills/ folder. You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.

Personal: ~/.claude/skills/liquid-metal-border
Project: .claude/skills/liquid-metal-border inside your project

Install the metal-fx package in your React project

The skill does not install the effect for you. Your project needs the metal-fx npm package, which you add with whichever package manager it already uses. The skill needs React 18 or newer with react and react-dom.

Do not import a stylesheet. The package injects its own component styles. It supports ESM and CommonJS builds, is SSR-safe, and mounts the WebGL pipeline after hydration. In a Next.js App Router project, render MetalFx from a Client Component.

npm, pnpm, yarn or bun can add the package
Check that react and react-dom are version 18 or newer
Next.js App Router: render MetalFx from a Client Component

npm install metal-fx

Trigger the skill with natural requests

You do not need special syntax. Describe the surface and the state you want, and mention the metal effect. The skill's description covers buttons, icon controls, chips, tabs, cards and selected surfaces, and troubleshooting of presets, themes, strength, glow, reflections, sizing, radius, animation, accessibility, SSR and performance.

Be specific about where the effect goes and when it should show. Ask for a restrained treatment on one control rather than a whole page.

Add a liquid metal border to the selected tab in our TabBar component.
Wrap this Upgrade button in MetalFx with the chromatic preset and keep the focus outline.
Our selected filter chips should have a silver metal border. Make it pause for reduced motion.
The metal border on this card is causing jank on mobile. Help me tune strength and pausing.

Start with a baseline button

The skill starts with a restrained border before adding reflections or custom geometry. The wrapper measures the child, paints the metal ring on top, and keeps the child interactive. Size the child normally with CSS, Tailwind or inline styles.

The main props it uses are variant, preset, theme and strength. Variant button gives a pill-style baseline and circle gives a compact circular one. Preset chooses chromatic, silver or gold. Theme can be auto, dark or light. Strength runs from 0 to 1.

variant: button (default) or circle
preset: chromatic (default), silver or gold
theme: auto (default), dark or light
strength: number from 0 to 1, default 1

import { MetalFx } from 'metal-fx';

export function UpgradeButton() {
  return (
    <MetalFx variant='button' preset='chromatic' theme='auto' strength={0.85}>
      <button type='button'>Upgrade to Pro</button>
    </MetalFx>
  );
}

Use the active-state pattern for selected controls

For selected, hovered or focused controls, keep one mounted instance and drive its intensity from real component state. Pair the visual effect with aria-pressed, aria-selected or the native selected mechanism, so the effect is never the only signal.

The skill's pattern also checks prefers-reduced-motion. When reduced motion is requested or the control is not highlighted, it uses paused and disableGlow, and it keeps the focus outline on the real control. Use paused to freeze the last frame without hiding the ring. Strength changes rendered opacity but does not slow the shader.

Pass selected, hover and focus state into strength and paused
Use aria-pressed or aria-selected on the real button
Keep a visible :focus-visible outline on the host control
Set normalizeHostStyles to false when you keep your own focus outline

Check light mode, dark mode and performance

The skill asks the agent to test light and dark modes separately. Reflections render only in dark mode. If your app has a manual theme toggle, the skill tells the agent to use that state instead of theme auto, because auto follows the operating system and may not match your toggle.

Use the effect sparingly. The skill warns against decorating every control, and WebGL can hurt performance when many instances run at once. Pause instances that are not active.

Test light and dark modes independently
Use reflectionTargets only where reflected light is needed; it is dark mode only
Pause non-active instances
Avoid putting the ring on many controls at the same time

What people use it for

Adding a metallic selected state to tabs in a React dashboard
Giving a primary Upgrade or Buy button a premium chromatic ring
Highlighting selected filter chips or icon toggles with a silver border
Prototyping a gold-accented feature card with a static fallback border

Frequently asked questions

How do I install the liquid-metal-border agent skill?

Download the ZIP from this page and unzip it. Put the liquid-metal-border folder in ~/.claude/skills/ for personal use or in .claude/skills/ inside a project. You can also upload it in the Claude apps under Settings → Capabilities → Skills.

What does the metal-fx package need to run?

The skill requires React 18 or newer with react and react-dom, a Node.js package manager such as npm, pnpm, yarn or bun to install metal-fx, and a browser with WebGL support. Next.js App Router projects need MetalFx rendered from a Client Component.

Is the liquid-metal-border skill free to use?

The skill is listed under the MIT licence. Check the licence file in the source repository for the full terms before you rely on it in a commercial project.

Does the skill run scripts or use the network?

According to its listing, the skill runs no scripts and uses no network access. Installing the metal-fx npm package is a separate step that your package manager performs.

Why does my liquid metal border not show in dark mode or light mode?

Test each theme separately. Reflections only render in dark mode. If your app has its own theme toggle, use that state instead of theme auto, because auto follows the operating system preference.

Can I use this skill with plain HTML or Vue?

No. The skill is for React and its examples depend on the metal-fx React component. For other frameworks, the skill cannot help directly.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you build in React and want a premium metallic highlight on a few active, selected or focused controls, with clear accessibility rules built in. Pick something else if you work outside React, need animated borders on many controls at once, or cannot add a third-party npm package.

Download the skill