Skip to main content
affpapa.org
RU EN
skill CX Codex

border-beam-react — Claude Code skill: what it does, how to install

Guides your coding agent to implement traveling border glow effects in React using the border-beam package with hardware-accelerated CSS.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add reason-machines/trending-skills --skill border-beam-react -a claude-code
Open on GitHub

What border-beam-react does

This skill supplies patterns for embedding the BorderBeam wrapper into React 18+ interfaces. It creates an animated beam traveling around cards, inputs, and action buttons. Because the visual effect runs directly on CSS @property, it utilizes GPU acceleration without pulling in heavy animation runtimes.

The wrapper inspects the first nested tag to copy its border-radius automatically. The beam layer keeps pointer-events: none, so wrapped controls stay fully clickable. You can choose presets like sm, md, or a bottom-only line, alongside predefined color themes such as colorful, ocean, sunset, and mono.

Older environments will fail: client browsers require Chrome 85+, Safari 15.4+, or Firefox 128+ to render the custom properties. The component also skips automatic prefers-reduced-motion detection, which means you must evaluate the media query in your own code and toggle the active prop.

What it helps with

  • wrap cards in a traveling neon glow effect without external motion libraries
  • add an animated highlight beneath input fields using the line preset
  • trigger border beam animation on hover or state change
  • adapt border glow colors and intensity for light or dark UI modes

Example prompts for the agent

  • Wrap this pricing card in BorderBeam with the sunset color palette
  • Add a traveling border glow to the search bar using the line preset
  • Set up BorderBeam to fade in only when the container is hovered

How to install border-beam-react

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill border-beam-react -a claude-code

2Manually: put the files in place

~/.claude/skills/border-beam-react/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/border-beam-react/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about border-beam-react

How to install border-beam-react in Claude Code?

Run npx skills add reason-machines/trending-skills --skill border-beam-react -a claude-code. Alternatively, place the specification file directly into ~/.claude/skills/border-beam-react/SKILL.md.

What does border-beam-react do?

It instructs your coding assistant on integrating the border-beam component into React applications. It provides the full props schema, including timing, brightness, color palettes, and radius overrides.

Does the component respect prefers-reduced-motion automatically?

No, it ignores system motion settings by default. You need to check the reduced-motion media query in your consumer code and pass the boolean flag to the active prop.

Similar skills

All skills for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set199

weft-ai-language Teaches coding assistants to write Weft workflows, connect typed LLM nodes, and manage human checkpoints with Restate. CX Codex +1 418installs lingbot-map-3d-reconstruction A skill for streaming 3D scene reconstruction from images or video: point clouds, camera poses, depth maps. Useful when you need geometry out of a long frame sequence. CX Codex +1 418installs meta-harness-optimization A skill for automated search over model harnesses: the scaffolding that decides what an agent stores, retrieves and sees while it works. CX Codex +1 413installs freebuff2api-openai-proxy Set up a Freebuff proxy with an OpenAI-style API, token rotation, and Docker deployment for compatible SDKs and CLI clients. CX Codex +1 410installs wx-favorites-report Pulls your WeChat for macOS favorites out of the encrypted database and turns them into a single interactive HTML report. CX Codex +1 401installs pgque-postgres-queue A skill that walks you through PgQue, a snapshot-based Postgres queue written in pure PL/pgSQL. Useful when events need to move inside the database. CX Codex +1 400installs aube-package-manager Guidance for using aube, a Rust-based Node.js package manager, across dependencies, workspaces, CI, and migrations from other package managers. CX Codex +1 392installs create-simulated-aeronautics-mod This skill covers development for Create Simulated, from force-providing blocks to physics contraptions. Use it when building Minecraft planes, airships, or land vehicles. CX Codex +1 391installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor