Skip to content
Get packs

Liquid Metal Border

Adds animated metallic WebGL borders to React buttons, cards and selected controls

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
3 files

What it does

Teaches the agent how to wrap an existing React button, link, chip or card with the metal-fx component, which draws an animated liquid-metal ring around it. The skill sets rules so the effect is used sparingly on active, selected or focused elements, keeps the real control semantic and accessible, falls back to a plain CSS border or focus outline, and pauses the animation when it is not needed or when reduced motion is requested.

Great for

  • React developers adding premium highlight effects to buttons, tabs or cards
  • Designers prototyping metallic selected states in a React app
  • Teams that want consistent accessibility rules around decorative WebGL effects

Skip it if

  • Non-React projects, since the examples and component depend on React 18 or newer (the skill cannot help with plain HTML or other frameworks directly)
  • Sites where many controls need animated borders at once, because the skill itself warns against decorating every control and WebGL may hurt performance
  • Projects that cannot add a third-party npm package or need the effect to carry essential state on its own, which the skill explicitly forbids

Try asking

  • “Add a chromatic liquid-metal border around my Upgrade to Pro button”
  • “Make the selected tab in our segmented control glow with a silver metal border and keep it accessible”
  • “Wrap this feature card in a dark-mode metal frame with reduced motion support”
  • “Troubleshoot why the metal-fx ring is blurry or slow on my Next.js page”
Step-by-step guide: how to use Liquid Metal BorderInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    liquid-metal-border.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip liquid-metal-border.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip liquid-metal-border.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the real control and its framework version (for example React 19 with Next.js App Router) so the agent inspects the right project before editing
  • Ask for the static fallback and focus outline explicitly, and say whether the app has a manual theme toggle
  • Install and check the metal-fx version yourself, since the skill says the prop list should be verified against the installed release

What's inside

  • agents/openai.yaml
  • REFERENCES.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.