القائمة
Run automated UI/UX audit pipeline — 52 pages, 11 custom rules, axe-core accessibility, Storybook validation
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | ui-audit |
| description | Run automated UI/UX audit pipeline — 52 pages, 11 custom rules, axe-core accessibility, Storybook validation |
Run the NOIR UI audit system: 52 pages, 11 custom rules, axe-core accessibility scanning, and Storybook story validation.
Check that both backend and frontend are running:
curl -sf http://localhost:4000/api/health > /dev/null && echo "Backend: OK" || echo "Backend: NOT RUNNING"
curl -sf http://localhost:3000 > /dev/null && echo "Frontend: OK" || echo "Frontend: NOT RUNNING"
If either is not running, start them with ./start-dev.sh or manually:
cd src/NOIR.Web && dotnet runpowershell -Command "Start-Process cmd -ArgumentList '/c cd /d src\NOIR.Web\frontend && pnpm run dev'"Optional — also check Storybook for story-level audit:
curl -sf http://localhost:6006 > /dev/null && echo "Storybook: OK" || echo "Storybook: NOT RUNNING (optional)"
cd src/NOIR.Web/frontend/e2e && npx playwright test --project=ui-audit --project=ui-audit-platform
This runs:
tenant-settings)Output: .ui-audit/ directory (gitignored)
Before taking screenshots or running rules, the audit runner must wait until pages are visually stable:
networkidlewaitFor from page-registry.ts)If screenshots show empty table/list while data should be present, treat it as an audit-runner bug and improve readiness waits in tests/ui-audit/environment-setup.ts and runner specs.
Use the correct login profile per page:
ui-audit project uses tenant admin (admin@noir.local)ui-audit-platform project uses platform admin (platform@noir.local)tenant-settings (/portal/admin/tenant-settings) must run in tenant-admin audit, not platform-admin audit. Keep page ownership/auth mapping in tests/ui-audit/page-registry.ts accurate to avoid wrong screenshots/tabs.
After the audit completes, read the generated reports:
.ui-audit/summary.md — severity counts, top rules, worst pages.ui-audit/prompt.md — structured fix instructions grouped by source file.ui-audit/raw/ — JSON files for programmatic analysisPresent to the user:
Read .ui-audit/prompt.md and follow its instructions:
cd src/NOIR.Web/frontend && pnpm run buildcd src/NOIR.Web/frontend/e2e && npx playwright test --project=ui-audit --project=ui-audit-platform
Compare before/after issue counts. Goal: 0 CRITICAL, 0 HIGH.
To audit only Storybook stories (axe-core on all 98+ stories):
cd src/NOIR.Web/frontend/e2e && npx playwright test --project=ui-audit tests/ui-audit/storybook-audit.spec.ts
Requires Storybook running at http://localhost:6006.
To audit a specific page by ID (from page-registry.ts):
cd src/NOIR.Web/frontend/e2e && npx playwright test --project=ui-audit -g "page: <page-id>"
Example: npx playwright test --project=ui-audit -g "page: products"
Verify SEO + social-sharing metadata on NOIR public-facing pages (blog posts, product pages, category pages, landing pages). Use when the user asks to audit SEO, add meta tags, improve search ranking, add Open Graph / Twitter Card / JSON-LD / Schema.org, check structured data, or ensure rich snippets work. Complements the `seo-audit` + `schema-markup` skills from `marketing-skills` plugin with NOIR-specific DTO knowledge and enforcement of `docs/backend/research/seo-meta-and-hint-text-best-practices.md`.
Scaffold a new DataTable list page in NOIR following the enterprise table standard (useEnterpriseTable + DataTable + DataTableToolbar + DataTablePagination + audit columns). Use when the user asks to create, build, or add a new list page, admin page, index page, or table view. Covers `.claude/rules/datatable-standard.md`, `table-list-standard.md`, and `audit-columns-standard.md`.
Scaffold a new NOIR feature/module with correct registration across all 5 registries (Sidebar, Permissions, OpenAPI, Modules, MCP Tools). Use when the user asks to add a new feature, module, domain area, or a new top-level sidebar entry. Prevents the common "added sidebar item but forgot OpenAPI tag / permission / MCP tool" class of bug covered in `.claude/rules/feature-registry-sync.md`.
Scaffold a React form in NOIR following the 4-rule validation standard (useValidatedForm + Zod schema + FormErrorBanner + auto-detected required fields). Use when the user asks to create, add, or build a new form, dialog form, settings form, or edit form on the frontend. Prevents the common mistakes covered in `.claude/rules/form-validation-standard.md`.
Scaffold a new MCP tool class in `src/NOIR.Web/Mcp/Tools/` following NOIR conventions — `noir_{domain}_{action}` naming, `[RequiresModule]` gate, string-for-Guid parameters. Use when the user asks to add, expose, or create an MCP tool, or when AI agents need access to an existing feature that isn't yet exposed. Covers CLAUDE.md Rules 25-30 (MCP Server).
Create an EF Core migration in NOIR with the correct --context flag and output directory. Use when the user asks to add, generate, create, or roll back a database migration. Prevents the common mistake of running `dotnet ef migrations add` without `--context`, which creates the migration against the wrong DbContext and corrupts the Migrations/App vs Migrations/Tenant separation.