Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →nexu-io/ripple-press
Acknowledge a tap/click with a ripple that blooms from the exact press point. Fast and low-opacity so it reads as feedback, not decoration. No ripple under prefers-reduced-motion (native :active covers it). Avoid on destructive actions and text links.
Passed 17 of 22 test cases with the skill, and 8 of 22 without it.
and 14 more in the full report
10 fixed7 passed either way4 still failing1 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.
What HTML attribute or CSS class selector should be applied to standard markup elements so that press waves automatically attach without manual querySelector loops in vanilla JS?
| Checked | Without skill | With skill |
|---|---|---|
| Specifies decorating HTML elements with the ripple CSS class name. | Missed | Passed |
| Explains that the script automatically binds press handlers to elements matching the class selector. | Missed | Passed |
The instructions your model reads when the skill loads.
A ripple that blooms from the press point. Part of
motion-anything; obeys MOTION-SPEC.md. Based on the
Material state-layer interaction, reimplemented dependency-free.
ripple.css and ripple.js into the project, and link them.position:relative; overflow:hidden — the CSS sets this):
<button class="ripple">Save</button>
.ripple; a wave spawns at the pointer point and cleans itself up.prefers-reduced-motion; the native :active state provides feedback.animationend.attachRipple(ref.current) in useEffect. The tint comes from the element's
currentColor — set text color to control it.test cases passed, vs 8 / 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.