Skip to content
Get packs

Beam Glow States

Add restrained animated edge glows to React cards, buttons and inputs to signal loading or selection.

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

What it does

This skill teaches an AI agent how to build React interface states that use the border-beam package, which draws a soft animated glowing border around a component. The agent learns which glow style to use for loading, selected, focused, or active elements, how to wire it to real app state, and how to keep it accessible, such as respecting reduced-motion settings and pairing the glow with text labels and proper ARIA attributes. The agent is guided to treat the glow as decoration rather than the only signal of meaning.

Great for

  • React developers who want polished loading or selected states for cards, buttons, inputs or tabs
  • Designers or front-end engineers prototyping an agent or AI-task interface with subtle motion accents
  • Teams that want accessibility and performance guardrails applied automatically to decorative animations

Skip it if

  • Projects not using React (the guidance and component API are React-specific)
  • Pages where continuous animation must be avoided, such as users sensitive to motion, unless reduced-motion handling is added carefully
  • Anyone expecting a general design system; it only covers this one effect and its state logic

Try asking

  • “Add a pulsing ocean-colored beam to this card while the preview is generating, and keep a text status label”
  • “Make the selected tab show a static outline plus a slow mono beam using aria-selected”
  • “Wrap my search input in a line-style beam that appears only while it has focus”
Step-by-step guide: how to use Beam Glow StatesInstall, 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.

    beam-glow-states.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip beam-glow-states.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip beam-glow-states.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

  • Ask the agent to confirm the installed border-beam version against the official README, since the guidance was verified against 1.3.0 only
  • Keep the BorderBeam component mounted and toggle its active prop rather than unmounting it, so the built-in fade-out works
  • Limit the high-intensity pulse-outside effect to one prominent element per view

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.