Guide · Agent skill
How to use the Beam Glow States agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The beam-glow-states 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. It is for React developers and front-end engineers who want loading, selected, focus or active states on cards, buttons, inputs and tabs. After following this guide you will know how to install the skill, trigger it with a plain request, and check the output for accessibility and motion safety.
Beam Glow StatesMengTo/Skills · MIT Download the skill Quick start
- 1Download and unzip the skill. Download the ZIP from the directory page and unzip it into ~/.claude/skills/ or your project's .claude/skills/ folder. Alternatively, upload it under Settings → Capabilities → Skills in the Claude apps.
- 2Install border-beam. In your React project, install the border-beam package with npm, pnpm, yarn or bun. Your project needs React and React DOM 18 or newer.
- 3Describe the state you need. Ask the agent in plain language for a loading, selected or focus glow on a named element, such as a card, button, input or tab.
- 4Wire the beam to real state. Tie the active prop to your actual pending, selected or focused state so the glow appears only when the state is true.
- 5Add reduced-motion and text cues. Use the reduced-motion hook the skill provides, and keep a visible text label and static border so the state is clear without animation.
- 6Check accessibility attributes. Confirm the correct ARIA attribute is used: aria-busy for loading, aria-selected for tabs and options, aria-current for the current item, and aria-pressed only for toggles.
What an agent skill is and what this one does
An agent skill is a folder with a SKILL.md file that gives an AI agent extra instructions for one kind of task. When the agent recognises a matching request, it loads those instructions and follows them.
This skill covers one effect and its state logic. It tells the agent which border-beam size and colour variant suits each state, how to wire the beam to real app state, and how to keep the state understandable without the animation.
- Picks an effect by state: pulse-inner for loading, md or pulse-inner for selected, sm or line for focus.
- Wires the beam's active prop to real component state such as pending or selected.
- Adds reduced-motion handling and pairs the glow with text labels and ARIA attributes.
- Treats the glow as decoration, not the only signal of meaning.
Install the beam-glow-states skill
Download the ZIP for the skill from the directory page and unzip it. The skill folder contains agents/openai.yaml, REFERENCES.md and SKILL.md.
For a personal install, unzip it into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder.
In the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Project only: .claude/skills/ inside your repository
- Claude apps: Settings → Capabilities → Skills
Install the border-beam package in your project
The skill assumes your React project uses border-beam. The guidance was verified against border-beam version 1.3.0, so recheck the official README and exported types if your installed version differs.
Install the package with the package manager your repository already uses. The package requires React and React DOM 18 or newer and ships TypeScript declarations. It injects its own styles, so you do not import a separate CSS file.
npm install border-beam
pnpm add border-beam
yarn add border-beam
bun add border-beamTrigger the skill with a natural request
You do not need a special command. Describe the interface state you want in plain language and name the element. The agent should match the request to this skill when it involves a glow, beam, or animated state on a React component.
Good requests name the element, the state and the feel you want. Mention if you need reduced motion or accessibility handling, though the skill covers these by default.
- "Add a slow breathing glow to this task card while the preview is generating."
- "Give the selected tab a subtle static-plus-beam selected state using border-beam."
- "Make the search input show a traveling bottom edge while it is focused, and respect reduced motion."
- "Wire a loading beam to our pending state and keep the status text visible."
Example: a loading card
For a loading card, the skill uses the pulse-inner size with a strength around 0.55 to 0.75 and a duration of 2.3 to 3 seconds. The beam is kept mounted and toggled with the active prop, so the built-in fade-out runs. The loading text stays visible and aria-busy reflects the pending state.
Keep the status label as the real cue. The beam is decoration on top of it.
- Show a visible status label or progress value.
- Do not show the beam for work that finishes in about 150ms or less.
- Once shown, keep the loading presentation for about 400ms to 600ms to avoid a flash.
- Keep cancel, retry and error controls usable; the effect layers use pointer-events: none.
Safety and what the skill needs
The skill requires React 18 or newer and React DOM 18 or newer, plus the border-beam npm package installed with npm, pnpm, yarn or bun. It does not run scripts and does not use the network. The skill's own guidance is limited to writing React code and CSS for your project.
Review the code the agent writes before committing it, as you would with any generated code. Check that the component uses the reduced-motion hook and that the beam is never the only indicator of a state.
- Runs scripts: no
- Uses network: no
- Licence: MIT
Tips for better results
Ask for one beam per view for high-priority states, and keep persistent selected states slower than the default travel speed. For large collections, animate only the newly selected item and keep the static selected style afterwards.
Where states overlap, ask the agent to resolve them explicitly, with loading above selection, selection above focus and focus above hover.
- Start with mono colour for neutral product UI, ocean for cool technical states, sunset for warm urgency.
- Use aria-selected for tabs and listboxes, aria-current for the current page or step, and aria-pressed only for toggle buttons.
- Give the non-animated state a static border or outline as a fallback.
What people use it for
- Showing a breathing glow on a card while an AI task is generating its output.
- Marking the selected option in a list or the active tab with a static outline plus a slow beam.
- Highlighting a prompt or search input with a traveling bottom edge while it has focus.
- Indicating one high-priority live task in an agent dashboard with a single outward halo.
Frequently asked questions
Is the beam-glow-states skill free?
The skill is published under the MIT licence, as listed on the directory page. The border-beam package is a separate npm package that you install into your own project.
What do I need to use beam-glow-states?
You need a React project using React and React DOM 18 or newer, plus the border-beam npm package installed with npm, pnpm, yarn or bun. The skill is written for React only.
Where do I put the skill files?
Unzip the downloaded ZIP into ~/.claude/skills/ for a personal install or into .claude/skills/ in a project for a project-only install. You can also upload it under Settings → Capabilities → Skills in the Claude apps.
Does the skill run scripts or access the internet?
According to the directory listing, the skill runs no scripts and uses no network. It provides instructions for writing React code and CSS.
Can I use this skill with a framework other than React?
No. The guidance and the component API are React-specific, so it does not apply to Vue, Svelte or plain JavaScript projects.
Does the glow respect reduced-motion settings?
The skill tells the agent to check prefers-reduced-motion and to disable the beam when it is set. Pulse presets stop under that setting, while rotate and line presets must be disabled by your code, as the skill explains.
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 are a React developer or designer who wants polished loading, selected or focus states with a restrained animated glow and sensible accessibility defaults. Pick something else if your project is not React, if you need a full design system, or if your users must avoid motion and you are not prepared to add reduced-motion handling yourself.
Download the skill