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 khadinakbarlabs/shopify-app-builder --skill ux-onboardinggit clone --depth 1 https://github.com/khadinakbarlabs/shopify-app-builderWrote 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/khadinakbarlabs/shopify-app-builder/ux-onboarding)<a href="https://agentmods.dev/skills/khadinakbarlabs/shopify-app-builder/ux-onboarding"><img src="https://agentmods.dev/badge/skills/khadinakbarlabs/shopify-app-builder/ux-onboarding/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/khadinakbarlabs/shopify-app-builder/ux-onboarding"><img src="https://agentmods.dev/badge/skills/khadinakbarlabs/shopify-app-builder/ux-onboarding.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.00138 | $0.06486 |
| Opus 5 | $0.00069 | $0.03243 |
| Sonnet 5 | $0.00028 | $0.01297 |
| Haiku 4.5 | $0.00014 | $0.00649 |
Grade A, and why
ux-onboarding 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 10d 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 — 466 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Shopify Embedded App: First-Run Onboarding UX
Onboarding is the single highest-leverage screen in your app. A merchant who never reaches "aha" within their first session uninstalls inside 7 days at rates of 40-60% across the App Store. The goal of this skill is to get every merchant to one observable, on-store value moment in under 5 minutes, with zero theme code edits and zero credit-card friction.
This skill is opinionated. It is built on (1) the Shopify Built for Shopify requirements, (2) the Polaris onboarding guidance, (3) a teardown of 6 top-grossing apps (Klaviyo, Gorgias, Judge.me, Loox, Vitals, PageFly).
1. When to use
Pull this skill in when you are:
- Designing the welcome screen / first-run flow of a brand new Shopify embedded app
- Reworking an existing app's activation funnel because installs are not converting to paid
- Adding a "setup guide" or "getting started checklist" to an existing dashboard
- Deciding whether to gate the app behind a wizard or drop merchants into a tile-grid
- Pursuing the Built for Shopify badge (which has explicit onboarding requirements)
- Writing the empty state for the merchant's first visit before any data exists
- Auditing your own app and asking "why is our 7-day retention so bad"
Skip this skill if you are working on a public storefront (Hydrogen/Liquid) - that is a different audience and a different onboarding model.
2. The "first 30 seconds" rule
When a merchant clicks Install on the App Store and approves your scopes, your app loads inside an iframe in the Shopify admin. The first thing they see is yours to design. Built for Shopify reviewers grade this screen. Real merchants decide whether to keep your app based on what they see in roughly 30 seconds.
What must be visible in the first 30 seconds:
- A clear app title - use the App Bridge
<ui-title-bar>web component or Polaris<Page title>. The merchant should see your app name and nothing else competing for it. - A one-sentence promise - the same outcome verb you led with on the App Store listing ("Convert more shoppers", "Replace 10 apps", "Send your first review request in 60 seconds"). Use Polaris
<Text variant="bodyLg" tone="subdued">. - One primary CTA - a single Polaris
<Button variant="primary">that starts the activation path. Never two competing primary actions on the welcome screen. - Proof the app is connected - a small
<Badge tone="success">Connected to {shop}</Badge>confirms OAuth worked. Removes the merchant's "did it install correctly" anxiety. - A skip / dismiss option - per Built for Shopify guidance, onboarding must be dismissible. A "Skip for now" Polaris
<Button variant="plain">in the top-right.
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.
- 10d ago First seen · 466 lines · 138 tokens per session scan A 0fc4e5694d86
ux-onboarding is a skill published in the GitHub repository khadinakbarlabs/shopify-app-builder (1 stars, last pushed 1mo ago), licensed MIT. It adds 138 tokens to every session and 6,486 once invoked, about $0.0007 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
visual-qa
Runs rigorous visual QA across web, terminal, and paginated surfaces with screenshot evidence and a verdict. Use for any UI build or change, or when asked whether a page, component, or TUI looks right.
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.
interaction-skill
Layer A interaction-mechanics reference anchored to the beui.dev catalog. Stacks on any style skill whenever work adds or changes motion or interaction — micro-interactions, animated components, transitions, gestures, hover/press/state feedback, loading/success/error morphs, 'make it feel alive'. Mandates reading the…
layout-skill
Layer A layout-mechanics reference. Stacks on any style skill when the screen is an app shell, dashboard, settings, list-detail, mail/inbox, or any layout with fixed regions plus a scrolling body — or when a layout breaks under long, empty, or unbroken content. Owns spatial structure and scroll ownership; owns zero…
ui-designer
Elite UI/UX Design Lead & Frontend Architect. Generates distinctive, non-templated interfaces with opinionated aesthetics, deliberate typography, and exact UX copy. Triggers on UI design, frontend styling, or layout creation.
forms-inputs-checkout
Use when designing, critiquing, or implementing forms, inputs, validation, checkout, registration, payment, or any data-entry flow.