Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →nexu-io/shine-border
Give one hero card or CTA quiet premium life: a soft band of light travels around its border. One shining element per view; keep it slow and low-contrast. Pure CSS. Fully static under prefers-reduced-motion. Do not put several on screen at once.
Passed 21 of 22 test cases with the skill, and 11 of 22 without it.
and 7 more in the full report
10 fixed11 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 10 test cases the skill fixed. Same model, same prompt, with and without the skill.
When no custom timing override is provided, how long does one full loop of the border light animation take by default?
| Checked | Without skill | With skill |
|---|---|---|
| States that the default animation duration is 4 seconds | Missed | Passed |
The instructions your model reads when the skill loads.
A light that travels around an element's border. Part of
motion-anything; obeys MOTION-SPEC.md. Technique
popularized by Magic UI, reimplemented dependency-free (pure CSS).
shine-border.css into the project and link it.<div class="shine"> … </div>
--shine-color, --shine-width, and the animation duration (default 4s).prefers-reduced-motion the light stops and a plain static border remains.@property --shine-angle) — compositor-friendly.--shine-* per component as needed.test cases passed, vs 11 / 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.