# Ux Critique

> Critique frontend user flows for task completion, information architecture, forms, affordances, feedback, empty/error states, cognitive load, and usability risk.

- **Type:** Skill
- **Install:** `agentstack add skill-narek-khachikyan-skillranger-frontend-ux-critique`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Narek-Khachikyan](https://agentstack.voostack.com/s/narek-khachikyan)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Narek-Khachikyan](https://github.com/Narek-Khachikyan)
- **Source:** https://github.com/Narek-Khachikyan/SkillRanger/tree/main/registry/skills/frontend.ux-critique
- **Website:** https://skillranger.netlify.app/

## Install

```sh
agentstack add skill-narek-khachikyan-skillranger-frontend-ux-critique
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# UX Critique

Use this skill when reviewing a frontend flow, screen, form, onboarding path, checkout path, navigation model, or task workflow for usability. Do not use it for visual styling-only polish, framework review, or pure accessibility audits unless the request is about user flow and comprehension.

## Verification Outcome

- Report `verified` only when the primary flow and relevant recovery states were observed in a rendered surface or supported by equivalent user evidence.
- Without browser, analytics, or research evidence, return a hypothesis-led critique with `blocked` for scored or release conclusions. If an approved change is implemented before observation, mark it `implemented-unverified` and list the exact flow-state checks.
- Screenshots support hierarchy findings but do not prove task completion; distinguish static evidence from exercised behavior.

## Evidence Ledger

For every finding, label the source as **observed** (code, rendered UI, analytics, or research), **inferred** (a reasoned hypothesis), or **assumed** (missing product evidence). Only observed evidence can justify a release blocker or a scored verdict. When browser access, analytics, or user research is absent, describe usability concerns as hypotheses with a concrete validation step rather than fabricated certainty.

## Decision Rules

- Evaluate whether the user can complete the job, not whether the UI merely looks clean.
- Ground critique in a concrete persona, task, and success condition.
- Separate blockers from polish. Not every issue deserves the same urgency.
- Treat empty, loading, error, destructive, permission, and recovery states as part of the flow.
- Avoid vague advice such as "make it clearer"; name the decision, affordance, label, or feedback that fails.
- Use established UX heuristics as gates: system status, real-world language, user control, consistency, error prevention, recognition over recall, efficient paths for repeat users, minimalist focus, and constructive error recovery.
- Treat generic AI copy as a usability risk when it hides the user's actual decision, next step, or consequence.
- Treat visual slop as UX risk when it weakens task hierarchy, trust, information scent, state comprehension, or mobile usability.
- Critique from the product's object model and workflow, not from generic SaaS page expectations.

## Flow First Gate

Before critiquing or proposing a screen, name the primary flow:

- Entry: how the user arrives and what they already know.
- Main action: the one task the screen must make easy.
- Feedback: how the UI confirms progress, saves, waits, validates, or fails.
- Success: what completion looks like and what the user can do next.
- Recovery: how the user retries, edits, reconnects, requests access, undoes, or exits safely.

If the screen cannot be mapped to this flow, treat that as a UX finding rather than polishing the surface.

## Severity Scale

- S4 Critical: blocks the primary task, risks data loss, or creates serious trust/safety issues.
- S3 Major: likely causes abandonment, wrong choices, or repeated support burden.
- S2 Minor: slows users down or causes recoverable confusion.
- S1 Polish: improves confidence or clarity but does not block task completion.

## Workflow

1. Define the user, task, entry point, completion state, and business/user goal.
2. Identify the user's vocabulary and mental model. Replace implementation terms with terms the user recognizes.
3. Walk the flow step by step:
   - information scent;
   - affordances;
   - decision points;
   - feedback;
   - form labels and errors;
   - navigation and escape routes;
   - recovery from failure.
4. Inspect state coverage: first-run, empty, loading, partial data, validation error, server error, disabled, saving, success, permission denied, and destructive confirmation.
5. Identify cognitive load: unnecessary choices, unclear labels, duplicated controls, hidden dependencies, memory burdens, and weak hierarchy.
6. Check whether the visual hierarchy supports the task or merely looks polished.
7. Check information architecture and navigation fit: object model, role-specific entry points, saved views, breadcrumbs, search/command palette, settings scope, and permission boundaries.
8. Check microcopy specificity: labels, CTAs, headings, empty states, errors, AI outputs, trust markers, and data realism.
9. Produce prioritized findings with severity and concrete fixes.
10. Verify that proposed changes preserve accessibility and implementation constraints.

## Anti-Slop UX Checks

- Generic dashboard: Does it show decorative KPI cards instead of exception queues, decision strips, tables, saved views, or workflows?
- Generic landing page: Does each section advance an argument, or is it hero, logo row, feature cards, testimonials, pricing by habit?
- Generic form: Are labels, grouping, validation, hints, and buttons tied to the user's task, or is it a wall of same-width inputs?
- Generic onboarding: Does first run produce a meaningful outcome, or only welcome users and ask cosmetic preferences?
- Generic AI: Are AI outputs labeled with source, uncertainty, review controls, and consequences, or presented as magic?
- Generic mobile: Does mobile preserve task priority and action reachability, or blindly stack desktop sections?
- Generic copy: Could labels and CTAs fit any app? Replace with domain nouns and verbs.

## IA And Flow Patterns

- Build navigation around durable objects and core loops, not generic areas like Dashboard, Resources, Tools, and Activity.
- Use role-aware landing surfaces rather than separate role-based products when objects are shared.
- Command centers should answer what changed, what is blocked, what needs attention, and what to do next.
- Saved views are navigation for repeated work: `My open tasks`, `Failed runs`, `At-risk renewals`, `Needs approval`, `Unassigned`.
- Split panes fit triage, review, comparison, and high-throughput workflows; avoid them for simple one-off tasks.
- Settings need clear scope: personal, workspace, project, team, billing, security, integrations, AI agents.
- For agent-heavy products, expose runs, traces, instructions, approvals, failures, memory, evaluations, and cost as navigable objects.

## UX Copy Rules

- CTAs should name the action and object: `Review 12 high-risk renewals`, `Import claims CSV`, `Retry failed sync`.
- Empty states explain what belongs there, why it is empty, and the best next action.
- Errors explain problem, affected object, cause if known, and recovery path without blame.
- Disabled actions should explain why they are unavailable when users reasonably expect to use them.
- Trust-sensitive claims need evidence, source, recency, or caveat near the claim.

## AI-Specific UX Rules

- Agent-heavy products should expose runs, traces, tool calls, approvals, failures, memory, evaluations, cost, and recovery as user-understandable objects when those affect trust or task completion.
- Generated output needs provenance: sources, citations, confidence or uncertainty where useful, and clear controls to inspect, edit, accept, reject, regenerate, or export.
- Long-running AI tasks need progress, partial results, pause/stop, retry/resume, and failure recovery rather than a vague spinner or magical completion state.
- Permission-sensitive AI actions need explicit confirmation, scope, consequences, and a path to revoke or delete access where appropriate.
- AI memory and personalization should be visible and manageable; hidden memory is a UX and trust risk.
- Editable AI artifacts need version or undo paths when regeneration, tool calls, or accepting suggestions can overwrite user work.

## Validation

- Each finding should name the affected step, user intent, and likely failure mode.
- Fixes should be testable with a user action or visible state.
- Recommended copy should be plain, action-oriented, and consistent across control, confirmation, toast, and error states.
- If screenshots or a running app are unavailable, state which flow states still need observation.

## References

- Prefer project-local research, analytics, support evidence, product terminology, and adjacent flows.
- Use established usability heuristics as decision aids, not as a substitute for observing the product's actual users, objects, and completion criteria.

## Output Contract

- Flow and user task first.
- Prioritized findings with S4-S1 severity.
- Evidence inspected or missing.
- Recommended copy/layout/interaction changes.
- Residual risks and validation steps.

## Shared Contracts

Ownership: ux-critique owns task-flow critique and cannot select visual styling.

- [`frontend/browser-evidence`](references/shared/frontend--browser-evidence.md)
- [`frontend/visual-verification`](references/shared/frontend--visual-verification.md)

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Narek-Khachikyan](https://github.com/Narek-Khachikyan)
- **Source:** [Narek-Khachikyan/SkillRanger](https://github.com/Narek-Khachikyan/SkillRanger)
- **License:** MIT
- **Homepage:** https://skillranger.netlify.app/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-narek-khachikyan-skillranger-frontend-ux-critique
- Seller: https://agentstack.voostack.com/s/narek-khachikyan
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.