skill CX Codex

uxui-evaluator — Claude Code skill: UX/UI audit and setup

Q: How do I install uxui-evaluator in Claude Code?

Run `npx skills add uxuiprinciples/agent-skills --skill uxui-evaluator -a claude-code`, then check `~/.claude/skills/uxui-evaluator/SKILL.md`.

This skill reviews interface descriptions against UX/UI principles and returns structured findings. Use it before building a screen or user flow.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add uxuiprinciples/agent-skills --skill uxui-evaluator -a claude-code

Open on GitHub

What uxui-evaluator does

uxui-evaluator examines an interface description through 195 UX/UI principles grouped into 6 framework parts. It first classifies the interface, selects relevant areas, and then produces JSON findings with severity, suggested fixes, strengths, and an overall score. The checks cover topics such as cognitive load, navigation, forms, accessibility, and AI interface behaviour.

The skill includes curl-based tools for a full audit, principle lookup by slug, and listing principles for a framework part. UXUI_API_KEY is optional, but enriched results from uxuiprinciples.com require API access. The Pro tier exposes all 195 principles, while the free tier returns 12. Without UXUI_API_KEY, the API audit cannot run and the skill uses its internal framework knowledge instead.

What it helps with

audit a signup form before implementation
spot UX issues in a dashboard or navigation flow
assign severity and remediation to interface findings
connect design findings with business impact

Example prompts for the agent

Review this signup form and return a structured UX/UI audit.
Inspect this dashboard for principle violations, severity, and concrete fixes.
Evaluate the checkout flow and include business impact when API access is available.

How to install uxui-evaluator

1Skills CLI (Vercel)

npx skills add uxuiprinciples/agent-skills --skill uxui-evaluator -a claude-code

2Manually: put the files in place

~/.claude/skills/uxui-evaluator/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/uxui-evaluator/

1Skills CLI (Vercel)

npx skills add uxuiprinciples/agent-skills --skill uxui-evaluator -a codex

2Manually: put the files in place

.agents/skills/uxui-evaluator/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add uxuiprinciples/agent-skills --skill uxui-evaluator -a cursor

2Manually: put the files in place

.cursor/skills/uxui-evaluator/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install uxuiprinciples/agent-skills uxui-evaluator

2Manually: put the files in place

.github/skills/uxui-evaluator/SKILL.md

1Skills CLI (Vercel)

npx skills add uxuiprinciples/agent-skills --skill uxui-evaluator -a gemini-cli

2Platform CLI

gemini skills install https://github.com/uxuiprinciples/agent-skills --path uxui-evaluator

Manually: put the files in place

.devin/skills/uxui-evaluator/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add uxuiprinciples/agent-skills --skill uxui-evaluator -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about uxui-evaluator

How do I install uxui-evaluator in Claude Code?

Run npx skills add uxuiprinciples/agent-skills --skill uxui-evaluator -a claude-code, then check ~/.claude/skills/uxui-evaluator/SKILL.md.

What does uxui-evaluator do?

It classifies an interface description and checks it against the UX/UI framework. The JSON result includes findings, severity, remediation, strengths, and an overall score.

What changes when UXUI_API_KEY is set?

The key enables API-based audits and extra principle data for findings. Pro access covers all 195 principles, while the free tier returns 12.

Similar skills

All skills for Design →

frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set5

vibe-coding-advisor Injects relevant UX principles into your AI coding session before you generate UI components. CX Codex +1 ★ 26repo stars interface-auditor Reads an interface description and flags UX antipatterns, rating severity and returning fix steps as JSON. CX Codex +1 ★ 26repo stars flow-checker Audits UX flows before wireframing and before production release. Catches friction in onboarding, forms, pricing tables, dashboards, and empty states. CX Codex +1 ★ 26repo stars ai-interface-reviewer This skill reviews AI-powered interfaces against a 44-principle taxonomy and returns structured findings with severity and remediation. Use it to assess chat, copilot features, or agent workflows. CX Codex +1 ★ 26repo stars