How do I install the Spotlight Card skill?

Run npx skillmds@latest add xpert-ai/spotlight-card in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Spotlight Card safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Spotlight Card?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Spotlight Card free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Spotlight Card?

xpert-ai (@xpert-ai) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Spotlight Card by xpert-ai — Agent Skill

Name: Spotlight Card
Author: xpert-ai

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. Do not use on text-dense reading surfaces.

xpert-ai b341164 5 files · 7.2 KB Updated Sep 17, 2026

File contents

spotlight-card

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.

When to use it

Feature cards, pricing tiles, or a card grid where one should light up under the pointer.

When NOT to use it (restraint)

Text-dense reading surfaces — the glow distracts. Keep it low-contrast and subtle.
Touch-only contexts — there is no cursor; it falls back to a static border automatically.

How to apply

Copy spotlight-card.css and spotlight-card.js into the project, and link them.
Mark the card:
```
<div class="spotlight"> … </div>
```
Auto-attaches to .spotlight. JS writes --mx/--my; the CSS paints the glow there.

Accessibility & performance

Disabled under prefers-reduced-motion and on (hover: none) touch devices (static border stays).
Paints a radial-gradient only — no layout thrash.

Framework notes

React: call attachSpotlight(ref.current) in useEffect, guarded by the same checks.

Frequently asked questions