martinholovsky/claude-skills-generator/ui-ux-expert

Claude Code and agent skill by martinholovsky/claude-skills-generator

Trust tier 2
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

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.

Install

npx vskill@latest install martinholovsky/claude-skills-generator/ui-ux-expert

SKILL.md

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' }
    })
    expect(wrapper.attributes('role')).toBe('button')
    expect(wrapper.text()).toContain('Submit')
  })
  it('supports keyboard activation', async () => {
    const wrapper = mount(Button, {
      props: { label: 'Click me' }
    })
    await wrapper.trigger('keydown.enter')
    expect(wrapper.emitted('click')).toBeTruthy()
  })
  it('has visible focus indicator', () => {
    const wrapper = mount(Button, {
      props: { label: 'Focus me' }
    })
    // Focus indicator should be defined in CSS
    expect(wrapper.classes()).not.toContain('no-outline')
  })
  it('meets minimum touch target size', () => {
    const wrapper = mount(Button, {
      props: { label: 'Tap me' }
    })
    // Component should have min-height/min-width of 44px
    expect(wrapper.classes()).toContain('touch-target')
  })
  // Responsive behavior tests
  it('adapts to container width', () => {
    const wrapper = mount(Button, {
      props: { label: 'Responsive', fullWidth: true }
    })
    expect(wrapper.classes()).toContain('w-full')
  })
  // Loading state tests
  it('shows loading state correctly', async () => {
    const wrapper = mount(Button, {
      props: { label: 'Submit', loading: true }
    })
    expect(wrapper.find('[aria-busy="true"]').exists()).toBe(true)
    expect(wrapper.attributes('disabled')).toBeDefined()
  })
  // Color contrast (visual regression)
  it('maintains sufficient color contrast', () => {
    const wrapper = mount(Button, {
      props: { label: 'Contrast', variant: 'primary' }
    })
    // Primary buttons should use high-contrast colors
    expect(wrapper.classes()).toContain('bg-primary')
  })
})
Step 2: Implement Minimum to Pass
vue
<!-- components/ui/Button.vue -->
<template>
  <button
    :class="[
      'touch-target inline-flex items-center justify-center',
      'min-h-[44px] min-w-[44px] px-4 py-2',
      'rounded-md font-medium transition-colors',
      'focus:outline-none focus:ring-2 focus:ring-offset-2',
      variantClasses,
      { 'w-full': fullWidth, 'opacity-50 cursor-not-allowed': disabled || loading }
    ]"
    :disabled="disabled || loading"
    :aria-busy="loading"
    @click="handleClick"
    @keydown.enter="handleClick"
  >
    <span v-if="loading" class="animate-spin mr-2">
      <LoadingSpinner />
    </span>
    <slot>{{ label }}</slot>
  </button>
</template>
 
<script setup lang="ts">
import { computed } from 'vue'
 
const props = defineProps<{
  label?: string
  variant?: 'primary' | 'secondary' | 'ghost'
  fullWidth?: boolean
  disabled?: boolean
  loading?: boolean
}>()
 
const emit = defineEmits<{
  click: [event: Event]
}>()
 
const variantClasses = computed(() => {
  switch (props.variant) {
    case 'primary':
      return 'bg-primary text-white hover:bg-primary-dark focus:ring-primary'
    case 'secondary':
      return 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500'
    case 'ghost':
      return 'bg-transparent hover:bg-gray-100 focus:ring-gray-500'
    default:
      return 'bg-primary text-white hover:bg-primary-dark focus:ring-primary'
  }
})
 
function handleClick(event: Event) {
  if (!props.disabled && !props.loading) {
    emit('click', event)
  }
}
</script>
Step 3: Refactor if Needed

After tests pass, refactor for:

  • Better accessibility patterns
  • Performance optimizations
  • Design system alignment
  • Code maintainability
Step 4: Run Full Verification
bash
# Run component tests
npm run test:unit -- --filter Button
 
# Run accessibility audit
npm run test:a11y
 
# Run visual regression tests
npm run test:visual
 
# Build and check for errors
npm run build
 
# Run Lighthouse audit
npm run lighthouse

4. Performance Patterns

Pattern 1: Lazy Loading

Bad - Load all images immediately:

html
<img src="/hero-large.jpg" alt="Hero image" />
<img src="/product-1.jpg" alt="Product" />
<img src="/product-2.jpg" alt="Product" />

Good - Lazy load below-fold images:

html
<!-- Critical above-fold image - load immediately -->
<img src="/hero-large.jpg" alt="Hero image" fetchpriority="high" />
 
<!-- Below-fold images - lazy load -->
<img src="/product-1.jpg" alt="Product" loading="lazy" decoding="async" />
<img src="/product-2.jpg" alt="Product" loading="lazy" decoding="async" />
vue
<!-- Vue component with intersection observer -->
<template>
  <img
    v-if="isVisible"
    :src="src"
    :alt="alt"
    @load="onLoad"
  />
  <div v-else ref="placeholder" class="skeleton" />
</template>
 
<script setup>
import { ref, onMounted } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
 
const props = defineProps(['src', 'alt'])
const placeholder = ref(null)
const isVisible = ref(false)
 
onMounted(() => {
  const { stop } = useIntersectionObserver(
    placeholder,
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        isVisible.value = true
        stop()
      }
    },
    { rootMargin: '100px' }
  )
})
</script>
Pattern 2: Image Optimization

Bad - Single image size for all devices:

html
<img src="/photo.jpg" alt="Photo" />

Good - Responsive images with modern formats:

html
<picture>
  <!-- Modern format for supporting browsers -->
  <source
    type="image/avif"
    srcset="
      /photo-400.avif 400w,
      /photo-800.avif 800w,
      /photo-1200.avif 1200w
    "
    sizes="(max-width: 600px) 100vw, 50vw"
  />
  <source
    type="image/webp"
    srcset="
      /photo-400.webp 400w,
      /photo-800.webp 800w,
      /photo-1200.webp 1200w
    "
    sizes="(max-width: 600px) 100vw, 50vw"
  />
  <!-- Fallback -->
  <img
    src="/photo-800.jpg"
    alt="Photo description"
    loading="lazy"
    decoding="async"
    width="800"
    height="600"
  />
</picture>
Pattern 3: Critical CSS

Bad - Load all CSS before rendering:

html
<link rel="stylesheet" href="/styles.css" />

Good - Inline critical CSS, defer non-critical:

html
<head>
  <!-- Critical CSS inlined -->
  <style>
    /* Above-fold styles only */
    .hero { ... }
    .nav { ... }
    .cta-button { ... }
  </style>
 
  <!-- Non-critical CSS loaded async -->
  <link
    rel="preload"
    href="/styles.css"
    as="style"
    onload="this.onload=null;this.rel='stylesheet'"
  />
  <noscript>
    <link rel="stylesheet" href="/styles.css" />
  </noscript>
</head>
Pattern 4: Skeleton Screens

Bad - Show spinner while loading:

vue
<template>
  <div v-if="loading" class="spinner" />
  <div v-else>{{ content }}</div>
</template>

Good - Show skeleton that matches final layout:

vue
<template>
  <article class="card">
    <template v-if="loading">
      <!-- Skeleton matches final content structure -->
      <div class="skeleton-image animate-pulse bg-gray-200 h-48 rounded-t" />
      <div class="p-4 space-y-3">
        <div class="skeleton-title h-6 bg-gray-200 rounded w-3/4 animate-pulse" />
        <div class="skeleton-text h-4 bg-gray-200 rounded w-full animate-pulse" />
        <div class="skeleton-text h-4 bg-gray-200 rounded w-2/3 animate-pulse" />
      </div>
    </template>
    <template v-else>
      <img :src="image" :alt="title" class="h-48 object-cover rounded-t" />
      <div class="p-4">
        <h3 class="text-lg font-semibold">{{ title }}</h3>
        <p class="text-gray-600">{{ description }}</p>
      </div>
    </template>
  </article>
</template>
Pattern 5: Code Splitting

Bad - Import all components upfront:

typescript
import Dashboard from '@/views/Dashboard.vue'
import Settings from '@/views/Settings.vue'
import Analytics from '@/views/Analytics.vue'
import Admin from '@/views/Admin.vue'

Good - Lazy load routes and heavy components:

typescript
// router/index.ts
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue')
  },
  {
    path: '/settings',
    component: () => import('@/views/Settings.vue')
  },
  {
    path: '/analytics',
    // Prefetch for likely navigation
    component: () => import(/* webpackPrefetch: true */ '@/views/Analytics.vue')
  },
  {
    path: '/admin',
    // Only load when needed
    component: () => import('@/views/Admin.vue')
  }
]
// Lazy load heavy components
const HeavyChart = defineAsyncComponent({
  loader: () => import('@/components/HeavyChart.vue'),
  loadingComponent: ChartSkeleton,
  delay: 200,
  timeout: 10000
})
Pattern 6: Minimize Layout Shifts (CLS)

Bad - Images without dimensions cause layout shift:

html
<img src="/photo.jpg" alt="Photo" />

Good - Reserve space to prevent shift:

html
<!-- Always specify dimensions -->
<img
  src="/photo.jpg"
  alt="Photo"
  width="800"
  height="600"
  class="aspect-[4/3] object-cover"
/>
 
<!-- Use aspect-ratio for responsive images -->
<div class="aspect-video">
  <img src="/video-thumb.jpg" alt="Video" class="w-full h-full object-cover" />
</div>
 
<!-- Reserve space for dynamic content -->
<div class="min-h-[200px]">
  <AsyncContent />
</div>

5. Core Responsibilities

1. User-Centered Design Approach

This is the start of the file. Read the full SKILL.md on GitHub.

Security

  • Security scanPassed, 100 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

Installs
2
Unique users
1
Repository stars
37
Repository forks
4
7-day trend score
21

Installs come from the vskill CLI. Stars and forks are for the whole GitHub repository, not this skill alone. Refreshed 21 Mar 2026, 7 months ago.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/martinholovsky/claude-skills-generator/ui-ux-expert/badge)](https://verified-skill.com/skills/martinholovsky/claude-skills-generator/ui-ux-expert)

Something wrong with this skill or its page? Tell us.