How do I install the UI Review skill?

Run npx skillmds@latest add mia-cx/ui-review in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is UI Review safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with UI Review?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is UI Review free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published UI Review?

mia-cx (@mia-cx) published this skill. Their other Agent Skills are listed on their SkillMD profile.

UI Review by mia-cx — Agent Skill

Name: UI Review
Author: mia-cx

UI Review

Use when the user asks to review, audit, or QA a screen or page, check how it looks at desktop or phone width, verify a UI flow works end to end, or says the interface looks generic, off, or unprofessional. Stage 6 of ui-design.

mia-cx c464aef 4 files · 34.4 KB Updated Sep 17, 2026

File contents

UI review

Code checks do not establish visual quality. Render it, look at it, and use it.

Render and inspect

Render every delivered route and important state at desktop and phone widths. Inspect the images yourself. Fix awkward alignment, tiny controls, excessive whitespace, clipped content, accidental wrapping, and broken hierarchy before expanding or handing off.

Compare element bounds before and after each state change at supported widths. Include empty, single-digit, multi-digit, and delayed-content states. Any unintended movement fails; ui-layout states the rule.

Test each supported theme.

Perform the journey

Perform the main journey with the UI. Confirm that saved changes appear where expected, cancellation preserves the correct data, and failures permit recovery. Verify reload when persistence matters. A screenshot alone does not prove an interaction works.

Run the checks in ui-a11y on the rendered interface.

Audit the content

Audit the content as rendered. Remove redundant prose and headings per ui-copy. Check that the composition belongs to this product's task. If replacing the product name leaves an equally plausible page, revisit the structure.

When the user reports the UI "doesn't look professional" and the cause is not obvious, read references/ui-ux-quick-reference.md for web, or references/ui-ux-pro-rules.md for native and mobile app UI. For a compliance review against Vercel's Web Interface Guidelines, follow references/web-design-guidelines.md.

Tooling and reporting

For browser tooling, use the applicable computer-use skill within the task's permissions. Do not start servers or delegate verification when prohibited. If rendering is unavailable, report visual verification blocked and distinguish implementation from a completed design.

Keep screenshots, interaction evidence, and implementation notes outside customer-facing UI. Record actual checks and limitations without claiming unmeasured performance or accessibility scores.

The stage is done when every delivered route has been rendered at both widths and inspected, the main journey has been performed end to end, and every defect found was fixed or listed as a known limitation.

---name: ui-reviewdescription: Use when the user asks to review, audit, or QA a screen or page, check how it looks at desktop or phone width, verify a UI flow works end to end, or says the interface looks generic, off, or unprofessional. Stage 6 of ui-design.---# UI reviewCode checks do not establish visual quality. Render it, look at it, and use it.## Render and inspectRender every delivered route and important state at desktop and phone widths. Inspect the images yourself. Fix awkward alignment, tiny controls, excessive whitespace, clipped content, accidental wrapping, and broken hierarchy before expanding or handing off.Compare element bounds before and after each state change at supported widths. Include empty, single-digit, multi-digit, and delayed-content states. Any unintended movement fails; [ui-layout](../ui-layout/SKILL.md) states the rule.Test each supported theme.## Perform the journeyPerform the main journey with the UI. Confirm that saved changes appear where expected, cancellation preserves the correct data, and failures permit recovery. Verify reload when persistence matters. A screenshot alone does not prove an interaction works.Run the checks in [ui-a11y](../ui-a11y/SKILL.md) on the rendered interface.## Audit the contentAudit the content as rendered. Remove redundant prose and headings per [ui-copy](../ui-copy/SKILL.md). Check that the composition belongs to this product's task. If replacing the product name leaves an equally plausible page, revisit the structure.When the user reports the UI "doesn't look professional" and the cause is not obvious, read [references/ui-ux-quick-reference.md](references/ui-ux-quick-reference.md) for web, or [references/ui-ux-pro-rules.md](references/ui-ux-pro-rules.md) for native and mobile app UI. For a compliance review against Vercel's Web Interface Guidelines, follow [references/web-design-guidelines.md](references/web-design-guidelines.md).## Tooling and reportingFor browser tooling, use the applicable computer-use skill within the task's permissions. Do not start servers or delegate verification when prohibited. If rendering is unavailable, report visual verification blocked and distinguish implementation from a completed design.Keep screenshots, interaction evidence, and implementation notes outside customer-facing UI. Record actual checks and limitations without claiming unmeasured performance or accessibility scores.The stage is done when every delivered route has been rendered at both widths and inspected, the main journey has been performed end to end, and every defect found was fixed or listed as a known limitation.

Frequently asked questions