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/aziontech/webkit/webkit-ux-heuristicsnpx skills add aziontech/webkit --skill webkit-ux-heuristicsgit clone --depth 1 https://github.com/aziontech/webkitWrote 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/aziontech/webkit/webkit-ux-heuristics)<a href="https://agentmods.dev/skills/aziontech/webkit/webkit-ux-heuristics"><img src="https://agentmods.dev/badge/skills/aziontech/webkit/webkit-ux-heuristics.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.00082 | $0.01404 |
| Opus 5 | $0.00041 | $0.00702 |
| Sonnet 5 | $0.00016 | $0.00281 |
| Haiku 4.5 | $0.00008 | $0.00140 |
Grade A, and why
webkit-ux-heuristics 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 — 103 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Skill: webkit-ux-heuristics
Purpose
Get the flow right before it is made to look good. Most UI slop is not a styling problem — it is a
missing loading state, an error in the wrong place, an empty screen with no next step, or a
destructive action with no confirmation. This is the discovery pass: for each moment in a flow,
name the @aziontech/webkit component that already serves it, so you compose shipped behavior instead
of hand-rolling it. Before polish, the flow must be sound.
Boundary: this skill picks the component per moment. How each state actually renders (the loading
shape, the empty layout, the error affordance) and how async behavior sequences belong to
/webkit-ui-states.
How to use
/webkit-ux-heuristicsApply the component map to any flow you design or build in this conversation./webkit-ux-heuristics <file>Review the file's flow against the map and output, per gap:- the exact line / element (quoted),
- the moment it mishandles (1 short sentence),
- the concrete fix, naming the webkit component to use.
When to invoke
- Designing or reviewing a flow, form, list, or screen — before
/webkit-baseline-ui//webkit-motion-polish. - The user asks "is this good UX", "what am I missing", "review this flow".
Component map (the right tool per moment)
Each moment below is a Nielsen heuristic made concrete — the map is the checklist. Pick the component for the moment; don't re-derive the principle.
| Moment | Use | Don't |
|---|---|---|
| Loading (content vs. inline) | @aziontech/webkit/skeleton for content shape; the control's own loading / @aziontech/webkit/spinner for inline busy |
a bare full-page spinner for content that has a shape |
| Destructive / irreversible action | @aziontech/webkit/dialog (confirm) |
a silent immediate action |
| Field validation error | @aziontech/webkit/field-* + @aziontech/webkit/message next to the field |
a global toast for a field error |
| Page / section status | @aziontech/webkit/message, @aziontech/webkit/status-indicator |
inventing a banner |
| Empty state | @aziontech/webkit/button for the one next action + a one-line reason it's empty |
a dead-end "no results" string |
| Contextual actions / menu | @aziontech/webkit/dropdown-menu |
a hand-rolled popover |
| Side surface | @aziontech/webkit/panel, @aziontech/webkit/drawer |
a fixed div without focus management |
| Tooltip help | @aziontech/webkit/tooltip |
title attribute only |
| Field label | @aziontech/webkit/label |
placeholder-as-label |
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 · 103 lines · 82 tokens per session scan A e8a97f5fe6c2
webkit-ux-heuristics is a skill published in the GitHub repository aziontech/webkit (2 stars, last pushed yesterday), licensed MIT. It adds 82 tokens to every session and 1,404 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
add-component
Add a SwiftUI component from ShipSwift. Use when the user says "add component", "add a view", "add X view", "I need a chart", "add animation", or wants a specific UI element.
design-motion-principles
Expert motion and interaction design auditor based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Use when reviewing UI animations, transitions, hover states, or any motion design work. Provides per-designer perspectives with context-aware weighting.
design
Design workflow that creates design systems, DESIGN.md, and design tokens with anti-pattern enforcement and accessibility checks.
better-design
Build, improve, and review production interfaces with the Better Design MCP. Use for frontend design, UI, UX, interactions, flows, forms, navigation, components, styling, design systems, accessibility, responsive layouts, motion, React Native, Expo, Shopify, Three.js, and product video work, especially when creating…
monorepo-management
Sets up or audits a monorepo workspace: tool selection, package naming, shared tooling, inter-package dependencies, selective CI, and versioning strategy. Invoked when the user asks to set up a monorepo, add a workspace, or manage multiple packages in a single repository.
releasing
Authoring a changeset, or cutting a release for @vuetify/v0 and the @paper/ design systems. Use when writing a .changeset/.md file, deciding what belongs in changelog copy, re-entering or exiting changesets pre/beta mode, or reviewing a Version Packages PR. Covers the changeset content contract, the two version…