Agent skill

AI UX Audit

by mobazha in mobazha/mobazha-unified

AI 驱动的全系统 UX 体验审计。自动化 Demo 截图生成 + AI 角色评审管道。触发词:"UX 审计", "AI 审查", "体验审计", "demo 截图", "buyer review", "seller review", "UX audit", "AI persona review", "截图捕获", "journey capture"。

MPL-2.0Auto-check passedTesting & QA

Install AI UX Audit

skills CLI
$ npx skills add mobazha/mobazha-unified --skill ai-ux-audit -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install mobazha/mobazha-unified ai-ux-audit --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/ai-ux-audit .claude/skills/ai-ux-audit && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
ai-ux-audit
GitHub stars
165
Token cost
~2.3k tokens
SKILL.md length
374 words
Files
1
Skills in repo
29
Repo updated
First seen
Licence
MPL-2.0

At a glance

AI 驱动的全系统 UX 体验审计。自动化 Demo 截图生成 + AI 角色评审管道。触发词:"UX 审计", "AI 审查", "体验审计", "demo 截图", "buyer review", "seller review", "UX audit", "AI persona review", "截图捕获", "journey capture"。

  • Works in 4 steps: 收尾(Phase 5-6) → 创建 Demo 环境种子 + Mock 升级 → 全流程截图捕获 → …
  • Testing & QA work in your project
  • SKILL.md covers 概述, 关键文件, 执行步骤 and 运行 Journey Spec 的命令, plus 6 more sections
  • Calls bash and npx; needs E2E_TEST_PASSWORD

What it does

AI UX Audit is an agent skill from mobazha/mobazha-unified. AI 驱动的全系统 UX 体验审计。自动化 Demo 截图生成 + AI 角色评审管道。触发词:"UX 审计", "AI 审查", "体验审计", "demo 截图", "buyer review", "seller review", "UX audit", "AI persona review", "截图捕获", "journey capture"。

Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Testing & QA. It works with Playwright. The repository describes itself as: Open-source commerce frontend for storefronts, marketplaces, checkout, and seller management. The licence is MPL-2.0.

When your agent uses it

  • Testing & QA work in your project

Example prompts

  • “demo 截图”
  • “buyer review”
  • “seller review”
  • “/ai-ux-audit”

Requirements

  • Node.js
  • Docker

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. 收尾(Phase 5-6)
  2. 创建 Demo 环境种子 + Mock 升级
  3. 全流程截图捕获
  4. AI 三层角色评审

What it can do on your machine

Read from SKILL.md and the folder at commit 156c699. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • bash
    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • E2E_TEST_PASSWORD

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

AI UX Audit loads about 2.3k tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 374 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~47
When it runs · the whole SKILL.md, loaded when a task matches
~2.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from mobazha/mobazha-unified at commit 156c699, republished under its MPL-2.0 licence (© mobazha). 374 words, ~2,289 tokens.

Download SKILL.mdSave it as .claude/skills/ai-ux-audit/SKILL.md (or your agent's skills folder).
name
ai-ux-audit
description
AI 驱动的全系统 UX 体验审计。自动化 Demo 截图生成 + AI 角色评审管道。触发词:"UX 审计", "AI 审查", "体验审计", "demo 截图", "buyer review", "seller review", "UX audit", "AI persona review", "截图捕获", "journey capture"。

AI 驱动的全系统 UX 体验审计

概述

通过 Playwright 自动化截图 + AI 角色扮演评审,系统性审查 Mobazha 全平台 UX 质量。 覆盖 SaaS + 独立站、Desktop + Mobile、卖家 + 买家视角。

关键文件

Plan 文件(执行蓝图)
文件用途
~/.cursor/plans/ai_ux_体验审计_628e6106.plan.md完整执行计划(4 Step、todo 状态追踪)
现有基础设施
文件用途行数
apps/web/e2e/fixtures/mock-api-routes.tsMock API 路由(订单、通知、搜索、商品、店铺)~778
apps/web/e2e/fixtures/seed-visual-data.ts视觉测试数据种子(2 商品 + 1 shipping profile)~295
apps/web/e2e/fixtures/auth.tsCasdoor 认证 helper(login、getToken、getPeerID)~280
apps/web/e2e/fixtures/standalone-auth.ts独立站认证 helper~188
apps/web/e2e/fixtures/api-helpers.tsAPI 调用 helper~125
apps/web/e2e/ux-audit.spec.ts已有 UX 全量页面审核(70+ 页面截图到 test-results/)~464
apps/web/e2e/mobile-ux-audit.spec.ts已有移动端公开页面审核~48
apps/web/e2e/desktop-visual.spec.tsDesktop 视觉回归基线(44 tests)~412
apps/web/e2e/mobile-visual.spec.tsMobile 视觉回归基线(46 tests)~413
apps/web/playwright.config.tsPlaywright 配置(4 projects: chromium, Mobile Chrome, standalone, standalone-mobile)
待创建文件(Demo Journey 管道)
文件用途
apps/web/e2e/fixtures/seed-demo-store.ts丰富 Demo 数据种子(6-8 商品、品牌、折扣、Collection)
apps/web/e2e/fixtures/mock-order-lifecycle.ts订单全生命周期 Mock(7 状态 + 评价 + 聊天 + 钱包)
apps/web/e2e/demo-seller-journey.spec.ts卖家 20 步全流程截图
apps/web/e2e/demo-buyer-journey.spec.ts买家 19 步全流程截图
apps/web/e2e/demo-standalone-journey.spec.ts独立站 10 步全流程截图
apps/web/e2e/demo-output/manifest.json截图元数据(id, title, description, phase, reviewFocus)

执行步骤

Step 1: 收尾(Phase 5-6)

运行残余视觉基线和全量回归:

bash
cd ~/dev/openbazaar/mobazha-unified/apps/web

# Feature 域基线(如有新 spec 未跑)
PLAYWRIGHT_BROWSERS_PATH="$HOME/Library/Caches/ms-playwright" E2E_TEST_PASSWORD=123 \
  bash -c 'npx playwright test shipping-settings.spec.ts wishlist.spec.ts \
  admin-collections.spec.ts admin-discounts.spec.ts ai-store-builder.spec.ts \
  --project=chromium --update-snapshots'

# 独立站基线
bash -c 'npx playwright test standalone-smoke.spec.ts standalone-deep.spec.ts \
  --project=standalone --update-snapshots'

# 全量回归
bash -c 'PLAYWRIGHT_BROWSERS_PATH="$HOME/Library/Caches/ms-playwright" \
  npx playwright test --project=chromium --project="Mobile Chrome"'

# Go 后端 E2E
cd ~/dev/mobazha/tests/e2e && bash -c 'go test -v -count=1 ./...'
Step 2: 创建 Demo 环境种子 + Mock 升级

seed-demo-store.ts — 参考 seed-visual-data.ts 的 API 调用模式:

typescript
import { getCasdoorToken, BACKEND_URL } from './auth';
import type { APIRequestContext } from '@playwright/test';

export async function seedDemoStore(request: APIRequestContext): Promise<void> {
  const token = await getCasdoorToken(request, 'testuser1', '123');
  const headers = { Authorization: `Bearer ${token}` };
  // 1. 设置 Profile(名称、头像、国家)
  // 2. 创建 6-8 个商品(物理+数字+服务+私有)
  // 3. 创建 2 个 Shipping Profile
  // 4. 创建 2 个 Collection + 关联商品
  // 5. 创建 3 个折扣
  // 6. 设置 Store Branding(Hero + ProductGrid + FAQ + TrustBadges)
}

mock-order-lifecycle.ts — 7 种订单状态 + 评价 + 聊天 + 钱包 Mock:

typescript
export async function mockOrderLifecycle(page: Page): Promise<void> {
  // Mock 7 种订单状态: PENDING, AWAITING_FULFILLMENT, FULFILLED,
  //   COMPLETED, DISPUTED, REFUNDED, CANCELLED
  // Mock 商品评价列表
  // Mock 聊天消息
  // Mock 钱包交易记录
}
Step 3: 全流程截图捕获

每个 journey spec 的核心模式:

typescript
import { test } from '@playwright/test';
import { performCasdoorLogin } from './fixtures/auth';
import { seedDemoStore } from './fixtures/seed-demo-store';
import { mockOrderLifecycle } from './fixtures/mock-order-lifecycle';

const DEMO_DIR = 'demo-output/seller';

test.describe.configure({ mode: 'serial' });

test.describe('Seller Journey', () => {
  test.beforeAll(async ({ request }) => {
    await seedDemoStore(request);
  });

  test('S01 Empty Dashboard', async ({ page }) => {
    await performCasdoorLogin(page);
    await page.goto('/admin/dashboard');
    // screenshot to demo-output/seller/{mobile|desktop}/01-empty-dashboard.png
  });
  // ...20 steps
});

视口规则:每步同时截 mobile (390x844) + desktop (1280x800)。

输出目录结构:

demo-output/
  seller/mobile/   seller/desktop/     (20 步 x 2 = 40 张)
  buyer/mobile/    buyer/desktop/      (19 步 x 2 = 38 张)
  standalone/mobile/ standalone/desktop/ (10 步 x 2 = 20 张)
  manifest.json                         (元数据)
Step 4: AI 三层角色评审

Layer 1(每张截图):8 维度评分卡

  • 信息层级、CTA 清晰度、视觉一致性、数据密度、错误预防、加载感知、信任信号、移动适配

Layer 2(每个旅程阶段):竞品对标

  • 卖家对标 Shopify/Etsy/微店
  • 买家对标 Amazon/淘宝/Shopify Storefront

Layer 3(仅移动端):6 项专项检查

  • 拇指区、导航深度、滚动长度、底部导航、手势暗示、键盘适配

执行方式:分 3 批进行 AI 审查

  1. 卖家 mobile (20) → desktop (20)
  2. 买家 mobile (19) → desktop (19)
  3. 独立站 mobile (10) → desktop (10)

运行 Journey Spec 的命令

bash
cd ~/dev/openbazaar/mobazha-unified/apps/web

# 确保浏览器已安装
PLAYWRIGHT_BROWSERS_PATH="$HOME/Library/Caches/ms-playwright" npx playwright install chromium

# 运行全部 demo journey(需要后端运行)
PLAYWRIGHT_BROWSERS_PATH="$HOME/Library/Caches/ms-playwright" E2E_TEST_PASSWORD=123 \
  bash -c 'npx playwright test demo-seller-journey.spec.ts \
  demo-buyer-journey.spec.ts demo-standalone-journey.spec.ts \
  --project=chromium --reporter=list'

# 截图输出在 demo-output/ 目录

已知 Mock 数据问题

问题位置影响
avatarHashes 为空字符串mock-api-routes.ts L413-414, L422-423Profile 头像显示为占位符或空白
storefront-config sections 为空mock-api-routes.ts L637店铺品牌页无内容
订单只覆盖 3/7 状态mock-api-routes.ts L38-87无法展示完整订单生命周期
无评价数据 Mock缺失商品详情页评价区为空
无聊天消息 Mock缺失聊天页面为空
无钱包交易 Mock缺失钱包页面无交易记录
Show full SKILL.md (133 more words)Show less

Playwright 环境注意事项

  1. 浏览器路径:Cursor sandbox 会覆盖 PLAYWRIGHT_BROWSERS_PATH,必须显式设置:

    bash
    PLAYWRIGHT_BROWSERS_PATH="$HOME/Library/Caches/ms-playwright"
  2. 认证密码:E2E 测试用户密码通过环境变量传入:

    bash
    E2E_TEST_PASSWORD=123
  3. Casdoor 端口:Docker 映射到 18000,auth.ts 默认读取 E2E_CASDOOR_URL || 'http://localhost:18000'

  4. 前端端口:playwright.config.ts 中 baseURL = http://localhost:3000

  5. 独立站端口:standalone projects 使用 http://localhost:3002

视觉基线现状(截至 2026-02-28)

基线集数量目录
Desktop Visual44 PNGdesktop-visual.spec.ts-snapshots/
Mobile Visual46 PNGmobile-visual.spec.ts-snapshots/
Store Branding6 PNGstore-branding.spec.ts-snapshots/
合计96 PNG

恢复会话检查清单

如果会话中断,AI 应执行以下步骤恢复上下文:

  1. 读取 plan 文件:~/.cursor/plans/ai_ux_体验审计_628e6106.plan.md
  2. 检查 todo 状态:确定哪些 Step 已完成
  3. 检查 demo-output/ 目录是否存在及内容
  4. 检查 demo-seller-journey.spec.ts 等文件是否已创建
  5. 检查 seed-demo-store.ts 和 mock-order-lifecycle.ts 是否已创建
  6. 根据未完成的 Step 继续执行

设计文档

无独立设计文档。Plan 文件即为执行蓝图。详细的用户旅程定义、Mock 数据规格、AI 评审 prompt 均在 plan 文件中。

注意事项

  1. Demo journey spec 不做 toHaveScreenshot 对比,纯截图保存到 demo-output/
  2. 使用 test.describe.configure({ mode: 'serial' }) 保证步骤顺序
  3. 每步截图包含 manifest.json 元数据(供 AI 审查时读取上下文)
  4. 空状态和有数据态需要分别截图(Dashboard、购物车、通知等)
  5. Mock 数据遵循 Phase G 信封格式 { data: T }
  6. 独立站 spec 需要 port 3002 的前端服务运行

© mobazha, MPL-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .cursor/skills/ai-ux-audit of mobazha/mobazha-unified.

Open the folder on GitHubat commit 156c699

Compare with similar skills

AI UX Audit next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

AI UX Audit compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
AI UX Audit this skillmobazha/mobazha-unified165—~2.3kAutomated safety check: PassMPL-2.0
Web Application Testinganthropics/skills180k51 repos~966Automated safety check: PassApache-2.0
Playwright CLIsanity-io/sanity6.4k18 repos~1.9kAutomated safety check: PassMIT
E2Ecallstack/react-native-pager-view3.4k3 repos~2.1kAutomated safety check: PassMIT
Write and Verify Playwright Testsappsmithorg/appsmith41k—~2.9kAutomated safety check: NotesApache-2.0
playwright-cli Browser Automationgithub/gh-aw5.4k25 repos~2.8kAutomated safety check: PassMIT

Similar skills

  • Web Application Testing

    anthropics/skills

    Official

    Tests local web applications with Python Playwright scripts, checking frontend behavior, capturing screenshots and reading browser console logs.

    180k GitHub starsUsed in 51 repos~966 tokens
    Testing & QAAuto-check passed
  • Playwright CLI

    sanity-io/sanity

    Official

    Automates browser interactions for web testing, form filling, screenshots, and data extraction.

    6.4k GitHub starsUsed in 18 repos~1.9k tokens
    Testing & QAAuto-check passed
  • E2E

    callstack/react-native-pager-view

    Agentic end-to-end tests with e2e, the e2e runner. An agent skill from callstack/react-native-pager-view.

    3.4k GitHub starsUsed in 3 repos~2.1k tokens
    Testing & QAAuto-check passed
  • Writes a Playwright end-to-end test from a prompt, runs it against a live Appsmith deployment and retries with fixes up to three times until it passes.

    41k GitHub stars~2.9k tokensUpdated yesterday
    Testing & QAAuto-check: notes
  • Official

    Drives a real browser from the command line with playwright-cli to open pages, interact, mock requests, save state and work with Playwright tests.

    5.4k GitHub starsUsed in 25 repos~2.8k tokens
    Testing & QAAuto-check passed
  • Guides changes and reviews of the Cucumber and Playwright end-to-end suite under `e2e/`: feature files, step definitions, support code, tags, locators and assertions.

    158k GitHub stars~682 tokensUpdated today
    Testing & QAAuto-check passed

More from mobazha/mobazha-unified

All 29 skills in this repo
  • A11y Guide

    mobazha/mobazha-unified

    Accessibility guide for Mobazha following WCAG 2.1 AA standards including color contrast, reduced motion, ARIA patterns, keyboard navigation, focus management, and screen reader testing.

    165 GitHub stars~1.4k tokensUpdated 7 days ago
    Auto-check passed
  • API Reference

    mobazha/mobazha-unified

    Look up Mobazha backend API endpoints, request/response formats, and field mappings.

    165 GitHub stars~1.7k tokensUpdated 7 days ago
    Auto-check passed
  • Code Review

    mobazha/mobazha-unified

    Review code for quality, architecture consistency, and adherence to Mobazha project standards using confidence-based filtering.

    165 GitHub stars~464 tokensUpdated 7 days ago
    Auto-check passed
  • Code Simplifier

    mobazha/mobazha-unified

    Simplify and refine recently written code for clarity, consistency, and maintainability while preserving all functionality.

    165 GitHub stars~601 tokensUpdated 7 days ago
    Auto-check passed
  • Commit Helper

    mobazha/mobazha-unified

    Generate commit messages and run pre-commit validation following Mobazha conventions.

    165 GitHub stars~735 tokensUpdated 7 days ago
    Auto-check passed
  • Component Dev

    mobazha/mobazha-unified

    Create and modify UI components following Mobazha conventions including directory structure, spacing standards, accessibility, and testing.

    165 GitHub stars~638 tokensUpdated 7 days ago
    Auto-check passed

Works with

Categories

Questions about AI UX Audit

What does AI UX Audit do?

AI 驱动的全系统 UX 体验审计。自动化 Demo 截图生成 + AI 角色评审管道。触发词:"UX 审计", "AI 审查", "体验审计", "demo 截图", "buyer review", "seller review", "UX audit", "AI persona review", "截图捕获", "journey capture"。. AI UX Audit is an agent skill from mobazha/mobazha-unified.

When should I use AI UX Audit?

AI UX Audit fits situations like: testing & QA work in your project.

How do I install AI UX Audit in Claude Code?

Run `npx skills add mobazha/mobazha-unified --skill ai-ux-audit -a claude-code`. Or copy the skill folder (.cursor/skills/ai-ux-audit in mobazha/mobazha-unified) into .claude/skills/ai-ux-audit in your project. Claude Code loads it when a task matches its description.

How do I install AI UX Audit in Codex?

Run `npx skills add mobazha/mobazha-unified --skill ai-ux-audit -a codex`. Or copy the skill folder (.cursor/skills/ai-ux-audit in mobazha/mobazha-unified) into .agents/skills/ai-ux-audit in your project. Codex loads it when a task matches its description.

Can I use AI UX Audit in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add mobazha/mobazha-unified --skill ai-ux-audit -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ai-ux-audit, .gemini/skills/ai-ux-audit, .github/skills/ai-ux-audit and .opencode/skills/ai-ux-audit in your project.

What does AI UX Audit need to run?

Going by SKILL.md and its folder, AI UX Audit needs the command-line tools its instructions call (bash and npx) and credentials named E2E_TEST_PASSWORD. Our summary lists: Node.js; Docker.

Does AI UX Audit access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is AI UX Audit safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does AI UX Audit use?

AI UX Audit is published under the MPL-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does AI UX Audit use?

About 2.3k tokens (SKILL.md is roughly 9.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to AI UX Audit?

Skills that share tags, products or a category with AI UX Audit: Web Application Testing (anthropics/skills, 180k stars), Playwright CLI (sanity-io/sanity, 6.4k stars), E2E (callstack/react-native-pager-view, 3.4k stars) and Write and Verify Playwright Tests (appsmithorg/appsmith, 41k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains AI UX Audit?

mobazha (a GitHub organization) maintains it in mobazha/mobazha-unified, which has 165 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on October 3, 2026.

Source: mobazha/mobazha-unified on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.