Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →nexu-io/magnetic-button
Make a primary button feel alive by gently pulling it toward the cursor as it approaches, then springing back. Keep it subtle and reserve it for one or two primary actions. Disabled on touch and under prefers-reduced-motion.
Passed 21 of 22 test cases with the skill, and 14 of 22 without it.
and 9 more in the full report
7 fixed14 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 7 test cases the skill fixed. Same model, same prompt, with and without the skill.
Provide the exact HTML button element markup for a primary landing page CTA button using the standard magnetic class and recommended strength attribute value.
| Checked | Without skill | With skill |
|---|---|---|
| Includes class magnetic in the button markup | Passed | Passed |
| Sets data-magnet-strength to 0.3 | Missed | Passed |
The instructions your model reads when the skill loads.
A button that leans toward the cursor, then springs back. Part of
motion-anything; obeys MOTION-SPEC.md.
magnetic-button.css and magnetic-button.js into the project, and link them.<button class="magnetic" data-magnet-strength="0.3">Get started</button>
.magnetic. Keep strength small (~0.2–0.4) so the pull stays subtle.prefers-reduced-motion and on (hover: none) touch devices.pointerleave.attachMagnetic(ref.current) in useEffect, guarded by the same reduced-motion/touch checks.test cases passed, vs 14 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.