PixelPilot uiux-profile-settings.instructions.md

UI/UX Profile Settings Page

Complete profile settings pattern with all common features. Token-aware styling, fully accessible, works on mobile.

---

OVERVIEW

This skill covers a complete profile settings implementation:

1. Avatar upload with preview
2. Profile information editing
3. Password change
4. Notification preferences
5. Theme toggle (light/dark)
6. Account deletion with confirmation

---

PAGE STRUCTURE

<main class="settings-page">
  <header class="settings-page__header">
    <h1>Account Settings</h1>
    <p>Manage your profile and preferences</p>
  </header>
  
  <nav class="settings-nav" aria-label="Settings sections">
    <a href="#profile" class="settings-nav__item settings-nav__item--active">
      <i data-lucide="user"></i>
      Profile
    </a>
    <a href="#security" class="settings-nav__item">
      <i data-lucide="lock"></i>
      Security
    </a>
    <a href="#notifications" class="settings-nav__item">
      <i data-lucide="bell"></i>
      Notifications
    </a>
    <a href="#appearance" class="settings-nav__item">
      <i data-lucide="palette"></i>
      Appearance
    </a>
    <a href="#danger" class="settings-nav__item settings-nav__item--danger">
      <i data-lucide="alert-triangle"></i>
      Danger Zone
    </a>
  </nav>
  
  <div class="settings-content">
    <!-- Sections go here -->
  </div>
</main>

---

1. AVATAR UPLOAD

HTML

<section id="profile" class="settings-section">
  <h2 class="settings-section__title">Profile Photo</h2>
  
  <div class="avatar-upload">
    <div class="avatar-upload__preview">
      <img 
        id="avatar-preview" 
        src="/placeholder-avatar.jpg" 
        alt="Your profile photo"
        class="avatar-upload__image"
      >
      <div class="avatar-upload__overlay">
        <i data-lucide="camera"></i>
      </div>
    </div>
    
    <div class="avatar-upload__actions">
      <label for="avatar-input" class="btn btn--secondary">
        <i data-lucide="upload"></i>
        Upload Photo
      </label>
      <input 
        type="file" 
        id="avatar-input" 
        accept="image/png, image/jpeg, image/webp"
        class="sr-only"
        aria-describedby="avatar-help"
      >
      <button type="button" class="btn btn--ghost btn--danger" id="remove-avatar">
        <i data-lucide="trash-2"></i>
        Remove
      </button>
    </div>
    
    <p id="avatar-help" class="settings-section__help">
      PNG, JPG, or WebP. Max 5MB. Recommended 400×400px.
    </p>
  </div>
</section>