← All skills

Beam glow states

Create React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow.

Install

npx degit MengTo/Skills/agent-skills/web-design/beam-glow-states .claude/skills/beam-glow-states

Run it in your project root, then ask your agent for what you want. More detail

What it built

A page built by the Beam glow states design skill
A page this skill built when we ran it. Your result will differ with your brief.

What it does

Create React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow. Use when a card, button, input, tab, option, task panel, or agent surface needs a restrained traveling or breathing beam; includes installation, imports, prop selection, state wiring, reduced motion, accessibility, and performance and layout guardrails.

Straight from the skill's own SKILL.md. This is what your agent reads.