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 Dragoon0x/canon --skill canon-micro-interactionsgit clone --depth 1 https://github.com/Dragoon0x/canonWrote 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/dragoon0x/canon/canon-micro-interactions)<a href="https://agentmods.dev/skills/dragoon0x/canon/canon-micro-interactions"><img src="https://agentmods.dev/badge/skills/dragoon0x/canon/canon-micro-interactions.svg" alt="Measured on agentmods" 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.00074 | $0.00687 |
| Opus 5 | $0.00037 | $0.00344 |
| Sonnet 5 | $0.00015 | $0.00137 |
| Haiku 4.5 | $0.00007 | $0.00069 |
Grade A, and why
canon-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 8d 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 — 74 lines — stays where its author put it; the contents beside it link to each section on GitHub.
CANON · Micro-interactions
A micro-interaction is an animation that acknowledges an action. Toggle flips, hearts fill, checkmarks draw. The test is always: does removing it leave the user unsure whether the action worked?
The feedback loop
Every micro-interaction has four parts: trigger → rules → feedback → loop/exit.
- Trigger: user taps, hovers, or the system state changes.
- Rules: what should happen (toggle on, add to favorites, validate).
- Feedback: the visual response (switch slides, heart fills, check draws).
- Loop/exit: does it repeat? Reset? End?
Duration budget
Micro-interactions live in the 100–300ms envelope (canon-motion micro and short ranges). Longer and they block the next interaction.
| Interaction | Duration |
|---|---|
| Toggle switch slide | 150–200ms |
| Checkbox check-draw | 150ms |
| Like heart fill | 200–300ms |
| Button press scale | 100ms |
| Pull-to-refresh spin | continuous until complete |
| Swipe-to-dismiss | 200ms exit after threshold |
Easing
- Snappy:
cubic-bezier(0.2, 0, 0, 1)— quick start, soft land. For most toggles and taps. - Spring: acceptable for mobile-native feel (draggable elements). Use carefully — bounce can look childish.
- Linear: almost never. Feels mechanical.
What earns a micro-interaction
| Earns it | Doesn't |
|---|---|
| State changed (on→off, liked→unliked) | Data loaded (use skeleton, not animation) |
| Item added/removed from list | Passive content appearing |
| Drag threshold crossed | Hover on non-interactive element |
| User achieved something (completed task) | Every page transition |
prefers-reduced-motion
Every micro-interaction must degrade to instant state change under prefers-reduced-motion: reduce. No exceptions.
Anti-patterns
| Anti-pattern | Why it fails |
|---|---|
| Micro-interaction > 500ms | Blocks next action |
| Bouncing on every tap | Childish, exhausting |
| Animation on passive content | Unnecessary distraction |
| No reduced-motion fallback | Accessibility fail |
| Micro-interaction obscures the result | User unsure what happened |
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.
- 8d ago First seen · 74 lines · 74 tokens per session scan A 41ebf851a927
canon-micro-interactions is a skill published in the GitHub repository Dragoon0x/canon (5 stars, last pushed 4mo ago), licensed MIT. It adds 74 tokens to every session and 687 once invoked, about $0.0004 per session on Opus 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
accessibility
Use when making a web UI conform to WCAG 2.2 Level AA — axe-core or Lighthouse a11y violations, keyboard operability, focus management, ARIA roles/names/live regions, contrast, tap-target size. NOT palette or visual intent (that is design), NOT test-runner setup (that is testing-web), NOT LCP/page-speed (that is…
token-architecture
Design token architecture — multi-tier token systems, semantic naming, theme switching, CSS custom properties, Tailwind mapping, and Figma variable sync.
memoire-design-tooling
Set up and operate Mémoire's CLI, MCP server, agent kits, design preflight, UX audits, craft checks, tokens, and registry evidence. Use when a repository explicitly needs Mémoire tooling; use portable design skills when Mémoire is unavailable.
better-ui
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better"…
accessibility
Accessibility (a11y) workflow skill. Use this skill when the user needs Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible". Do NOT use for SEO (use seo)…
color-contrast-auditor
Detects and fixes color contrast violations using WCAG 2.1 guidelines and perceptual analysis. Expert in contrast ratio calculation, color blindness simulation, and providing accessible alternatives. Activate on "check contrast", "color accessibility", "WCAG audit", "readability check", "contrast ratio", "hard to…