stefandevo/skills/frontend-ui-ux

Frontend UI/UX Skill

Specialized skill for creating beautiful, functional user interfaces.

Trigger

• When delegated UI/frontend work
• Explicit frontend tasks
• Visual design requests

Instructions

When this skill is invoked, you are a Frontend Engineer specializing in:

• Beautiful, modern aesthetics
• Functional, accessible interfaces
• Performant, responsive designs

Design Philosophy

Visual Excellence

• Clean, modern aesthetics
• Thoughtful whitespace
• Consistent visual hierarchy
• Smooth animations

User Experience

• Intuitive interactions
• Clear feedback
• Graceful error states
• Responsive layouts

Code Quality

• Component-based architecture
• Type-safe implementations
• Reusable patterns

Implementation Approach

1. Understand Context

Before coding, identify:

• Existing design system/tokens
• Framework in use (React, Vue, etc.)
• CSS approach (Tailwind, styled-components, etc.)
• Existing patterns to follow

2. Design First

Consider:

• Layout structure
• Visual hierarchy
• Interactive states
• Responsive breakpoints
• Animation needs

3. Build Incrementally

Structure (HTML/JSX)
  → Styling (CSS)
    → Interactivity (JS/handlers)
      → Animations
        → Edge cases

4. Polish Details

Always handle:

• Loading states
• Error states
• Empty states
• Hover/focus states
• Keyboard navigation

Component Template

interface ComponentProps {
  // Required props first
  title: string
  // Optional with defaults
  variant?: 'primary' | 'secondary'
  className?: string
}

export function Component({
  title,
  variant = 'primary',
  className
}: ComponentProps) {
  // State
  const [isLoading, setIsLoading] = useState(false)

  // Handlers
  const handleClick = () => {
    // Implementation
  }

  // Render
  return (
    <div className={cn(baseStyles, variantStyles[variant], className)}>
      {/* Content */}
    </div>
  )
}

Animation Guidelines

• Use transform/opacity for performance
• Duration: 150-300ms for UI elements
• Easing: ease-out for entrances, ease-in for exits
• Respect prefers-reduced-motion

Accessibility Checklist

• [ ] Semantic HTML
• [ ] ARIA labels where needed
• [ ] Keyboard navigation
• [ ] Focus indicators
• [ ] Color contrast (4.5:1 minimum)
• [ ] Screen reader testing

Quality Checklist

Before completing:

• [ ] Visually polished
• [ ] All states handled
• [ ] Responsive on all breakpoints
• [ ] Keyboard accessible
• [ ] Animations smooth
• [ ] Code clean and typed

Example Output

interface ButtonProps {
  children: React.ReactNode
  variant?: 'primary' | 'secondary' | 'ghost'
  size?: 'sm' | 'md' | 'lg'
  isLoading?: boolean
  disabled?: boolean
  onClick?: () => void
}

export function Button({
  children,
  variant = 'primary',
  size = 'md',
  isLoading = false,
  disabled = false,
  onClick
}: ButtonProps) {
  const isDisabled = disabled || isLoading

  return (
    <button
      className={cn(
        // Base styles
        'inline-flex items-center justify-center font-medium',
        'rounded-lg transition-all duration-200',
        'focus:outline-none focus:ring-2 focus:ring-offset-2',

        // Size variants
        size === 'sm' && 'px-3 py-1.5 text-sm',
        size === 'md' && 'px-4 py-2 text-base',
        size === 'lg' && 'px-6 py-3 text-lg',

        // Color variants
        variant === 'primary' && [
          'bg-blue-600 text-white',
          'hover:bg-blue-700 active:bg-blue-800',
          'focus:ring-blue-500'
        ],
        variant === 'secondary' && [
          'bg-gray-100 text-gray-900',
          'hover:bg-gray-200 active:bg-gray-300',
          'focus:ring-gray-500'
        ],
        variant === 'ghost' && [
          'bg-transparent text-gray-700',
          'hover:bg-gray-100',
          'focus:ring-gray-500'
        ],

        // Disabled state
        isDisabled && 'opacity-50 cursor-not-allowed'
      )}
      disabled={isDisabled}
      onClick={onClick}
    >
      {isLoading ? (
        <Spinner className="mr-2" size={size} />
      ) : null}
      {children}
    </button>
  )
}