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 onboarding-uxgit 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/onboarding-ux)<a href="https://agentmods.dev/skills/jezweb/claude-skills/onboarding-ux"><img src="https://agentmods.dev/badge/skills/jezweb/claude-skills/onboarding-ux/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/onboarding-ux"><img src="https://agentmods.dev/badge/skills/jezweb/claude-skills/onboarding-ux.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk warn
- NVIDIA SkillSpector warn
SkillSpector: 1 finding, up to high
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- high Memory Poisoning · line 46 Skill manipulates agent memory, state, or stored context. Memory corruption can alter personality, override safety rules, or cause unpredictable behavior.Fix: Protect agent memory and state from modification by untrusted content. Use read-only memory for critical instructions and validate all state changes.
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.00119 | $0.02924 |
| Opus 5.5 | $0.00048 | $0.01170 |
| Sonnet 5.5 | $0.00024 | $0.00585 |
| Haiku 4.5 | $0.00012 | $0.00292 |
Grade A, and why
onboarding-ux 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 29d 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 — 329 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Onboarding UX
Audit a web app for onboarding gaps, then generate the in-app guidance to fix them. The goal: a new user should never stare at a blank screen wondering what to do.
The Problem This Solves
You've built the features. They work. But when a new user logs in for the first time, they see:
- Empty tables with column headers and nothing else
- Sidebars full of labels that mean nothing to them yet
- No indication of where to start or what the app is for
- Features they don't know exist because nothing points to them
This skill finds those gaps and produces the content and code to fill them.
Browser Tool Detection
Same as ux-audit — detect Chrome MCP, Playwright MCP, or playwright-cli. See ux-audit's browser-tools.md reference if needed.
URL Resolution
Same as ux-audit — prefer deployed/live URL over localhost. Check wrangler.jsonc, CLAUDE.md, or running dev server.
Workflow
Phase 1: Audit — Find the Gaps
Browse the app as a brand new user. On every page, evaluate:
Empty States
Navigate to every list/table/collection page. For each:
| Check | Good | Bad |
|---|---|---|
| What does a zero-data page show? | "No clients yet. Add your first client to get started." + CTA button | Empty table with column headers, or blank white space |
| Is there a clear action? | Button: "Add your first [thing]" | Nothing — user has to find the action in the nav or a menu |
| Does it explain the feature? | "Clients are the people and businesses you work with. Add one to start tracking your relationships." | Just an empty container |
| Is the empty state designed? | Illustration or icon, helpful copy, prominent CTA | Identical to the populated state minus the data |
First Impression
Log in as a new user (or clear state to simulate). Evaluate:
| Check | What to look for |
|---|---|
| Landing page | Does the dashboard/home show something useful or is it empty? |
| Orientation | Within 10 seconds, do I know what this app does and where to start? |
| First action | Is the #1 thing I should do obvious and prominent? |
| Cognitive load | How many menu items, buttons, and options compete for attention? |
| Welcome content | Is there a welcome message, tour, or getting-started guide? Or just the raw app? |
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.
- 29d ago Changed · -1 lines 46cdbc6ecade
- 1mo ago First seen · 330 lines · 119 tokens per session scan A 063382edf1be
onboarding-ux is a skill published in the GitHub repository jezweb/claude-skills (1,087 stars, last pushed 19d ago), licensed MIT. It adds 119 tokens to every session and 2,924 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-08-30.
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.