测试与安全

ui-audit

mblode/agent-skills

Audits built React and Next.js frontends for user-facing defects in code and rendered UI: state gaps, data loss, double submits, focus and keyboard failures, rollback gaps, stale async, accessibility markup, layout resilience, performance setup, typography, motion hazards, and microcopy. Returns file:line findings and a ship verdict. Use when asked to "review this PR for UX bugs", "audit this component", "check my UI", "is this accessible", "design QA this page", or "is this ready to ship". For product decisions use product-design; for agentic apps use ax-audit; for deep type or motion use typography-audit or ui-animation; for the wording of a string rather than whether it is missing or leaky, use copywriting.

  • 733 次安装
  • 171 星标
  • 收录于

安装命令

npx skills add https://github.com/mblode/agent-skills --skill ui-audit

SKILL.md

UI Audit

Audits the built frontend at the feature level (checkout, onboarding, a dashboard) for a dev with a PR open: "which of these hurt users in production, and which are nice-to-haves?" Reasons about code behavior (React/Next source) and rendered quality (accessibility, layout, performance, type, motion).

  • IS: a diff-aware reviewer that detects which feature each changed file implements, runs that feature's playbook across behavior, rendered-quality, and Laws of UX rules, and emits a 3-tier ship verdict with file:line evidence and fixes.
  • IS NOT: the product decision of what should exist (right interaction, action naming, reachable states → product-design), an agentic-app review (tool parity, trust cues, approval gates → ax-audit), a deep typography or motion pass (→ typography-audit or ui-animation), or a re-implementation of Lighthouse/axe/Chromatic (→ see "Defer to other tools").

product-design or ui-audit?

The dispatch signal is the artifact, not the topic. Both care about states and interaction, but act at different moments.

You have... The question is Use
A brief, spec, mockup, intent, or a UI you decide about What should exist: the right interaction, the action's name, which states should be reachable product-design
Code, a diff, or a running UI you decide on Is the built result right: states covered, accessible, renders and behaves correctly, ready to ship ui-audit

Often both in sequence: product-design decides the states that must exist, ui-audit verifies the built code implements them.

Contents