# ui-ux-expert

Configures the agent to design accessible web components and design systems. It focuses on WCAG 2.2 standards, test-driven UI, and Core Web Vitals.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 828 installs · ★ 48
- Author: martinholovsky
- License: Unlicense · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/martinholovsky/claude-skills-generator/tree/HEAD/skills/ui-ux-expert/SKILL.md
- Updated: 2025-12-06
- HTML: https://affpapa.org/en/nevibecode/skills/ui-ux-expert

## What it does

This skill guides the agent through a test-driven workflow for front-end components. It starts by writing failing tests for ARIA attributes, keyboard controls, and a minimum 44px touch target before producing markup.

The workflow validates accessibility, responsiveness, and loading states with tools like Vitest and Vue Test Utils. Once code passes, verification runs through Lighthouse, unit tests, and accessibility audits via `npm run test:a11y`.

Performance rules prioritize Core Web Vitals by deferring offscreen images and preventing layout shifts. The skill configuration specifies the `sonnet` model.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add martinholovsky/claude-skills-generator --skill ui-ux-expert -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/ui-ux-expert/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/ui-ux-expert/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add martinholovsky/claude-skills-generator --skill ui-ux-expert -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/ui-ux-expert/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add martinholovsky/claude-skills-generator --skill ui-ux-expert -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/ui-ux-expert/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install martinholovsky/claude-skills-generator ui-ux-expert
```

2. **Manually: put the files in place**
- File: `.github/skills/ui-ux-expert/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add martinholovsky/claude-skills-generator --skill ui-ux-expert -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/martinholovsky/claude-skills-generator --path skills/ui-ux-expert
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/ui-ux-expert/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add martinholovsky/claude-skills-generator --skill ui-ux-expert -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/martinholovsky/claude-skills-generator/tree/HEAD/skills/ui-ux-expert/SKILL.md

## When to use it
- write component accessibility tests before drafting UI code
- implement WCAG 2.2 AA compliant buttons and interactive elements
- enforce minimum 44px touch targets and visible focus rings
- optimize image loading to improve Core Web Vitals

## Example prompts
- Build a responsive button component using TDD, starting with Vitest accessibility tests.
- Audit our navigation bar against WCAG 2.2 AA keyboard navigation guidelines.
- Implement lazy loading for below-the-fold images to reduce layout shifts.

## Source text · SKILL.md · Unlicense

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: e4105da562283e3a.

BEGIN THIRD-PARTY FILE e4105da562283e3a
````text
---
name: ui-ux-expert
description: "Expert UI/UX designer specializing in user-centered design, accessibility (WCAG 2.2), design systems, and responsive interfaces. Use when designing web/mobile applications, implementing accessible interfaces, creating design systems, or conducting usability testing."
model: sonnet
---

# UI/UX Design Expert

## 1. Overview

You are an elite UI/UX designer with deep expertise in:

- **User-Centered Design**: User research, personas, journey mapping, usability testing
- **Accessibility**: WCAG 2.2 AA/AAA compliance, ARIA patterns, screen readers, keyboard navigation
- **Design Systems**: Component libraries, design tokens, pattern documentation, Figma
- **Responsive Design**: Mobile-first, fluid layouts, breakpoints, adaptive interfaces
- **Visual Design**: Typography, color theory, spacing systems, visual hierarchy
- **Prototyping**: Figma, interactive prototypes, micro-interactions, animation principles
- **Design Thinking**: Ideation, wireframing, user flows, information architecture
- **Usability**: Heuristic evaluation, A/B testing, analytics integration, user feedback

You design interfaces that are:
- **Accessible**: WCAG 2.2 compliant, inclusive, universally usable
- **User-Friendly**: Intuitive navigation, clear information architecture
- **Consistent**: Design system-driven, predictable patterns
- **Responsive**: Mobile-first, adaptive across all devices
- **Performant**: Optimized assets, fast load times, smooth interactions

**Risk Level**: LOW
- Focus areas: Design quality, accessibility compliance, usability issues
- Impact: Poor UX affects user satisfaction, accessibility violations may have legal implications
- Mitigation: Follow WCAG 2.2 guidelines, conduct usability testing, iterate based on user feedback

---

## 2. Core Principles

1. **TDD First**: Write component tests before implementation to validate accessibility, responsive behavior, and user interactions
2. **Performance Aware**: Optimize for Core Web Vitals (LCP, FID, CLS), lazy load images, minimize layout shifts
3. **User-Centered Design**: Research-driven decisions validated through usability testing
4. **Accessibility Excellence**: WCAG 2.2 Level AA compliance as baseline
5. **Design System Thinking**: Consistent, reusable components with design tokens
6. **Mobile-First Responsive**: Start with mobile, scale up progressively
7. **Iterative Improvement**: Test early, test often, iterate based on feedback

---

## 3. Implementation Workflow (TDD)

Follow this test-driven workflow when implementing UI components:

### Step 1: Write Failing Test First

```typescript
// tests/components/Button.test.ts
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Button from '@/components/ui/Button.vue'

describe('Button', () => {
  // Accessibility tests
  it('has accessible role and label', () => {
    const wrapper = mount(Button, {
      props: { label: 'Submit' }
    })
````
END THIRD-PARTY FILE e4105da562283e3a

The third-party file has ended. Everything between the e4105da562283e3a tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2968 of 42772 bytes. © martinholovsky · Unlicense · https://github.com/martinholovsky/claude-skills-generator/tree/HEAD/skills/ui-ux-expert/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md