Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add OneWave-AI/open-agent-stack --skill micro-interactionsgit clone --depth 1 https://github.com/OneWave-AI/open-agent-stackWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/onewave-ai/open-agent-stack/micro-interactions)<a href="https://agentmods.dev/skills/onewave-ai/open-agent-stack/micro-interactions"><img src="https://agentmods.dev/badge/skills/onewave-ai/open-agent-stack/micro-interactions/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/onewave-ai/open-agent-stack/micro-interactions"><img src="https://agentmods.dev/badge/skills/onewave-ai/open-agent-stack/micro-interactions.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00058 | $0.01003 |
| Opus 5.5 | $0.00023 | $0.00401 |
| Sonnet 5.5 | $0.00012 | $0.00201 |
| Haiku 4.5 | $0.00006 | $0.00100 |
Grade A, and why
micro-interactions scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 43 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Micro-Interactions
Big animations impress once. Micro-interactions are what make an app feel expensive on the hundredth use: the button that acknowledges a press, the toggle that moves like an object, the row that tells you it is clickable before you click it. This is also where scattered, per-element effects do the most damage -- ten different hover treatments read as ten different authors.
Draw every value from the motion system (--dur-fast, --ease-out); this skill is about which interactions get motion and what they do.
The interaction set
Hover -- available on the element, not a new element appearing. Background, border, or foreground shift; at most a 1-2px lift or scale(1.02). Never reveal essential information only on hover: it does not exist on touch. Guard hover styles with @media (hover: hover) so mobile does not get sticky hover states after a tap.
Press -- the most underrated one. scale(0.97) on :active, at --dur-fast. It costs one line and is the difference between a div and a button.
Focus -- designed, never default. A visible ring using the brand's accent, on :focus-visible so it appears for keyboard users and not on mouse click. Removing focus outlines without replacing them is an accessibility failure, not a style choice.
Loading -- state-appropriate. Under ~300ms show nothing (a flashed spinner is worse than a pause). Up to a few seconds, a spinner or an inline button state. Longer, and for content-shaped waits, use a skeleton that matches the real layout. A skeleton whose shape does not match what loads causes a layout jump, which is worse than a spinner.
Success / error -- the result must be felt, not just rendered. A brief color shift, a checkmark that draws, an error that shakes once (one cycle, 300ms, never a loop). Errors also need to be announced, not only shown -- aria-live on the message.
Toggles, accordions, tabs -- these move something that exists, so the motion is positional and continuous. --ease-in-out. For accordions use grid-template-rows: 0fr → 1fr (animatable, unlike height: auto) or the newer interpolate-size: allow-keywords.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 43 lines · 58 tokens per session scan A 785bd4af6a40
micro-interactions is a skill published in the GitHub repository OneWave-AI/open-agent-stack (5 stars, last pushed 2mo ago), licensed MIT. It adds 58 tokens to every session and 1,003 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
claude-design
Design one-off HTML artifacts (landing, deck, prototype).
pretext
Build creative browser demos with DOM-free text layout.
sketch
Throwaway HTML mockups: 2-3 design variants to compare.
scrollcraft
Premium scroll-driven landing pages; scroll = timeline.
inspecting-hermes-desktop-dom
Read the live Hermes desktop DOM/CSS over CDP.
impeccable
Frontend design guidance, upstream-maintained (impeccable).