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-extractgit 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-extract)<a href="https://agentmods.dev/skills/jezweb/claude-skills/ux-extract"><img src="https://agentmods.dev/badge/skills/jezweb/claude-skills/ux-extract/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-extract"><img src="https://agentmods.dev/badge/skills/jezweb/claude-skills/ux-extract.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk warn
- 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.00121 | $0.02892 |
| Opus 5.5 | $0.00048 | $0.01157 |
| Sonnet 5.5 | $0.00024 | $0.00578 |
| Haiku 4.5 | $0.00012 | $0.00289 |
Grade A, and why
ux-extract 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 — 255 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UX Extract
Exhaustively study a reference web app and produce a reusable pattern library. Goes everywhere, captures everything, then organises it into a document another audit or build can reference.
The inverse of ux-audit:
- Audit asks: does this match a bar?
- Extract asks: what is the bar?
Audits without extracts implicitly compare to "my memory of other apps" — fragile and inconsistent. Extracts turn that memory into a concrete, navigable artifact. An audit can then say: "Empty state on /app/clients shows no CTA. Reference (claude.ai) shows 3 keyboard shortcuts plus 'New chat' in the same position" instead of "feels a bit sparse".
When to use
- Before building a new feature — study how best-in-class apps handle it
- Benchmarking a build — extract the reference, then audit against it
- Onboarding designers or engineers — here's what good looks like, concretely
- Competitor research — document the competitor's UX so you can meaningfully differentiate
- Refreshing an old app — extract patterns from modern equivalents to guide the update
Scope and ethics
Before starting, confirm the target is fair game:
- Use your own account — don't scrape anything that requires credentials you don't legitimately hold
- Respect
robots.txtfor unauthenticated crawling - Rate-limit — act like a human user, not a crawler. Pause between pages.
- Check ToS — most SaaS Terms of Service permit individual inspection but prohibit automated scraping
- Don't redistribute screenshots of a live competitor's app publicly — pattern libraries are internal references
If the target is behind a paywall or requires a trial account, ask the user whether they have legitimate access before proceeding.
Setup
1. Browser tool
| Target | Tool | Notes |
|---|---|---|
| Authenticated reference (you have an account) | Chrome MCP | Uses your logged-in session |
| Public reference (marketing pages, docs, public demos) | Playwright MCP | No login needed |
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 First seen · 255 lines · 121 tokens per session scan A 95cbc6cbc687
ux-extract is a skill published in the GitHub repository jezweb/claude-skills (1,087 stars, last pushed 19d ago), licensed MIT. It adds 121 tokens to every session and 2,892 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 anything drawn with HTML, CSS, or SVG: web UI, pages, components, HTML reports rendered to PDF or print, figures, PNG/SVG diagrams, slides, and images for Notion or Slack. Use for any styling, layout, animation, or visual-quality task, or when asked to make something look or feel a certain…
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…
framer-motion
Framer Motion / Motion sub-skill - AnimatePresence, layout animations, gestures, motion values.
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.