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/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/uwuclxdy/agenticat/ux-patterns"><img src="https://agentmods.dev/badge/skills/uwuclxdy/agenticat/ux-patterns.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.00029 | $0.07945 |
| Opus 5.5 | $0.00012 | $0.03178 |
| Sonnet 5.5 | $0.00006 | $0.01589 |
| Haiku 4.5 | $0.00003 | $0.00795 |
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 1mo 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.
- 1mo ago Changed 20e017c29933
- 1mo ago First seen · 455 lines · 29 tokens per session scan A eec67b78d625
ux-patterns is a skill published in the GitHub repository uwuclxdy/agenticat (7 stars, last pushed 8d ago), licensed MIT. It adds 29 tokens to every session and 7,945 once invoked, about $0.0001 per session on Opus 5.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
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. Open and visually review existing DXF files…
show-me
Help the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.
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.
decocms-ui
Build or style React UI with the decocms product design system (@decocms/ui). Use when creating a new screen, page, or component that should look like decocms products, when the user mentions "design system", "@decocms/ui", "decocms style", or asks to make UI consistent with Studio. Covers screen layout (width…
multi-surface-render
Multi-surface rendering with json-render — one JSON spec produces React web, Next.js, React Native, Ink terminal UIs, PDFs, emails, Remotion videos, OG images, and 3D scenes. Covers renderer target selection, registry mapping, and platform APIs (renderToBuffer, renderToStream, renderToFile). Use when generating output…
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…