# ui-ux-excellence

> Premium UI/UX standards. MUST BE USED for all frontend components.

- Author: root
- Repository: vp2722/pcworkstation.in
- Version: 20251226105907
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/vp2722/pcworkstation.in
- Web: https://mule.run/skillshub/@@vp2722/pcworkstation.in~ui-ux-excellence:20251226105907

---

---
name: ui-ux-excellence
description: Premium UI/UX standards. MUST BE USED for all frontend components.
allowed-tools: Read, Write, Edit
---

# UI/UX Excellence Skill

You enforce Linear.app + Vercel quality standards.

## Design Philosophy

### Clarity Over Everything

- One primary action per screen
- Clear visual hierarchy
- Meaningful whitespace
- Obvious affordances

### Motion With Purpose

- Every animation serves a purpose
- Spring physics for natural feel
- 60fps constant, no exceptions
- Acknowledge user actions < 100ms

## Mandatory Patterns

### 1. Responsive (Mobile-First)

```tsx
<div className="
  px-4 py-2           // Mobile (default)
  md:px-6 md:py-4     // Tablet (768px+)
  lg:px-8 lg:py-6     // Desktop (1024px+)
">
```

### 2. Accessible (WCAG AAA)

```tsx
<Button
  aria-label="Close dialog"
  aria-pressed={isPressed}
  role="button"
  tabIndex={0}
  onKeyDown={(e) => e.key === 'Enter' && onClick()}
>
  <X className="h-4 w-4" aria-hidden="true" />
</Button>
```

### 3. Purposeful Animation

```tsx
import { motion } from 'framer-motion';

// Spring config for natural feel
const spring = {
  type: "spring",
  stiffness: 300,
  damping: 30,
};

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: -20 }}
  transition={spring}
>
```

### 4. Loading States (Always Skeleton)

```tsx
// Never show spinners for > 200ms
// Always use skeleton loaders
;<Skeleton className="h-12 w-full rounded-lg" />

// Optimistic updates for perceived speed
const { mutate } = useMutation({
  onMutate: async (newData) => {
    await queryClient.cancelQueries(['key'])
    const previous = queryClient.getQueryData(['key'])
    queryClient.setQueryData(['key'], newData)
    return { previous }
  },
  onError: (err, newData, context) => {
    queryClient.setQueryData(['key'], context?.previous)
  },
})
```

### 5. Error States (Helpful, Not Scary)

```tsx
<Alert variant="destructive">
  <AlertCircle className="h-4 w-4" />
  <AlertTitle>Something went wrong</AlertTitle>
  <AlertDescription>
    We couldn't save your changes. Please try again.
    <Button variant="link" onClick={retry}>
      Retry
    </Button>
  </AlertDescription>
</Alert>
```

### 6. Empty States

```tsx
<div className="flex flex-col items-center justify-center py-12 text-center">
  <Inbox className="text-muted-foreground mb-4 h-12 w-12" />
  <h3 className="text-lg font-medium">No items yet</h3>
  <p className="text-muted-foreground mt-1">Get started by creating your first item.</p>
  <Button className="mt-4">Create Item</Button>
</div>
```

## Component Checklist

For EVERY component:

- [ ] Keyboard navigable?
- [ ] Screen reader compatible?
- [ ] Touch targets ≥ 44px?
- [ ] Color contrast ≥ 4.5:1?
- [ ] Focus indicator visible?
- [ ] Loading state defined?
- [ ] Error state defined?
- [ ] Empty state defined?
- [ ] Responsive on all breakpoints?
- [ ] Animations at 60fps?

## Forbidden Patterns

❌ Inter, Roboto, Arial fonts
❌ Generic purple/blue gradients
❌ Static interfaces without motion
❌ Accessibility as afterthought
❌ Cookie-cutter layouts
❌ Spinners instead of skeletons
❌ Console errors in production
❌ Unhandled promise rejections