Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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. Do not use on text-dense reading surfaces.
.claude/skills/nexu-io-spotlight-card/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-03 | ✗→✓ | ▲ Improved | -2% | 0% |
| case-07 | ✗→✓ | ▲ Improved | -49% | 0% |
| case-08 | ✗→✓ | ▲ Improved | -54% | 0% |
| case-17 | ✗→✓ | ▲ Improved | -53% | 0% |
| case-04 | ✓→✓ | = Same ✓ | -19% | 0% |
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.html <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.Other measured skills in the registry, with their headline benchmark lift.