libraries-dev
Installation
SKILL.md
Libraries.dev
Seven UI effect libraries for AI-era interfaces, each an npm package with a React component. This skill knows what each one is for, how to install it, and the options its libraries.dev detail page offers. Read the library's reference file before writing any code for it; never guess a prop.
Quick reference
| Library | Package | Component | Use it for | Reference |
|---|---|---|---|---|
| Border beam | border-beam |
BorderBeam |
A light that travels around an element's border: AI inputs, active cards, highlighted buttons. | 01-border-beam.md |
| Thinking orbs | thinking-orbs |
ThinkingOrb |
Small dot-orb indicators for what an agent is doing: thinking, searching, writing, listening. | 02-thinking-orbs.md |
| Gooey | liquid-gooey |
Liquid |
Liquid, melting and merging shapes and images: gooey menus, blob transitions, organic backdrops. | 03-liquid-gooey.md |
| Voice | voice-glow |
VoiceBeam |
An audio-reactive glow for voice input, dictation and voice agents. | 04-voice-glow.md |
| Bot avatars | bot-avatars |
BotAvatar |
Animated bot characters with idle and working states for agents and assistants. | 05-bot-avatars.md |
| Liquid metal | metal-fx |
MetalFx |
A real-time liquid metal material for buttons, badges, icons and text. | 06-metal-fx.md |
| Image | img-fx |
ImageGeneration |
Image generation placeholders and reveals while an image is being made or loaded. | 07-img-fx.md |