What is the ui-ux-audit skill?
The ui-ux-audit skill is a mandatory pre-implementation workflow bundled in the nicepkg/ai-workflow marketing-pro collection. An agent must read the target files, list what already exists, check every idea for duplication, name real gaps with evidence, and test the result against a clean design philosophy before building.
This skill was written after one bad session in October 2025. An agent added a portfolio visualization that repeated data already on the page, plus bulk elsewhere, and the owner reverted everything. The rule that followed is simple: audit first.
It sits inside nicepkg/ai-workflow, in the marketing-pro workflow, and its header credits Madina Gbotoe as author under the MIT license with an attribution request. It auto-invokes when a request mentions UI, UX, layout or redesign.
The five-step audit
- Read the target page, related components and data files before making any recommendation.
- Document what exists: components, data displays, calls to action and design characteristics, with code as evidence.
- Run a redundancy check against a short list of yes or no questions.
- Name only genuine gaps, each with evidence, user need, value and a minimal fix.
- Check the proposal against the site's clean design philosophy.
What the report contains
Findings follow a fixed template: current state summary, what already exists, redundancy results, prioritized gaps, a NOT Recommended list and a design-philosophy verdict. Then comes one recommendation, so the person reviewing sees the reasoning before anything is built.
The skill ends with a verification checklist. If any answer is no, such as whether the files were read first or whether the simplest solution was proposed, the agent must stop and reassess before presenting.
Who the ui-ux-audit skill suits
Best for
- Agents that keep adding sections to pages that were deliberately minimal.
- Reviewing an existing page before a redesign so new work extends it instead of duplicating it.
- Teams that want evidence in the form of code snippets, not opinion, behind each suggestion.
Not for
- Greenfield design, since the whole method assumes a current state to read.
- Work that needs a visual critique of screenshots. For that, see critique or interface-review.
- Projects whose layout differs from the examples. The sample paths assume a Next.js src folder and need adapting.
Use it with UiChemy
The audit reads code files, so it suits a React or Next.js repository better than a WordPress site. Run it on your codebase first. When the destination is WordPress, UiChemy AI to WordPress can bring the reviewed build in. Click Get Started on uichemy.com.
Related skills for the next step: impeccable-audit for a technical quality pass and landing-page-conversion-audit when the page exists to convert.
How to install UI/UX Audit Skill: Read the Page Before Changing It
npx add-skill nicepkg/ai-workflow/workflows/marketing-pro-workflow --skill ui-ux-auditRun the install command
The README's single-skill format adds the skill name with --skill. Run
npx add-skill nicepkg/ai-workflow/workflows/marketing-pro-workflow --skill ui-ux-auditand follow the prompts.Choose where it lands
Add --global to install for every project, or -a with a tool name, such as
-a claude-code -a cursor, to target specific assistants. The -y flag skips prompts.Or copy it by hand
Clone https://github.com/nicepkg/ai-workflow.git and copy workflows/marketing-pro-workflow/.claude/skills/ui-ux-audit, with FORMS.md, REFERENCE.md and resources, into your agent's skills folder.
Adapt the example paths
Step 1 lists sample files such as src/app and src/components. Tell the agent your real page, component and data locations.
Check that it loaded
Ask the agent to improve a page. It should read the files first, list what exists, run the redundancy check, and present findings before changing any code.
Key features
- Runs before implementationThe SKILL.md states the order: audit first, present findings to the user, optionally get a design critique, and only then implement approved changes.
- Read-first ruleStep 1 is labeled non-negotiable. The agent reads the target page, related components and data files, and greps for similar functionality before recommending anything.
- Evidence-based inventoryA template lists existing components, data displays, calls to action, content sections and design traits such as layout, white space and information density.
- Redundancy checklistFive questions ask whether data is already shown, similar functionality exists, content would be duplicated, a clean design would be cluttered or information appears twice.
- Anti-pattern listExamples from the October 2025 incident include duplicate data displays, dashboards on intentionally minimal pages and bulk additions without a clear value proposition.
- Genuine gap templateEach gap needs evidence, user need, value, a simple solution and a note confirming it duplicates nothing.
- Design philosophy checkProposals are tested against simple layouts, strategic white space, information shown once and document-style pages staying document-like.
- Fixed audit report formatThe output includes a NOT Recommended section for ideas rejected as redundant, and a final recommendation with next steps for the reviewer.
- Supporting filesFORMS.md has quick and full audit templates, REFERENCE.md covers WCAG 2.1 AA and UX research, and a resources folder has good and bad example audits.
Frequently asked questions
What is the ui-ux-audit skill?
It is a skill folder in the nicepkg/ai-workflow marketing-pro workflow. Its SKILL.md describes a mandatory audit that reads current state first, checks redundancy, respects a clean design philosophy and identifies genuine gaps before any UI or UX implementation starts.
How do I install the ui-ux-audit skill?
Run the README's npx add-skill command with the marketing-pro-workflow path and the --skill ui-ux-audit flag. If you prefer a manual route, copy the skill folder from the repository into your agent's skills directory and keep its supporting files beside SKILL.md.
When does the skill trigger?
Its description says it auto-invokes when a request mentions UI, UX, design, layout, homepage, page improvements, visual changes or interface modifications. A trigger list adds phrases like make it better, improve experience and add component.
Which AI coding agents can use it?
The repository README lists Claude Code, Cursor, GitHub Copilot, Codex, OpenCode, Gemini CLI, Windsurf and others, with a project and global skills path for each. The skill itself is plain markdown, so any agent that loads SKILL.md folders can follow it.
Who wrote the skill?
A comment block in SKILL.md credits Madina Gbotoe, with MIT licensing and a request to include author name and link when sharing or modifying. It points to an upstream repository named claude-code-share for the latest version.
Is it only for portfolio sites?
The examples come from a portfolio site, with sections such as impact cards and a hero, and the paths assume a Next.js src layout. The method of reading, inventorying and checking redundancy applies elsewhere, but you should replace the sample details.
What does the redundancy check look for?
It asks if data is already shown elsewhere, if similar functionality exists in another form, if the addition would duplicate content, if it would clutter a clean design, and if information would appear more than once on the page.
What license does the ui-ux-audit skill use?
GitHub lists the nicepkg/ai-workflow repository under the MIT license, and the skill header also says MIT with attribution required. Check the repository before you redistribute the folder, and keep the author credit in the header.