jezweb/claude-skills is a collection of skills, commands, plugins, settings, instructions, and hooks that guide the Claude Code CLI through development tasks and produce outputs such as project scaffolds, assets, documents, or deployed services. It is for developers using Claude Code with technologies and services including Cloudflare, React, Tailwind, Shopify, and WordPress. The catalogue entries are the project's own Claude Code workflow components.
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 jezweb/claude-skills --skill ux-comparegit clone --depth 1 https://github.com/jezweb/claude-skillsWrote 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/jezweb/claude-skills/ux-compare)<a href="https://agentmods.dev/skills/jezweb/claude-skills/ux-compare"><img src="https://agentmods.dev/badge/skills/jezweb/claude-skills/ux-compare/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/jezweb/claude-skills/ux-compare"><img src="https://agentmods.dev/badge/skills/jezweb/claude-skills/ux-compare.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk pass
- NVIDIA SkillSpector pass
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.00114 | $0.02021 |
| Opus 5.5 | $0.00046 | $0.00808 |
| Sonnet 5.5 | $0.00023 | $0.00404 |
| Haiku 4.5 | $0.00011 | $0.00202 |
Grade A, and why
ux-compare 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 — 176 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UX Compare
Read N pattern libraries produced by ux-extract and synthesise a comparison. Answers questions like:
- "Across claude.ai, Linear, Notion, Vercel, and Superhuman — how are empty states handled?"
- "Which apps use keyboard shortcuts, and what's the shared vocabulary?"
- "When we build our billing page, should we follow convention or deliberately break it?"
A single extract is a reference point. Multiple extracts are a design library. A comparison is a decision aid — it turns the library into "here's what to do and why".
When to use
- Before a build — comparing 3–5 references for the feature class you're about to build reveals the convention and the tradeoffs
- During a design review — "this pattern isn't in any of the 5 references we've extracted — is that deliberate?"
- For team alignment — shared reference for a design decision
- To produce a design brief — convergent patterns become the baseline; divergent patterns become the discussion
Inputs
Available libraries
First, discover what's available. Pattern libraries live at:
docs/ux-extracts/<app-name>/pattern-library.md.jez/artifacts/ux-extracts/<app-name>/pattern-library.md
List everything you find. Show the user the inventory with the extraction date for each so they can spot stale ones:
Available pattern libraries:
- claude.ai (extracted 2026-03-12)
- linear.app (extracted 2026-02-28)
- notion.so (extracted 2026-01-15) ← 3 months old
- superhuman (extracted 2026-03-20)
If only one library exists, stop and suggest running ux-extract on more apps first. A one-library "comparison" is just the library.
Scope / focus
Ask the user what to compare — or infer from their request:
- Whole library — compare every category across every library (verbose but comprehensive)
- One category — just empty states, just keyboard, just modals (tighter, more useful for specific decisions)
- A feature area — "how do these apps handle settings", crosses multiple categories but stays focused
- A specific question — "which apps support offline?" — searches Notable Absences sections too
What ships with it
1 file 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 First seen · 176 lines · 114 tokens per session scan A 7901e9c9132c
ux-compare is a skill published in the GitHub repository jezweb/claude-skills (1,068 stars, last pushed 8d ago), licensed MIT. It adds 114 tokens to every session and 2,021 once invoked, about $0.0005 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-09-03.
Other skills, from other repositories
frontend
Builds, styles, and polishes web UI and UX. Use for any frontend, page, component, styling, layout, animation, or visual-quality task, or when asked to make an interface look or feel a certain way.
ambience-skill
Layer A ambience-and-typographic-motion reference anchored to the react-bits catalog (reactbits.dev). Stacks on any style skill whenever work adds a hero atmosphere, an animated or shader background, a typographic reveal (split, blur, shimmer, typewriter, count-up, marquee), scroll storytelling, or card surface…
figma-to-code
Generate production-ready React/Next.js code from Figma designs. Instructs proper Figma MCP tool usage, component reuse strategies, and variant mapping. CRITICAL: ALWAYS use this skill when user provides a Figma link or mentions implementing/redesigning from Figma design. Never attempt manual implementation without…
component-api-design
Design clean, composable React/Vue component APIs with accessibility built in. Use when designing or reviewing a component's props, composition, events or accessibility, or when a component API has grown hard to use.
frontend-layout-implementer
Implement approved React/Next.js design specs using existing CSS Modules, Redux, TanStack, and Axios conventions. Route uninspected designs to intake and resolve product decisions before coding. Excludes unrelated stacks and styling systems.
Accessibility Audit Helper
Reviews UI code and components for WCAG 2.1 accessibility violations and provides specific fixes.