Frontend UI/UX Engineer

Purpose

Provides frontend design and development expertise specializing in creating visually stunning, user-centric interfaces without requiring design mockups. Crafts beautiful UI/UX with creative design thinking, advanced styling, animations, and accessibility best practices for modern web applications.

When to Use

• Need to transform functional UI into visually stunning interfaces

• Design mockups don't exist but beautiful UI is required

• Visual polish and micro-interactions are priority

• Component styling requires creative design thinking

• User experience improvements needed without dedicated designer

Quick Start

Invoke this skill when:

• Need to transform functional UI into visually stunning interfaces

• Design mockups don't exist, but beautiful UI is required

• Visual polish and micro-interactions are priority over code elegance

• Component styling requires creative design thinking

• User experience improvements needed without dedicated designer

Do NOT invoke when:

• Backend logic or API development needed

• Pure code refactoring without visual changes

• Performance optimization is sole priority

• Security-focused development required

• Database or infrastructure work

Core Workflows

Workflow 1: Transform Functional Component to Stunning UI

Use case: Given a plain React component, make it visually exceptional

Input Example:

// Before: Functional but plain

function ProductCard({ product }: { product: Product }) {

  return (

    <div>

      <img src={product.image} alt={product.name} />

      <h3>{product.name}</h3>

      <p>${product.price}</p>

      <button>Add to Cart</button>

    </div>

  );

}

Steps:

1. Visual Analysis (2 minutes)

Questions to answer:

- What emotion should this evoke? (Premium? Playful? Trustworthy?)

- What's the visual hierarchy? (Image > Name > Price > CTA)

- What interactions delight users? (Hover effects, smooth transitions)

- Where's the whitespace needed? (Breathing room around elements)

2. Color & Typography Enhancement

// After: Visual foundation established

import { motion } from 'framer-motion';

function ProductCard({ product }: { product: Product }) {

  return (

    <motion.div

      className="group relative overflow-hidden rounded-2xl bg-white shadow-lg transition-shadow hover:shadow-2xl"

      whileHover={{ y: -4 }}

      transition={{ duration: 0.2, ease: 'easeOut' }}

    >

      {/* Image container with aspect ratio */}

      <div className="relative aspect-square overflow-hidden">

        <img

          src={product.image}

          alt={product.name}

          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"

        />

        {/* Gradient overlay for readability */}

        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 transition-opacity group-hover:opacity-100" />

      </div>

      {/* Content with proper spacing */}

      <div className="p-6 space-y-3">

        <h3 className="text-xl font-semibold text-gray-900 line-clamp-2">

          {product.name}

        </h3>

        <div className="flex items-baseline gap-2">

          <span className="text-2xl font-bold text-blue-600">

            ${product.price}

          </span>

          {product.compareAtPrice &#x26;&#x26; (

            <span className="text-sm text-gray-500 line-through">

              ${product.compareAtPrice}

            </span>

          )}

        </div>

        {/* Enhanced CTA button */}

        <button className="w-full rounded-lg bg-blue-600 px-6 py-3 font-medium text-white transition-colors hover:bg-blue-700 active:bg-blue-800 disabled:bg-gray-300 disabled:cursor-not-allowed">

          Add to Cart

        </button>

      </div>

    </motion.div>

  );

}

3. Micro-interactions & Polish

// Final: Delightful interactions added

function ProductCard({ product, onAddToCart }: ProductCardProps) {

  const [isAdded, setIsAdded] = useState(false);

  const handleAddToCart = () => {

    onAddToCart(product);

    setIsAdded(true);

    setTimeout(() => setIsAdded(false), 2000);

  };

  return (

    <motion.div

      layout

      className="group relative overflow-hidden rounded-2xl bg-white shadow-lg transition-shadow hover:shadow-2xl"

      whileHover={{ y: -4 }}

    >

      <div className="relative aspect-square overflow-hidden">

        <img

          src={product.image}

          alt={product.name}

          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"

        />

        {/* Sale badge with animation */}

        {product.onSale &#x26;&#x26; (

          <motion.div

            initial={{ scale: 0, rotate: -180 }}

            animate={{ scale: 1, rotate: 0 }}

            className="absolute top-4 right-4 rounded-full bg-red-500 px-3 py-1 text-sm font-bold text-white shadow-lg"

          >

            SALE

          </motion.div>

        )}

      </div>

      <div className="p-6 space-y-3">

        <h3 className="text-xl font-semibold text-gray-900 line-clamp-2 transition-colors group-hover:text-blue-600">

          {product.name}

        </h3>

        <div className="flex items-baseline gap-2">

          <motion.span

            className="text-2xl font-bold text-blue-600"

            key={product.price} // Re-animate on price change

            initial={{ scale: 1.2, color: '#ef4444' }}

            animate={{ scale: 1, color: '#2563eb' }}

          >

            ${product.price}

          </motion.span>

          {product.compareAtPrice &#x26;&#x26; (

            <span className="text-sm text-gray-500 line-through">

              ${product.compareAtPrice}

            </span>

          )}

        </div>

        {/* Button with success state */}

        <button

          onClick={handleAddToCart}

          className={`

            w-full rounded-lg px-6 py-3 font-medium text-white transition-all

            ${isAdded

              ? 'bg-green-500 scale-105'

              : 'bg-blue-600 hover:bg-blue-700 active:scale-95'

            }

          `}

        >

          {isAdded ? (

            <span className="flex items-center justify-center gap-2">

              <CheckIcon className="h-5 w-5" />

              Added!

            </span>

          ) : (

            'Add to Cart'

          )}

        </button>

      </div>

    </motion.div>

  );

}

Expected Outcome:

• Visual appeal increased 5x

• Engagement metrics improve 20-40% (typical)

• User delight through micro-interactions

• Maintains accessibility (ARIA labels, keyboard navigation)

Patterns & Templates

Pattern 1: Glassmorphism Card

When to use: Modern, premium aesthetic (works well with colorful backgrounds)

function GlassCard({ children, className = '' }: GlassCardProps) {

  return (

    <div className={`

      relative overflow-hidden rounded-2xl

      backdrop-blur-xl backdrop-saturate-150

      bg-white/10 border border-white/20

      shadow-xl shadow-black/5

      ${className}

    `}>

      {/* Optional gradient overlay */}

      <div className="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent opacity-50" />

      <div className="relative z-10 p-6">

        {children}

      </div>

    </div>

  );

}

Pattern 3: Skeleton Loading with Shimmer

When to use: Loading states for cards, lists (better UX than spinners)

function SkeletonCard() {

  return (

    <div className="relative overflow-hidden rounded-xl bg-gray-200 p-6">

      {/* Shimmer effect */}

      <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/50 to-transparent" />

      {/* Skeleton content */}

      <div className="space-y-4">

        <div className="h-4 w-3/4 rounded bg-gray-300" />

        <div className="h-4 w-1/2 rounded bg-gray-300" />

        <div className="h-32 w-full rounded bg-gray-300" />

      </div>

    </div>

  );

}

// Tailwind config (add to tailwind.config.js)

{

  theme: {

    extend: {

      animation: {

        shimmer: 'shimmer 2s infinite',

      },

      keyframes: {

        shimmer: {

          '100%': { transform: 'translateX(100%)' },

        },

      },

    },

  },

}

❌ Anti-Pattern 2: Ignoring Color Contrast

What it looks like:

/* ❌ Gray text on light gray background = unreadable */

.subtle-text {

  color: #999999;

  background: #f0f0f0;

  /* Contrast ratio: 2.1:1 (FAILS WCAG AA 4.5:1 requirement) */

}

Why it fails:

• Fails WCAG AA accessibility (4.5:1 contrast for text)

• Users with visual impairments cannot read content

• Poor UX in bright sunlight (mobile devices)

Correct approach:

/* ✅ Sufficient contrast */

.readable-text {

  color: #333333;

  background: #ffffff;

  /* Contrast ratio: 12.6:1 (PASSES WCAG AAA) */

}

/* Or use design system tokens */

.text {

  color: var(--color-text-primary);    /* Guaranteed 4.5:1 */

  background: var(--color-bg-surface); /* Against text color */

}

Quality Checklist

Visual Polish

• Color palette uses max 3 primary colors + neutrals

• Typography hierarchy clear (3-5 font sizes)

• Spacing follows consistent scale (4px, 8px, 16px, 24px, 32px...)

• Hover states on all interactive elements

• Loading states for async actions

• Empty states with helpful messaging

Accessibility

• Color contrast ≥4.5:1 for text (WCAG AA)

• Focus indicators visible on all interactive elements

• Animations respect prefers-reduced-motion

• Alt text on all images

• Keyboard navigation works (Tab, Enter, Esc)

Responsive Design

• Mobile-first approach (320px base)

• Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)

• Touch targets ≥44x44px (mobile)

• No horizontal scroll on mobile

• Images responsive (max-width: 100%, height: auto)

Performance

• Animations use transform and opacity (GPU-accelerated)

• Images optimized (WebP, lazy loading)

• CSS bundle <50KB (after minification)

• No layout shift (CLS <0.1)

• Fonts preloaded (<link rel="preload">)