Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Mandatory audit workflow for UI/UX changes that reads current state FIRST, checks for redundancy, respects clean design philosophy, and identifies genuine gaps before implementation. Auto-invoked when user mentions UI, UX, design, layout, homepage, page improvements, visual changes, or interface modifications.
.claude/skills/nicepkg-ui-ux-audit/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-16 | ✗→✓ | ▲ Improved | 72% | 0% |
| case-04 | ✗→✓ | ▲ Improved | 137% | 0% |
| case-11 | ✗→✓ | ▲ Improved | 133% | 0% |
| case-14 | ✗→✓ | ▲ Improved | 162% | 0% |
| case-19 | ✗→✓ | ▲ Improved | 137% | 0% |
<!-- Created by: Madina Gbotoe (https://madinagbotoe.com/) Project: Claude Code Skills - Professional Development Toolkit Version: 1.0 Created: October 28, 2025 Last Updated: October 29, 2025 License: MIT License Attribution Required: Yes - Include author name and link when sharing/modifying GitHub: https://github.com/mgbotoe/claude-code-share Find latest version: https://github.com/mgbotoe/claude-code-share/tree/main/claude-code-skills/ui-ux-audit
Purpose: UI/UX Audit skill - Prevents redundant implementations by auditing current state before UI/UX changes -->
Purpose: Prevent redundant implementations and cluttered designs by auditing current state FIRST.
When to invoke: Automatically when user mentions:
Order of execution:
Before making ANY recommendations, read these files:
bash# Target page file Read: src/app/[target-page]/page.tsx # Related components (if modifying existing sections) Read: src/components/sections/[component].tsx # Related data files Read: src/data/[related-data].tsx Read: src/data/page-content/[page]-content.ts # Check for existing similar functionality Grep: Search for keywords related to proposed feature
Example:
markdownUser: "Improve homepage" MUST READ FIRST: - src/app/page.tsx - src/components/sections/Hero.tsx - src/data/page-content/home-content.ts THEN analyze what EXISTS before proposing anything
Create inventory of current state:
markdown## Current State Audit: [Page Name] ### Existing Components - Component 1: [Description, location, purpose] - Component 2: [Description, location, purpose] ### Existing Data Display - Portfolio metrics: [Where shown, format] - CTAs: [Location, text, purpose] - Content sections: [List all sections] ### Design Characteristics - Layout: [Grid, flex, columns] - White space: [Generous, tight, balanced] - Information density: [Minimal, moderate, dense] - Visual style: [Clean, busy, colorful, minimal] ### Evidence [Show actual code snippets proving what exists]
Before proposing ANY addition, verify:
Anti-Patterns to Avoid (from October 2025 lessons):
❌ Portfolio Visualization when impact cards already show portfolio breakdown ❌ Large AI Assistant card when primary CTAs already exist in hero ❌ Metric sidebars on document-style pages (like /brief) ❌ Dashboards on intentionally minimal pages (like /ai-lab) ❌ Duplicate data displays in multiple sections ❌ Bulk additions without clear value proposition
Only propose additions for:
✅ Missing functionality (proven by code audit) ✅ Genuine UX problems (demonstrated, not assumed) ✅ Clear value add (specific benefit articulated) ✅ Respects clean design (doesn't add bulk)
Template:
markdown## Genuine Gaps Identified ### Gap 1: [Specific missing element] - Evidence: [Code shows this doesn't exist] - User need: [Why user needs this] - Value: [Specific benefit] - Simple solution: [Minimal approach] - No redundancy: [Confirmed doesn't duplicate X] ### Gap 2: [Next gap] ...
This portfolio has a CLEAN, MINIMAL aesthetic by design:
Check against these principles:
Questions to ask:
Present findings in this format:
markdown# UI/UX Audit Report: [Page Name] ## Current State Summary [2-3 sentences describing current design] ## What Already EXISTS 1. [Component/feature]: [Description with code location] 2. [Component/feature]: [Description with code location] 3. [Component/feature]: [Description with code location] Evidence: [Code snippets proving these exist] ## Redundancy Check Results ✅ No redundancy detected: [Explain] OR ⚠️ Potential redundancy: [Show what duplicates what] ## Genuine Gaps Identified ### Priority 1: [Most important gap] - Evidence: [Why this is missing] - User impact: [Specific problem it solves] - Proposed solution: [Minimal approach] - No redundancy: [Confirmed] ### Priority 2: [Next gap] ... ## NOT Recommended (Would Create Redundancy) ❌ [Proposed feature]: Already exists as [existing feature] ❌ [Proposed feature]: Would duplicate [existing data] ## Design Philosophy Compliance ✅ Respects clean, minimal aesthetic ✅ Adds value without adding bulk ✅ No information duplication OR ⚠️ Concerns: [List any design philosophy violations] ## Recommendation **Recommended:** Implement Priority 1 gap ([brief description]) **Not Recommended:** [List features that would add redundancy] **Next Steps:** 1. User review of findings 2. (Optional) Invoke ui-ux-designer agent for design critique 3. Implement approved changes incrementally
Before completing audit, verify:
If any answer is NO, STOP and reassess.
markdownUser: "Improve homepage" Bad Response: "I recommend adding: 1. Portfolio visualization showing $156M breakdown 2. Large dashboard with metrics 3. Section transitions between content 4. Enhanced testimonials with animations" Problem: Didn't read current state, didn't check for redundancy
markdownUser: "Improve homepage" Good Response: "Let me audit the current homepage first..." [Reads src/app/page.tsx] "Current State Audit: What EXISTS: - Impact cards already display portfolio breakdown ($156M, $91M, etc.) - Hero has primary CTAs (View Work, See Skills, Get In Touch) - Testimonials section exists - EKG dividers separate sections Redundancy Check: ⚠️ Adding portfolio visualization would DUPLICATE impact card data GENUINE Gap: ✅ No CTA after testimonials section (natural conversion point) Recommendation: - Add single strategic CTA after testimonials - Do NOT add portfolio visualization (redundant) - Keep clean, minimal design Would you like to proceed with the CTA addition?"
This skill enforces the mandatory rules from CLAUDE.md:
Auto-invoke this skill when user says:
UI/UX Terms:
Page Terms:
Component Terms:
General Improvement:
Question Form:
What went wrong that day:
This skill prevents those mistakes by:
This skill includes additional resources for comprehensive audits:
When to read:
Contains:
Read with: Read: [skill-directory]/REFERENCE.md
When to read:
Contains:
Read with: Read: [skill-directory]/FORMS.md
When to read:
Contains:
examples/good-audit-example.md - Gold standard auditexamples/bad-audit-example.md - What NOT to docase-studies/october-2025-incident.md - Real incident that inspired this skillREADME.md - Navigation guideRead with: Read: [skill-directory]/resources/[filename]
This is not optional. When user mentions UI/UX work, this skill MUST run first to audit current state before any implementation begins.
The goal: Prevent redundant implementations, respect existing design, propose targeted improvements only.
New to UI/UX audits? Start with resources/examples/good-audit-example.md to see the process in action.
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-16 | fail→pass | 18,552 | 5,951 | -68% | 1 | 1 | 0% | 2,339 | 4,017 | +72% | 0 | 0 | — |
case-01 | fail→fail | 39,842 | 4,406 | -89% | 1 | 1 | 0% | 6,232 | 3,516 | -44% | 0 | 0 | — |
case-02 | fail→fail | 25,836 | 4,654 | -82% | 1 | 1 | 0% | 4,283 | 3,455 | -19% | 0 | 0 | — |
case-03 | fail→fail | 20,599 | 3,043 | -85% | 1 | 1 | 0% | 3,063 | 3,325 | +9% | 0 | 0 | — |
case-04 | fail→pass | 12,004 | 11,607 | -3% | 1 | 1 | 0% | 1,780 | 4,220 | +137% | 0 | 0 | — |
case-05 | fail→fail | 17,066 | 15,427 | -10% | 1 | 1 | 0% | 2,564 | 5,430 | +112% | 0 | 0 | — |
case-06 | fail→fail | 12,594 | 3,471 | -72% | 1 | 1 | 0% | 1,885 | 3,590 | +90% | 0 | 0 | — |
case-07 | pass→pass | 13,414 | 8,619 | -36% | 1 | 1 | 0% | 1,975 | 4,311 | +118% | 0 | 0 | — |
case-08 | pass→pass | 8,802 | 7,670 | -13% | 1 | 1 | 0% | 1,370 | 4,170 | +204% | 0 | 0 | — |
case-09 | pass→pass | 12,572 | 7,749 | -38% | 1 | 1 | 0% | 1,883 | 4,404 | +134% | 0 | 0 | — |
case-10 | fail→fail | 33,741 | 5,281 | -84% | 1 | 1 | 0% | 6,053 | 3,542 | -41% | 0 | 0 | — |
case-11 | fail→pass | 13,314 | 10,654 | -20% | 1 | 1 | 0% | 2,060 | 4,806 | +133% | 0 | 0 | — |
case-12 | pass→pass | 9,132 | 5,663 | -38% | 1 | 1 | 0% | 1,389 | 4,088 | +194% | 0 | 0 | — |
case-13 | pass→pass | 10,635 | 6,366 | -40% | 1 | 1 | 0% | 1,640 | 4,164 | +154% | 0 | 0 | — |
case-14 | fail→pass | 8,976 | 3,286 | -63% | 1 | 1 | 0% | 1,421 | 3,730 | +162% | 0 | 0 | — |
case-15 | fail→fail | 8,493 | 2,987 | -65% | 1 | 1 | 0% | 1,389 | 3,655 | +163% | 0 | 0 | — |
case-17 | pass→pass | 11,887 | 5,980 | -50% | 1 | 1 | 0% | 1,678 | 4,091 | +144% | 0 | 0 | — |
case-18 | fail→fail | 10,208 | 7,418 | -27% | 1 | 1 | 0% | 1,613 | 4,321 | +168% | 0 | 0 | — |
case-19 | fail→pass | 12,205 | 9,073 | -26% | 1 | 1 | 0% | 1,930 | 4,579 | +137% | 0 | 0 | — |
case-20 | pass→pass | 18,816 | 12,543 | -33% | 1 | 1 | 0% | 3,090 | 5,455 | +77% | 0 | 0 | — |
case-21 | pass→pass | 17,100 | 15,587 | -9% | 1 | 1 | 0% | 3,692 | 6,155 | +67% | 0 | 0 | — |
case-22 | pass→pass | 18,107 | 16,429 | -9% | 1 | 1 | 0% | 2,798 | 5,575 | +99% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted, and 19 counted toward the lift figure. The other 3 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of +23 percentage points is the difference between those two pass rates over the 19 comparable cases. 3 cases got worse with the skill loaded, and they are included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.