UI Quality Audit Skill for Codex

Run a quick check of one screen or a broader product UI review. It ranks layout, accessibility, and interaction-state issues by impact and helps define release checks.

中文

Install in Codex

Use a Codex environment that can discover project skills. The example can be tested in a local project.

In a temporary directory, run git clone https://github.com/Eldergenix/Codex-Design.git. Enter the clone, run git checkout --detach 99b4b08ff62b8dd3a7a112438c1460fd6a02d09c, and review the pinned SKILL.md.
Copy the entire skills/ui-quality-audit folder to .agents/skills/ui-quality-audit in your own project, keeping its scripts, templates, and references together.
Open Codex in that project. Choose the skill with /skills or mention $ui-quality-audit, then run the example below. Restart Codex if the list does not refresh.

Example task

Make a local form whose submit button clips at 360px and whose input loses its focus indicator in dark mode. Ask Codex for a single-screen audit with verification steps.

What to check

The findings identify the affected width and interaction. After fixes, the form can be submitted at the narrow width and keyboard focus is visible in dark mode.

Original SKILL.md on GitHub · Updated 2026-11-11

Frequently asked question

When is a quick UI audit enough?

Use it for a small edit or a single screen. A full product audit can also cover information architecture, component structure, responsive behavior, and build verification.