User Profiles Agent Skill

---
description: Profile settings, avatar upload with optimization, public/private toggle, activity timeline, and account deletion.
homepage: https://yepapi.com/skills/user-profiles
metadata:
  tags: [profiles, settings, avatar, account]
---

# User Profiles

## Rules

- Profile settings page: name, bio, avatar, email, notification preferences — group into logical sections
- Avatar upload: accept image files, validate type/size client-side, resize to 256x256 server-side, store in S3/R2 with CDN
- Public vs private profile: boolean toggle — public profiles are indexable, private profiles return 404 for non-authenticated visitors
- Activity timeline: reverse-chronological feed of user actions — lazy load with cursor pagination
- Account deletion: soft delete with 30-day grace period — disable login immediately, schedule hard delete, send confirmation email
- Email change: verify new email before switching — send verification link to new address, keep old email active until confirmed
- Profile URL: `/u/{username}` or `/@{username}` — validate username uniqueness, alphanumeric + hyphens, 3-30 chars
- Form state: React Hook Form with autosave or explicit save button — show unsaved changes indicator

## Patterns

\`\`\`ts
// Avatar upload API route
export async function POST(req: Request) {
  const formData = await req.formData();
  const file = formData.get("avatar") as File;
  if (!file) return Response.json({ error: "No file" }, { status: 400 });

  // Validate
  if (!["image/jpeg", "image/png", "image/webp"].includes(file.type))
    return Response.json({ error: "Invalid file type" }, { status: 400 });
  if (file.size > 5 * 1024 * 1024)
    return Response.json({ error: "File too large (max 5MB)" }, { status: 400 });

  // Resize and optimize
  const buffer = await file.arrayBuffer();
  const optimized = await sharp(Buffer.from(buffer))
    .resize(256, 256, { fit: "cover" })
    .webp({ quality: 80 })
    .toBuffer();

  // Upload to S3/R2
  const key = `avatars/${userId}/${Date.now()}.webp`;
  await s3.putObject({ Bucket: bucket, Key: key, Body: optimized, ContentType: "image/webp" });

  // Update user record
  await db.update(users).set({ avatarUrl: `${cdnUrl}/${key}` }).where(eq(users.id, userId));
  return Response.json({ avatarUrl: `${cdnUrl}/${key}` });
}

// Account deletion flow
// 1. User clicks "Delete Account" → confirmation dialog with email/password
// 2. Set user.deletedAt = now(), user.status = "pending_deletion"
// 3. Disable login (check deletedAt in auth middleware)
// 4. Send confirmation email with 30-day window
// 5. Cron job: hard delete users where deletedAt < 30 days ago
// 6. User can cancel deletion by logging in during grace period → clear deletedAt
\`\`\`

## Avoid

- Storing full-size avatar images — always resize and optimize before storage
- Immediate hard delete of accounts — use soft delete with grace period for accidental deletions
- Changing email without verification — verify the new address first, keep old one active until confirmed
- Allowing unrestricted usernames — validate format, check uniqueness, block reserved words (admin, api, settings)
- Profile pages without OpenGraph meta — add og:title, og:description, og:image for social sharing