Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →nexu-io/border-beam
Give one card or CTA a lively accent: a small bright comet of light travels around its border. Brighter/livelier than shine-border — use for a single "new"/"featured" element, one per view. Pure CSS; fully static under prefers-reduced-motion.
Passed 20 of 22 test cases with the skill, and 14 of 22 without it.
and 3 more in the full report
6 fixed14 passed either way2 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.
What is the standard out-of-the-box animation cycle duration for the traveling border beam effect before any custom overrides are set?
| Checked | Without skill | With skill |
|---|---|---|
| The response states that the default animation duration is 3 seconds. | Missed | Passed |
The instructions your model reads when the skill loads.
A bright comet that travels an element's border. Part of
motion-anything; obeys MOTION-SPEC.md. Technique
popularized by Magic UI, reimplemented dependency-free (pure CSS).
border-beam.css into the project and link it.<div class="beam"> … </div>
--beam-color, --beam-size, and the animation duration (default 3s).prefers-reduced-motion the beam stops; a plain static border remains.@property --beam-angle) — compositor-friendly.--beam-* per component.test cases passed, vs 14 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.