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 uwuclxdy/agenticat --skill ux-patternsgit clone --depth 1 https://github.com/uwuclxdy/agenticatWrote 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/uwuclxdy/agenticat/ux-patterns)<a href="https://agentmods.dev/skills/uwuclxdy/agenticat/ux-patterns"><img src="https://agentmods.dev/badge/skills/uwuclxdy/agenticat/ux-patterns.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.00029 | $0.07907 |
| Opus 5 | $0.00015 | $0.03954 |
| Sonnet 5 | $0.00006 | $0.01581 |
| Haiku 4.5 | $0.00003 | $0.00791 |
Grade A, and why
ux-patterns 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 7d 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 — 455 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UX Patterns
How an interface should behave, for whoever is writing it. Scoped to interaction: states, feedback, forms, and the cognitive-load laws behind layout decisions.
| File | Read it for |
|---|---|
| This file | Web-first behavior rules |
references/accessibility.md |
The conformance wiring every state needs. Read it alongside any state you build |
references/mobile.md |
What changes on a phone |
For a CLI or a terminal UI, load the terminal-ux skill if it is installed. Exit codes, stream discipline, TTY detection, and terminal screen-reader behavior have their own canon and are not covered here.
Not covered here: type scales, color palettes, visual style, brand. Your design-system skill owns those. A rule that needs a specific palette or type scale is out of scope, so point at that skill rather than inventing values. Contrast appears in the accessibility reference as a conformance floor, never as a palette.
Treat these as directional. A repo's established pattern wins over a rule here; match the surrounding code. Two markers override that:
- WCAG x.x.x (Level) means a published conformance criterion. Not a preference, and not something a repo convention overrides.
- A named law here is a label, and what sits under each one differs. Jakob's was coined by Nielsen as a summary of his own heuristics. Tesler's traces to an interview and carries a published counter-argument. Hick's is real experimental work, measuring something narrower than its usual application. Each section states what its law actually rests on; naming one settles nothing.
Everything unmarked is a strong default. Numbers are starting values unless a rule says otherwise. Three are measured and marked as such: the 0.1s, 1s and 10s response-time limits.
1. Every Screen Has Five States
1.1 Build All Five
| State | What it is |
|---|---|
| Loading | The request is in flight and nothing has settled |
| Success | The state you designed for: enough data, everything worked |
| Error | The fetch or the action failed |
| Empty | The request settled and there is genuinely nothing |
| Partial | The request settled and there is barely anything: 3 rows where 20 belong, one widget configured, a chart with two points |
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 7d ago First seen · 455 lines · 29 tokens per session scan A eec67b78d625
ux-patterns is a skill published in the GitHub repository uwuclxdy/agenticat (5 stars, last pushed today), licensed MIT. It adds 29 tokens to every session and 7,907 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-08-31.
Other skills, from other repositories
archify
Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and…
dxf
Generate, regenerate, and validate 2D DXF drawings from Python build123d sources. Use for DXF files, .py drawing scripts, @dxf models, 2D profiles, outlines, templates, gaskets, panels, flat patterns, laser/plasma/waterjet cut layouts, and 2D drawing exports of CAD geometry.
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
pixel2motion
Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold, then into a choreographed logo animation delivered as standalone JS-rendered HTML, applying Disney's 12 animation…
sxo
Search Experience Optimization (SXO) — the bridge between SEO and UX/CRO. Audits the full journey from the SERP click to the on-page goal: SERP click-through factors (title/meta/rich results that win the click), then post-click experience signals that keep users and drive conversions — above-the-fold relevance and…
openkb-html-critic
Use to review a generated HTML deck or single-page artifact for visual quality and structural correctness. Especially good at catching CSS specificity bugs where slide-modifier classes (.divider, .center, .q, .flow etc.) accidentally override the base .slide{display:none} and cause one slide to stack on top of every…