Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →nexu-io/spotlight-card
Give feature/pricing cards a premium feel: a soft radial spotlight follows the cursor across the card and lifts its border. Keep the glow subtle and low-contrast. Falls back to a plain static border under prefers-reduced-motion and on touch.
Passed 19 of 22 test cases with the skill, and 15 of 22 without it.
and 1 more in the full report
4 fixed15 passed either way3 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
Which CSS custom property receives the vertical offset position of the pointer relative to the spotlight element?
| Checked | Without skill | With skill |
|---|---|---|
| The response specifies --my as the vertical coordinate variable. | Missed | Passed |
The instructions your model reads when the skill loads.
A radial spotlight that follows the cursor across a card. Part of
motion-anything; obeys MOTION-SPEC.md. Technique
popularized by Aceternity UI, reimplemented dependency-free.
spotlight-card.css and spotlight-card.js into the project, and link them.<div class="spotlight"> … </div>
.spotlight. JS writes --mx/--my; the CSS paints the glow there.prefers-reduced-motion and on (hover: none) touch devices (static border stays).attachSpotlight(ref.current) in useEffect, guarded by the same checks.test cases passed, vs 15 / 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.