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 agentmods add skills/random6913/claude-code-superkit/frontend-ui-interaction-reviewernpx skills add RaNDoM6913/claude-code-superkit --skill frontend-ui-interaction-reviewergit clone --depth 1 https://github.com/RaNDoM6913/claude-code-superkitWrote 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/random6913/claude-code-superkit/frontend-ui-interaction-reviewer)<a href="https://agentmods.dev/skills/random6913/claude-code-superkit/frontend-ui-interaction-reviewer"><img src="https://agentmods.dev/badge/skills/random6913/claude-code-superkit/frontend-ui-interaction-reviewer.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 | $0.00044 | $0.00997 |
| Opus 5 | $0.00022 | $0.00498 |
| Sonnet 5 | $0.00009 | $0.00199 |
| Haiku 4.5 | $0.00004 | $0.00100 |
Grade A, and why
frontend-ui-interaction-reviewer 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 4d 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 — 79 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend UI Interaction Reviewer
Activates on: button / modal / drawer / dialog / form / input / tooltip / menu / tab / toast / popover changes · focus-state changes · loading/empty/error UI · microcopy · user asks about interactions / components / accessibility / polish while UI files active.
Phase 0: Context
Read AGENTS.md or CLAUDE.md, component library in use, motion library, i18n approach.
Phase 1: Buttons
:activestate present?transform: scale(0.97)100–160ms. Absent → WARNING- Disabled state visible from 20ft? → WARNING if just
cursor: not-allowed - Icon-only button
aria-label? → CRITICAL if missing - Icon-only button tooltip ≥400ms delay? → SUGGESTION
- Hit target ≥44×44px on touch? → WARNING if <32×32 on desktop
- Specific verb label (
Delete projectnotConfirm)? → WARNING for generic destructive label
Phase 2: Modals & Drawers
transform-origin: modals from center · popovers from trigger (var(--radix-popover-content-transform-origin)or equivalent)- Entry/exit direction consistency: toast from right enters AND exits right
- Tinted overlay (
oklch(... / 0.5)) notrgba(0,0,0,0.5)→ SUGGESTION - Body scroll-lock with scrollbar-padding compensation → WARNING if missing
- Focus trap when open, focus returns to trigger on close → CRITICAL if missing
- iOS-style drawer uses
cubic-bezier(0.32, 0.72, 0, 1)or spring → SUGGESTION
Phase 3: Forms
- Top-aligned labels default; floating labels on serious forms → WARNING
- Validation: onSubmit OR onBlur, never onFocus → WARNING if onFocus
- Errors INLINE under field, not banner top → WARNING
- Specific error messages ("Email already registered. Sign in or use another.") not "Invalid input" / "Error: 422" → CRITICAL
- Required fields marked visually +
aria-required→ WARNING if missing visual - Submit button state lifecycle (idle/pressed/loading/success/error) → WARNING if partial
Phase 4: Focus States
:focus-visiblenot:focus(mouse users don't see focus on click) → WARNING if:focus- Custom ring with ≥3:1 contrast vs element AND background → WARNING if default on colored surface
outline: 0without replacement → CRITICAL
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.
- 4d ago First seen · 79 lines · 44 tokens per session scan A c14dfca6507f
frontend-ui-interaction-reviewer is a skill published in the GitHub repository RaNDoM6913/claude-code-superkit (2 stars, last pushed 1mo ago), licensed MIT. It adds 44 tokens to every session and 997 once invoked, about $0.0002 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
devx-ux
Activate when designing or modifying CLI command surfaces, command help text, install/init/run flows, error wording, or first-run experience in the APM CLI -- even when the user does not say "UX" explicitly.
cli-logging-ux
Use this skill when editing or creating CLI output, logging, warnings, error messages, progress indicators, or diagnostic summaries in the APM codebase. Activate whenever code touches console helpers (richsuccess, richwarning, richerror, richinfo, richecho), DiagnosticCollector, STATUSSYMBOLS, CommandLogger, or any…
cut-release
Use this skill to cut an APM release from the current worktree: assess whether the cycle since the last tag warrants a patch or minor bump (semver discipline against the merged-since-last-tag diff), sanitize the [Unreleased] CHANGELOG block into a dated version block with one concise "so what" entry per merged PR…
docs-sync
Use this skill whenever a pull request is opened, reopened, or synchronized in microsoft/apm to assess whether and how the documentation corpus must change to stay truthful with the proposed code change. Activate even when the PR title or body says nothing about docs -- the skill must run on every PR to detect silent…
docs-impact-architect
Use this skill when the docs-impact-classifier returns a structural verdict, signalling that the documentation TOC must change to accommodate the PR. Proposes TOC deltas (new pages, moves, merges) and emits new-page outline stubs that the doc-sync panel later fleshes out. Holds the 3-promise narrative (consume /…
design-an-interface
Produce 3+ radically different designs for a module, API, or interface, compare them in prose, and synthesize a recommendation. Use when asked to "design an interface", "shape this API", "design it twice", "explore module boundaries", or when planning a new deep module and the first idea is unlikely to be the best.…