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 subhansh-dev/agent-maxxing --skill interaction-designgit clone --depth 1 https://github.com/subhansh-dev/agent-maxxingWrote 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/subhansh-dev/agent-maxxing/interaction-design)<a href="https://agentmods.dev/skills/subhansh-dev/agent-maxxing/interaction-design"><img src="https://agentmods.dev/badge/skills/subhansh-dev/agent-maxxing/interaction-design/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/subhansh-dev/agent-maxxing/interaction-design"><img src="https://agentmods.dev/badge/skills/subhansh-dev/agent-maxxing/interaction-design.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.00019 | $0.01000 |
| Opus 5 | $0.00010 | $0.00500 |
| Sonnet 5 | $0.00004 | $0.00200 |
| Haiku 4.5 | $0.00002 | $0.00100 |
Grade A, and why
interaction-design 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 5d 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 — 129 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Interaction Design
The Eight Interactive States
Every interactive element needs these states designed:
| State | When | Visual Treatment |
|---|---|---|
| Default | At rest | Base styling |
| Hover | Pointer over (not touch) | Subtle lift, color shift |
| Focus | Keyboard/programmatic focus | Visible ring (see below) |
| Active | Being pressed | Pressed in, darker |
| Disabled | Not interactive | Reduced opacity, no pointer |
| Loading | Processing | Spinner, skeleton |
| Error | Invalid state | Red border, icon, message |
| Success | Completed | Green check, confirmation |
The common miss: Designing hover without focus, or vice versa. They're different. Keyboard users never see hover states.
Focus Rings: Do Them Right
Never outline: none without replacement. It's an accessibility violation. Instead, use :focus-visible to show focus only for keyboard users:
/* Hide focus ring for mouse/touch */
button:focus {
outline: none;
}
/* Show focus ring for keyboard */
button:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
Focus ring design:
- High contrast (3:1 minimum against adjacent colors)
- 2-3px thick
- Offset from element (not inside it)
- Consistent across all interactive elements
Form Design: The Non-Obvious
Placeholders aren't labels—they disappear on input. Always use visible <label> elements. Validate on blur, not on every keystroke (exception: password strength). Place errors below fields with aria-describedby connecting them.
Loading States
Optimistic updates: Show success immediately, rollback on failure. Use for low-stakes actions (likes, follows), not payments or destructive actions. Skeleton screens > spinners—they preview content shape and feel faster than generic spinners.
Modals: The Inert Approach
Focus trapping in modals used to require complex JavaScript. Now use the inert attribute:
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.
- 5d ago First seen · 129 lines · 19 tokens per session scan A 0f005c8d6731
interaction-design is a skill published in the GitHub repository subhansh-dev/agent-maxxing (2 stars, last pushed 1mo ago), licensed MIT. It adds 19 tokens to every session and 1,000 once invoked, about $0.0001 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-09-03.
Other skills, from other repositories
frontend-design
Produce intentional, responsive, accessible UI work and perform visual QA instead of generic component assembly.
frame-build-minimal
Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.
frontend-design
A design and coding guide for building distinctive web interfaces, including pages, dashboards, landing pages, and reusable components.
component-design
Apply a coherent visual system, responsive behavior, interaction states, and accessibility to Kun components.
uicraft
Create, improve, audit, and polish distinctive production-grade web interfaces, including marketing/landing pages and personal portfolio sites. Use for UI or frontend design, responsive layouts, typography, color, motion, UX copy, accessibility, performance, design-system alignment, onboarding, edge cases, or visual…
design-system-starter
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.